深入理解bootstrap的基础知识

1.搭建bootstrap环境，俩种方式，一种通过在线的方式的引入，一种通过下载 到本地的方式引入，

(bootstrap.min,css表示压缩版的，也可以引入未压缩版的bootstrap.css)

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

如果要引入bootstrap中的js，必须要在其之前引入jquery.如下

<script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

然后引入bootstrap.min.js(表示压缩版的js文件，bootstrap.js表示未被压缩)

2.bootstrap的标题

h1~h6:是块标签，bootstrap中重置了h1~h3的margin-top为20px；行高为1.1倍，就是font-size的1.1.倍。h4~h6重置margin-top为10px。

bootstrap还添加了副标题<small></small>具体看bootstrap.css的源码，

<small>副标题</small>主要设置字体的大小为原来的65%;并且颜色为深灰色.

3>bootstrap的段落

,<p></p>字体都设置成14px,行高位20px，字体颜色都设置深灰色。增加了一个类<p class="lead"></p>用来突出文本，行高为1.4倍，字体大小为21px，font-weight为300，如果可

以的话可以通过sass或者less来重新设置这个规则。为了使强调的东西更突出，文本更加多样化，bootstrap提供了<strong></strong><em></em><b></b>等标签来设置字体的加粗

斜体等特点,.还可以给p标签加上page-header类，具体效果自己动手

4.bootstrap的文本

<div class="text-muted">dasdasdasda</div>这些类可以称为辅助类，bootstrap主要根据网站常用的颜色，做成一个类，具体参考bootstrap3教程。还有

 

<div class="text-primary">dsadad</div>        

<div class="text-warning">sdada</div>

<div class="text-info">sdasda</div>

<div class="text-success">sdadasd</div>

<div class="text-danger">dasdad</div>

<div class="text-left"></div>

text-left text-right text-center text-justify主要给文本加上缩进，向左，居中，向右，的效果

4.bootstrap的列表

<ul>

<li></li>

</ul>

<ol>

<li></li>

</ol>

<dl>

<dt></dt>

<dd></dd>

</dl>

列表主要为有序列表，无序列表，自定义列表

bootstrap对列表部分就做了简单的处理，border-bottom:10px;

一下是class的类

list-unstyled,取出项目编号，内边距设置为0

list-inline:将垂直列表变成水平，padding-left:5px,padding-right:5

dl-horizontal表示在dt字体加粗，并且水平展示