bootstrap安装
bootstrap网址：http://v3.bootcss.com/（中文版）
bootstrap网址：http://getbootstrap.com/（英文版）
1、bootstrap.min.css
2、jquery.min.js（jquery要提前引入，bootstrap.min.js代码的作用是所有的jquery插件）
3、bootstrap.min.js
bootstrap基本模板
<!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</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]> IE9以下的兼容html5标签及响应式布局
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
bootstrap基本命令
<div class="h1">你好，世界！<small>this is first bootstrap class</small></div> <!-- h1-h6样式用class引入 -->
<a href="">百度</a> <!-- a标签去除下划线，添加颜色鼠标移入下划线显示 -->
<!-- text-muted：提示，使用浅灰色（#999）
text-primary：主要，使用蓝色（#428bca）
text-success：成功，使用浅绿色(#3c763d)
text-info：通知信息，使用浅蓝色（#31708f）
text-warning：警告，使用黄色（#8a6d3b）
text-danger：危险，使用褐色（#a94442） -->
(固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px;)
(重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px)
<h1 text-muted>你好，世界！<small>this is first bootstrap class</small></h1>
<small>this is first bootstrap class</small>
<h2 class="text-primary">你好，世界！</h2>
<h3 class="text-success">你好，世界！</h3>
<h4 class="text-info">你好，世界！</h4>
<h5 class="text-warning">你好，世界！</h5>
<h6 class="text-danger" >你好，世界！</h6>
<p class="lead"><strong>我是p标签</strong></p>（lead使得p标签的文本内容加粗字体变大）
<!-- text-left：左对齐
text-center：居中对齐
text-right：右对齐
text-justify：两端对齐 就是文本较长时到头自动换行下来 -->
<p class="text-left">我是p标签我是p我是p标签我是p标签</p>
<p class="text-center">签我是p标签我是p标签我是p标标</p>
<p class="text-right">是p标签我是p标签标签我是p标</p>
<p class="text-justify">我是我是pp标签标签我是p标签我是p标签</p>
<!-- 强调的加粗效果 -->
<strong></strong>
<!-- <b></b>要废弃 -->
<!-- 斜体 -->
<em></em>
<cite>hello world</cite>
<i></i>
<var></var>
<!-- 字体大小标签 -->
<small></small> <!-- 配合标题做副标题用 -->
<!-- cite -->
<blockquote>hello world</blockquote>
<code> （内容带有4px圆角带颜色背景，字体也有颜色）ps：code一般是针对于单个单词或单个句子的代码；
div标签是一个块级标签，使用方法<div></div>
(不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代)
</code>
只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
<pre class="pre-scrollable">
function(){
console.log('haha')
}
function(){
console.log('haha')
}
function(){
console.log('haha')
}
function(){
console.log('haha')
}
function(){
console.log('haha')
}
function(){
console.log('haha')
}
</pre>
<!-- 列表标签 -->
<ul class="list-unstyled list-inline">（list-unstyled消除ul的自带属性，list-inline所有li一排显示）
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
<ol class="list-unstyled list-inline">
<li>我是有序列表</li>
<li>我是有序列表</li>
<li>我是有序列表</li>
</ol>
<dl class="dl-horizontal"> （dl-horizontal屏幕大于768才生效，即才能在一排显示 ）
<dt>我是定义列表标题</dt>
<dd>我是定义列表阐述</dd>
</dl>