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字体加粗,并且水平展示