Bootstrap 的使用方法

Bootstrap 使用方法就是复制粘贴 Bootstrap 官方文档

Bootstrap 引入

下载到工程目录 Bootstrap v3.3.7

该环境强依赖 jQuery，如果没有 jQuery，Bootstrap 拒绝使用 JavaScript，所以要先安装 jQuery

yarn add --dev jquery

安装完 jQuery，引入 JavaScript 和 CSS

  <script src="js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">

网格/栅栏系统

将屏幕或视口（viewport）自动分为12列
所有的页面内容必须被 .container或.container-fluid包裹

.container 类用于固定宽度并支持响应式布局的容器，用于 PC 端
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器，用于移动端
所有列必须放在 .row 内，.row 的margin-left/margin-right:-15px
每行分配不能大于12列，否则会出现排版错误；当每行分配小于12列时，可以使用 .col-md-offset-number 使其向左偏移，偏移数加上分配的列数不能大于12

<div class="container">
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-5 col-md-offset-1">.col-md-5</div>
    <div class="col-md-6">.col-md-6</div>
  </div>
</div>

image.png

响应式用法

添加类后，通过媒体查询根据不同的屏幕尺寸做出相应

image.png

  <div class="row">
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
    <div class="col-lg-1 col-md-2 col-sm-3 .col-xs-6">.col-md-1</div>
  </div>

Bootstrap CSS

Bootstrap 主题
练习Bootstrap

1. 打开开发者工具，选中 CSS组件
2. 找到对应的HTML元素
3. Copy > Copy outerHTML
4. 运行代码

按钮

<div class="row">
  <button type="button" class="btn btn-default" >
    <span class="glyphicon glyphicon-align-left"></span>
  </button>
  <button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star"></span> Star
  </button>
</div>

Bootstrap jQuery

根据 data-target 找到目标元素的 id

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

使用 jQuery 弹出对话框

<div class="row">
    <div class="col-md-12">
      <!-- Button trigger modal -->
      <button id="xxx" type="button" class="btn btn-primary btn-lg" data-toggle="modal" >
        点我
      </button>

      <!-- Modal -->
      <div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">我想对你说</h4>
            </div>
            <div class="modal-body">
              你真的很迷人
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
  $("#xxx").on("click",()=>{
    $('#dialog').modal()
  })