Typography 文字排版
标签的语义
1. 含语义的标签
2. 不含语义, 但是具有样式的class
<h1></h1>
<p class="h1"></p>
两个标签中的内容显示具有相同的效果
但是第一个标签中的内容为标题
第二个标签中的内容仅仅是使用了标题的样式
如果是还不够大
可以使用以上display heading这种样式
清除预设的标签样式
<ul class="list-unstyled">
使列表元素显示在一行内
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
描述列表对齐
<dl class="row"> <dt class="col-sm-3">Description lists</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> <dt class="col-sm-3">Euismod</dt> <dd class="col-sm-9"> <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p> <p>Donec id elit non mi porta gravida at eget metus.</p> </dd> <dt class="col-sm-3">Malesuada porta</dt> <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd> <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> <dt class="col-sm-3">Nesting</dt> <dd class="col-sm-9"> <dl class="row"> <dt class="col-sm-4">Nested definition list</dt> <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> </dl> </dd> </dl>
text-truncate
会将多余的文字裁切掉