Bootstrap 基础

1. Bootstrap 简介

1.1. 什么是 Bootstrap

  • Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。它简洁灵活，使得 Web 开发更加快捷。
  • 前端框架：用于制作表示层，直接面向用户的这一层，已经定义好了大量的class类样式。直接使用这些类样式既可。还对HTML中所有的标签都进行了重新的样式定义。
  • 基于技术：HTML、CSS 和 JavaScript。

    1.2. 使用Bootstrap的优势

  1. 移动设备优先，自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。手机上只要有浏览器，开发的程序，既可以运行在电脑上，也可以运行在手机或平板电脑上。
  2. 浏览器支持：支持几乎所有的主流的浏览器
  3. 容易上手：标准化的html+css编码规范，只要有HTML和CSS的基础就可以学习这个框架。
  4. 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。可以根据设备的宽度来自动适配页面的宽度，对页面进行缩放。
  5. 提供了一套简洁、直观、强悍的组件
  6. 有自己的生态圈，不断的更新迭代
  7. 让开发更简单，提高了开发的效率

四类屏幕：

概念：一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

1.4. 版本

  • 2.x.x：停止维护，兼容性好，代码不够简洁，功能不够完善。
  • 3.x.x：目前使用最多，稳定，但是放弃了支持 IE6-IE7。对 IE8 支持但是界面效果不好，偏向用于开发响应式布局、移动设备优先的 WEB 项目。

  • 4.x.x：最新版，目前还不是很流行

    2. Bootstrap 使用

    框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

    2.1. Bootstrap 官网与下载

  • 中文官网：http://www.bootcss.com/

  • 开发的时候，结合API帮助文档来开发。
  • 官网：http://getbootstrap.com/

  • http://bootstrap.css88.com/

    2.2. Bootstrap 框架内容

  • 全局CSS：

  • 几乎已经将原本HTML中所有的标签的都重新定义了样式。
  • 设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；
  • 组件：
  • 无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
  • JavaScript 插件：
  • jQuery 插件为 Bootstrap 的组件赋予了“生命”。（在Bootstrap5之后，移除jQuery依赖关系）

2.3. Bootstrap 项目环境的搭建（重点）

2.3.1. Bootstrap 文件的目录结构

  1. bootstrap/
  2. ├─ css/  Bootstrap已经写好的全局的CSS样式
  3. │    ├── bootstrap.css
  4. │    ├── bootstrap.min.css  在页面上导入文件，压缩版
  5. │    ├── bootstrap-theme.css
  6. │    ├── bootstrap-theme.min.css
  7. ├─ js/ jQuery的插件，可以实现更强功能，包括一些自定义的属性。
  8. │    ├── bootstrap.js
  9. │    └── bootstrap.min.js  要导入的JS文件，基于jQuery，必须有jQuery支持
  10. └─ fonts/ 自定义的图标，如果需要在网页中使用图标，就需要导入这些文件
  11.     ├── glyphicons-halflings-regular.eot
  12.     ├── glyphicons-halflings-regular.svg
  13.     ├── glyphicons-halflings-regular.ttf
  14.     ├── glyphicons-halflings-regular.woff
  15.     ├── glyphicons-halflings-regular.woff2

注：fonts目录下的字体图标。每个图标下的文字是它的类名，如果要显示这些图标，对元素设置这些类名即可。
01-Bootstrap基础 - 图1

2.3.2. 创建Bootstrap文件的步骤

  1. 创建文件夹结构
  2. 创建 html 骨架结构，复制三个文件夹(css、fonts、js)的内容到项目目录下。（【后面版本已移除】） ``` <![endif]—>
  2. 3. 引入相关样式文件
  2. 4. 复制API文档“起步开始的模板”，代码复制到HTML中
  3. - 直接拿Bootstrap 预先定义好的样式来使用
  4. - 修改Bootstrap 原来的样式，注意权重问题
  5. - 学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
  8. #### 2.3.3. Bootstrap 文件导入及示例
  9. **导入三个文件及模板的详细解释**：

  1. 导入三个文件及模板示例：

<!DOCTYPE html>

Bootstrap模板

  1. ## 3. Bootstrap 全局 CSS 样式
  2. Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。
  3. ### 3.1. 布局容器
  4. Bootstrap 需要为页面内容和栅格系统包裹一个 `.container` 容器，它提供了两个作此用处的类。网页上所有的元素，都应该使用这2种容器，放在这两个容器内部
  6. | 
  7. 布局的两种容器的类样式名
  8.  | 说明
  9.  |
  10. | --- | --- |
  12. | 
  13. `.container`
  14.  | 响应式布局的容器。有固定宽度的容器，是一个 div 的类样式<br />在不同屏幕分辨率下有不同的固定宽度
  15.  |
  17. | 
  18. `.container-fluid`
  19.  | 流式布局容器，是一个 div 的类样式<br />容器的宽度始终是使用 100% 的方式显示，占据全部视口（viewport）
  20.  |
  24. > 宽度的划分：
  26. > - 大屏 (`>=1200px`) 宽度定为 1170px
  27. > - 中屏 (`>=992px`) 宽度定为 970px
  28. > - 小屏 (`>=768px`) 宽度定为 750px
  29. > - 超小屏 (100%)
  32. ### 3.2. 按钮
  33. #### 3.2.1. 普通按钮
  34. 设置属性`class="btn btn-default"`

链接

  1. ![](https://gitee.com/moonzero/images/raw/master/code-note/20211110092639069_18848.png)
  3. > **链接被作为按钮使用时的注意事项**
  5. > 如果 `<a>` 元素被作为按钮使用，并用于在当前页面触发某些功能，而不是用于链接其他页面或链接当前页面中的其他部分，必须设置 `role="button"` 属性。
  7. > **跨浏览器展现**。总结最佳实践是：强烈建议尽可能使用 `<button>` 元素来获得在各个浏览器上获得相匹配的绘制效果。
  10. #### 3.2.2. 预定义样式的按钮
  11. 可以快速创建一个带有预定义样式的按钮，设置属性`class="btn btn-xxx"`<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20211110093027793_11514.png)
  12. ### 3.3. 表格
  13. #### 3.3.1. 表格样式类
  14. 为任意 `<table>` 标签添加 `.table` 类可以为其赋予基本的样式
  16. | 
  17. 类名
  18.  | 表格的样式
  19.  |
  20. | --- | --- |
  22. | 
  23. `.table`
  24.  | 表格的基本实例
  25.  |
  27. | 
  28. `.table-striped`
  29.  | 给 `<tbody>` 之内的每一行增加斑马条纹样式  如果不想给表头增加的话，将表头写到`<thead></thead>`中
  30.  |
  32. | 
  33. `.table-bordered`
  34.  | 让表格和其中的每个单元格增加边框
  35.  |
  37. | 
  38. `.table-hover`
  39.  | 让 `<tbody>` 中的每一行对鼠标悬停状态作出响应
  40.  |
  42. | 
  43. `.table-condensed`
  44.  | 让表格更加紧凑，单元格中的内补（padding）均会减半
  45.  |
  48. 示例：
#### 3.3.2. 状态类 通过这些状态类可以为行或单元格设置颜色。定义在`<tr>`或`<td>`标签中 | Class | 描述 | | --- | --- | | `.active` | 鼠标悬停在行或单元格上时所设置的颜色(蓝色) | | `.success` | 标识成功或积极的动作(绿色) | | `.info` | 标识普通的提示信息或动作(浅蓝色) | | `.warning` | 标识警告或需要用户注意(黄色) | | `.danger` | 标识危险或潜在的带来负面影响的动作(红色) |……### 3.4. 表单 单独的表单控件会被自动赋予一些全局样式。 | 表单相关的样式 | 效果 | | --- | --- | | `.form-control` | 所有设置了 `.form-control` 类的`<input>`、`<textarea>`和`<select>`元素都将被默认设置宽度属性为 `width: 100%` | | `.form-group` | 将 label 元素和前面提到的控件包裹在 `.form-group` 中可以获得最好的排列。<br />每个label包裹的文字是可以点击，可以让后面的文本框获取焦点 | 注：**`<div class="form-group"></div>`包裹相关于表单中的一项，包含一个`<label>`和一个文本框`<input>`**<br />如果想点击文字选择选项设置label的for属性，值为文本框/单选框/复选框的id`<div class="container">`标签中，可以设置最大`style="max-width:100px;"`，可以得到一个固定最大宽度的容器，会根据分辨率大小缩放。 ### 3.5. 栅格系统（重点） #### 3.5.1. 栅格系统组成 栅格系统英文为“grid systems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。<br />Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为**最多12列**。<br />栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，内容就可以放入这些创建好的布局中。<br />**Bootstrap 栅格系统的特点** - “行（row）”必须包含在 `.container` （固定宽度）或 `.container-fluid` （100% 宽度）中，以便为其赋予合适的排列（aligment）和内间距（padding） - 通过“行（row）”在水平方向创建一组“列（column）” - 内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素 - 栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 `.col-xs-4` 来创建 - 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列 #### 3.5.2. 基本写法 | 类似于表格 | 栅格系统 | | --- | --- | | `table` | `.container`或`.container-fluid` | | `tr` | `.row` 一行 | | `td` | `.col-*-n`<br />`*`：一种设备，中等分辨率设备(xs/sm/md/lg)<br />`n`：表示占多少列(取值是：1-12) | #### 3.5.3. 栅格选项参数 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20211110103906784_11070.png) - 按照不同屏幕划分为1~12 等份 - 行（row） 可以去除父容器作用15px的边距 - `xs-extra small`：超小； `sm-small`：小； `md-medium`：中等； `lg-large`：大； - 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列 - 每一列默认有左右15像素的 padding - 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 `class="col-md-4 col-sm-6"` #### 3.5.4. 列嵌套 栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 `.row` 元素和一系列 `.col-sm-*` 元素到已经存在的 `.col-sm-*` 元素内。
小列
小列
#### 3.5.5. 列偏移 使用 `.col-md-offset-*` 类可以将列向右侧偏移。这些类实际是通过使用 `*` 选择器为当前元素增加了左侧的边距（margin）。
1
2
#### 3.5.6. 列排序 通过使用 `.col-md-push-*` 和 `.col-md-pull-*` 类就可以很容易的改变列（column）的顺序。
左侧
右侧
#### 3.5.7. 媒体查询 [media ](/media ) 打开文件：bootstrap.css，查找`@media`<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20211110104134884_7913.jpg)<br />从查询结果中了解，当创建 div 的类样式名 container，会根据屏幕的大小发生变化 #### 3.5.8. 响应式工具 为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。 ##### 3.5.8.1. 可用的类 通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20211110153211464_16912.png)<br />从 v3.2.0 版本起，形如 `.visible-*-*` 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下： | 类组 | CSS `display` | | --- | --- | | `.visible-*-block` | `display: block;` | | `.visible-*-inline` | `display: inline;` | | `.visible-*-inline-block` | `display: inline-block;` | 因此，以超小屏幕（xs）为例，可用的 `.visible-*-*` 类是：`.visible-xs-block`、`.visible-xs-inline` 和 `.visible-xs-inline-block`。`.visible-xs`、`.visible-sm`、`.visible-md` 和 `.visible-lg` 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 `<table>` 相关的元素的特殊情况外，它们与 `.visible-*-block` 大体相同。 ##### 3.5.8.2. 打印类 和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20211110165337057_8311.png)<br />`.visible-print` 类也是存在的，但是从 v3.2.0 版本开始不建议使用。它与 `.visible-print-block` 类大致相同，除了 `<table>` 相关元素的特殊情况外。 #### 3.5.9. 类样式小结 | 类样式名 | 作用 | | --- | --- | | `.container` | 容器，有固定宽度，类似于table | | `.container-fluid` | 容器，占100%宽度 | | `.row` | 表示一行(可以省略不写) | | `.col-md-n` | 中等：电脑，n：占几列，最多12列 | | `.col-xs-` | 微型设备上占多少列，手机 | | `.col-sm-` | 小型设备上占多少列，平板 | | `.col-md-` | 中型设备上占多少列，电脑 | | `.col-lg`- | 大型设备上占多少列，电视机 | | `.hidden-lg/md/sm/xs` | 在指定设备下隐藏，其它设备显示 | | `.visible-lg/md/sm/xs` | 在指定设备下显示，其它设备隐藏 | ## 4. Bootstrap 组件 Bootstrap 自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。 ### 4.1. 进度条 通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。需要将进度条放到`<div class="progress"></div>`中，语法格式如下：
60% Complete
progress-bar 进度条相关属性 - `role`：本身没有具体的功能，语义的作用，解释这个标签的功能 - `aria`：开头的属性，是给残障人士使用的 - `sr-only`：屏幕朗读 **一般只需要设置`class`和`style`就可以** | 进度条的类型 | 类样式 | | --- | --- | | 进度 | `.progress` | | 默认进度条 | `.progress-bar` | | 有文字的进度条 | 在`<div>`块内设置文字 | | 不同颜色的进度条 | `.progress-bar-success`(`info`/`warning`/`danger`) | | 有条纹的进度条 | `.progress-bar-striped` | | 有动画效果 | `.active` | > 注：还有一个堆叠效果，需要查Bootstrap离线文档或官网 ### 4.2. 导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。组成如下： 1. 导航容器 1. 首选项和汉堡按钮(可以折叠的按钮) 1. 可折叠的菜单，表单或其它的内容 导航条 `<nav>` 标签其实就是一个 `<div>`<br />**导航条的可访问性**<br />务必使用 `<nav>` 元素，或者如果使用的是通用的 `<div>` 元素的话，务必为导航条设置 `role="navigation"` 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。 | 类样式 | 导航条的相关类型 | | --- | --- | | `.navbar` | 类样式 | | `.navbar-default` | 默认样式。`.navbar-inverse` 代表反转的颜色，即黑色 | | `.data` | 开头的属性，一般不能删除，往往会激活一个事件，并且有相应的功能，否则就失效 | | `.data-target:` | 汉堡按钮，对应下面的div的id | | `.sr-only` | 屏幕朗读(一般没有用，可以删除) | ## 5. Bootstrap JavaScript 插件 JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。 ### 5.1. 轮播图 轮播图组成部分： - `data-ride`：默认是轮播时间是5秒一张图 - `data-interval`：改变速度的属性，值的单位是毫秒 指示器 - `data-slide-to`: 表示第几张图片 - `class="active"`: 默认开始的图片 图片部分，包裹里的每个div就是一张图片
控制按钮，向左或向右 ## 6. BootStrap综合案例 ### 6.1. 案例：各种动态进度条（开始/暂停/重置功能） <!DOCTYPE html>

基本进度条

不同颜色进度条

有条纹的进度条

带有提示标签的进度条

### 6.2. 案例：使用BootStrap模态框增加表格数字 如下图所示，使用Bootstrap做出如下表格。（_参考：全局css样式 -- 表格_）<br />![](https://gitee.com/moonzero/images/raw/master/code-note/20211110090932281_30299.jpg)<br />点添加联系人的按钮，弹出如下的模态框。在同一个页面上制作如下模态框 > - 参考：JavaScript插件，模态框 > - 参考：全局CSS样式，表单 ![](https://gitee.com/moonzero/images/raw/master/code-note/20211110091117981_2430.jpg)<br /> ![](https://gitee.com/moonzero/images/raw/master/code-note/20211110091158202_19138.jpg)<br />点保存添加一行，使用jQuery写代码完成 <!DOCTYPE html>
……
编号 姓名 电话 邮箱 生日
1 孙悟空 13423434534 wukong@126.com 1993-12-23
2 猪八戒 123443565 bajie@163.com 1953-05-02
3 白骨精 184353345 xiaobai@qq.com 1943-03-12 
  1.         <!-- Button trigger modal 点击下面的按钮即可通过 JavaScript 启动一个模态框 -->
  2.         <button type="button" id="b" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  3.             添加联系人
  4.         </button>
  6.         <!-- Modal（模态框） -->
  7.         <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  8.           <div class="modal-dialog" role="document">
  9.             <div class="modal-content">
  10.               <div class="modal-header">
  11.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  12.                 <h4 class="modal-title" id="myModalLabel">输入联系人</h4>
  13.               </div>
  14.               <div class="modal-body">
  15.                 <form class="form-group">
  16.                     <label for="id">编号</label>
  17.                     <input type="number" id="id" name="id" class="form-control" placeholder="请填写编号（数字）" />
  18.                 </form>
  19.                 <form class="form-group">
  20.                     <label for="name">姓名</label>
  21.                     <input type="text" id="name" name="name" class="form-control" placeholder="请填写中文姓名" />
  22.                 </form>
  23.                 <form class="form-group">
  24.                     <label for="tel">电话</label>
  25.                     <input type="number" id="tel" name="tel" class="form-control" placeholder="请填写联系电话" />
  26.                 </form>
  27.                 <form class="form-group">
  28.                     <label for="email">邮箱</label>
  29.                     <input type="email" id="email" name="email" class="form-control" placeholder="请填写联系邮箱" />
  30.                 </form>
  31.                 <form class="form-group">
  32.                     <label for="birthday">生日</label>
  33.                     <input type="date" id="birthday" name="birthday" class="form-control" placeholder="请填写联系邮箱" />
  34.                 </form>
  35.               </div>
  36.               <div class="modal-footer">
  37.                 <button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>
  38.                 <button type="button" id="save" class="btn btn-primary">保存</button>
  39.               </div>
  40.             </div>
  41.           </div>
  42.         </div>
  43.     </div>
  44. </body>

```