布局

Container 容器

Container容器是窗口布局的最基本元素，推荐所有样式都定义在.container或.container-fluid容器中。这是启动整个栅格系统必不可少的前置条件。

三种container宽度规范：

• .container,实现固定的宽度并居中呈现，适配不同的max-width尺寸
• .container-fluid，全屏，适配屏幕的width:100%尺寸,流式布局
• .container-{断点规格}，在指定规格上的width:100%

Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容。V4完全基于flexbox流式布局构建，完全支持响应式标准。

sm:small md:medium lg:large xl:extra large

.sr-only 全称 screen reader only 仅供屏幕阅读器。能保证屏幕阅读器的正确读取且不会影响UI的视觉呈现。

primary/secondary/success/danger/warning/info/light/dark

栅格系统工作原理

• 栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container实现固定的宽度并居中呈现，.container-fluid实现全宽度并和其他网格实现对齐。
• 行(.row)是列(.col-*)的横向组合和父容器，每列都有水平的padding值，用于控制他们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。
• 呈现的内容必须放置在列(.col-*)中，而且只有列可以是行的直接子元素。
• .col-*的width属性是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响。
• 列具有水平padding定义，用于创建列与列之间的间隙。
• .row上带有margin-left:-15px,margin-right-15px属性，可以在.row上定义.no-gutters消除该属性，使页面不会额外宽出30px.
• 五个栅格等级：.col .col-sm .col-md .col-lg .col-xl。它们应用到该等级及该等级以上的所有等级。

一般换行推荐使用添加多个.row来达成。创建跨多个行的等宽列，方法是插入.w-100将列拆分为新行。其思路是强行插入一个width:100%的div进行隔离切断。

如果一行内div定义的栅格数超过12列，bootstrap会在保留列完整的前提下，将无法平行布局的多余列重置到下一行。

使用.order-*class选择符对div空间进行可视化排序，系统提供了.order-1到.order-12 12个级别的顺序。.order-first

列偏移

可以使用两种方式进行列偏移

• 使用响应式的.offset-*栅格偏移方法 offset-md/sm/lg/xg-数字
• 使用边界处理使用程序。？？

列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内

对齐处理

如果需要居中对齐或右对齐，使用.text-center/.text-right。

列表样式初始化

在ul/ol上使用.list-unstyled可以删除列表项目上默认的list-style以及左边外距(只针对直接子元素)，这只生效于直接子列表项目上，不影响你嵌套的子列表。

分行或单行多列并排

使用.list-inline,.list-inline-item结合，可以实现列表逐行显示或单行多列并排

文本/代码

//abbr缩略语
<abbr title='fdsfsd'>...</abbr>
//底部备注来源
<footer class='blockquote-footer'>...<cite title='..'>..</cite></footer>
//文本内联元素
<del><s> | <ins><u> | <small> | <strong> | <em> | <mark> | <b> <i>
//用<code>包裹内联代码片段，不要忘记转义HTML尖括号
<code>&lt;section&gt;</code>
//<pre>标签可以包裹代码块 | <var>标签包裹变量
<pre><code></code></pre>
//<kbd>标签标明这是一个键盘输入操作 | <samp> 标签代表这是一个示例
<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

响应式图片

在bootstrap中，给图片添加.img-fluid样式，或定义max-width:100%、height:auto样式，即可赋予响应式特性，图片大小会随着父元素大小同步缩放。.img-thumbnail添加边框样式。

HTML5标准提供了一个全新的<picture>元素，它可以为<img>指定多个<source>定义。

<pictrue>元素可实现图片在不同屏幕下的针对性响应式
<picture>
  <source srcset="大规格图片.jpg"  media="(min-width: 800px)" >
  <source srcset="中规格图片.jpg"  media="(min-width: 600px)">
  <source srcset="小规格图片.jpg">
  <img src="通用图片.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
</picture>

图文框

Bootstrap的.figure以及.figure-caption类，为HTML5的<figure>以及<figcaption>元素提供了一个基准样式处理。默认的图片系统不会定义明确的大小，因此请务必将该.img-fluid类添加到您的<img>标签中才能实现与响应式的完美结合。
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>

表格

bootstrap表格需要向<table>添加基类.table。

• .table-dark 选择器产生颜色反转对比效果，即深色背景和浅色文本
• .thead-light/.thead-dark 能使<thead>去显示出浅黑或深灰
• .table-striped 定义<tbody>产生逐行颜色对比的表格样式
• .table-bordered 可以产生表格边框与间隙系统
• .table-borderless 定义无边框表格
• .table-hover 定义到<tbody>上，可以产生鼠标行悬停效果
• .table-sm将表格的padding值缩减一半，使表格更加紧凑
• 使用语义状态样式对表格进行着色 table-primary/success/danger…
• 使用文字或背景通用样式设置 bg-primary/success/warning…
• .table-responsive获得响应式表现 <div class=‘table-responsive’>

data属性是HTML5的新属性。允许开发者自由为其标签添加属性，存储数据，这种自定义属性一般用“data-”开头。
存储的（自定义）数据能够被页面的 JavaScript 所获取利用。
data-* 属性包括两部分：

• 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符。
• 属性值可以是任意字符串。

data属性的应用，让HTML标签可以隐式的附带一些数据，而Javascript就可以对这些属性数据进行读/写操作,进而可以做出相应的动作和事件。

你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。

标签的data-[xx]="yy"属性，主要是用来使用和调用bootstrap的组件和插件，即使用bootstrap.js来实现一些交互效果。

data-toggle指以什么事件类型触发:

• data-toggle=“dropdown”//下拉菜单
• data-toggle=“model” //模态框事件
• data-toggle=“tooltip”//提示框事件
• data-toggle=“tab”//标签页
• data-toggle=“collapse”//折叠
• data-toggle=“popover”//弹出框
• data-toggle=“button”//按钮事件

一般事件会作用到一个标签对象，如果是其他标签对象，就需要使用data-target指事件的标签目标。所以data-loggle和data-target有时会结合一起使用。

公共样式

边框(border)

使用边框通用定义类来快速设置元素的边框和边框半径，适用于图像、按钮或其他任何元素。

• border | border-top/right/bottom/left 设置边框显示方式
• border-0 | border-top/right-bottom/left-0 消减/删除边框
• border-primary/danger…设置边框颜色
• rounded | rounded-top/right/circle/pill… | rounded-0设置圆角及显示效果

通过添加.clearfix快速清除容器内浮动的内容

使用通用的close关闭图标来关闭modals模态框提示或alert提示组件的内容。

颜色/背景颜色/背景渐变

text-primary/danger…/dark/light text-white-50 添加数字还能设置透明度

bg-primary/danger…/white/lgiht/dark 背景颜色设置

bg-gradient-primary… $enable-gradients=true时可用

有时由于其他选择器的特殊性导致通用class类无法应用，这种情况下可以通过增加一个div包裹元素并增加class样式来解决。

Display显示属性 d-是display的缩写

d-{value}/d-{breakpoint}-{value} breakpoint:xs\sm\md\lg\xl

value(display常用属性)：none/inline/inline-block/block/table/table-cell/table-row/flex/inline-flex

隐藏元素只要使用 .d-none class或 .d-{sm,md,lg,xl}-none 的任何变量来支持响应式。

使用 .text-hide class样或sass mixin来帮助用背景图像替换元素的文本内容。

.overflow-auto | .overflow-hidden 设置溢出效果。

固顶(底)及定位

使用.position-*样式可以实现快速定位，它们不包含响应式支持。

postion-static/relative/absolute/fixed/sticky

Fixed-top/bottom 固定在top/bottom底部 sticky-top

读屏器

通过.sr-only可以定义屏幕阅读器支持的元素。.sr-only与.sr-only-focusable结合可以防止被键盘激活后再次显示该元素。

阴影

使用box-shadow向元素添加或去除阴影。 shadow

规格与尺寸

w-{25,50,75,100,auto} 设置宽度 (相对于父级)

h-{25,50,75,100}设置高度

mw-100:max-width:100% | mh-100:max-height:100%

文本处理

text-left/center/right text-*-left/center/right

.text-wrap 换行文本

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

.text-nowrap防止文本换行

.text-truncate 以省略号截断文本

.text-break换行

text-lowercase/uppercase/capitalize 字母大小写设置

text-monospace等宽字体

text-reset重置文本或链接的颜色以便从其父级继承颜色

text-decoration-none删除文本修饰

font-weight-bold/normal/light font-italic 字体粗细和斜体效果

垂直对齐

使用vertical-alignment通用样式改变元素的对齐，注意：垂直对齐仅影响 内联inline、 内联块inline-block、 内联表inline-table、 表格单元格table cell 元素。

可选属性有 .align-baseline、 .align-top、 .align-middle、.align-bottom、 .align-text-bottom、 .align-text-top 。

显示或隐藏处理

使用通用样式的 visibility(visible/invisible) 元属，这不会改变元素的display值，并且有助于大部分使用者隐藏内容，但仍然保留在屏幕阅读器中。

float浮动

float-left/float-right/float-none float-*-left/right/none

spacing间隔规范(Margin与Padding间距处理)

m-margin p-padding x:left/right y:top/bottom px/py mx/my t/b/l/r/x/y

.mx-auto 固定宽度的盒模型水平居中 px-md-5 p-3 px-2 mt-0 mt-1

尺寸规格定义：

• 0 - 这个Class属性会设定 margin 或 padding 的样式值为 0
• 1 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * .25规格呈现
• 2 - (默认时) 这个Class属性会设定 margin 或 padding 以 $spacer * .5规格呈现
• 3 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer规格呈现
• 4 - (默认时) 这个Class属性会设定margin 或 padding 以 $spacer * 1.5规格呈现
• 5 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * 3规格呈现
• auto - 这个Class属性会设定 margin 值 auto（按浏览器默认值自由展现）。

Flex弹性布局

启用弹性布局：d-flex/d-inline-flex d-*-inline-flex/d-*-flex

弹性布局的方向处理：

• flex-row/flex-row-reverse:水平方向布局
• flex-colimn/flex-column-reverse:垂直方向布局

flex-direction的响应式属性：flex-row /flex-row-reverse/ flex-column/flex-column-reverse/ flex-*-row|column-reverse

内容对齐与对准

使用justify-content-*通用样式改变flex在主轴上的对齐 水平方向

justify-content-*响应式属性规范：

justify-content-*-start/end/center/between/around

对齐items 竖直方向

使用align-items-*通用样式在flexbox上实现纵轴(水平方向)对齐

align-items-*-start\end\center\baseline\stretch

自对齐 竖直方向

align-self-*-start/end/center/baseline/stretch :横轴(垂直方向)对齐方式

自相等

flex-*-fill 在一系列兄弟元素上使用该类来强制它们变成相等的宽度，同时占据所有可用的水平空间。

组件

警告提示框

alert alert-success/primary/danger/secondary/info/lgiht/dark 颜色样式

徽章(Badge)

.badge可以嵌在标题中，并通过标题样式来适配其元素大小，因为其本身是通过相对字体大小和em单位的，所以有良好的弹性。徽章可用作链接或按钮的一部分，以提供统计数字样式。

<span/a class='badge badge-pill badge-...'>...</span/a>
badge-...: badge-success/primary/info...

badge-pill样式可以使标签更加圆润,具有较大的border-radius边框半径和水平padding。

面包屑导航 breadcrumb

通过bootstrap的内置CSS样式，自动添加分隔符、并呈现导航层次和网页结构。

分隔符是通过::before 和 content 两个方法定义添加的。

<ol class='breadcrumb'>
  <li class="breadcrumb-item">...</li>
</ol>

$breadcrumb-divider: quote(">") | url('...') | none修改分隔符样式

按钮

.btn 用在<button>标签，也可用在其他标签(<span><input>)上，同样带来按钮效果

.btn .btn-primary/… .btn-outline-primary/…设置轮廓 .btn-*设置尺寸大小

.btn-block 创建填充满空间的按钮

active 启动状态 /disabled 禁用状态

标签不支持 disabled 属性，所以你必须增加 .disabled 属性，使之达到视觉禁用的效果。

data-toggle=“button” 切换按钮的active状态

按钮组

将一系列的 .btn 包裹在.btn-group内，可以实现选择按钮、选取块状区的行为功能。

.btn-group 按钮组 .btn-toolbar 按钮工具栏

将一系列.btn 包裹在**.btn-group**内可以实现选取块状区的行为功能 按钮组

.btn-toolbar + .btn-group 混合使用生成更加复杂的按钮工具栏

<div class='btn-toolbar'>
  <div class='btn-group'>...</div>
  <div class='btn-group'>...</div>
  <div class='btn-group'>...</div>
</div>

.btn-group-* 设置按钮的尺寸大小

将.btn-group 放到另一个.btn-group中可以实现按钮组与下拉菜单的组合

btn-group-vertical 垂直分组

卡片组件

.card卡片组件是BootStrap 4新增的一组重要样式，它是一个灵活的、可扩展的容器，包含了可选的卡片头和卡片脚、一个大范围的内容、上下文背景色以及强大的显示选项。

.card如果没有定义宽度将自然地填满父元素的全宽。卡片没有特定的宽度width定义，除非另外声明，否则他们的真实宽度是100% ，可以根据需要使用自定义CSS引入栅格系统或者通用全局属性(w-75/50)等方式进行修改。

卡片支持多种多样的内容，混合使用创建你想要的卡片

<div class='card'>
	...//各种其他标签
  <div class='card-body'>
  	<div class='card-title'></div>
    <div class='card-text'></div>
    <a class='card-link'>...</a>
    ...//其他标签
  </div>
</div>
.card-title 和<h*>组合添加卡片标题
.card-link与 <a>组合使用添加链接
.card-subtitle和 <h*>组合添加副标题
.card-img-top 定义一张图片在卡片的顶部 .card-img-bottom 底部
.card-img 将图片作为卡片背景
<div class="card bg-dark text-white">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
		...
  </div>
</div>
.card-text定义文字在卡片中，当然你也可以在.card-text 中设计自己的个性化HTML标签样式。

列表组：
<div class='card'>
  <div class='card-header'></div> 
  <ul class='list-group'>
    <li class='list-group-item'></li>
  </ul>
</div>
导航：
  <div class="card text-center">
  <div class="card-header">
    //card-header-tabs与nav-tabs配对使用，否则没效果 card-header-pills/nav-pills
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      ...
    </ul>
  </div>
  <div class="card-body">
   ...
  </div>
</div>
将图片转换为卡片背景  card-img-overlay是实现该效果的关键
  <div class='card'>
    <img class='card-img' src='...'>
    <div class=card-img-overlay>
      ....
    </div>
  </div>
水平排列
  <div class="card">
    <div class="row no-gutters">
        <div class="col-md-4">
            <img src="11111.jpg" class="card-img ml-3" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
              ...
            </div>
        </div>
    </div>
</div>
使用文字和通用背景定义卡片的显示颜色。
使用边框通用样式来改变卡片的border-color\text-{color}
使用.bg-transparent删除其background-color背景颜色。
  
.card-group 卡片组  卡片组使用display: flex 来实现统一的布局。将多个卡片结为一个群组，使用他们具有相同的宽度和高度列。
<div class='card-group'>
  <div class='card'></div>
  ...
</div>
.card-deck  卡片阵列(宽高相同 不相连 )  同 .card-group
.card-columns 多列卡片浮动排版 类似瀑布流效果。卡片使用column属性 而不是基于flexbox的弹性布局，从而实现更方便实用的浮动对齐，顺序是从上到下、从左到右。
注意：为了防止卡片排列突出包裹，设置display:inline-block

Hero广告大块屏幕(Jumbotron)

.jumbotron-fluid 使组件不带圆角,占满当前显示浏览器全屏 并在里面添加.container 或.container-fluid内容空间即可

<div class="jumbotron jumbotron-fluid">
  <div class="container"> //布局空间效果
   ...
  </div>
</div>

轮播效果(Carousel)

当页面对用户不可见时，轮播效果空间停止运动，从而节省性能。

轮播组件不支持相互嵌套。

通过.carousel类名引入轮播组件，同时为此控件设置唯一的ID。

请注意轮播上的图像引用了 .d-block 、 .w-100两个样式，以修正浏览器预设的图像对齐带来的影响。

 //加上.carousel-fade到滑动的类中 可以使用交替变化代替滑动
//data-ride='carousel'属性用于将轮播标记为从页面加载开始的动画，不能同转盘的JS结合使用
slide/carousel-fade控制动画效果
<div id="carousel_name" class="carousel slide/carousel-fade" data-ride="carousel">
  //状态显示 第几个
  <ol class="carousel-indicators">
    //将.active样式添加到其中一张幻灯片(一般是第一张)，否则轮播效果无法正常运行
    <li data-target="#carousel_name" data-slide-to="0" class="active"></li>
    <li data-target="#carousel_name" data-slide-to="1"></li>
    <li data-target="#carousel_name" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    //添加data-interval=''到一个.carousel-item更改自动循环到下一项的时间
    <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="...">
      //在.carousel-item中使用.carousel-caption添加字幕到轮播控件中
      <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
        	<p>Nulla vitae elit libero</p>
      </div>
    </div>
 </div>
  //左右箭头控制器效果
  //使用数据属性可以控制转盘的位置，data-slide接收prev/next关键字改变相对于当前位置的滑动，或者使用data-slide-to='index' 
 <a class="carousel-control-prev" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
 </a>
 <a class="carousel-control-next"  data-slide="next">
    <span class="carousel-control-next-icon"></span>
 </a>
</div>
$('.carousel').carousel()

data-方法控制轮播组件的属性

名称	Type类型	默认值	描述
interval	number	5000	自动循环项目之间的延迟时间（即滚动时间），如果为false，则整个轮播组件不会自动滚动（仅支持手动滚动）-在调试CSS样式时这很实用。
keyboard	boolean	true	是否应对键盘事件作出反应，如果选择true则可以通过键盘上的左<-右->方向键进行切换控制。
pause	string | boolean	“hover”	如果设置为"hover", 则鼠标移在动画屏幕上暂停旋转，并在移开鼠标后恢复旋转事件（这是默认属性）；如设置为false,则鼠标移上去轮播动画不会暂停。在触摸屏幕上，当设置为"hover"属性时，循环将在触控时暂停（一旦用户完成与旋转事件的交互）两个时间间隔自动恢复。 请注意，这是上述鼠标行为的补充。
ride	string	false	在用户手动循环第一个项目后自动播放传送带， 如果为“carousel”则加载时自动播放传送带。
wrap	boolean	true	转盘是否应该连续循环或难以停止。

方法

所有API都支持 异步传输 和轮换。一旦转换事件发生（开始），直到 事件结束之前不会结束。

• .carousel(‘cycle’) 从左到右循环播放
• .carousel(‘pause’)通过事件停止播放
• .carousel(number)
• .carousel(‘prev’)将轮播指向前一帧幻灯片
• .carousel(‘next’)将轮播指向后一帧幻灯片
• .carousel(‘dispose’) 销毁一个轮播的控件？？
• $(’.carousel’).carousel({ interval: 2000})

事件 :slide.bs.carousel

折叠面板(Collapse)

bootstrap折叠板组件允许使用少量JS以及CSS类切换内容，控制内容的可见性。

Collapse 插件用于显示和隐藏内容，按钮或锚点用作触发器映射到需要切换的元素。折叠元素会将height从当前值设置为0，使用CSS处理动画。

可以使用带href属性的连接或者带data-target属性的按钮来创建折叠效果 data-toggle='collapse’在这两种情况下是必须的。

可以在<button>或者 <a> 标签上，通过选择器来显示或隐藏多个元素，或多个标签控制一个元素，只要href/data-target属性(collapseID)定义正确。 href与data-target使用其一即可。

将 data-toggle="collapse" 和 data-target 添加到元素中，可自动指定折叠面板的控制项，其中 data-target 属性接受CSS选择器，以应用折叠。确保向可折叠面板添加collapse添加到可折叠面板组件之上。如果你希望它默认是打开的，可定义额外的 show属性。

<a href='collaspseID' data-toggle='collapse'></a>
<button data-target='collaspeID' data-toggle='collapse'></button>
<div class='collaspe' id='collpaseID'>...</div>

手风琴(accordion)折叠样式

<div class="accordion" id="accordionID">
      <div class="card">
          <div class="car-header" id="One">
            	<button data-target="#collpaseOne" data-toggle="collapse">btn</button>
        	</div>
          <div class="collapse" id="collapseOne" data-parent="#accordionID">
              <div class="card-body">sdfsfsd</div>
          </div>
      </div>
  </div>
//data-parent用于同一父元素下折叠同时只有一个展开

名类	Type类型	默认值	描述
data-parent	selector | jQuery object | DOM element	false	如果提供了一个选择器，然后当某个折叠块打开时，这个指定的父元素下面所有别的折叠块元素都将自动关闭（类似于传统的手风琴样式 - 这依赖card样式），属性必须在目标可折叠区域上定义。
data-toggle	boolean	true	在调用中折叠块元素。

进度条(Progress)

• 使用.progress来指定进度条的最大值
• 使用.progress-bar来表示当前的进度

<div class='progress'>
  <div class='progress-bar bg-success/info.. w-50' style='width:90%'></div>
</div>
//我们只在.progress上设置一个height值，内部的.progress-bar高度会自动调整大小。
//如果需要可以在进度组件中嵌套多个进度条
<div class='progress'>
	<div class='progress-bar'>...</div>
  <div class='progress-bar'>...</div>
  ...
</div>
将progress-bar-striped 添加到progress-bar上可以使用条纹效果。
将progress-bar-animated添加到progress-bar上可以添加动画效果。

旋转特效(Spinners)

基于纯CSS旋转特效类(spinner-border),用于指示控件或页面的加载状态。

spinner-border旋转特效类可用于显示项目的加载状态，基于纯CSS构建，不依赖JS，更加轻量。整个特效的外观、对齐方式、大小、颜色都可以很容易的调整。

使用文本颜色工具可以自定义颜色 text-primary/light/…

<div class='spinner-border'></div>

• spinner-border 圆形旋转特效
• spinner-grow 渐变缩放特效
• spinner-border/grow-sm 可以制作更小的转轮 要使这个属性生效要添加spinner-border/grow基础样式
• 可以使用自定义CSS或内联样式更改维度

下拉菜单(Dropdown)

将下拉列表的切换(按钮或链接)和下拉菜单包含在.dropdown中可以从a或button标签触发下拉菜单

<div class='dropdown'>  
  <button class="btn dropdown-toggle" data-toggle="dropdown" data-display="static" data-offset="10,20">fdsfs</button>
    //data-display="static" 属性禁用动态定位并使用响应式对齐
    //使用data-offset或data-reference更改下拉菜单的位置。
    <div class="dropdown-menu">
        //dropdown-header添加菜单头部标题	
        <h6 class="dropdown-header">Dropdown header</h6>
        //dropdown-item-text 创建非交互式下拉菜单项 active  disabled
        //dropdown-menu-right
        <span class="dropdown-item-text">Dropdown item text</span>
        <a href="" class="dropdown-item active">c</a>
        <div class='dropdown-divider'></div>
        <button class="dropdown-item disabled" type="button">Action</button>
        //下拉列表的元素可以不仅是a标签 
    </div>
</div>
//分裂式按钮：一个按钮组内添加两个按钮
//dropup设置箭头向上的方向  dropleft/dropright
//如果你想使用响应式对齐，请通过添加data-display="static"属性禁用动态定位，并使用响应式变体类。
//默认情况下，一个下拉菜单自动从顶部和左侧的父级100％定位。添加.dropdown-menu-right 到.dropdown-menu右侧轻松对齐下拉菜单。
<div class="btn-group dropup"> 
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

方法

Method	Description
$().dropdown('toggle')	给导航栏或分页启用下拉菜单功能。
$().dropdown('update')	更新下拉列表的位置。
$().dropdown('dispose')	销毁一个元素的下拉菜单。

事件

Event事件	描述说明
show.bs.dropdown	当调用show显示方法时，此事件会立即触发。
shown.bs.dropdown	当下拉菜单对用户可见时，会触发此事件（将等待CSS转换完成）。
hide.bs.dropdown	当调用隐藏实例方法时，会立即触发此事件。
hidden.bs.dropdown	当下拉菜单从用户隐藏完毕时，会触发此事件（将等待CSS转换完成）。

表单(Forms)

bootstrap的表单控件使用了CSS样式重置，确保在输入框上使用正确的type属性。

使用display:block和width:100%在全部input控件上，表单默认都是基于垂直堆叠排列的，可以使用其他CSS类改变表单的布局。

文本控件（如 <input>、<select>、 <textarea>）统一采用 .form-control 样式进行处理优化，包括常规外观、focus选（点）中状态、尺寸大小等。

对于input文件选择控件bootstrap4使用.form-control-file取代了.form-control

只读属性在input控件上增加 readonly （布尔值）标签定义，以防止修改input中的值。仅能阅读的input控件显示较谈（就象禁用的输入框），但保留鼠标效果。

只读纯文本如果你希望将 <input readonly>属性进一步处理，显示为纯文本（没有控件框），你只要引用 .form-control-plaintext class样式，就能移除预设的表单样式，并保留适当的边距和填充间隙。

.form-control-range 设置水平滚动

//readonly 设置只读属性 .form-control-plaintext 可以移除预设的表单样式 显示为纯文本状态
<input class="form-control" type="text" placeholder="..." readonly>
<form class="form-inline"></form> //行内式布局

复选框与单选框

使用.form-check可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现。

复选框和单选框也是可以禁用的，只要not-allowed在父级的悬停上提供定义，<label>需要将该.disabled 类添加到父级.form-check，同时控件也会淡化文字颜色以灰色显示禁用状态。

默认情况下，同级任意数量的复选框与单选框按钮垂直堆叠，并与.form-check有间隙隔离。

通过添加.form-check-inline到一组所有的控件中，会使加到任何.form-check中的选取框平行排列。

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Option one is this and that—be sure to include why it's great
  </label>
</div>
添加 .position-static 到 .form-check 选择器上，可以实现没有文本的输入
<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1">
</div>
水平排列
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>

表单组

.form-group群组可以为表单赋予一些结构样式，其唯一目的是提供标签的控制配对以及margin-bottom属性，它是一个class选择器，可以在<fieldset>、 <div>或任何其它元素中使用它。可以使用栅格系统构建更复杂的表单。

<form>
  //form-row与row 可以互换使用，form-row提供了更小的沟槽缝隙。
  <div class="row form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
  <div class="form-group">
    <label >...</label>
    <input type="text" class="form-control">
  </div>
</form>

垂直排列表单

通过添加 .row class类，并使用 .col-*-* 等栅格组件来指定标签和宽度，可以建立起水平表单。确保添加.col-form-label 到您<label>上，以便他们垂直居中与他们相关的表单控件。<legend>元素，可以.col-form-legend样式定义，与普通<label>元素相似。

input是块级显示的，要显示在同一行使用row 和col-*做一层包裹。

内联式表单

使用 .form-inline样式在单个水平行上显示一系列标签，表单控件和按钮。内联表单中的表单控件与默认状态略有不同：

• 基于display: flex控件组件，并允许您使用 间隙隔离 和 flexbox 弹性布局样式。
• 控制组件和input接受 width: auto 以覆盖预设的 width: 100%。
• 控制组件只会在viewport 576px宽度 时才会显示在行内，以便在移动设备上完整呈现。

<form class="form-inline">...</form>

表单下方帮助提示文本

可以使用.form-text （以前称为.help-block 在v3中）创建表单中的块级帮助文本。可以使用任何内联HTML元素和通用样式（如.text-muted）灵活的展示帮助提示文本。

禁用表单

添加 disabled 布尔值属性到input上，就能防止使用者操作并看起来更灰淡。

<fieldset disabled></fieldset> 可以整体设置内部的表单控件不可用

对于自定义Bootstrap表单验证消息，您需要将 novalidate属性添加到您的<form>。这将禁用浏览器默认的反馈工具提示，但仍提供对JavaScript中的表单验证API有效支持。

Input输入框及输入框群组(Input-group)

在文本框的两侧定义文本、按钮或按钮组可以轻松扩展表单控件。

//label标签必须放在输入框组之外
//将相对表单大小的class样式加到input-group中调整大小
<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    //注意不同控件的包裹程度是有区别的 span/button是怎么使用的 单选框等是怎么使用
    //支持多种控件结合，比如复选框和、文本、input框混合使用。
    <span class="input-group-text">@</span>
    <span class="input-group-text">0.00</span>
    <button class="btn " type="button">Button</button>
    <button class="btn  dropdown-toggle" type="button" data-toggle="dropdown" >Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
    //可以放置其他组件不单单是文本等
    <div class="input-group-text">
      <input type="checkbox">
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Username">
  //文件选择特殊处理下 使用.custom-file进行包裹 label标签很重要
  <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

列表组(List-group)

列表组是一个灵活而且强大的组件，不仅仅可以用来显示简单的元素列表，还可以通过定义显示复杂的内容。

//list-group-flush 可以移除部分边框和圆角从而产生边缘对齐的列表组
<ul class="list-group list-group-flush">
  //active 标志显示状态 disabled禁用
  <li class="list-group-item active disabled">...</li>
</ul>
//使用 <a>或 <button>来创建具有 hover、禁用、悬停和活动状态的列表组
<div class='list-group'>
  //list-group-item-action 控制标签样式显示字体颜色
  <a href="#" class="list-group-item list-group-item-action">...</a>
  //不要在这里使用 .btn 标准样式。
	<button type="button" class="list-group-item list-group-item-action">...</button>
</div>
//list-group-horizontal 将布局从垂直更改为水平
<ul class="list-group list-group-horizontal">
  //list-group-item-*(info/success...)设置背景和颜色
  <li class="list-group-item list-group-item-dark">...</li>
  //引入badge徽章样式
  <span class="badge badge-primary badge-pill">...</span>
</ul>
  
//#ID很重要
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#ID" role="tab">...</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
  //fade 动画效果 需要使用show指定一个item使之初始化可见
  <div class="tab-pane fade show" id="ID" role="tabpanel">...</div>
</div>

.tab(‘show’)：选择给定的列表项并显示其关联的网页，之前选择的其它列表项目将被取消选 中，并使其关联的表单隐藏。

媒体对象

媒体对象用于构建复杂、重复的内容列表，左边是一个图，右边是内容，采用flexbox流式布局，使用两个class类就能达成(media/media-body),媒体对象可以无限嵌套使用

<div class="media">
  //align-self-start 设置对齐样式 align-self-start/center/end
  //图片可以左右放 标签位置
  <img  src="..." alt="..." class='align-self-start'>
  <div class="media-body">
    ...
    <div class="media">
      <img  src="..." alt="...">
      <div class="media-body">
        ...
      </div>
    </div>
  </div>
</div>
//列表呈现，可以在列表HTML元素上使用，在<ul> or <ol>添加 list-unstyled 从而删除浏览器默认样式 然后再<li> 中添加.media元素块
<ul class='list-unstyled'>
  <li class='media'>
  	<img  src="..." alt="...">
    <div class="media-body">
      ...
    </div>
  </li>
</ul>

弹出模态框(Modal)

使用Bootstrap的JS模块框插件可以为你的网站添加醒目的提示和交互。模态插件通过数据属性或JavaScript按需切换您隐藏的内容。它将.modal-open加到了<body>上，以覆盖默认的滚动行为，并生成.modal-backdrop来提供点击区域，以便在动态模态窗外面点击一下就能移除模态。

运行原理

• 弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从<body>中删除滚动事件，以便模态框自身的内容能得到滚动。
• 点击模态框的“backdrop”（灰背景区域），将自动关闭动态模块框。
• Bootstrap一次只支持一个模态窗口，不支持嵌套模式。
• 模态框使用 position: fixed，在呈现上与其它元素相比有很大不同。请尽可能将弹出模态框的HTML放在顶级位置，以避免其它元素干扰，尤其是当另一个固定元素中也定义了.modal事件时，你可能会遇到问题。
• 同样是受position: fixed属性影响，在在移动设备上使用模态框，有一些注意事项。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalID">
</button>
//bd-example-modal-*(xl|lg|sm) 设置模态框尺寸大小问题
<div class="modal bd-example-modal-xl" id="ModalID" tabindex="-1">
  //modal-dialog 控制显示效果的外层包裹
  //modal-dialog-centered 垂直居中模式 显示模式效果
  <div class="modal-dialog modal-dialog-centered ">
    <div class="modal-content">//显示效果
      <div class="modal-header">
				...
      </div>
      <div class="modal-body">
        <div class='container-fluid'>...</div>//使用栅格系统
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tooltips工具提示和弹出提示框

Tooltips工具提示 和popovers提示框，可以根据需要放置在模态框中。当模态框关闭时，其包含的任何提示和Pop提示都会同步关闭。

选项

选项可以通过数据属性或JS操作。对于数据属性，将选项名附加到data-后(例如data-backdrop=’’)

名称	Type类型	默认值	描述
backdrop	boolean or the string 'static'	true	包括动态视窗背景元素，或者指定 static在点击背景时不关闭动态模态框。
keyboard	boolean	true	按下esc时关闭动态视窗。
focus	boolean	true	初始化focus动态视窗。
show	boolean	true	初始化时显示模态。

nav导航/滑动门(nav)

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

基础nav组件采用flexbox弹性布局构建，并为构建所有类型的导航组件提供了坚实的基础，包括一些风格覆盖以及列表）、一些更大padding连接间隙和基本的禁用样式。

//对齐方式  水平:justify-content-start/center/end  垂直: flex-column
//nav_tabs 选项卡式标签 nav-pills 胶囊式标签页
//nav-fill 会将nav-item 按照比例分配空间(占用所有的水平空间 nav-item记得加上)
<ul class="nav justify-content-center flex-column nav-tabs nav-fill"> 
  <li class="nav-item">// nav-item 可选??
    <a class="nav-link active" href="#">Active</a>
  </li>
</ul>
//对于等宽元素，使用.nav-justified 与nav-fill不同，这个选项会使每个item等宽
<nav class="nav nav-fill  nav-justified">
  <a class="nav-link nav-item active" href="#">Active</a>
</nav>
//nav-fill与nav-justified的使用都要确保nav-item属性的存在。
//下拉列表标签页
<ul class="nav nav-tabs">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>

//滑动门效果
<nav>
  <div class="nav nav-tabs|nav-pills" id="nav-tab"> //flex-column 垂直样式
    //标签应该具有data-target 或 href定位DOM中的容器节点
    //使用基于 <nav>的导航，确保在链接上包含 .nav-item 子项定义。
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home">Home</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home">...</div>
</div>
//使用.nav-fill会将 .nav-item按照比例分配空间。注意：这会占用所有的水平空间，但不是每个导航项目的宽度相同。对于等宽元素，请使用.nav-justified。所有水平空间将被导航链接占用，但与上述.nav-fill不同，每个导航项目将具有相同的宽度。
<ul class="nav nav-tabs nav-fill" id="myTab">
  <li class="nav-item">
    //标签应该具有data-target 或 href定位DOM中的容器节点
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home">Home</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home">...</div>
</div>

使用数据属性

只要在元素上指定data-toggle="tab" 或 data-toggle="pill" 即可启动选项卡或胶囊式导航，而无需编写任何JavaScrip，并可在 .nav-tabs 或 .nav-pills使用这些数据属性。

导航栏(navbar)

导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的容器代码组合，很容易扩展。

导航栏建立在nav组件之上，享有专属的class样式。

运行原理

• 导航栏需要使用.navbar 来定义。
• 导航栏默认内容是流式的，使用container容器来限制它们的水平宽度。
• 使用提供的间隙间距和flex布局 classes 来定义导航栏中元素的间距和对齐。
• navbars导航栏默认支持响应式。

navbar-nav 提供了完整的导航。

navbar-text 包裹文字，通过它对文本字符串做了处理优化

navbar-dark/light…设置背景色

你可以把导航条包裹在一个 .container容器中，从而使之在网页中呈现居中效果

<nav class="navbar navbar-light justify-content-end/start/center">
  //navbar-brand 品牌展示
  <a class="navbar-brand" href="#">
    <img src="..."  alt="">
  </a>
</nav>
//在导航栏中使用 .form-inline放置各种表单控制元件和组件。
<nav class="navbar">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="..." >
    <button class="btn" type="submit">...</button>
  </form>
</nav>

定位

fixed-top 固定在顶部
fixed-bottom 固定在底部
sticky-top 呈现粘性(随屏滚动)与浏览器窗口顶部
<nav class="navbar fixed-top">
  <a class="navbar-brand" href="#">固定在顶部</a>
</nav>

分页(Pagination)

<nav>
  //justify-content-* 对齐样式
  <ul class="pagination  pagination-lg/sm(规格尺寸) justify-content-*">
    <li class="page-item  disabled/active(禁用/活动状态设置)">
      <a class="page-link" href="#">Previous</a>
      <span>&laquo;</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
      <span>&raquo;</span>
    </li>
  </ul>
</nav>

POP提示(Popover)

//data-placement:top/bottom/left/right
//当你在一个父元素上有一些样式与提示框产生样式干扰，你可以指定一个自定义的container容器，这样提示框的HTML将出现在这个元素内部了。
<button type="button" class="btn" data-container="body" data-toggle="popover" data-placement="top" title='...' data-content="...">
  Popover
</button>
<script>
	$(function () {
  $('[data-toggle="popover"]').popover()
	})
</script>
具有 disabled 属性的元素不是交互式的这意味着用户不能悬停或点击它们来触发弹出窗口（或工具提示）。 作为一种解决方法，您需要从包装器<div> or <span>中触发弹出窗口，并覆盖disabled元素上的指针事件。对于禁用的弹出式触发器，您也可能更喜欢 data-trigger="hover" ，以便弹出窗口显示为用户的直接视觉反馈，因为他们可能不希望单击禁用的元素。

滚动监听(Scrollspy)

滚动监听插件会根据滚动的位置，自动更新导航条的目标，以指示当前窗口中处于活动的状态。

弹出提示框(Toast)

.toast弹出提示框控件用于向访客推送通知，是个轻量级、易于订制的警告消息组件。

.toast是一种轻量级通知，旨在模仿移动和桌面操作系统普及的推送通知。它们是用弹性盒子构建的，所以很容易对齐和定位,这是在V4.2.1版本添加新特性。

<div class='toast'>
  <div class='toast-header'>...</div>
  <div class=toast-body>...</div>
</div>