入坑需知： 我们可以用bootstrap写出各种各样好看的，称心如意的页面
0.bootstrap引入实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> </head> <body> <script src="jquery-3.3.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html>
1.适配移动端
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
2.布局容器
1.默认有边框，有左右填充
<div class="container"></div>
2.默认100%宽度，占据全部视口容器
<div class="container-fluid"></div>
3.栅格系统
1.每一行均分成12列
2.每一个标签可以自定义占的列数
3.要使用栅格系统必须哟啊放在container容器中
4.一个row中也就是一行中只能最多被均分成12列
5.栅格系统基础应用
<div class="container"> <div class="row"> <div class="col-md-1">占一列</div> <div class="col-md-10">占十列</div> <div class="col-md-1">占一列</div> </div> </div>
6.媒体查询（示例代码）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <style> .test { width: 50px; height: 50px; background-color: red; } /* 媒体查询，当打开网页的是一个显示器设备，并且显示器的宽度小于420px的时候，就会使用另一种样式*/ @media screen and (max- 420px) { .test { background-color: green; } } </style> </head> <body> <div class="container"> <div class="test"> </div> </div> <script src="jquery-3.3.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script> </script> </body> </html>
7.列偏移
1.<div class="col-md-5 col-md-offset-2"> # 这五列中空出前两列
2.<div class="col-md-5 col-md-push-2"> # 将这五列向右退两列
4.排版
1.<small>小标题</small> # 小标题显示
2.<p class="lead">content</p> # 对普通文本加粗加黑
3.<mark>content</mark> # 显示高亮的文本
4.<del>content</del> # 删除文本，文本上添加中划线
5.<ins>content</ins> # 插入文本
6.<u>content</u> # 为文本添加下划线
7.<strong>content</strong> # 文本加粗变黑
8.<em>content</em> # 文本变为斜体
9.<p class="text-upper">content</p> # 文本全部大写
10.<p class="text-lower">content</p> # 文本全部小写
11.<p class="text-captialize">content</p> # 文本首字母大写
5.缩略语
1.当鼠标悬停在缩写和缩写词上时就会显示完整内容
bootstrap实现了对HTML的<addr>元素的增强样式，缩略语元素带有title属性，外观表现为带有较浅的虚拟框，鼠标移至上面的时候会变成带有“问号”的指针，如果想看完整的内容可将鼠标悬停在缩略语上，但需要title属性
<abbr title="attribute">attr</abbr>
6.地址样式（示例代码）
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
7.默认样式的应用
1.引用一句话，类似网页上显示的名言名句的形式
<blockquote> <p>content</p> </blockquote>
2.带有命名来源
<blockquote> <p>content</p> <footer>author</footer> </blockquote>
8.列表
1.有序列表
<ol><li>content</li></ol>
2.无序列表
<ul><li>content</li></ul>
3.内联列表
<ol class="list-inline"><li>content</li></ol>
9.描述（人员介绍文本的格式）
<dl> <dt>person_name</dt> <dd>describe</dd> </dl>
：如果需要水平显示
<dl class="dl-horizontal"> <dt>person_name</dt> <dd>describe</d
<code>code</code
11.用户输入
1.提示用户按键方式（提升友好度）
<kbd>keyboard</kbd>
12.table操作(只需要在class类中添加样式类)改变table样式
1.table表样式更加优美
<table class="table"></table>
2.给表格添加边框
<table class="table-border"></table>
3.给表格实现隔行变色
<table class="table-striped"></table>
4.行上鼠标滑过变色
<table class="table-hover"></table>
5.使表格变的紧缩
<table class="table-condensed"></table>
13.多选和单选框
多选框（CheckBox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中选择一个
1.多选框
<div class="checkbox"></div>
2.单选框
<div class="radio"></div>
3.横排显示
<label class="checkbox-inline"></label>
14.下拉列表
注意：很多原生选择菜单即在Safari和Chrome中的圆角是无法通过修改border-radius属性时间更改
1.
<select class="form-control"></select>
2.对于标记了multiple属性的<select>控件来说，默认显示的是多个选项
<select multiple class="form-control"></select>
15.静态控件
如果需要在表单中将一行纯文本和label元素放置于同一行，为<p>标签添加form-control即可
<p class="form-control-static">content</p>
16.禁用状态
为输入框设置disabled属性可以禁止其与用户有任何交互，被禁用的输入框颜色变浅，并且还添加了not-allowed鼠标状态
17.只读状态
为输入框设置readonly属性可以禁止用户修改输入框中的内容，处于只读状态的输入框颜色更浅，但是任然保留标准的鼠标状态
18.button属性
1.按钮名称充满整个父标签
<button class="btn btn-block">btn_name</button>
2.按钮的激活状态，当鼠标移到button上按钮变色
<button class="active">btn_name</button>