版权声明：转载请注明出处(两个蝴蝶飞) https://blog.csdn.net/yjltx1234csdn/article/details/83242735
感谢Jie’ blog http://ilog.vip/ ,谢谢他让我有了继续写下去的信念。愿一起坚持，在路上…
一.Bootstrap的简单介绍
Bootstrap是前端优秀的框架。主要运用于前端的美化和界面样式的调整。
Boostrap的下载地址为:https://v3.bootcss.com/getting-started/
下载后的目录结构为:
其中，常常需要引用的是bootstrap.min.js和boostrap.min.css两个文件。
二. Bootstrap的CSS样式
常用的模板是:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
- Bootstrap运用于H5,Html4版本是不可以的。
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
- 是移动设备优先的。需要在中添加viewport元数据标签.
<meta name="viewport" content="width=device-width, initial-scale=1">
其中可以设置user-scalabel=no来禁用缩放功能，这样只能通过滚动屏幕来进行查看 。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- 布局容器有两种，一种是container,另外一种是container-fluid.
其中.container是固定宽度，并支持响应式布局的容器。而.container-fluid是100%宽度，占据全部视口的容器。常用的是.container
<div class="container">
...
</div>
- 是栅格化系统，分为12列。可以在手机<768,平板<992,桌面显示器<1200,和大桌面显示器>=1200上进行相应的工作。
是分为12列的，如果列多余了，也就是加起来的数字>12，那么就需要重新再换一行了。如4+4+6,那么中4+4放在上一行，6单独换一行。 - 添加响应式布局。 可以直接在类里面添加，如
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
在小屏幕上会将这个div当成6列，在平板上会将这个div当成3列。
有的时候，列可以会不一样高。如div中文字多少不一样。
在缩小时，有时候会出现这种情况。
需要在换行的那一行前面，加上一个.clearfix.
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- 避免上一行中div文字太多，让一行的div跑到上面去。如上面的插图-->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
- 有的时候，需要将列进行相应的偏移，用.col-md-offset-* ,*表示偏移的列数。 表示向右偏移3列。 也可以.col-md-offset-0,表示不偏移。利用偏移，可以达到居中或者调整div布局的功能。
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
- 这些div之间的列与列之间可以进行相应的嵌套，来达到更好的布局效果。
<div class="container">
<div class="row">
<div class="col-md-3">
第一个div
</div>
<div class="col-md-9">
<!--里面进行相应的嵌套-->
<div class="row">
<div class="col-md-6">
第二个div
</div>
<div class="col-md-6">
第三个div
</div>
</div>
</div>
</div>
</div>
- 设置标签，仍然用以前的h1,h2…h6. 其中Bootstrap将h1,h2这些标题给美化了一下。 如果设置副标题的话，用.small元素。
<h2>h2. Bootstrap heading <small>副标题</small></h2>
- Bootstrap中，将全局的font-size 设置的是14px,line-height为1.428.段落设置了20px的行高，底部外边距即margin-bottom:10px;
- 让段落突出显示，可以在p上添加一个.lead
<p>HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 </p>
<p class="lead">HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 </p>
其中显示结果为：
- 让文本高亮显示用<mark>高亮文字</mark>,删除文本用del,下划线文本用ins或者u,让文本加重用strong,让文本小一号用small. 斜体用em.
- 设置文字的对齐方式，即将文字设置成左对齐，右对齐，可以设置成.text-left,.text-center,.text-right; 还有.text-justify,表示两端对齐. text-nowrap 表示不包装，正常的显示。
<p class="text-left">Left aligned text.</p>
- 改变大小写，全部改变成小写，用.text-lowercase,全部改成大写用.text-uppercase, 首字母大写，用.text-capitalize
<p class="text-capitalize">Lowercased text.</p>
- 缩略语用abbr,有两种形式，一种是单字母的缩略语
<abbr title="attribute">attr</abbr>
另外一种是，首字母的缩略语，如HTML,JSON,XML等。在里面添加一个title，title表示具体的相关的信息。 里面不要忘记设置一个class=“initialism”,表示首字母缩略语.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
- 地址的话，以地址的正常的文本显示，用<address>如果需要换行的话，用<br/> 进行相应的换行。
- 引用，用blockquote,可以最简单的写法:
<blockquote>
具体的引用文字
</blockquote>
也可以添加两种不同的样式:
<blockquote>
<!--具体的引用文字-->
<p>你特么不相信自己也就算了，为什么不相信我呢?</p>
<!--用footer表示具体引用自哪儿,title表示详细的解释-->
<footer>语出:<cite title="两个蝴蝶飞">两个蝴蝶飞</cite></footer>
</blockquote>
也可以将其放在右边，在blockquote上面 添加一个.blockquote-reverse 即可。
- 无序列表用ul,有序列表用ol. 其中设置成无样式用.list-unstyled.
设置成内联的话，用.list-inline - 描述,dl,dt,dd 需要设置成
<!--默认是竖直的,dl-horizontal 表示水平的-->
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
- 用户输入用kbd,表示是键盘输入的键盘上的文字
复制<kbd>copy</kbd>用快捷键:<kbd><kbd>ctrl</kbd> + <kbd>C</kbd></kbd>
格式化代码块，用<pre> 具体的代码块</pre> 引用变量的话，可以使用var, 使y,m,x显示成公式变量的样式，并不是普通的英文字母。
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
三.表格
1.普通表格，添加一个class=“table”
<table class="table">
...
</table>
- 添加条纹，也就是斑马线的话，需要添加一个.table-striped
<table class="table table-striped">
...
</table>
- 为表格每一个tr,td都添加一个表格的话，需要添加一个.table-bordered
<table class="table table-bordered">
...
</table>
- 鼠标悬停在哪一行，就在哪一行变色，用.table-hover
<table class="table table-hover">
...
</table>
- 让表格进行相应的紧缩，将内补padding进行减半，由30变成15, 用.table-condensed
- 为某一行 tr，设置背景色，或者为某一列td,th设置背景色，可以设置成.active,.success,.info,.warning,.danger 等。
<tr class="active">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
</tr>
- 设置响应式表格的话，将.table放置在.table-responsive元素内，在小屏幕上进行水平滚动，在大屏幕上水平滚动条会消失。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
四. 表单
表单，是很常用的样式。
- 如果表单是内联表单的话，需要设置
<form class="form-inline">
具体的表单信息
</form>
这样，表单元素就会横着排列了。
- 平常表单是上面显示label中的文字，在下一行，会显示相应的input控制。 如果想要label与input放置在同一行，需要在form表单中添加form-horizontal 表示横着排列. 一般常用form-horizontal
<form class="form-horizontal">
</form>
- form的基本写法
<form class="form-horizontal">
<div class="form-group">
<!--提示文字 其中label必须有，如果让其不显示，设置class="sr-only"-->
<label class="sr-only" for="email">Email address</label>
<!--input值-->
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
... 继续写下一个div
</form>
- Bootstrap支持多种控制,包括H5的各种输入控件，如email,url,search,tel，color等.
- 设置复选框
<div class="checkbox">
<label>
<input type="checkbox" value="读书">
读书
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="编程" disabled>
编程
</label>
设置成内联的话:
<label class="checkbox-inline">
<input type="checkbox" value="读书">
读书
</label>
<label class="checkbox-inline">
<input type="checkbox" value="编程">
编程
</label>
如果是不带label的复选框:
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">记住我
</label>
</div>
- 单选框和多选框，默认都是按行进行排列的。
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="" /> 男 </label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" /> 女 </label>
</div>
<div class="radio disabled">
<label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled="" /> 保密 </label>
</div>
如果是内联的话:
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
如果不设置label文本的话:
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>
- 下拉列表的话，直接在select中设置class=“form-control”,如果设置成多选的话，可以添加multiple。
- 将input标签设置成禁用的话，只disabled. 设置成只读的话，是 readonly.
- 也可以添加额外的图标，如用户名的图标，密码的图标。
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">用户名</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true"></span>
</div>
</div>
密码的图标是glyphicon-lock
五. 按钮
1.Bootstrap中，按钮可以有四种常用的样式:
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
- 按钮的样式有，btn-default,btn-primary,btn-success,btn-info,btn-warning,btn-danger,btn-link.
- 设置按钮的大小，常用于btn-lg,btn-sm,btn-xs.
- 将按钮变成块级元素，横扑整个行，用btn-block.
- 按钮活动状态，在class中添加.active. 如果设置成禁用状态，为disabled=“disabled”,也直接在class中添加.disabled.
六.图片
响应式图片，设置的class为.img-responsive ,实质是设置max-width:100%,height:auto,display:block;
如果想让图片居中，应该设置成class=“img-response center-block”
<img src="..." class="img-responsive" alt="Responsive image">
设置图片的形状，有.img-rounded 方形，img-circle,圆形, img-thumbnail 边框形.
七. 辅助类
- 辅助文字类，即显示文字的color, 有.text-muted,text-primary,text-success,.text-info,.text-warning,.text-danger.
- 背景色类，即background-color:, 有bg-primary,bg-success,bg-info,bg-warning,bg-danger.
- 关闭按钮的图标:
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">
×</span></button>
- 三角符号
<span class="caret"></span>
- 将一个div快速浮动，有 pull-left,和pull-right, 不能用于导航条.
- 让div快速居中，有.center-block
- 让div清除浮动，用.clearfix
- 显示div用show,隐藏div用hidden,或者sr-only. 建议用hidden.
谢谢!!!