当前位置:编程学习 > html/css >>

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 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。
 
补充:web前端 , HTML/CSS  ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,