您现在的位置:首页 >> 前端 >> 内容

Bootstrap 基础CSS - 排版(Typography)

时间:2013/1/27 16:13:27 点击:

  核心提示:强调(Emphasis)使用.lead使段落突出。[html] p class=lead.../p 用small标签显示不重要的文字。用strong标签显示重要的文字。用em标签使文字倾斜。使用颜色来...
强调(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 porttitor 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。

 

Tags:BO OO OT TS 
作者:网络 来源:不详