bootstrap_排版
排版
1.对齐
1. text-left 左对齐
2.text-right 右对齐
3.text-center 居中
4.text-justify 齐行
5.text-nowrap 不换行
2.改变大小写
1.text-lowercase 全部改成小写
2.text-uppercase 全部改成大写
3.text-capitalize 首字母大写
3.基本缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）, 但需要包含 title 属性。
4.首字母缩略语
为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。（PS:当然，笔者在这里并没有发现两者之间有什么很大的不同）
5.地址
地址在我们的网站显示中也是一个比较常见的信息之一，我们需要将他以一种比较合适的姿态去显示.
在进行引用地址的时候，我们可以将下面的代码进行复制使用
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address>
这个时候，我们的地址就能以一种比较合适的形式去呈现。
6.引用
<!--引用--> <blockquote class="blockquote-reverse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <br /><br /> <br /> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <br /><br /><br /> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
这是引用的具体使用，但是对于笔者来说，还没有使用过.
7.列表
无样式列表
移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。class:list-unstyled
内联列表
通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。 class:list-inline
8.描述
普通描述
<dl> <dt>...</dt> <dd>...</dd> </dl>
水平描述:也就是说主要进行作用的类是:dl-horizontal
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
9.自动截断
自动截断
通过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。
10.代码描述
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--引用--> <blockquote class="blockquote-reverse"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <br /><br /> <br /> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> <br /><br /><br /> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote> <br /><br /><br /><br /> <address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <br /><br /><br /><br /> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address> <br /><br /><br /><br /> <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> <br /><br /><br /> <abbr title="attribute">attr</abbr> <br /><br /><br /><br /> <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p> <br /><br /><br /><br /> <p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p> </body> </html>
