Bootstrap应用核心

 Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。它不是单一的CSS或JavaScript框架，而是完整的HTML、CSS、JavaScript框架，你能够仅经过Bootstrap简单、快速的开发移动设备优先的响应式布局页面和应用。

 

一　　Bootstrap简介

 

　　1，bootstrap文件目录

　　你能够在Bootstrap官网，下载不一样版本的文件包，如今最新的版本是4.3.x。解压文件后有两个子文件夹，CSS和JS，他们的目录以下：

　　　　　　　

　　全部文件都有普通版和压缩版。.min的便是压缩版，去除了空白字符等，使文件更小。.map是Source map文件，须要特定的工具才可使用。关于Source map文件详细状况能够参考这里阮一峰博客。或戳这里。

　　bootstrap.css是Bootstrap的核心CSS文件，通常根据须要选择bootstrap.css或bootstrap.min.css便可。bootstrap-grid.css是Bootstrap提供的单独使用其栅格系统的CSS文件。bootstrap.reboot.css则仅作引导（初始化）文件使用。核心CSS文件包含了grid和reboot文件。

 　　bootstrap.js是Bootstrap提供的核心JS文件，而bootstrap.bundle.js与bootstrap.js相比，新增了Pooper.js，根据须要选择你须要的JS文件便可。pooper.js主要用于元素定位，详情能够查看https://popper.js.org/。

 　　

　　2，文件引入

 　　你能够经过两种方式引入bootstrap框架，本地和CDN。

　　CSS引入以下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 为了实现移动设备优先，你应该有以上meta标签 --> <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">

　　JS引入：

1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
2 <!-- bootstrap依然基于jQuery，并非像前两年网上有些人吹的那样，bootstrap将放弃jQuery。因此你必须优先引入jQuery -->
3 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
4 <!-- popper.js单独引入 -->
5 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
6 <!-- bootstrap.js单独引入 -->

　　

　　3，初始化CSS

　　Bootstrap尽可能使用rem为单位，以得到不一样尺寸屏幕上都可以得到更好的显示比例。

　　Bootstrap移除了大多数元素的margin-top属性，减小margin折叠（塌陷）。

　　Bootstrap把全部元素的box-sizing属性都设置为border-box，防止padding和border使盒子变形。

　　Bootstrap把html元素的font-size重置为16px，body设置为1rem，其余元素尽可能使用inherit值继承font-size属性。

　　Bootstrap把标题的margin-bottom重置为0.5rem，段落的margin-bottom重置为1rem。

　　Bootstrap使用用户系统自带的字体，而不是硬性规定。

 

　　4，浏览器兼容性

　　Bootstrap支持全部主流浏览器的较新版，包括使用WebKit，Blink或Gecko内核的第三方浏览器（好比360，世界之窗，QQ浏览器等）。

　　对于IE浏览器，很遗憾，官方推荐使用IE10及以后的版本。若是你但愿在IE10之前的版本上运行Bootstrap开发的网页或应用，那么你可能须要使用Bootstrap 3.x或之前版本。

 

二　　栅格系统

　　Bootstratp把网页划分红一个个网格，每一行有12列，根据须要能够设置多行。在一行中，经过flex布局实现每一列占用的空间自适应。经过Bootstrap提供的栅格系统，咱们能够轻松知足各类形状和尺寸的布局。

　　

　　1，启用栅格系统

　　Bootstrap经过.container或.container-fluid类启用bootstrap的栅格系统，该类一般添加在第一祖先元素上，理论上.container能够相互嵌套，但不建议这么作。.container设置元素左右有固定的15px padding，左右自适应margin，从而居中显示元素。

1 <div class="container"></div>
2 <!-- 启用栅格系统就这么简单 -->

　　与之对应的.container-fluid类则使用100%，尽可能占满其父元素内的可用宽度，用的较少。

1 <div class="container-fluid"></div>

　　

　　2，行与列

　　Bootstrap经过.row来新增一行，.row采用最新的flex布局。同一行中你能够添加最多12列，.col-*表示一列，每一列在水平方向上都有30px padding，而且都使用百分比定义宽度，因此它们老是流式的呈现，并随父元素宽度的变化而变化。

1 <div class="container">
2     <div class="row">
3         <div class="col-*"></div>
4     </div>
5 </div>

　　请注意，在栅格系统中，只有.col-*是合法的.row的直接子元素，.row的直接子元素不能是其余任何内容，不然可能会破坏整个栅格系统，带来意想不到的结果。

　　你能够直接用1 -- 12 的数字代替.col-*后面的星号，表示但愿该列占用的宽度。若是你想让每一列均分宽度，你能够直接设置.col，或设置相同的数字（12除以列数）。

1 <div class="container">
2     <div class="row">
3         <div class="col-8">我大概占66.7%</div>
4         <div class="col-4">我大概占33.3%</div>
5     </div>
6 </div>

　　若是每一行中列的数字之和大于12，那么超出的部分将换行，你虽然能够在换行的位置插入一个.w-100实现多行，但咱们不建议这样作。若是确实须要换行，建议新增一个.row。

1 <div class="row">
2   <div class="col-8">col</div>
3   <div class="w-100"></div>
4   <div class="col-8">col</div>
5 </div>

　　

　　3，屏幕断点

　　Bootstrap为了适应不一样尺寸的屏幕，利用CSS媒体查询功能，对不一样尺寸的屏幕作了断点设置。其中前缀xl表明超大屏幕（大屏），lg表明大屏幕（普通显示器），md表明中等屏幕（较小显示器），sm表明小屏幕（pad），无前缀则表明超小屏幕（手机）。

	超小屏幕 (新增规格)<576px	小屏幕 次小屏≥576px	中等屏幕 窄屏≥768px	大屏幕 桌面显示器≥992px	超大屏幕 大桌面显示器≥1200px
.container 最大宽度	None (auto)	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

　　bootstrap断点的特色是：若是把列的宽度设置在某一断点上，那么屏幕宽度大于或等于该断点值的设备都会被应用该设置，而小于该断点值的设备将不会被应用。根据这个特色，咱们能够只定义一个屏幕尺寸，便可以向上覆盖全部尺寸的设备。

1 <div class="row">
2   <div class="col">col</div>
3   <div class="col">col</div>
4 </div>
5 <div class="row">
6   <div class="col-8">col-8</div>
7   <div class="col-4">col-4</div>
8 </div>

　　

　　4，混合使用屏幕断点

　　若是你想让同一个网页在不一样尺寸的设备上有不一样的表现，那么你能够混合使用bootstrap的屏幕断点。

1 <div class="row">
2     <div class="col-12 col-md-8"></div>
3     <div class="col-6 col-md-4"></div>
4     <!-- 在超小屏幕上一列全宽，一列半宽，其余尺寸则以8：4的比例呈现 -->
5 </div>

　　

　　5，对齐

　　在.row行上使用.align-items-*能够方便的控制行在容器内的垂直方向上的对齐方式。在.col-*列上使用.align-self-*控制列在水平方向上的对齐方式。

 1 <div class="container">
 2     <div class="row align-items-start">
 3         <div class="col align-self-start">
 4  第一列  5         </div>
 6         <div class="col align-self-center">
 7  第二列  8         </div>
 9         <div class="col align-self-end">
10  第三列 11     </div>
12 </div>
13 <!-- align-items-start：上对齐；align-items-center：中对齐；align-items-end：下对齐 -->
14 <!-- align-self-start：左对齐；align-self-center：居中对齐；align-self-end：右对齐>

　　因为Bootstrap栅格系统基于flex实现，因此你还能够在.row行上使用justify-content-*来规定.col-*列在水平方向上的对齐方式（justify-content实际是flex布局中使用的属性，用来规定内容块在主轴方向的分布）。flex布局请戳这里《CSS定位与布局》4.4。

1 <div class="container">
2     <div class="row justify-content-start">
3     <div class="row justify-content-center">
4     <div class="row justify-content-end">
5     <div class="row justify-content-around">
6     <div class="row justify-content-between">
7 </div>
8 <!-- 他们依次表示左对齐，居中，右对齐，内容块间隔相等，两端对齐 -->

 

　　6，清除间隙

　　咱们知道，bootstrap的行和列水平方向上都有30px的padding值，若是你不但愿它存在，bootstrap提供了.no-gutters类。

1 <div class="container no-gutters">
2     <div class="row">
3         <div class="col"></div>
4     </div>
5 </div>
6 <!-- 放在.container上清楚行和列的padding，放在.row上则只清楚列的padding -->

　　

　　7，列的重排序

　　默认情况下，列会根据代码编写顺序依次呈现，基于flex，bootstrap提供了.order-*来自定义显示顺序，星号能够是1 -- 12的数字，数字越小，显示优先级越高。

 1 <div class="container">
 2   <div class="row">
 3     <div class="col">
 4  未定义序号，位置不变。  5     </div>
 6     <div class="col order-12">
 7  12号排最后。  8     </div>
 9     <div class="col order-1">
10  1号排在12号以前 11     </div>
12   </div>
13 </div>
14 <!-- 重排序的元素只能在他们之间确立优先级，而不能影响为重排序的元素 -->

　　若是你临时起意，在行的末尾新增了一列，又想让它优先显示，那么你可使用.order-first。

 

三　　CSS基础样式

　　Bootstrap初始化了不少CSS样式，使咱们拥有了一个简洁的、优雅的页面基础。基本的HTML元素均经过添加class设置样式并获得加强效果；还有先进的栅格系统用于页面布局。

　　

　　1，标题和段落

　　Bootstrap从新定义了基本的全局显示、排版、以及连接样式。

　　首先是标题，你能够直接使用新的h1 -- h6标签，或给标题标签设置.display-1 -- .display-4类，以获取更大的显示效果。也可使用.h1 -- .h6 class属性呈现标题样式。固然，那样并不符合web语义化规范。

1 <h1 class="display-2">
2  我是 bootstrap h1 3     <small class="text-muted">我是副标题</small>
4 </h1>
5 <p class="h1">我是拥有bootstrap h1 样式的p</p>

　　你还能够经过small标签来添加副标题，经过添加.text-muted类让副标题的颜色更浅一点。

　　其次是段落，你能够经过.lead样式来突出显示部份内容。.text-right或。text-center设置文本右对齐或居中。.text-truncate能够在文本容器宽度不足时显示省略号。

1 <p class="lead text-right text-truncate">我很重要我很重要。。。（不少内容）</p>

　　对footer使用.blockquote-footer来得到更好的引用备注效果。

1 <blockquote class="blockquote">
2   <p>爱上一个地方，就应该背上包去旅游，走得更远。</p>
3   <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
4 </blockquote>

　　.list-inline清除列表样式和左边距，.list-inline-item则把列表元素设置为行类块级元素。配合使用可使列表横向展现。

1 <ul class="list-inline">
2   <li class="list-inline-item">列表一</li>
3   <li class="list-inline-item">列表二</li>
4   <li class="list-inline-item">列表三</li>
5 </ul>

　　

　　2，图片和表格

　　Bootstrap经过.img-fluid实现图片响应式特征，图片大小会随着父元素大小同步缩放。使用.img-thumbnail装饰图片，实现缩略图效果，实际就是加了个边框和一点padding。

1 <img src="url" alt="..." class=" img-fluid img-thumbnail">

　　Bootstrap经过.table从新定义了表格的基本样式，你能够经过.table-dark来实现表格背景和文字颜色的反转效果。经过.table-striped实现条纹状表格。

1 <table class="table table-dark table-striped">
2 </table>

　　若是只是想对表头作一些改变，那么你可使用.thead-light或.thead-dark让表头背景呈现浅黑色或深灰色。

1 <table class="table">
2   <thead class="thead-linght">
3   </thead>
4 </table>

　　另外，你还能够经过.table-bordered或.table-borderless来设置或取消表格的边框。经过.table-hover产生鼠标悬停效果。

1 1 <table class="table table-bordered table-hover">
2 2 </table>

　　

　　3，文本

　　使用text-*的方式规定文本对齐方式，星号的取值能够是任意text-align属性的可选值。另外，你还能够经过text-sm-*、text-lg-*等来建立响应式的字体对齐方式。

1 <p class="text-right">右对齐</p>
2 <p class="text-sm-left">在sm及以上的屏幕显示为左对齐</p>

　　另外，你能够在文本上应用的样式有：.text-wrap（可换行），.text-nowrap（不可换行），.text-truncate（超出文本显示省略号），.text-lowercase（转换为小写），.text-uppercase（转换为大写），.text-capitalize（单词首字大写），.text-decoration-none（清楚装饰）等等。

　　

　　4，颜色

　　Bootstrap经过主题颜色来传达一些信息，包括元素的不一样状态。

 1 <p><a href="#" class="text-primary">重要的</a></p>
 2 <p><a href="#" class="text-secondary">次要的</a></p>
 3 <p><a href="#" class="text-success">成功的</a></p>
 4 <p><a href="#" class="text-danger">危险的</a></p>
 5 <p><a href="#" class="text-warning">警告的</a></p>
 6 <p><a href="#" class="text-info">信号的</a></p>
 7 <p><a href="#" class="text-light bg-dark">高亮的</a></p>
 8 <p><a href="#" class="text-dark">暗沉的</a></p>
 9 <p><a href="#" class="text-muted">暗淡的</a></p>
10 <p><a href="#" class="text-white bg-dark">白色的</a></p>

　　一样的，背景颜色也是相似的经过主题颜色在不一样的场景传递不一样的信息。不过背景颜色是经过bg-*d的方式。

　　

　　5，显示模式

　　Bootstrap经过.d-*的方式制定元素显示模式。经过.d-none隐藏元素。

1 <div class="d-inline">我变成行内元素了</div>
2 <div class="d-none">我被隐藏了</div>
3 <!-- 星号的取值能够是：inline，inline-block，block，table，table-cell，table-row，flex，inline-flex -->

　　同时你也能够指定响应式的显示模式。

1 <div class=".d-sm-none .d-md-block">在sm屏幕上隐藏，其余的都显示</div>
2 <div class=".d-block .d-sm-none">只在xs屏幕上可见</div>

　　

　　6，浮动与清除

　　Bootstrap经过.float-*来设置元素浮动，你固然也能够经过.float-*-*来指定响应式的浮动规则。

1 <div class="float-sm-left">在sm屏幕上左浮动</div><br>
2 <div class="float-md-left">在md屏幕上左浮动</div>

　　清楚浮动bootstrap只提供了一种方式.clearfix：经过伪元素实现清除浮动。

1 <div class="clearfix">
2     <div class="float-left">左浮动</div>
3 </div>

 

四　　功能组件

　　Bootstrap提供了无数能够复用的组件，包括字体图标、下拉菜单、导航、警告条、弹出框等更多功能。

　　

　　1，警告提示

　　警告框组件经过提供一些灵活的预约义消息，为常见的用户动做提供常见的上下反馈消息和提示。首先你应该指定元素的.alert类，而后再根据警报种类（主题）选择合适的颜色控件。

1 <div class="alert alert-primary"></div>
2 <div class="alert alert-secondary"></div>
3 <div class="alert alert-success"></div>
4 <div class="alert alert-danger"></div>
5 <div class="alert alert-warning"></div>
6 <div class="alert alert-info"></div>
7 <div class="alert alert-light"></div>
8 <div class="alert alert-dark"></div>
9 <!-- 警报其实是一组颜色控件，共八种-->

 

　　2，标识

　　Bootstrap经过.badge来实现标识信息，标识也能够经过.badge-*来指出特定的主题信息。

1 <h1>用于标题<span class="badge badge-pramiry">New</span></h1>
2 <button>用于按钮 <span class="badge badge-secondary">2</span></button>
3 <a>用于连接<span class="badge badge-warning"></span></a>

　　你还能够经过.badge-pill得到更大的圆角，这会使元素看起来像椭圆形的。

 

　　3，痕迹导航

　　在经过BootStrap的内置CSS样式，自动添加分隔符、并呈现导航层次和网页结构结构，从而指示当前页面的位置为用户提供优秀用户体验。

1 <nav>
2   <ol class="breadcrumb">
3     <li class="breadcrumb-item"><a href="#">Home</a></li>
4     <li class="breadcrumb-item active" aria-current="page">Library</li>
5   </ol>
6 </nav>
7 <!-- 经过.breadcrumb设置导航栏， .breadcrumb-item设置子选项，.active设置当前活动选项-->

 

　　4，按钮

　　Bootstrap自定义了按钮样式，并普遍用于表单、对话框等场景中的操做，并支持多种大小和状态。Bootstrap包括多个预约义的按钮样式，每一个样式都有本身的语义目的。

1 <button type="button" class="btn btn-primary">Primary</button>
2 <button type="button" class="btn btn-secondary">Secondary</button>
3 <button type="button" class="btn btn-success">Success</button>
4 <button type="button" class="btn btn-danger">Danger</button>
5 ...
<!-- 你也能够在input标签上应用这些样式 -->

　　若是你不喜欢带有背景颜色的按钮，你可使用.btn-outline-*来构建轮廓按钮（只有一个带圆角的边框）。

1 <button type="button" class="btn btn-outline-primary">Primary</button>
2 <button type="button" class="btn btn-outline-secondary">Secondary</button>
3 <button type="button" class="btn btn-outline-success">Success</button>
4 <button type="button" class="btn btn-outline-danger">Danger</button>
5 ...

　　此外，你还能够经过.btn-lg、.btn-sm来建立更大或更小的按钮，disabled属性或.active类来定义按钮是禁用状态或启用状态。

　　

　　5，下拉菜单

　　下拉菜单是网页开发常常永达ode一个组件，经过bootstrap便可轻松实现。

 1 <div class="dropdown">
 2     <button class="btn btn-success btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
 3  下拉按钮  4     </button>
 5     <div class="dropdown-menu">
 6       <h6 class="dropdown-header">HTML</h6>
 7         <a class="dropdown-item active" href="#">CSS</a>
 8         <a class="dropdown-item" disabled href="#">JavaScript</a>
 9         <div class="dropdown-divider"></div>
10         <a class="dropdown-item" href="#">其余</a>
11     </div>
12 </div>

　　经过.drop*建立一个下拉菜单，*是一个方位名词，能够是top，down，left，right其中一个，表示菜单将出如今什么方位。按钮上你能够经过.btn-*来设置按钮大小、主题颜色等，dropdown-toggle生成一个三角形小图标。使用下拉菜单时，data-toggle="dropdown"是必须的属性。

　　经过.dropdown-menu设置菜单，.dropdown-header设置菜单标题，.dropdown-item设置菜单项，.dropdown-divider建立分割线。

　　

　　6，进度条

　　Bootstrap进度条没有使用HTML5的<progress>实现，而是经过两个div和一些类实现。

1 <div class="progress">
2   <div class="progress-bar progress-bar-striped" style="width:20%">20%</div>
3 </div>

　　经过.progress建立进度条的底，.progress-bar表示当前进度，style设置当前进度值。你还能够经过。.progress-bar-striped给当前进度添加条纹样式，若是你在当前进度div中添加了文本，那么它将展现在进度条上。

　　若是你不须要这些复杂的玩意儿，那么使用HTML5的<progress>标签或许才是更好的选择。

 

　　8，加载特效

　　bootstrap实现了两种加载特效，圆形旋转和圆形渐变气泡。

1 <div class="spinner-border spinner-border-lg text-success" role="status">
2     <span class="sr-only">Loading...</span>
3 </div>
4 <button>
5     <div class="spinner-grow spinner-grow-sm text-danger" role="status">
6     <span class="sr-only"></span>
7 </div>
8 loading... 9 </button>

　　圆形旋转特效经过.spinner-border建立边框和动画效果，.spinner-border-*设置大小，.text-*设置主题颜色。

　　圆形渐变气泡经过spinner-grow建立，其他和旋转同样。

　　

　　9，其余

　　更多可复用的组件，因为篇幅有限，请查看官方文档。

 

五　　Jquery插件

　　Bootstrap自带了许多jQuery插件，这极大的丰富了bootstrap的功能，因此若是你须要用到这些插件，并不须要额外的代码，直接引入bootstrap.min.js便可。

　　Bootstrap许多插件均可以经过HTML标签的data-*属性触发，这也应该是你首选的方式。另外，Bootstrap也提供了仅使用JavaScript（实际是经过jQuery）来使用插件的方式。

　　虽然Bootstrap提供了许多JS插件和CSS组件，但实际工做中可能用的并很少，我的认为Bootstrap的核心和优点彻底在于其栅格系统，其余的做简单了解便可。

　　

　　写在最后：通常，公司开发不太可能只依赖Bootstrap或其余某一单一库或框架，即便它功能很是强大。实际开发过程当中，遇到的可能UI，数据，交互等都采用更有针对性的库或框架，稍有实力的公司甚至有本身内部开发的专用框架。因此，很遗憾，这里没有继续讲解更多关于bootstrap组件库的信息。若是你确实有兴趣或正在使用，请移步Bootstrap中文网继续学习。