首页 > 代码库 > Bootstrap 基础学习笔记（一）
Bootstrap 基础学习笔记（一）
排版
(1)标题
Bootstrap标题样式进行了以下显著的优化重置：
1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
代码
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>标题（一）</title> 6 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 9 <body>10 <!--Bootstrap中的标题-->11 <h1>Bootstrap标题一</h1>12 <h2>Bootstrap标题二</h2>13 <h3>Bootstrap标题三</h3>14 <h4>Bootstrap标题四</h4>15 <h5>Bootstrap标题五</h5>16 <h6>Bootstrap标题六</h6>17 18 <!--Bootstrap中让非标题元素和标题使用相同的样式-->19 <div class="h1">Bootstrap标题一</div>20 <div class="h2">Bootstrap标题二</div>21 <div class="h3">Bootstrap标题三</div>22 <div class="h4">Bootstrap标题四</div>23 <div class="h5">Bootstrap标题五</div>24 <div class="h6">Bootstrap标题六</div>25 26 <!--任务填写下方-->27 <h1>我的第一个bootstrap标题</h1>28 29 </body>30 </html>
显示效果为加了bootstrap自己样式的标题风格
(2)副标题
除此之外，我们在Web的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果，使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式：
1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
代码样例
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>标题（二）</title> 6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 9 <body>10 11 <!--Bootstrap中使用了<small>标签来制作副标题-->12 <h1>Bootstrap标题一<small>我是副标题</small></h1>13 <h2>Bootstrap标题二<small>我是副标题</small></h2>14 <h3>Bootstrap标题三<small>我是副标题</small></h3>15 <h4>Bootstrap标题四<small>我是副标题</small></h4>16 <h5>Bootstrap标题五<small>我是副标题</small></h5>17 <h6>Bootstrap标题六<small>我是副标题</small></h6>18 19 <!--任务填写处-->20 <h1>孤儿院无私奉献30年 <small>一曲人性的赞歌</small></h1>21 </body>22 </html>
(3)正文段落
段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：
1、全局文本字号为14px(font-size)。
2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。
3、颜色为深灰色（#333）；
4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果
代码样例
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>段落（正文文本）</title> 6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 9 <body>10 <p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>11 <p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>12 <p>我是一个段落，你猜我在Bootstrap是以什么样的风格显示。</p>13 </body>14 </html>
(3)强调相关的类
在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
- .text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（#a94442）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>强调相关的类</title> 6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 9 <body>10 <div class="text-muted">.text-muted 效果</div>11 <div class="text-primary">.text-primary效果</div>12 <div class="text-success">.text-success效果</div>13 <div class="text-info">.text-info效果</div>14 <div class="text-warning">.text-warning效果</div>15 <div class="text-danger">.text-danger效果</div>17 <p class="text-danger">我是一段危险信息，请用Bootstrap框架中的危险风格显示</p>18 </body>19 </html>
(4)文本对齐风格
在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：
? 左对齐，取值left
? 居中对齐，取值center
? 右对齐，取值right
? 两端对齐，取值justify
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
? .text-left：左对齐
? .text-center：居中对齐
? .text-right：右对齐
? .text-justify：两端对齐
- 代码样例
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>文本对齐风格</title> 6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 9 <body>10 <p class="text-left">我居左</p>11 <p class="text-center">我居中</p>12 <p class="text-right">我居右</p>13 <p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>14 <!--下面是任务部分-->15 <p>给我加个类，我就向右对齐。</p>16 17 18 </body>19 </html>
- (5)列表--简介
Bootstrap根据平时的使用情形提供了六种形式的列表：
? 普通列表
? 有序列表
? 去点列表
? 内联列表
? 描述列表
? 水平描述列表
- 代码样例
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>列表--简介</title> 6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 <body> 9 <ul>10 <li>无序列表信息1</li>11 <li>无序列表信息2</li>12 <li>无序列表信息3</li>13 </ul>14 <ol>15 <li>有序列表信息1</li>16 <li>有序列表信息2</li>17 <li>有序列表信息3</li>18 </ol>19 <dl>20 <dt>定义列表标题</dt>21 <dd>定义列表信息1</dd>22 <dd>定义列表信息2</dd>23 </dl>24 </body>25 </html>
- (6)去点列表
- 在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>去点列表</title> 6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 9 <body>10 <!--无序列表去点-->11 <ul>12 <li>13 项目列表14 <ul>15 <li>带有项目符号</li>16 <li>带有项目符号</li>17 </ul>18 </li>19 <li>20 项目列表21 <ul class="list-unstyled">22 <li>不带项目符号</li>23 <li>不带项目符号</li>24 </ul>25 </li>26 <li>项目列表</li>27 </ul>28 <!--有序列表去序号-->29 <ol>30 <li>31 项目列表32 <ol>33 <li>带有项目编号</li>34 <li>带有项目编号</li>35 </ol>36 </li>37 <li>38 项目列表39 <ol class="list-unstyled">40 <li>不带项目编号</li>41 <li>不带项目编号</li>42 </ol>43 </li>44 <li>项目列表</li>45 </ol>46 </body>47 </html>
- (7)内联列表
Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
代码示例
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>内联列表</title> 6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 <body> 9 <ul class="list-inline">10 <li>W3cplus</li>11 <li>Blog</li>12 <li>CSS3</li>13 <li>jQuery</li>14 <li>PHP</li>15 </ul>16 </body>17 </html>
- (8)定义列表
对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定义列表</title> 6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 <body> 9 <dl>10 <dt>W双方各s</dt>11 <dd>帅哥哥是个啥地方撒范德萨发三个客</dd>12 <dt>哈哈</dt>13 <dd>少刚说过是否是个站</dd>14 </dl>15 </body>16 </html>
- (8)代码
在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码
预编译版本的Bootstrap将代码的样式单独提取出来：
1、LESS版本，请查阅code.less文件
2、Sass版本，请查阅_code.scss文件
编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行，由于代码太长，此处不一一列举。
在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容
代码样例
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>代码</title> 6 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 7 </head> 8 <body> 9 code风格：10 <div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre></code>和<code><kbd></code></div>11 pre风格：12 <div>13 <pre>14 <ul>15 <li>...</li>16 <li>...</li>17 <li>...</li>18 </ul>19 </pre>20 </div>21 kbd风格：22 <div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>23 24 </body>25 </html>
Bootstrap 基础学习笔记（一）