2021-05-17

来框架的知识，我们最常用框架，框架就是一门框架工具，使用框架更加方便，

Bootstrap是世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。在其中，你将发现高质量的HTML、CSS以及JavaScript，使您的WEB工程项目变得无比简单，包括官方的CDN和启动器服务。

 

Bootstrap每次都会以预编译版、源代码两种形式发布。下面我们介绍两种形式的内容和结构。注意无论使用哪种形式，Bootstrap的JavaScript插件都需要jQuery。

这是 Bootstrap 最基础的形式：直接拖入即用的编译文件，几乎能在所有Web项目中使用。

其中bootstrap.*是预编译的文件。
而bootstrap.min.*是编译过且压缩后的文件，用户可以根据自己需要引用。
程序目录中，还有bootstrap.*.map格式的文件，这是Source map文件，需要在特定的浏览器开发者工具下才可用式

 

Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)，支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局。

 

 

1.containe布局容器

Container容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。

Bootstrap原生带三种container宽度规范：

container, 居中，适配不同的断的 max-width 尺寸。

container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。

container-{断点规格}（见下表，如.container-sm), 在指定规格断上width: 100% 尺寸。

下在的表格描述了 container在不同的屏幕的 max-width 规范，以及 .container 、 .container-fluid 的断点区别。

	超小屏幕 <576px	小屏幕 ≥576px	中等屏幕 ≥768px	大屏幕 ≥992px	超大屏幕 ≥1200px
.container	100%	540px	720px	960px	1140px
.container-sm	100%	540px	720px	960px	1140px
.container-md	100%	100%	720px	960px	1140px
.container-lg	100%	100%	100%	960px	1140px
.container-xl	100%	100%	100%	100%	1140px
.container-fluid	100%	100%	100%	100%	100%

 

2.删格

栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container(严格意义上也包括.container-fluid，后文相同不再备注-译者)应答网页宽度，或使用.container-fluid使网页能够以100%宽度呈现在所有的浏览器窗口或设备尺寸上。
换一个说法就是：.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐(译者注)。

 

  行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的    所有内容在视觉上是左侧对齐的体验。

 

• 网页开发者的呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素，否则都是违法的(不可以在.col-*以上添加呈现内容。

• 这一切都要感谢flexbox流式布局，从而使我们不需要指定列的宽度(旧版Bootsrap3是采用严格宽度定义来实现的)就能实现网页自动等宽排列，比如我们在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列。更多示例，请参阅本文档 自动布局列部分。

•  

• 你可能注意到.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4就是正确的(后文会有详细的介绍)。

• .col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响(这正是flexbox布局的特征，子元素的宽比和排列受父元素定义)。

• 列具有水平padding定义，用于创建列与列之的间隙。

• .row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即<div class="row no-gutters"...。(译者原意拆成两行表述)。总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大、特大也可以称为宽、超宽）.col-xl-*。栅格断点的媒体查询基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（如.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现，但不适用于能在超小型.col-sx上呈现）。用户不需要自行定义网格，可以直接使用系统预定义的栅格类（如.col-4）或采用Sass mixins来进行更多的语义标记满足开发需要。

 

（1）.如何实现栅格的三分占一

<div class="container">
  <div class="row">
    <div class="col-sm">
      三分之一空间占位
    </div>
    <div class="col-sm">
      三分之一空间占位
    </div>
    <div class="col-sm">
      三分之一空间占位
    </div>
  </div>
</div>

（2）.等宽布局

下面的列子，展示了一行两列与一行三列的布局，从xs（如上表如见，实际上并不存在xs这个空间命名，是以.col表示，下同不再注）到xl（即.col-xl-*）所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

等宽列可以分成多行，但是有一个Safari旧版浏览器的flexbox错误，阻止它在没有显示flex-basis或border（影响到边框效果）。
Bootstrap非官方的一个实例，已经介绍了两种解决方法，但如果是最新safri浏览器下，则不需要这样做。

下面是等宽列两行的处理方法，引用w-100进行切割分行：

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

3.布局实施建议

（1）.display块属性定义

我们可以方便的调用 display 属性的定义，与系统的栅格系统结合，来决定模块是否显示，甚至进一步属性如 .display-* ，其中*是可以1-12的任意数字。

（2）.Margin 和 padding间隙定义

Bootstrap 4包括一个用于音障实用程序的5种规格定义，使用margin 和 paddingCSS函数来控制元素和组件的间隔和大小，基于1rem值默认$spacer变量,选择所有视口（例如，值.mr-3对应于margin-right: 1rem），或挑响应变种，以针对特定的视口（例如，.mr-md-3对于margin-right: 1rem处于起步md断点）。

（3）.Flexbox 选项

Bootstrap 4 基于flexbox流式布局,大多数组件都支持flex流式布局定义， 但不是所有元素的 display 都是默认就启用 display: flex 属性的(如果那样会增加很多不必要的DIV层叠，并会影响到浏览器渲染)。

如果您需要添加display: flex到DIV元素中，请使用.d-flex、或其中一个响应变体（如.d-sm-flex）就有启用。您将需要此类或display值，以允许使用我们的额外的flexbox实用程序来调整大小，对齐，间距等

 

4.按钮

使用Bootstrap的自定义按钮样式，并广泛用于表单、对话框等场景中的操作，并支持多种大小、状态等一系列变量定义。

Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。

 

 （1）.设置颜色的按钮：

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

（2.）.单选框和复选框

Bootstrap的.button 样式也可以使用于其它元素，比如<label>HTML组件上，从而实现单选、复选效果。添加 data-toggle="buttons" 到.btn-group 下的元素里，来启用它们的样式切换。

 

这些按钮的检查状态，只能通过 click 事件 进行更新，如果你使用其它方法更新输入，用<input type="reset"> 或手动应用输入 checked 属性，人为的在<label> 上增加 .active 状态。

 

注意：预先选中的按钮需要你手动将 .active 定义上，在 <label>中。

div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

5.下拉菜单

（1）.无障碍浏览提示(易用性)

Bootstrap的下拉菜单则是设计为通用的，适用于各种情形和标记结构，如可以创建包含其它输入和表单控制项（如搜索栏位或登录表单）的下拉菜单，因此，Bootstrap 不希望（也不能自動添加）与 ARIA菜单所需要的 role 和 aria- 属性，如果有必要请用户自行定义这类属性。

然而，BootStrap为大多数标准键盘功能操作加入了支持，如.dropdown-item 支持光标移动选择单个子项、并使用关闭菜单的 ESC 快捷键功能。

（2）.单一按钮的下拉菜单

任何一个 .btn块都可以定义变更为下拉菜单，下面是两个使用<button> 元素做下拉菜单的示例。

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

使用 <a> 标签的下拉菜单：

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

6.轮播效果

这是一个循环滚动的幻灯片组件，可以使用文本、图象水平不间断滚动，如同旋转木马一般。

 

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

 

在支持的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态、窗口最小化时），轮播效果控件会停止运动，从而节省性能。

轮播组件不支持互相嵌套-本身轮播大多不符合无障碍浏览的标准。

 

轮播不带幻灯片尺寸标准化处理，因此你可能需要使用其它通用样式可自定义样式来调整其大小使之适当匹配。虽然轮播组件支持上一个/下一个控制和指令，但它们不是必备元素，可根据你的需要添加或自定义（展现不同的效果）。

 

通过 .carousel 命名样式引入轮播组件，同时为此控件设置唯的ID-尤其是当你在同一页面使用多个轮播效果时这是必须的。

（1）.经典幻灯片效果

 

这是一个经典的幻灯片示例，请注意轮播上的图像引用了 .d-block 、 .w-100两个样式，以修正浏览器预设的图像对齐带来的影响。

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

（2）.带控制器的效果

加上了上一个/下一个控制器:

<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>

（3）.包含姿态指示器

也可以将当前所在幻灯片状态指示器添加到轮播效果控件中：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>