Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
。。。。。。。。。。。。。
Bootstrap4 与 Bootstrap3
Bootstrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。
。。。。。。。。。。。。
创建第一个 Bootstrap 4 页面
1、添加 HTML5 doctype
Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。
HTML5 doctype 在文档头部声明，并设置对应编码
。。。。。。。
移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。
http:/ /www.iis7.com/b/wzjk/
如右所示：<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
。。。。。。。。。。
Bootstrap 4 CDN
国内推荐使用 BootCDN 上的库：
Bootstrap4 CDN
<!-- 新 Bootstrap4 核心 CSS 文件 -->：<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->：<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->：<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->：<script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
。。。。。。
容器类
Bootstrap 4 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类：
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数，Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
。。。。。。。
网格类
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
。。。。。。。。
网格系统规则
Bootstrap4 网格系统规则：
网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
使用行来创建水平的列组。
内容需要放置在列中，并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
网格列是通过跨越指定的 12 个可用列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 文字排版
Bootstrap 4 默认设置
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
。。。。。。。。。。
<h1> - <h6>
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。
<h1>(2.5rem = 40px)</h1>
<h2>(2rem = 32px)</h2>
<h3>(1.75rem = 28px)</h3>
<h4>(1.5rem = 24px)</h4>
<h5>(1.25rem = 20px)</h5>
<h6>(1rem = 16px)</h6>
。。。。。。。。。。。
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
。。。。。。。。。。
<small>
在 Bootstrap 4 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本
。。。。。。。。。。
<mark>
Bootstrap 4 定义 <mark> 为黄色背景及有一定的内边距。
。。。。。。。。。。
<abbr>
Bootstrap 4 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框
。。。。。。。。。。
<blockquote>
对于引用的内容可以在 <blockquote> 上添加 .blockquote 类
。。。。。。。。。。
<dl>
Bootstrap 4 定义 HTML <dl><dd> 元素
。。。。。。。。。。
<code>
Bootstrap 4 定义 HTML <code> 元素，使字体变粉色。
。。。。。。。。。。
<kbd>
Bootstrap 4 定义 HTML <kbd> 元素，使字体背景色变黑。
。。。。。。。。。。
<pre>
Bootstrap 4 定义 HTML <pre> 元素
。。。。。。。。。。
更多排版类：在class中加
.font-weight-bold，加粗文本
.font-weight-normal，普通文本
.font-weight-light，更细的文本
.font-italic，斜体文本
.lead，让段落更突出
.small，指定更小文本 (为父元素的 85% )
.text-left，左对齐
.text-center，居中
.text-right，右对齐
.text-justify，设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap ，段落中超出屏幕部分不换行
.text-lowercase，设定文本小写
.text-uppercase，设定文本大写
.text-capitalize，设定单词首字母大写
.initialism，显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled， 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline，将所有列表项放置同一行
.pre-scrollable，使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 颜色
Bootstrap 4 提供的有意义的文字颜色有：.text-muted， .text-primary， .text-success， .text-info， .text-warning,， .text-danger， .text-secondary， .text-white，.text-dark，.text-light
Bootstrap 4 提供的背景颜色有：.bg-primary， .bg-success， .bg-info， .bg-warning， .bg-danger， .bg-secondary， .bg-dark， .bg-light
:::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 表格
。。。。。。。。。。。
Bootstrap4 基础表格
Bootstrap4 通过 .table 类来设置基础表格的样式
<thead>，是表头，默认加粗字体
<tr></tr>，是表格列
<td></td>，是表格单元格
。。。。。。。。。。。
条纹表格
通过添加 .table-striped 类，您将在 <tbody> 内的行上看到条纹
。。。。。。。。。。。
带边框表格
.table-bordered 类可以为表格添加边框
。。。。。。。。。。。
鼠标悬停状态表格
.table-hover 类可以为表格的每一行添加鼠标悬停效果（默认灰色背景）
。。。。。。。。。。。
黑色背景表格
.table-dark 类可以为表格添加黑色背景
。。。。。。。。。。。
黑色条纹表格
联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格
。。。。。。。。。。。
鼠标悬停效果 - 黑色背景表格
联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果
。。。。。。。。。。。
指定意义的颜色类：
.table-primary，蓝色: 指定这是一个重要的操作
.table-success，绿色: 指定这是一个允许执行的操作
.table-danger，红色: 指定这是可以危险的操作
.table-info，浅蓝色: 表示内容已变更
.table-warning，橘色: 表示需要注意的操作
.table-active，灰色: 用于鼠标悬停效果
.table-secondary，灰色: 表示内容不怎么重要
.table-light，浅灰色，可以是表格行的背景
.table-dark，深灰色，可以是表格行的背景
。。。。。。。。。。。
表头颜色
在 Bootstrap v4.0.0-beta.2 中.thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景。
在 Bootstrap v4.0.0-beta 这个版本中，.thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。
。。。。。。。。。。。
响应式表格
.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）
你可以通过以下类设定在指定屏幕宽度下显示滚动条：
类名 屏幕宽度
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 图像形状
。。。。。。。。。。。
圆角图片
.rounded 类可以让图片显示圆角效果
。。。。。。。。。。。
椭圆图片
.rounded-circle 类可以设置椭圆形图片
。。。。。。。。。。。
缩略图
.img-thumbnail 类用于设置图片缩略图(图片有边框)
。。。。。。。。。。。
图片对齐方式
使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐
。。。。。。。。。。。
响应式图片
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100% ，height: auto
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 Jumbotron(超大屏幕)
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息，Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。
以通过在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron
。。。。。。。。。。。
全屏幕的 Jumbotron
如果你想创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 信息提示框
Bootstrap 4 可以很容易实现信息提示框。
提示框可以使用 .alert 类, 后面加上 .alert-success， .alert-info， .alert-warning， .alert-danger， .alert-primary， .alert-secondary， .alert-light 或 .alert-dark 类来实现
。。。。。。。。。。
提示框添加链接
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接
。。。。。。。。。。
关闭提示框
我们可以在提示框中的 div 中添加 .alert-dismissable 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。
提示: × (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 "x"
。。。。。。。。。
提示框动画
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 按钮(btn)
Bootstrap 4 提供了不同样式的按钮，按钮类可用于 <a>, <button>, 或 <input> 元素上
。。。。。。。。。
按钮设置边框，btn-outline
。。。。。。。。。
块级按钮
通过添加 .btn-block 类可以设置块级按钮
。。。。。。。。。
激活和禁用的按钮
按钮可设置为激活或者禁止点击的状态。
.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 <a> 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 按钮组
Bootstrap 4 中允许我们将按钮放在同一行上。
可以在 <div> 元素上添加 .btn-group 类来创建按钮组，我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。
。。。。。。。。。
垂直按钮组
可以使用 .btn-group-vertical 类来创建垂直的按钮组：
::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 徽章（Badges）
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化
徽章（Badges），可以嵌入元素内
。。。。。。。。。
药丸形状徽章
使用 .badge-pill 类来设置药丸形状徽章:
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 进度条
进度条可以显示用户任务的完成过程。
创建一个基本的进度条的步骤如下：
添加一个带有 .progress 类的 <div>。
接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。默认颜色蓝色
进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改它
。。。。。。。。。
条纹的进度条
可以使用 .progress-bar-striped 类来设置条纹进度条
。。。。。。。。。
动画进度条
使用 .progress-bar-animated 类可以为进度条添加动画
。。。。
进度条可以设置多种颜色
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 分页
网页开发过程，如果碰到内容过多，一般都会做分页处理。
Bootstrap 4 可以很简单的实现分页效果。
要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类：
。。。。。。。。。
当前页页码状态
当前页可以使用 .active 类来高亮显示
。。。。。。。。。
不可点击的分页链接
.disabled 类可以设置分页链接不可点击
。。。。。。。。。
分页显示大小
可以将分页条目设置为不同的大小。
.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目
。。。。。。。。
面包屑导航
.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 列表组
大部分基础列表组都是无序的，要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类:
。。。。。。。。
激活状态的列表项
通过添加 .active 类来设置激活状态的列表项
。。。。。。。。
禁用的列表项
.disabled 类用于设置禁用的列表项
。。。。。。。。
链接列表项
要创建一个链接的列表项，可以将<div> 替换 <ul> ， <a> 替换 <li>。如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类:
。。。。。。。。
列表项目的颜色可以通过以下列来设置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light
::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 卡片
简单的卡片
我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。
。。。。。。。。
头部和底部
.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式
。。。。。。。。
多种颜色卡片
Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light
。。。。。。。。
标题、文本和链接
我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色
。。。。。。。。
图片卡片
我们可以给 <img> 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片，如果图片要设置为背景，可以使用 .card-img-overlay 类
:::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 下拉菜单
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。
.dropdown 类用来指定一个下拉菜单。
我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。
class to a <div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。
。。。。。。。。
下拉菜单中的分割线
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线
。。。。。。。。
下拉菜单中的标题
.dropdown-header 类用于在下拉菜单中添加标题
。。。。。。。。
下拉菜单中的可用项与禁用项
.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。
如果要禁用下拉菜单的选项，可以使用.disabled 类。
。。。。。。。。
下拉菜单的定位
如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类
。。。。。。。。
指定向上弹出的下拉菜单
如果你希望下拉菜单向上弹出，可以将 <div> 元素的 class="dropdown" 替换为 "dropup"
:::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 折叠
Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。
.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。
控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。
注意: <a> 元素上你可以使用 href 属性来代替 data-target 属性，默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示
。。。。。。。。
使用 data-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。
:::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 导航
如果你想创建一个简单的水平导航栏，可以在 <ul> 元素上添加 .nav类，在每个 <li> 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类
。。。。。。。。
导航对齐方式
.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐。
。。。。。。。。
垂直导航
.flex-column 类用于创建垂直导航
。。。。。。。。
选项卡
使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。
。。。。。。。。
胶囊导航
.nav-pills 类可以将导航项设置成胶囊形状。
。。。。。。。。
导航等宽
.nav-justified 类可以设置导航项齐行等宽显示。
。。。。。。。。
动态选项卡
如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。
如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类
。。。。。。。。
胶囊状动态选项卡
胶囊状动态选项卡只需要将以上实例的代码中 data-toggle 属性设置为 data-toggle="pill"
::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 导航栏
导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。 然后在 <li> 元素上添加 .nav-item 类， <a> 元素上使用 .nav-link 类
。。。。。。。。
垂直导航栏
通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏
。。。。。。。。
不同颜色导航栏
可以使用以下类来创建不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。
提示: 对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。激活和禁用状态: 可以在 <a> 元素上添加 .active 类来高亮显示选中的选项。 .disabled 类用于设置该链接是不可点击的。
。。。。。。。。
品牌/Logo
.navbar-brand 类用于高亮显示品牌/Logo
如果使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏。
。。。。。。。。
折叠导航栏
通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。
要创建折叠导航栏，可以在按钮上添加 class="navbar-toggler", data-toggle="collapse" 与 data-target="#thetarget" 类。然后在设置了 class="collapse navbar-collapse" 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id
。。。。。。。。
导航栏的表单与按钮
导航栏的表单 <form> 元素使用 class="form-inline" 类来排版输入框与按钮，你也可以使用其他的输入框类，如 .input-group-addon 类用于在输入框前添加小标签。
。。。。。。。。
导航栏文本
使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。
。。。。。。。。
固定导航栏
导航栏可以固定在头部或者底部。
我们使用 .fixed-top 类来实现导航栏的固定 .fixed-bottom 类用于设置导航栏固定在底部
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 表单
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。
Bootstrap4 表单布局
堆叠表单 (全屏宽度)：垂直方向
内联表单：水平方向
Bootstrap 提供了两种类型的表单布局：
堆叠表单
内联表单
所有内联表单中的元素都是左对齐的。
注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。
内联表单需要在 <form> 元素上添加 .form-inline类。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 表单控件
Bootstrap4 支持以下表单控件：
input
textarea
checkbox
radio
select
。。。。。。。。。
Bootstrap Input
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
注意：: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。
。。。。。。。。。
Bootstrap textarea(文本框)
。。。。。。。。。
Bootstrap 复选框(checkbox)
复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个，使用 .form-check-inline 类可以让选项显示在同一行上
。。。。。。。。。
Bootstrap 单选框(Radio)
复选框用于让用户从一系列预设置的选项中进行选择，只能选一个，使用 .radio-inline 类可以让选项显示在同一行上
。。。。。。。。。
Bootstrap select 下拉菜单
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 输入框组
我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。
使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。
最后，我们还需要使用 .input-group-text 类来设置文本的样式。
。。。。。。。。。
输入框大小
使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 自定义表单
Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
。。。。。。。。。
自定义复选框
如果要自定义一个复选框，可以设置 <div> 为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该 <div> 里头，然后复选框设置为 type="checkbox"，类为 .custom-control-input。
复选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配复选框的 id。
。。。。。。。。。
自定义单选框
如果要自定义一个单选框，可以设置 <div> 为父元素，类为 .custom-control 和 .custom-radio，复选框作为子元素放在该 <div> 里头，然后单选框设置为 type="radio"，类为 .custom-control-input。
单选框的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配单选框的 id。
。。。。。。。。。
自定义选择菜单
创建自定义选择菜单可以在 <select> 元素上添加 .custom-select 类，如果我们要设置自定义选择菜单大小，可以使用 .custom-select-sm、.custom-select-lg 来设置它们的大小:
。。。。。。。。。
自定义文件上传控件
我们可以在父元素添加 .custom-file 类，然后在 input 设置为 type="file" 并添加 .custom-control-label:
上传控件的文本使用 label 标签，标签使用 .custom-control-label 类，label 的 for 属性值需要匹配复选框的 id。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 轮播
轮播是一个循环的幻灯片
。。。。。。。。。
轮播图片上添加描述
在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本
。。。。。。。。。
.carousel，创建一个轮播
.carousel-indicators，为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
.carousel-inner，添加要切换的图片
.carousel-item，指定每个图片的内容
.carousel-control-prev，添加左侧的按钮，点击会返回上一张。
.carousel-control-next，添加右侧按钮，点击会切换到下一张。
.carousel-control-prev-icon，与 .carousel-control-prev 一起使用，设置左侧的按钮
.carousel-control-next-icon，与 .carousel-control-next 一起使用，设置右侧的按钮
.slide，切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 模态框
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。
。。。。。。。。
模态框尺寸
我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。
尺寸类放在 <div>元素的 .modal-dialog 类后
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 提示框
提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。
。。。。。。。。
如何创建提示框
通过向元素添加 data-toggle="tooltip" 来来创建提示框。
title 属性的内容为提示框显示的内容
注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。
。。。。。。。。
指定提示框的位置
默认情况下提示框显示在元素上方。
可以使用 data-placement 属性来设定提示框显示的方向: top， bottom， left， right
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 弹出框
弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。
。。。。。。。。
如何创建弹出框
通过向元素添加 data-toggle="popover" 来来创建弹出框。
title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容
注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法。
。。。。。。。。
指定弹出框的位置
默认情况下弹出框显示在元素右侧。
可以使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right
。。。。。。。。
关闭弹出框
默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框
提示：如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 "hover"
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 滚动监听(Scrollspy)
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。
。。。。。。。。
如何创建滚动监听
向您想要监听的元素（通常是 body）添加 data-spy="scroll" 。
然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。
注意可滚动项元素上的 id （<div id="section1">） 必须匹配导航栏上的链接选项 （<a href="#section1">)。
可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。
设置相对定位: 使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 小工具
Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。
。。。。。。。。
边框
使用 border 类可以添加或移除边框，top，left，bottom，right
。。。。。。。。
边框颜色
Bootstrap4 提供了一些类来设置边框颜色
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light
border-dark
border-white
。。。。。。。。
浮动
.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动
。。。。。。。。
响应式浮动
我们看可以设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小
。。。。。。。。
居中对齐
使用 .mx-auto 类来设置居中对齐
。。。。。。。。
宽度
元素上使用 w-* 类 (.w-25, .w-50, .w-75, .w-100, .mw(最大宽度)-100) 来设置宽度
。。。。。。。。
高度
元素上使用 h-* 类 (.h-25, .h-50, .h-75, .h-100, .mh(最大高度)-100) 来设置高度
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 Flex（弹性）布局
Bootstrap 4 通过 flex 类来控制页面的布局。
弹性盒子(flexbox)
Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。
弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。
创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类
。。。。。。。。
水平方向
.flex-row 可以设置弹性子元素水平显示，这是默认的。
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
。。。。。。。。
垂直方向
.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素
。。。。。。。。
内容排列
.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around
。。。。。。。。
等宽
.flex-fill 类强制设置各个弹性子元素的宽度是一样的
。。。。。。。。
扩展
.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。提示: 使用 .flex-shrink-1 用于设置子元素的收缩规则。
。。。。。。。。
排序
.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前)
。。。。。。。。
外边距
.mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;，.ml-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto!important;:
。。。。。。。。
包裹
弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse。设置 flex 容器是单行或者多行。
。。。。。。。。
内容对齐
我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
这些类在只有一行的弹性子元素中是无效的。
。。。。。。。。
子元素对齐
如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。
。。。。。。。。
指定子元素对齐
如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。
。。。。。。。。
响应式 flex 类
我们可以根据不同的设备，设置 flex 类，从而实现页面响应式布局，以下有 * 号可以的值有：sm, md, lg 或 xl, 对应的是小型设备、中型设备，大型设备，超大型设备。
弹性容器：
.d-*-flex，根据不同的屏幕设备创建弹性盒子容器
.d-*-inline-flex，根据不同的屏幕设备创建行内弹性盒子容器
方向：
.flex-*-row，根据不同的屏幕设备在水平方向显示弹性子元素
.flex-*-row-reverse，根据不同的屏幕设备在水平方向显示弹性子元素，且右对齐
.flex-*-column，根据不同的屏幕设备在垂直方向显示弹性子元素
.flex-*-column-reverse，根据不同的屏幕设备在垂直方向显示弹性子元素，且方向相反
内容对齐：
.justify-content-*-start，根据不同屏幕设备在开始位置显示弹性子元素 (左对齐)
.justify-content-*-end，根据不同屏幕设备在尾部显示弹性子元素 (右对齐)
.justify-content-*-center，根据不同屏幕设备在 flex 容器中居中显示子元素
.justify-content-*-between，根据不同屏幕设备使用 "between" 显示弹性子元素
.justify-content-*-around，根据不同屏幕设备使用 "around" 显示弹性子元素
等宽：
.flex-*-fill，根据不同的屏幕设备强制等宽
扩展：
.flex-*-grow-0，不同的屏幕设备不设置扩展
.flex-*-grow-1，不同的屏幕设备设置扩展
收缩：
.flex-*-shrink-0，不同的屏幕设备不设置收缩
.flex-*-shrink-1，不同的屏幕设备设置收缩
包裹：
.flex-*-nowrap，不同的屏幕设备不设置包裹元素
.flex-*-wrap，不同的屏幕设备设置包裹元素
.flex-*-wrap-reverse，不同的屏幕设备反转包裹元素
内容排列：
.align-content-*-start，根据不同屏幕设备在起始位置堆叠元素
.align-content-*-end ，根据不同屏幕设备在结束位置堆叠元素
.align-content-*-center， 根据不同屏幕设备在中间位置堆叠元素
.align-content-*-around，根据不同屏幕设备，使用 "around" 堆叠元素
.align-content-*-stretch，根据不同屏幕设备，通过伸展元素来堆叠
元素对齐：
.align-items-*-start，根据不同屏幕设备，让元素在头部显示在同一行。
.align-items-*-end，根据不同屏幕设备，让元素在尾部显示在同一行。
.align-items-*-center，根据不同屏幕设备，让元素在中间位置显示在同一行。
.align-items-*-baseline，根据不同屏幕设备，让元素在基线上显示在同一行。
.align-items-*-stretch，根据不同屏幕设备，让元素延展高度并显示在同一行。
单独一个子元素的对齐方式：
.align-self-*-start，据不同屏幕设备，让单独一个子元素显示在头部。
.align-self-*-end，据不同屏幕设备，让单独一个子元素显示在尾部
.align-self-*-center，据不同屏幕设备，让单独一个子元素显示在居中位置
.align-self-*-baseline，据不同屏幕设备，让单独一个子元素显示在基线位置
.align-self-*-stretch，据不同屏幕设备，延展一个单独子元素
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 多媒体对象
Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。应用场景有博客评论、微博等:
。。。。。。。。。
基础多媒体对象
要创建一个多媒体对象，可以在容器元素上添加 .media 类，然后将多媒体内容放到子容器上，子容器需要添加 .media-body 类，然后添加外边距，内边距等效果
。。。。。。。。。
多媒体对象嵌套
多媒体对象可以多个嵌套（一个多媒体对象中包含另外一个多媒体对象）
要嵌套多媒体对象，可以把新的 .media 容器放到 .media-body 容器中
。。。。。。。。。
多媒体对象图片显示在右边
如果你想将头像图片显示在右侧，可以在 .media-body 容器后添加图片
。。。。。。。。。
定位多媒体图片位置
我们可以使用 align-self-* 相关类来设置多媒体对象的图片显示位置
来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/31552074/viewspace-2215048/，如需转载，请注明出处，否则将追究法律责任。
转载于:http://blog.itpub.net/31552074/viewspace-2215048/
1105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
