Bootstrap 基础CSS - 排版(Typography)
强调(Emphasis)使用.lead使段落突出。
[html]
<p class="lead">...</p>
用<small>标签显示不重要的文字。
用<strong>标签显示重要的文字。
用<em>标签使文字倾斜。
使用颜色来表达一定的含义。
[html]
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat port易做图 ligula.</p>
缩写(Abbreviations)
使用<abbr>标签表示缩写,title属性用于对缩写的详细表述。
希望缩写的字体稍微小些时可以添加.initialism。
[html]
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址(Addresses)
使用<address>标签表示地址,记得在每一行结束时添加<br>使得格式一致。
[html]
<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>
引用(Blockquotes)
使用<blockquote>标签来包含引用的HTML,直接引用时推荐使用<p>标签。
[html]
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
用<small>标签来标识引用源。同时使用<cite>标签来包含引用源的名字。
[html]
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
如果希望引用块在右侧排列,可以使用.pull-right。
列表(Lists)
无序列表(Unordered)
使用<ul>和<li>标签。
[html]
<ul>
<li>...</li>
</ul>
有序列表(Ordered)
使用<ol>和<li>标签。
[html]
<ol>
<li>...</li>
</ol>
无样式(Unstyled)
向<ul>添加.unstyled。
[html]
<ul class="unstyled">
<li>...</li>
</ul>
行内(Inline)
将所有列表项放在一行上。只需向<ul>添加.inline。
[html]
<ul class="inline">
<li>...</li>
</ul>
描述(Description)
父项和相应描述的列表。
[html]
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
想将父项和描述水平放置的话,只需向<dl>添加.dl-horizontal。
补充:web前端 , HTML/CSS ,