bootstrap文档第一遍

转自https://onlyhy.github.io/bootstrap/2018/05/16/Bootstrap4.html

浏览器与设备调优

不支持IE9

移动设备的模态框和下拉组件

Overflow溢出和scroll滚动

iOS和安卓中，对于<body>元素中使用overflow: hidden;的支持很有限。因此在这两种设备中，当你滚动超过一个模态窗口的顶部或底部，<body>内容也会开始滚动

iOS文本字段和滚动

从IOS9.2开始，当一个模态启用，如果手势触模在一个<input>文本或<textarea>文本框内，则<body>中的内容将被滚动，而不是模态本身滚动

布局

栅格

不同于旧版3.0，新版是完全基于flexbox流式布局构建的，完全支持响应式标准。
flexbox布局不需要指定列的宽度就能实现网页自动等宽排列。
指定一列进行宽度定义，其他列将自动调整大小。
使用.col-{breakpoint}-auto断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。
等宽多行：创建跨多个行的等宽列，方法是插入 .w-100 的div
flexbox可轻松实现div空间布局的垂直(align)与水平(justify)对齐
使用 .order-*选择符，可对div进行排序
使用 .offset-*， .offset-md-*栅格偏移
使用 .ml-auto 与 .mr-auto 来强制隔离两边的距离
使用 .no-gutters 类来消除间隙沟槽
使用BootStrap v4内置的栅格系统之Sass变量和 maps文件，可以完全自定义自己的栅格环境、并可以更改DIV层次、媒体查询维度和container容器宽度，然后重新编译。

媒体对象

只需要两个Class选择器，分别引用.media和.media-body来装载的内容
媒体对象可以无限嵌套，建议尽量减少嵌套
媒体对象中的媒体可以与flexbox流式布局一样，实现对齐到顶部、中间、底部
设置order属性可以更改媒体对象中内容顺序
可以在ul，li中添加媒体对象

内容

Reboot

删除了默认的Web字体（Helvetica Neue，Helvetica和Arial），并替换为“本地OS字体引用机制”
所有标题和段落元素（列如<h1>以及<p>）都被重置，系统移除它们的上外边距margin-top定义，标题添加外边距为margin-bottom: .5rem，段落元素<p>添加了外边距margin-bottom:1rem以形成简洁行距
移除所有的列表元素（<ul>、<ol>、 <dl>）的外边距margin-top，并设置为margin-bottom: 1rem，被嵌套的子列表无margin-bottom值

排版

.display-* 显式大标题
.lead 定义一个中心段落，用于提示这是中心内容或重要内容
引用文档中另一个来源的内容块，请在一段HTML外面包裹 <blockquote class="blockquote">，作为引用，推荐使用p作为子级包裹容器。`<footer class="blockquote-footer">用于标识来源，.text-center、.text-right等做对齐处理
.list-inline 、 .list-inline-item 实现列表逐行显示（默认）、单行多列并排（从左到右）

代码

用<code>包裹内联代码片段，转义HTML尖括号
使用 <pre>标签可以包裹代码块，转义HTML尖括号， .pre-scrollable 可以实现垂直滚动的效果
<var> 标签包裹表示变量
<kbd> 表明是键盘输入操作
<samp> 表示一个示例

图片

.img-fluid 响应式图片
.img-thumbnail 图片自动被加上一个带圆角且1px边界的外框缩略图样式
<picture> 元素，它可以为 <img>指定多个<source> 定义，确保在<img> 标签里使用.img-* 进行定义绑定而不是<picture>标签。

表格

<table>添加 .table 是基本样式
.table-dark颜色反转对比效果，深色背景和浅色文本
.thead-light 或.thead-dark ，使 <thead>区显示出浅黑或深灰
.table-striped 定义 <tbody>，条纹状表格（还可结合.table-dark等）
.table-bordered 类可以产生表格边框与间隙
.table-hover 定义到 <tbody>上，可以产生行悬停效果
.table-sm 可以将表格的padding值缩减一半，使表格更加紧凑
.table-*样式对表格逐行或单个单元格着色，深色表格可用.bg-*
<caption>标签如同一个表格的标题，默认是隐藏，帮助用户了解表格内容
.table-responsive 选择器使表格支持水平响应
.table-responsive{-sm|-md|-lg|-xl}可以根据需要对不同屏幕尺寸断点表格进行响应式设计

图文框

.figure样式定义内容区包括一张图和一个可选的标题
将.img-fluid添加到标签中才能实现与响应式的完美结合
.text-*可控制文字对齐方式

组件

警告提示框
徽章
面包屑
按钮
按钮组
卡片
轮播效果
折叠面板
下拉菜单
表单
输入框
大块屏
列表组
模态框
导航
导航栏
分页
POP提示
进度条
滚动监听
提示冒泡

警告提示框Alerts

系统提供8个可用的正确的样式（如，.alert-success）
.alert-link 可为带颜色的警告文本框中的链接加上合适的颜色
警报还可以包含其他HTML元素，如标、段落和分隔符
关闭警告： * 确保正确加载了.alert警报组件或编译后的 Bootstrap JavaScript代码组 * 自行编译JS组件要引入util.js * <button>元素添加.close关闭按钮效果，在容器中引用 .alert-dismissible* 增加data-dismiss="alert" 触发 JavaScript 动作，要使用<button>元素 * 添加.fade和.show样式（关闭警报时生成警报提示）

徽章Badge

.badge可以嵌在标题，通过标题样式来适配其元素大小
可用作链接或按钮的一部分，提供统计数字样式
添加如.badge-primary等可定义样式
.badge-pill更加圆润
可用在 [元素上，实现悬停、焦点、状态]()

面包屑breadcrumb

.breadcrumb,.breadcrumb-item
建议添加一个有意义的标签即aria-label="breadcrumb"來描述<nav>元素，以及使用 aria-current="page“到这组导航的最后一个项目，以标明当前页面名称（路径）

按钮Button

.btn-primary多个预定义按钮样式
.btn-outline-*设置边框颜色，没有大背景颜色
.btn-lg 、 .btn-sm 设置大小， .btn-block块级按钮
.active， aria-pressed="true" 属性使按钮固定为启用状态
disabled 属性使按钮处于非活动的禁用状态， <a>标签不支持 disabled 属性，需要增加 .disabled类

按钮组Button-group

一系列的 .btn 包裹在.btn-group内
.btn-group-lg,.btn-group-sm控制大小尺寸
可嵌套实现按钮组与下拉菜单的组合
.btn-group-vertical垂直排列

卡片card

卡片代替了版本3中旧的 panel、 well和 thumbnail样式
.card-body 是卡片的内容主体， .card-title和 <h*>组合，可以添加卡片标题， .card-subtitle和 <h*>结合，可以添加副标题， .card-link 与 <a>结合，添加平行的链接， .card-img-top 定义一张图片在卡片的顶部， .card-text定义文字在卡片中
.card-header,.card-footer页眉页脚
使用文本对齐类来更改或特定部份的文本对齐
.card-img-overlay将图像转为卡片背景
.bg-primary等样式设置背景色
.border-primary 等样式设置边框色
.bg-transparent删除其background-color背景颜色
.card-group 多个卡片结为群组
当使用带页脚的卡片图时，他们的内容会自动水平对齐和栅格式布局。
使用卡片阵列Card decks（.card-deck）：一套相互不相连，但宽度和高度相同的卡片，页脚也会自动排列
.card-columns ：多列卡片浮动排版，不再基于 flexbox 而是使用 column 属性

轮播效果Carousel

.carousel引入轮播组件，并设置唯一ID
data-ride="carousel" 从页面加载开始动画
在.carousel-inner中放入.carousel-item
.carousel-control-prev,.carousel-control-next 左右控制器
.carousel-indicators 状态指示器
.carousel-caption 添加字幕， .d-none 使得在小屏幕隐藏文字, .d-md-block在中型屏幕则显示

折叠面板Collapse

使用带href 属性的链接,、或者带 data-target 属性的按钮来创建折叠效果，data-toggle="collapse" 属性是必须的
可控制显示和隐藏多个元素
结合card扩展折叠组件为手风琴效果
自定义手风琴样式，只需添加 data-children 属性,指定一组元素来切换
如果折叠块元素默认是闭合的，它必须拥有一个 aria-expanded="false"值。如果用.show类设置则可以定义折叠控件为默认打开，在控制器上设置aria-expanded="true"即可

下拉菜单Dropdowns

使用时确保 popper.min.js 文件放在 Bootstrap JS之前
将下拉列表的切换（按钮或链接）和下拉菜单都包含在.dropdown中，按钮或链接使用data-toggle="dropdown"
.dropdown-divider 在子菜单中添加分隔线
.dropdown-toggle-split 分列式按钮下拉菜单
.dropup 向上展开， .dropright 向右展开 .dropleft 向左展开
Bootstrap v3中子菜单项必须是链接，而 Bootstrap v4中可选择 <button> ，而不是仅仅 <a>标签
默认情况下，一个下拉菜单自动从顶部和左侧的父级100％定位。添加.dropdown-menu-right到.dropdown-menu右侧轻松对齐下拉菜单。
.dropdown-header 在子菜单中添加标题
可将表单放在下拉菜单中
.active添加到子菜单中的项目以将其设置为活动状态， .disabled 是禁用状态

表单Forms

文本控件（如 <input>、<select>、 <textarea>）统一采用 .form-control 样式进行处理优化
input文件选择控件，Bootstrap v4采用.form-control-file 取代了.form-control
使用 .form-control-lg 和 .form-control-sm 属性定控件大小高度
在input控件上增加 readonly （布尔值）标签定义，以防止修改input中的值
显示为纯文本（没有控件框），引用 .form-control-plaintext
.form-check 格式化复选框和单选框按钮，默认垂直堆叠
.form-check-inline 使加到任何.form-check中的选取框平行排列
.form-group 群组可以向为表单赋予一些结构样式，也可在其它元素中使用
可使用栅格系统，可用 .form-row来取代.row，有更小的沟槽缝隙
添加.col-form-label 到<label>上，以便他们垂直居中与他们相关的表单控件
.col-form-label-sm 、 .col-form-label-lg 控制label大小， .form-control-lg 、 .form-control-sm 控制控件大小
.form-text 表单下方帮助提示文本
novalidate添加到<form>，这将禁用浏览器默认的反馈工具提示

输入框input-group

.input-group-prepend,.input-group-append可在组件前后放组件或按钮（不仅仅是文本），不支持单个输入组合中有多个表单控制项， <label>必须在输入框组之外
如.input-group-lg、.input-group-sm 加到 .input-group中，其内容会自动调整大小，不需要在每个元素上重复使用样式控制其大小。
尽管可视化支持多个 <input>但验证样式仅适用于具有单个<input>的输入组
支持多种控件结合，比如 复选框和、文本、input框混合使用

大块屏Jumbotron

.jumbotron, .jumbotron -fluid扩展视口，展示关键信息

列表组list-group

.list-group,.list-group-item
.active 有效选择状态 .disabled 禁用状态（有些还需配合JS）
使用 <a>或 <button>来创建具有 hover、禁用、悬停和活动状态的列表组使用.list-group-item-action，不要用.btn样式!
.list-group-flush，移除部分边框以及圆角，产生边缘贴齐的列表组，在如Card卡片等容器中很实用
.list-group-item-primary等样式设置背景色
可引入badge徽章
列表组中几乎可以添加任意的HTML内容，包括标签、内容、链接
使用数据属性，可以指定 data-toggle="list" 或在元素上编写任意的JavaScript事件来激活列表组导航

模态框Modal

控制元素上data-toggle="modal" ，data-target="#foo" 或 href="#foo"指定动态视窗
将.modal-dialog-centered 添加到 .modal-dialog 对话框以垂直居中模式
在.modal-body中可加入 .container-fluid 栅格系统
触发的模态框相同，但内容不同，使用event.relatedTarget 和 HTML data-* 属性，依据所点按钮的定义来动态加载弹出窗口中的内容
$('#myModal').data('bs.modal').handleUpdate()或 $('#myModal').modal('handleUpdate') 可调整模态框的位置，以防滚动条出现

导航nav

.nav 默认情况下，导航按左对齐，可 .justify-content-center居中， .justify-content-end右对齐
.flex-column 垂直排列导航
.nav-tabs 选项卡标签
.nav-pills 胶囊标签
.nav-fill会将 .nav-item按照比例分配空间
当使用<nav>基于导航时，请确保包含 .nav-item 在a链接上
.nav-justified 等宽
role="tablist"、role="tab"、 role="tabpanel"、 aria-*动态选项卡

Navbar下的Toggler是切换触发器（即手机模式下的MENU下拉项），它们默认是左对齐的，如果在它们中间定义一个同级的兄弟元素.navbar-brand，它们会自动对齐到窗口右边

分页Pagination

网页可能有不止一个这样的导航部分（存在多个导航组件），建议为<nav>提供一个aria-label的描述，以反映其功能
使用 aria 属性和 .sr-only 使用图标
.disabled 禁用，再加上 tabindex="-1" 并自定义JS更保险
.pagination-lg 或 .pagination-sm 样式定义可以获得大规格或小规格尺寸的分页组件
.justify-content-center，.justify-content-end可更改对齐方式

POP提示popover

data-toggle="popover"
data-placement控制四个方向

进度条progress

.progress-bar 中放置文字內容,可将标签添加到进度条中
改变 .progress的height值， .progress-bar 高度会自动调整大小
.bg-success 等可定义外观
可在进度组件中包含（嵌套）多个进度条
.progress-bar-striped 添加到 .progress-bar 上，条纹效果
.progress-bar-animated 加到 .progress-bar 上，即实现CSS3绘制的从右到左的动画效果

滚动监听Scrollspy

添加 data-spy="scroll"到要窥探的元素（通常是<body>）。然后添加data-target属性到任何Bootstrap .nav组件的父元素ID或类的Class属性
Scrollspy滚动监控也适用于嵌套的 .nav。如果是一个嵌套 .nav是的.active状态，其父母也将是.active状态
Scrollspy 滚动监听也适用于 .list-group列表组

提示冒泡Tooltip

data-toggle="tooltip", data-placement=""设置4个方向
如果使用数据属性，将选项名称附加到data- ,如 data-animation=""