一、介绍

在使用Bootstrap之前,我们先了解一下Bootstrap是什么?Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集, 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。

二、开始使用Bootstrap

在html中引入一行CSS,三行JS即可。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

三、Bootstrap栅格系统

Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容,不同于旧版3.0,4.3新版是完全基于flexbox流式布局构建的,完全支持响应式标准。

工作原理:

  1. 栅格系统提供了集中内容居中、水平填充网页内容的方法,使用.container(严格意义上也包括.container-fluid,后文相同不再备注-译者)应答网页宽度,或使用.container-fluid使网页能够以100%宽度呈现在所有的浏览器窗口或设备尺寸上。
  2. 换一个说法就是:.container实现固定的宽度并居中呈现,.container-fluid实现全宽度,并和其它网格实现对齐(译者注)。
  3. 行(.row)是列(.col-)的横向组合和父容器(它们有效组织在.row下),每列都有水平的padding值,用于控制它们之间的间隔,同时在负边距的行上抵消,从而实现列中的所有内容在视觉上是左侧对齐的体验。
  4. 网页开发者的呈现内容必须放置在列(.col-中,而且只有列可以是行的直接子元素,否则都是违法的(不可以在.col-以上添加呈现内容。
  5. 这一切都要感谢flexbox流式布局,从而使我们不需要指定列的宽度(旧版Bootsrap3是采用严格宽度定义来实现的)就能实现网页自动等宽排列,比如我们在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列。更多示例,请参阅本文档 自动布局列部分。
  6. 你可能注意到.col-后面有不同的数字,如.col-sm-4或.col-xl-12,这些css类后面的数字用于表明定义div空间想要占用列的数量,每行最多有12列。如果你想用三个等宽的列,则取12的三分之一,即.col-sm-4就是正确的(后文会有详细的介绍)。
  7. .col-*的width属性(即列宽)是用百分比来表现和定义的,所以它们总是流式的,其尺寸大小受父元素的定义影响(这正是flexbox布局的特征,子元素的宽比和排列受父元素定义)。
  8. 列具有水平padding定义,用于创建列与列之的间隙。
  9. .row上带有margin-left: -15px;margin-right: -15px;属性,你可以在.row上上定义.no-gutters属性,从而消除这个属性,使页面不会额外宽出30px,即<div class=”row no-gutters”…。(译者原意拆成两行表述)。
  10. 总共有五个栅格等级,每个响应式分界点隔出一个等级:特小.col、小.col-sm-、中.col-md-、大.col-lg-、特大(大、特大也可以称为宽、超宽).col-xl-
  11. 栅格断点的媒体查询基于宽度的最小值,意味着它们应用到某一等级以及这一等级之上的所有(如.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现,但不适用于能在超小型.col-sx上呈现)。
  12. 用户不需要自行定义网格,可以直接使用系统预定义的栅格类(如.col-4)或采用Sass mixins来进行更多的语义标记满足开发需要。

三、Bootstrap轮播效果

轮播效果是一个幻灯片效果,使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放,它适用于一系列图像、文本或自定义标记,还包括对上一个/下一个图的浏览控制和指令支持。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://code.z01.com/img/2016instbg_01.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://code.z01.com/img/2016instbg_02.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="http://code.z01.com/img/2016instbg_03.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

四、Bootstrap导航

Bootstrap中提供的导航可共享通用标记和样式,从基础.nav样式类到活动与禁用状态。交换class选择符以在每种样式之间切换。

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

五、Bootstrap分页

分页是使用list列表元素构建的,因此屏幕阅读器可以读出链接的数量,使用<nav> 元素将其识别为屏幕阅读器和其它辅助技术的导航组件并提供辅助支持。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

好了,有关Bootstrap的介绍就到此为止,更加详细和深入的了解请移步Bootstrap官网