BootStrap

前端系列
一、HTML5
二、CSS
三、JavaScript
四、jQuery
五、BootStrap
六、Element
七、Ajax
八、JSON
九、VUE3

---

BootStrap

中文网: http://www.bootcss.com/

一、布局容器和栅格网格系统

3.1.布局容器
1、.container类用于固定宽度并支持响应式布局的容器。(会有留白)

<div class="container"></div>

2、.container-fluid类用于100%宽度，占据全部视口(viewport)的容器。

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

3.2.栅格网格系统

BootStrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列(可以嵌套)。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，再调整内外边距，最后结合媒体查询。

注意：网格系统必须使用到CSS

具体设备根据如下配置

功能	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

数据行（.row）必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距（padding）。

在行（.row）中可以添加列（.column），只有列（column）才可以作为行容器（.row）的直接子元素，但列数之和不能超过平分的总列数，比如12。如果大于12，则自动换到下一行。

3.2.1.列组合

列总数不能超过12，大于12则自动换刀下一行

<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-8">8列</div>
    </div>
</div>

3.2.2.列偏移

<div class="container">
    <div class="row">
        <div class="col-md-1">1列</div>
        <div class="col-md-1">2列</div>
        <div class="col-md-1 col-md-offset-8">11列</div>
        <div class="col-md-1">12列</div>
    </div>
</div>

3.2.3.列排序

改变列的方向，就是改变左右浮动

<div class="container">
    <div class="row">
        <div class="col-md-1 col-md-push-10">1列</div>
        <div class="col-md-1 col-md-pull-1">1列</div> 
    </div>
</div>

3.2.3.列嵌套

<div class="container">
    <div class="row">
        <div class="row">
            <div class="col-md-1 col-md-push-6">1列</div>
            <div class="col-md-1 col-md-pull-6">1列</div> 
        </div>
        <div class="row">
            <div class="col-md-1 col-md-push-6">1列</div>
            <div class="col-md-1 col-md-pull-6">1列</div> 
        </div>
    </div>
</div>

二、常用样式

4.1.排版

4.1.1.标题

对h1~h6的标题效果进行覆盖，提供劳务对应的类名，为非标题元素设置样式

副标题 small标签 或 .small类名

 <h1>h1. Bootstrap heading<small>副标题</small></h1>
 <div class="h1">Bootstrap标题1<span class="small" >副标题</span></div>

4.1.2.段落

通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

<small>:小号字
<b><strong>:加粗
<i><em>:斜体

 <p>以后的你会感谢现在努力的你</p>
 <p class="lead">以后的你会感谢现在努力的你</p>
 <p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>

4.1.3.强调

定义了一套类名，强调类名，强调类都是通过颜色来表示强调

.text-muted：	提示，使用浅灰色（#999）
.text-primary：	主要，使用蓝色（#428bca）
.text-success：	成功，使用浅绿色(#3c763d)
.text-info：		通知信息，使用浅蓝色（#31708f）
.text-warning：	警告，使用黄色（#8a6d3b）
.text-danger：	危险，使用褐色（#a94442）

4.1.4.对齐

通过定义四个类名来控制文本的对齐风格

.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐

4.1.5代码

4.2列表

去点列表

class=“list-unstyled”

内联列表

class=“list-inline”

定义列表

使用样式 class=“dl-horizontal” 制作水平定义列表 : 当标题宽度超过160px时，将会显示三个省略号

4.3.表格

基础样式
1）.table：基础表格

附加样式

1. .table-striped：斑马线表格
2. .table-bordered：带边框的表格
3. .table-hover：鼠标悬停高亮的表格
4. table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距小

三、表单

表单的主要功能是用来与用户做交流的一个网页控件，包括：文本输入框、下拉选择框、复选按钮、文本域和按钮等

1、表单控件

表单控件

• .form-control(适中)
• .input-lg（较大）
• .input-sm（较小）
• 输入框 text

2、文本框、下拉框和文本域

• .form-control 表单元素的样式
• .input-lg .input.sm 表单控件的大小

 <div class="container">
	 <!--  文本框 -->
	 <div class="row">
		 <div class="col-sm-3">
			 <input type="text" name="" id=""  />
			 <input type="text" name="" id="" class="form-control" />
			 <input type="text" name="" id="" class="form-control input-lg" />
			 <input type="text" name="" id="" class="form-control input-sm" />
		 </div>
	 </div>
 </div> 

文本域 textarea

4.1.2.单选框与复选框

复选框checkbox

• 垂直显示： .checkbox
• 水平显示： .checkbox-inline

 <div class="row"> 
 <input type="checkbox" >游戏
 <input type="checkbox" >学习
 <br>
	 <!-- 垂直显示 -->
	 <div>
		 <div class="checkbox">
			 <label><input type="checkbox" >游戏</label>
		 </div>
		 <div class="checkbox">
			 <label><input type="checkbox" >学习</label>
		 </div>
	 </div>
	 
	 <!-- 水平显示 -->
	 <div>
		 <label class="checkbox-inline">
			 <input type="checkbox" >游戏
		 </label>
		 <label class="checkbox-inline">
			 <input type="checkbox" >学习
		 </label>
	 </div>
	 
 </div>

单选框 radio

• 垂直显示： .radio
• 水平显示： .radio-inline

4.1.3.按钮

基础样式： btn

附加样式：btn-primary，btn-info ， btn-success， btn-warning ，btn-danger， btn-link，btn-default

按钮大小：使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

<div class="row">
	 <button>按钮</button>
	 <hr>
	 <button class="btn">按钮</button>
	 <button class="btn btn-primary">按钮</button>
	 <button class="btn btn-info">按钮</button>
	 <button class="btn btn-danger">按钮</button>
	 <button class="btn btn-warning">按钮</button>
	 <button class="btn btn-success">按钮</button>
	 <button class="btn btn-link">按钮</button>
	 <hr>
	 
	 <button class="btn btn-primary btn-xs">按钮</button>
	 <button class="btn btn-info btn-sm">按钮</button>
	 <button class="btn btn-danger btn-lg">按钮</button>
	 <hr>
	 
	 <a href="##" class="btn btn-info">a标签按钮</a>
	 <span class="btn btn-success">span标签按钮</span>
	 <div class="btn btn-warning">div标签按钮</div>
	 <br>
	 
	 <!-- 按钮禁用-->
	 <!-- 样式上禁用 -->
	 <button class="btn btn-warning disabled" onclick="alert(1)">按钮</button>
	 <!-- 禁用 -->
	 <button class="btn btn-success" disabled="disabled"  onclick="alert(1)">按钮</button>
 </div>

4.5.表单布局

4.5.1.水平表单

• 向⽗元素添加 role=“form”
• 把标签和控件放在⼀个带有 class .form-group 的中。这是获取最佳间距所必需的

4.5.2内联表单

• 将表单的控件都在⼀⾏内显示form-inline
• 注意label不会显示，存在的意义：如果没有为输⼊控件设置label标签，屏幕阅读器将⽆法正确识别

4.6.缩略图和面板

5.BootStrap组件

5.1.导航

5.2.分页导航

5.3.下拉菜单

5.4.模态框