02-标题、段落、代码

1-个人学习总结
2-慕课网教程地址：https://www.imooc.com/learn/14

标题

Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过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。

<h1>我是标题</h1>
<div class="h1">我也是标题</div>
<h2>我他妈的也是标题</h2>
<div class="h2">楼上的，咱们是一样的</div>
<h1>我的第一个Bootstrap标题</h1>

在Bootstrap中使用<small>标签来制作副标题

• 1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
• 2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；

<h1>我是主标题<small>&nbsp;&nbsp;我是副标题</small></h1>
<h4>搞个大新闻<small>&nbsp;&nbsp;闲得蛋疼</small></h4>

段落

Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示：

• 1、全局文本字号为14px(font-size)；
• 2、行高为1.42857143（line-height），大约是20px(通过LESS编译器计算出来的)；
• 3、颜色为深灰色（#333）；
• 4、字体为”Helvetica Neue”, Helvetica, Arial, sans-serif;（font-family），在实际项目中，可以根据自己的需求进行重置；
• 5、该设置都定义在元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果；
• 6、为了让段落p元素之间具有间距，便于用户阅读，特意设置了p元素的margin值（默认情况之下margin: 0 0 10px;）；
  “`

超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处。

在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。

Bootstrap还通过元素标签:`<small>`、`<strong>`、`<em>`和`<cite`>给文本做突出样式处理。

看看我长什么样子：小

丑的一坨翔：加粗

出来冒个泡：倾斜

感觉这里已经待不下去了：倾斜

在Bootstrap中，可以使用`<b>`和`<strong>`标签让文本直接加粗。还可以通过使用标签`<em>`或`<i>`来实现斜体：

我是一个段落，这个段落中“强调”一词将会加粗显示。

我是一个段落，这个段落中“强调”一词将会加粗显示。

我正在学习Bootstrap。我发现Bootstrap真的好强大。

“`
Bootstrap定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

• .text-muted：提示，使用浅灰色（#999）
• .text-primary：主要，使用蓝色（#428bca）
• .text-success：成功，使用浅绿色(#3c763d)
• .text-info：通知信息，使用浅蓝色（#31708f）
• .text-warning：警告，使用黄色（#8a6d3b）
• .text-danger：危险，使用褐色（#a94442）

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

• .text-left：左对齐left
• .text-center：居中对齐center
• .text-right：右对齐right
• .text-justify：两端对齐justify