本篇笔记只是简单的一个使用中的小总结，真的很简单，目的是为了以后方便查阅。

准备工作

  • 装包 ``` npm install boostrap —save
  2. - 引用

import ‘bootstrap/dist/css/bootstrap.css’ import ‘bootstrap’ // 引入 bootstrap

  1. # 资料
  3. > [官方文档](https://v4.bootcss.com/docs/4.0/getting-started/introduction/)
  6. # 正文
  7. ## 分页的使用
  9. > [参考文档地址](https://v4.bootcss.com/docs/4.0/components/pagination/) 详细的示例都在这里的，下面只是一个简单的示例
  12. - 示例代码
  2. - 效果图
  4. > ![image.png](https://upload-images.jianshu.io/upload_images/9064013-41c07c492af1af5b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  7. ## 弹窗的使用
  9. > [参考文档地址](https://getbootstrap.com/docs/4.0/components/modal/) 里面有多种弹窗的源码示例，也有相应的参数说明
  12. - 源码示例
  2. - 效果图 gif
  4. > ![Animation38.gif](https://upload-images.jianshu.io/upload_images/9064013-31833b29a86fb4c9.gif?imageMogr2/auto-orient/strip)
  7. - 这里我将这个弹窗作为单独的用户操作结果展示来用，`html` 结构只是用到了 `modal`
  1. <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  2.   <div class="modal-dialog" role="document">
  3.     <div class="modal-content">
  4.       <div class="modal-header">
  5.         <!-- <h5 class="modal-title"></h5> -->
  6.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  7.           <span aria-hidden="true">&times;</span>
  8.         </button>
  9.       </div>
  10.       <div class="modal-body">
  11.         <p>{{ modalMsg }}</p>
  12.       </div>
  13.       <div class="modal-footer">
  14.         <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
  15.         <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
  16.       </div>
  17.     </div>
  18.   </div>
  19. </div>
  2. - 主要的 `API`

// 打开弹窗 $(‘#myModal’).modal(‘show’) // 关闭弹窗 $(‘#myModal’).modal(‘hide’)

```