Bootstrap知识点概述

川长思鸟来 2022-05-18 22:03 356阅读 0赞

### HTML5文档类型 ###

Bootstrap 使用的某些HTML元素与CSS属性都需要文档声明是HTML5文档类型。

### 移动设备优先 ###

Bootstrap 是移动设备优先的，对移动设备的样式融入到了框架的方方面面。  
为确保绘制和缩放效果，要在<head>标签中添加 viewport 元数据标签。

移动设备浏览器上，为视口设置meta属性为`user-scalable=no`可以禁止用户缩放。

### 容器 ###

**容器有两种**：**流体容器**（container-fluid） 和**固体容器** （container）  
两种容器之间不能相互嵌套。  
固体容器固定宽度并且支持响应式，有三个阈值，在不同尺寸视窗下显示不同的固定宽度。

<table> 
 <thead> 
  <tr> 
   <th>视窗尺寸</th> 
   <th>容器大小</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&gt;= 1200px</td> 
   <td>width = 1170px;</td> 
   <td>PC</td> 
  </tr> 
  <tr> 
   <td>&gt;= 992px &amp;&amp; &lt; 1200px</td> 
   <td>width = 970px;</td> 
   <td>小PC</td> 
  </tr> 
  <tr> 
   <td>&gt;=768px &amp;&amp; &lt; 992px</td> 
   <td>width = 750px;</td> 
   <td>平板</td> 
  </tr> 
  <tr> 
   <td>&lt; 768px</td> 
   <td>auto</td> 
   <td>width = 100% 和 width = auto不同</td> 
  </tr> 
 </tbody> 
</table>

将最外面的布局div class改为 `.container-fluid`，就可以将容器设置为流体容器，宽度为100%。

### 栅格系统 ###

*  栅格系统通过行(row)与列(column)来进行页面的布局。
 *  行必须包含在 容器 中.
 *  行在水平方向创建一组列，每一行将页面宽等均的分为12列。
 *  页面内容要放在列中，并且只有列可以作为行的直接子元素。
 *  为列 设置 padding 属性，可以为列与列之间设置间距，为 row 设置负值 margin ，抵消为容器设置的 padding 间接为行抵消了 padding 。
 *  如果一行中包含的列大于12，多余的列会另起一行。
 *  在没有给大屏幕设置栅格类的情况下，小屏幕的栅格类可以在大屏幕下起作用。  
    栅格系统对不同尺寸屏幕有不用的前缀

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>&lt; 768px(超小设备，手机)</th> 
   <th>&gt;= 768px（平板小型设备）</th> 
   <th>&gt;= 992px（中型PC）</th> 
   <th>&gt;=1200px(大型pc)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>最大容器宽度</td> 
   <td>auto</td> 
   <td>750px</td> 
   <td>970px</td> 
   <td>1170px</td> 
  </tr> 
  <tr> 
   <td>Class前缀</td> 
   <td>.col-xs-</td> 
   <td>.col-sm-</td> 
   <td>.col-md-</td> 
   <td>.col-lg-</td> 
  </tr> 
  <tr> 
   <td>最大列宽</td> 
   <td>auto</td> 
   <td>60px</td> 
   <td>78px</td> 
   <td>95px</td> 
  </tr> 
  <tr> 
   <td>槽宽</td> 
   <td>30px</td> 
   <td>30px</td> 
   <td>30px</td> 
   <td>30px</td> 
  </tr> 
 </tbody> 
</table>

**槽宽**：每列与内容之间的间隙，30px ，平均到两边，每边15px 。

从小到大是兼容的，但是大分辨率在小分辨率下是会从水平排列变垂直排列

**列偏移：** `.col-xx-offset-x` ，列会向右偏移设定的多少列。

**列排序**：`.col-md-push-*` 和 `.col-md-pull-*`类可以很容易的改变列的顺序。

### 排版 ###

除了标题标签<h1><h6>之外，还提供了`.h1` 到`.h6` 类，可以给内联元素提供标题样式。

*  标题内包含 `<small>` 标签或添加 `.small` 类的元素。可以添加副标题。
 *  `.lead` 类突出显示段落。
 *  <head> 标签，高亮内联文本。
 *  <del>被删除的文本。
 *  <s>无用文本。类似于删除文本。
 *  <ins> 插入文本，文本底部添加下划线。
 *  <u>带下划线文本。
 *  <strong>强调一段文本，font-weight。
 *  <i>斜体，主要用于发言技术词汇 ，<b> 高亮单词或短语。
 *  文本对齐通过 `.text-*` ,`left`、`center` 、`right` 、 `justify` 、`nowrap` 。
 *  改变大小写，`.text-lowercase` , `.text-uppercase` , `.text-capitalize`（每个单词头大写）。
 *  缩略语 ：`<abbr title="attribute">attr<abbr>`. 页面显示标签内的内容，鼠标移到attr 上会显示title的内容。
 *  为缩略语添加 `.initialism` 类，可以让 font-size 变小。
 *  地址： <address></address>标签。
 *  文档引用内容 用<blockquote></blockquote> 标签。直接引用建议用 <p> 标签包住。
 *  多样式引用：引用来源添加<footer> 标签 ，来源名称包裹进<cite> 标签。
 *  引用内容默认左对齐，为 <blockquote>添加 `.blockquote-reverse`类可以右对齐。

**列表**

无序列表和有序列表，添加`.list-unstyled` 列表无样式，作用在直接子元素上。

**内联列表** 通过类`.list-inline`，将所有元素放置在同一行。  
<dl></dl> ,<dt> </dt> ,<dd></dd>,  
为<dt> 添加 类 `.dl-horizontal` 可以让 <dt> 内的短语及其描述在一行。

### 代码 ###

**内联代码**： <code> 标签包裹内联样式的代码片段。

**用户输入**：通过 <kbd> 标签标记用户通过键盘输入的内容。

**代码块**：多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。  
还可以使用 `.pre-scrollable` 类，作用是为代码块添加高度，自动添加滚动条。

**变量**： 通过 <var> 标签标记变量。

**程序输出**： 通过 <samp> 标签来标记程序输出的内容。

### 表格 ###

为任意 <table> 标签添加 `.table`类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

**条纹状表格**：添加类 `.table-striped` 可以给表格添加斑马条纹样式。

**带边框表格**：添加 `.table-bordered` 类为表格和其中的每个单元格增加边框。

**鼠标悬停** ：通过添加 `.table-hover` 类可以让<tbody> 中的每一行对鼠标悬停状态作出响应。

**紧凑表格**：通过添加 `.table-condensed` 类可以让表格更加紧凑，减小padding。

**状态类：**

<table> 
 <thead> 
  <tr> 
   <th>类名</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.active</td> 
   <td>鼠标悬停在行或单元格上时所设置的颜色，浅灰</td> 
  </tr> 
  <tr> 
   <td>.success</td> 
   <td>标识成功或积极的动作，浅绿</td> 
  </tr> 
  <tr> 
   <td>.info</td> 
   <td>标识普通的提示信息或动作，浅黄</td> 
  </tr> 
  <tr> 
   <td>.warning</td> 
   <td>标识警告或需要用户注意，浅红，</td> 
  </tr> 
  <tr> 
   <td>.danger</td> 
   <td>标识危险或潜在的带来负面影响的动作，浅蓝</td> 
  </tr> 
 </tbody> 
</table>

**响应式表格**： 将任何`.table`元素包裹在`.table-responsive` 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。

### 表单 ###

所有设置了 `.form-control`类的<input> 、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。  
将 label 元素和前面提到的控件包裹在 `.form-group` 中可以获得最好的排列。

**内联表单：**为 <form> 元素添加 `.form-inline` 类可使其内容左对齐，表单元素在一行排列。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。  
一定要添加 label 标签

**水平排列表单** ： 为表单添加 `.form-horizontal` 类，可以将 label 标签和控件组水平并排布局。

**输入框**：括大部分表单控件、文本输入域控件，还支持所有 HTML5。

**类型的输入控件**： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。（只有正确设置了type、属性的输入控件才能被赋予正确的样式）

**文本域**：`<textarea class="form-control" rows="3"></textarea>` 可以通过改变 row 属性值改变文本域大小。

**多选框和单选框**：默认堆叠排列。通过将 `.checkbox-inline`或 `.radio-inline` 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

**下拉列表**：为 `<select>`添加类 `.form-control` ，可以显示Bootstrap设置的默认样式。对于标记了 **multiple**属性的 `<select>`控件来说，默认显示多选项。

**静态控件**：如果需要在表单中将一行纯文本和 label 元素放置于同一行，为`<p>` 元素添加 `.form-control-static` 类。

**自动获取焦点**：

**禁用状态**：

**被禁用的 filedset** ：为`<fieldset>`设置 disabled 属性,可以禁用 `<fieldset>` 中包含的所有控件。

**只读状态**：

**状态检验**：状态包括 **error** ,**warning** , **success** 状态。Bootstrap为这些状态都定义了默认样式。使用时，`.has-warning`、`.has-error` 或 `.has-success` 类到这些控件的父元素即可。任何包含在此元素之内的 `.control-label`、`.form-control` 和`.help-block`元素都将接受这些校验状态的样式.

**添加额外的图标**: 设置相应的`.has-feedback` 类并添加正确的图标.

**控件尺寸**：通过 `.input-lg` 类似的类可以为控件设置高度，通过`.col-lg-*` 类似的类可以为控件设置宽度。通过添加 `.form-group-lg` 或 `.form-group-sm`类，为`.form-horizontal` 包裹的 label 元素和表单控件快速设置尺寸。

### 按钮 ###

可作为按钮的标签或元素：为`<a>`、`<button>`或 `<input>`元素添加 .button 就可以作为按钮显示。  
注意： `<a>` 元素作为按钮使用时，务必设置 role = “button” 属性。

**预定义样式**： `.btn-default` , `.btn-primary`, `.btn-success` , `.btn-info`, `.btn-warning` , `.btn-danger` , `.btn-link` 。

**按钮尺寸**： 使用 `.btn-lg`、`.btn-sm`或 `.btn-xs`就可以获得不同尺寸的按钮。  
给按钮添加 `.btn-block`类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

**激活状态**：通过 `.active` 类实现。

**禁用状态**：为`<button>`元素添加 disabled 属性，使其表现出禁用状态。为基于 `<a>`元素创建的按钮添加 .disabled 类。

### 图片 ###

**响应式图片**：通过为图片添加 `.img-responsive` 类可以让图片支持响应式布局。使用 `.center-block` 类，让使用了 `.img-responsive` 类的图片水平居中。

**图片形状**：通过为`<img>`元素添加以下相应的类，可以让图片呈现不同的形状。**class=”img-rounded”** ， **class=”img-circle”** ， **class=”img-thumbnail”**

### 辅助 ###

**情景文本颜色**：

**情景背景色**：