简介

中文官网：https://www.bootcss.com/

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

回答了两个问题：

1. 是什么：前端开发框架
2. 为什么：让web开发更迅速、简单
   

历史/版本

最早是twitter的两名工程师开发并开源的……

Bootstrap2：立足于PC端，兼顾移动端，纯桌面项目可能仍然在使用

Bootstrap3：立足于移动端，兼顾PC端，sample.17bang使用

Bootstrap4：教学使用，和Bootstrap3相比

• 更加面向CSS标准，不再兼容老式浏览器，比如IE6、IE7……
• 使用flex布局
• 其他一些调整/改进
  

Bootstrap5：最新版本，等子弹再飞一会

下载/安装

本质上，前端的CSS（以及Javascript）框架/类库，最终都是.css和.js文件，和我们自己创建的这些文件，没有本质区别。我们只需要直接在HTML页面中（通过CDN地址）引入即可使用。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"……
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"…… 

演示：查看/使用bootstrap.min.css中定义的元素和类选择器

<button class="btn btn-block btn-danger">源栈</button>
<hr />

注意：

• integrity是一个用于确保下载资源完整性的hash值，但是测试时发现有问题，需要去掉……
• 选择器智能提示需要安装VS Code插件
  

CDN引入可以直接用于生产环境，但为了演示/教学，我们也可以将其先下载到本地：

编译和压缩

CSS文档上说，可以分别下载：

• 经过编译并立即可用的文件
• 源文件

啥意思呢？

编译：.scss文件

bootstrap在（框架）开发过程中，使用了sass技术，一种“专业级CSS扩展语言”，可以：

• 使用.scss文件
• 在编写css代码时可以使用$符号来标识变量：

  .alert {
    padding: $alert-padding-y $alert-padding-x;

利用Sass，可以在CSS开发中设置/使用变量、进行运算等。

@想一想@：为什么要这样做呢？

比如我们要在很多地方、为很多元素设置同一个margin-top值20px，现目前我们的办法只能是：

• 在开发中，记着这个值，不要写错了哟！
• 那如果说以后我要把这所有的20px改成15px呢？你怎么办？一个一个的找，一个一个的改？

所以，我们定义一个变量，比如$max-margin-top，给它一个值，比如：$max-margin-top: 20px。然后所有需要进行css设置的地方都适用这个变量：

• 不是：margin-top:20px
• 而是：margin-top: $max-margin-top

那么，在开发中我不需要记这里究竟是20px还是15px，以后维护/修改的时候，要把20px改成15px，也只需要修改$max-margin-top: 15px即可。

此外，使用变量，还可以进行加减乘除等运算，比如：margin-bottom: $max-margin-top+5px……

但浏览器不能识别Sass，所以用Sass开发完成之后，还需要将其“转换”（Sass将其称之为“编译”）成css语法格式的代码。

压缩：.min文件

为了减少下载时的流量消耗，可以把.css（以及.js）文件中的：

• 空格、换行、注释（如果需要的话）去掉
• 变量名简写（js）

得到一个对应的.min文件

还原：.map文件

但我们在F12调试的时候，哪怕只是简单的引入了.min文件，却仍然能够看到未编译未压缩的源代码（演示）

这是为什么呢？因为.map（映射）文件记录了：

• 如何找到对应的源文件
• 简写变量名和原变量名之间如何映射，等等

PS：另外，bootstrap还使用了Autoprefixer 进行浏览器兼容性调整。

我们可以把下载下来的文件直接复制粘贴到项目中，也可以根据不同的IDE使用“逼格”更高一点的操作：

VS Code

使用npm安装，Ctrl+Shift+·打开Terminal

npm install bootstrap@4.6.1

@4.6.1指定版本号，默认为最新版本。

会将bootstrap所有文件（含源代码）存放在/node_module/bootstrap下（演示）

Visual Studio

在创建ASP.NET项目时，默认自带了bootstrap，其位于：

• core：wwwroot\lib\bootstrap文件夹下
  

  

• Framework（使用VS2019创建）：
  
  • css文件放在\Content下
  • js文件放在\Scripts下

开箱即用，而且只有编译后（dist）文件。

eclipse

就下载后复制粘贴吧，^_^

布局：格栅

bootstrap-grid.css：用于bootstrap栅格系统布局的css部分内容

基本应用

将页面划分为：

• container：一个容器里面可以有多行
• row：一行里面可以有多列
• col：最多12列，超出部分换行

注意：container和row联合使用，才能让row占满整个container（演示：container和row的margin/padding设置）

<div class="container">
    <div class="row">

列可以：

• 合并宽度：
  

  <div class="col-2">col-2</div>
  <div class="col-4">col-4</div>
  <div class="col-6">col-6</div>

• 偏移（但不是右对齐）

  <div class="offset-4">col-6</div>

还可以在row中指定其中每一列的宽度：

<div class="row row-cols-3">

每一列占row宽度的1/3。

底层实现

v4开始，广泛的使用了flex布局。

演示：.row中display: flex;

所以要注意：

• row和col之间不能有额外的嵌套，会崩：

  <div class="row">
      <div>
          <div class="col-2">col-2</div>
          <div class="col-6">col-6</div>
      </div>
  </div>

• 要想右对齐，需要使用：margin-left：auto
  

PS：v3使用的是float

响应式@media

首先，col-*-[1,9]中*可以使用：sm，md，lg和xl（响应式变量/动，Responsive variations），指定当屏幕宽度大于某px时适用的范围，详见文档：

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
# of columns	12
Gutter width	30px (15px on each side of a column)

然后，多种类样式可以混用：

<div class="row">
    <div class="col-sm-4 col-lg-2 offset-lg-2">col-2</div>
    <div class="col-sm-8 col-lg-6 ">col-6</div>
</div>

最后，除了col-*，v4开始，sm/md/lg/xl也可以使用：container-*和row-col-*上了。

底层实现

F12演示：bootstrap中的@media使用……

不仅仅是格栅，其他地方也有用到

页面内容

reboot

bootstrap-reboot.css：为bootstrap的开发提供一个“基本盘”，类似于“清场”作用的代码。

但是，bootstrap.css已经合并了reboot和之前的grid，我们通常只需要直接引用bootstrap.css即可：

<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css" >

排版

学习和体会：

• 合理的使用语义标签，比如：mark、small、strong、del……
• 意义清晰的类命名：display-*、lead……

列表（list）也放在了这一章节。

自学学会：

• dl > dt, dd元素
• 文本溢出截断后加“...”：

  text-overflow: ellipsis;

画像和图片

响应式

• 类名：img-fluid
  
• 原理：将 max-width: 100%; 和 height: auto;

thumbnail：加圆角边框和padding

包裹HTML元素picture和figure

其他参考工具类的：边框（圆角/圆）和 对齐

表格

#学习体会#：

• 只在table上声明一个类，就可以设定其下所有tr、th、td等元素样式：善用选择器组合
• 多个类“层层递进”的组合使用

  <table class="table table-hover">

• hover不仅仅可用于a标签，这里还用于tr

仍然要注意：HTML元素固定的嵌套结构

v4引入了响应式，决定何时生成滚动条。

工具类utility

通常是将单个不变的 CSS 属性包装成一个类（class）（例如，.d-block代表的是display: block;）

按文档讲解，作用是：当你想使用某种样式的时候，优先考虑bootstrap里内置的类。

颜色和文字

border

文档有

• 一个错误，应先指定使用border，然后再指定哪一边不用border

  <span class="border border-top-0">border-top-0</span>

• 一个疏漏，可以同时指定使用多条border

  <span class="border-top border-bottom">border-right-0</span>
  

尺寸、间隔和溢出

记住首字母就OK了。

尺寸是相对父元素：

• w：width
• h：height
• v：viewport
• m：max

后面数字代表百分比

间隔包括内外边距：

• m：margin
• p：padding
• t：top
• l：left
• r：right
• b：bottom
• n：negative（负数）

后接数字，以$spacer(默认1rem)为基数按比例换算。

flex和对齐

演示：了解文档中的bd-highlight

区分：flex中item的对齐，和inline/table中文本的对齐

浮动和定位

清除浮动clearfix：复习伪元素

Display和可见性

display：响应式的显示和隐藏

对比：invisible

其他：阴影/关闭按钮/sr-only……

源栈学历

在当前系列 Bootstrap和JQuery 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：