Bootstrap学习笔记（二）-----Bootstrap每天必学之基础排版
本次主要来了解的是排版，这个大部分在HTML的基本标签中也是存在的，所以相对比较简单，为了保证系列的完整性，也顺带复习下，还是记录一下。主要内容如下：
- 1.标题
- 2.页面主体
- 3.强调
- 4.缩略语
- 5.地址
- 6.引用
- 7.列表
一、标题
Html中的所有标题标签，从<h1>到<h6>均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。
<div class="container"> <h1 class="page-header">标题</h1> <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> </div> 在标题内还可以包含<small>标签或.small元素，可以用来标记副标题。
<div class="container"> <h1 class="page-header">标题</h1> <h1>h1. Bootstrap heading</h1><small>Secondary text</small> <h2>h2. Bootstrap heading</h2><small>Secondary text</small> <h3>h3. Bootstrap heading</h3><small>Secondary text</small> <h4>h4. Bootstrap heading</h4><small>Secondary text</small> <h5>h5. Bootstrap heading</h5><small>Secondary text</small> <h6>h6. Bootstrap heading</h6><small>Secondary text</small></div>二、页面主体
Bootstrap将全局font-size设置为14px，line-height为1.428 。这些属性直接赋给<body>和所有段落元素。另外，<p>（段落）还被设置了等于1/2行高的底部外边距（margin）（即10px）。 <h1 class="page-header">页面主体</h1><div style="border:1px solid "> <p style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. odio sem nec elit.</p></div>通过添加.lead可以让段落突出显示。
<h1 class="page-header">Lead Body Copy</h1><div style="border:1px solid "> <p class="lead" style="border:1px solid ">Nullam quis risus eget urna sem nec elit.</p></div>三、强调
直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。
直接使用HTML中用于标注强调的标签，并给他们赋予少许的样式。
1.小号文本
对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。你还可以为行内元素赋予.small以代替任何<small>标签。
对于不需要强调的inline或block类型的文本，使用<small>标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。你还可以为行内元素赋予.small以代替任何<small>标签。
small>This line of text is meant to be treated as fine print.</small>
2.着重
通过增加font-weight强调一段文本。
<strong>rendered as bold text</strong>
3.斜体
用斜体强调一段文本。
<em>rendered as italicized text</em>
4.对齐class
通过文本对齐class，可以简单方便的将文字重新对齐。
<p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p>很明显第一行左对齐，第二行居中，第三行右对齐。
5.强调class
这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。
这些class通过颜色来表示强调。也可以应用于链接，当鼠标盘旋于链接上时，其颜色会变深，就像默认的链接样式。
<h1>强调Class</h1> <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>四、缩略图
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。基本缩略语 如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。基本缩略语 如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
<abbr title="attribute">attr</abbr>
Initialism
为缩略语添加.initialism可以将其font-size设置的更小些。
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
五、地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890</address><address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a></address>六、引用
在你的文档中引用其他来源的内容。
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用，我们建议用<p>标签。
将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用，我们建议用<p>标签。
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>引用选项
对于标准样式的<blockquote>，可以通过几个简单的变体就能改变风格和内容。
命名来源:添加<small>标签来注明引用来源。来源名称可以放在<cite>标签里面。
对于标准样式的<blockquote>，可以通过几个简单的变体就能改变风格和内容。
命名来源:添加<small>标签来注明引用来源。来源名称可以放在<cite>标签里面。
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
会多一个Source Title
另一种展示风格使用.pull-right可以让引用展现出向右侧移动、对齐的效果。
<blockquote class="pull-right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>
向右对齐移动了额，当然也有相应的pull-left。
七、列表
无序列表
顺序无关紧要的一列元素。
七、列表
无序列表
顺序无关紧要的一列元素。
<ul><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li><li>Lorem ipsum dolor sit amet</li></ul>有序列表
顺序至关重要的一组元素。
顺序至关重要的一组元素。
<ol> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li></ol>同理有序列表
无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。
无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。
内联列表
通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。
通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。
<ul class="list-inline"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>
浙公网安备 33010602011771号