bootstrap

引入bootstrap核心

CSS

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

JS

<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>

布局容器

1、container 类用于固定宽度并支持响应式布局的容器。

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

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

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

栅格网格系统

container、row 、xs (xsmall phones), sm (small tablets), md
(middle desktops) lg (larger desktops) 即: 超小屏(自动)，小屏
(750px)，中屏(970px)和大屏(1170px)
数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于 12,则自动换到下一行。

列组合

列组合简单理解就是更改数字来合并列（原则：列总和数不能超 12，大于12,则自动换到下一行。），有点类似于表格的 colspan 属性。

列偏移

使用列偏移（offset）功能来实现。只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。

例如，

你在列元素上添加“col-md-offset-8”，表示该列向右移动 8 个列的宽度(要保证列与偏移列的总数不超过 12，不然会致列断行|换行显示)。

注： 后面的栅格也会一起向右移动

<div class="row">
				<div class="col-md-2" style="background-color: #2E6DA4;">2</div>
				<div class="col-md-3 col-md-offset-5" style="background-color: navajowhite;">3</div>
				<div class="col-md-3" style="background-color: yellowgreen;">3</div>
			</div>

列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。

在 Bootstrap 框架的网格系统中是通过添加类名 ”col-md-push-” 和“col-md-pull-” (其中星号代表移动的列组合数)。往前 pull，往后 push。

<div class="row">
				 <div class="col-md-1"  style="background-color: bisque;">1 列</div>
				 <div class="col-md-1 col-md-push-4"  style="background-color: thistle;">2 列</div>
				 <div class="col-md-1"  style="background-color: chartreuse;">11 列</div>
				 <div class="col-md-1"  style="background-color: wheat;">12 列</div>
			</div>

列嵌套

Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列.
例:

<div class="row">
				<div class="col-md-6" style="background-color: #2E6DA4;">
					<div class="row">
						<div class="col-md-6"  style="background-color: aqua;">
							<div class="row">
								<div class="col-md-2" style="background-color: navajowhite;" >1</div>
								<div class="col-md-2" style="background-color: aquamarine;" >1</div>
								<div class="col-md-2" style="background-color: brown;" >1</div>
								<div class="col-md-2" style="background-color: #265A88;" >1</div>
								<div class="col-md-2" style="background-color: blueviolet;" >1</div>

							</div>						</div>
						<div class="col-md-6"  style="background-color: burlywood;">6</div>
					</div>
				</div>
				<div class="col-md-6" style="background-color: yellowgreen;">6</div>
			</div>

标题

定义标题都是使用标签只不过 Bootstrap 覆盖了其默认的样式 ，使用其在所有浏览器下显示的效果一样。
为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6 六个类名。
同时后面可以紧跟着一行小的副标题或使用.small

段落

通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理。
< small >:小号字
< b >< strong>:加粗
< i>< em>:斜体

引用

< blockquote >：标签定义摘自另一个源的块引用.

使用.blockquote-reverse，实现右对齐。
< footer >:脚注
< cite>：表示对某个参考文献的引用

强调类名

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

对齐方式

<p class="text-left">左对齐</p>

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

列表

无序列表(< ul>< li>…< /li>< /ul>)、
有序列表(< ol>< li>…< /li>< /ol>)、
定义列表(< dl>< dt>…< /dt>< dd>…< /dd>< /dl>)

代码

（1）使用来显示单行内联代码
（ 2 ） 使 用 < pre>< /pre> 来 显 示 多 行 块 代 码 ， 样 式 : pre-scrollable (height,max-height 高度固定,为 340px,超过存在滚动条)
（3）使用< kbd>< /kbd>来显示用户输入代码,如快捷键
例:

使用<kbd>ctrl</kbd>与<kbd>s</kbd>键保存

表格

基础样式

1）.table：基础表格

附加样式

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

表单

表单控件

.form-control .input-lg（较大） .input-sm（较小）
（1）输入框
.form-control
（2）下拉选择框 select
多行选择设置：multiple=“multiple”
（3）文本域 textarea

（4）复选框 checkbox
.checkbox，水平显示：.checkbox-inline
（5）单选择按钮
.radio， 水平显示：.radio-inline
（6）按钮
1）使用 button 实现
基础样式: btn
附加样式：btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2）多标签支持:使用 a div 等制作按钮
3）按钮大小
使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
4）按钮禁用
方法 1：在标签中添加 disabled 属性
方法 2：在元素标签中添加类名“disabled”
在 class 属性中添加 disabled 只是样式上禁用了，并不是真正的禁用了此按钮！

<button class="btn btn-info btn-sm" disabled="disabled" onclick="alert(1)">禁用按钮</button>
<button class="btn btn-info btn-sm disabled"  onclick="alert(1)">禁用按钮</button>

水平表单:

同一行显示 form-horizontal
配合 Bootstrap 框架的网格系统

内联表单

将表单的控件都在一行内显示 form-inline

下拉菜单

1、 使用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框

				<div class="dropdown"></div>

2、 默认向下 dropdown，向上弹起加入 . dropup 即可
3、 使用 button 作为父菜单，使用类名: dropdown-toggle 和自定义 data-toggle 属性

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

4、 在 button 中 使用 font 制作下拉箭头

<span class="caret"></span>

5、 下拉菜单项使用一个 ul 列表，并且定义一个类名为“dropdown-menu
6、 分组分割线: < li>添加类名“divider”来实现添加下拉分隔线的功能
7、 分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8、 对齐方式:
1)、dropdown-menu-left 左对齐 默认样式
2)、dropdown-menu-right 右对齐
8、激活状态（.active）和禁用状态（.disabled）

按钮组

1、 使用一个类名为 btn-group 的 div 包裹整个按钮组
2、 使用标签 button 、a、span 制作按钮，需要指定类名.btn
3、 使用 span 制作图标
4、 大小分类: btn-group-lg btn-group btn-group-sm btn-group-xs
5、 等分按钮: 自适应分组按钮 btn-group-justified
6、 默认为水平，使用 btn-group-vertical 制作垂直按钮组
7、 按钮工具栏: 在外层套用 .btn-toolbar 即可
8、 注意：btn-group-lg 仅仅是放大按钮，不能将所有的按钮作为连接在一起的按钮组