使用Bootstrap排版

 前面的話

　　本文將詳細介紹Bootstrap中排版相關的內容

 

標題

【h】

##　　HTML中所有的標題標籤，

 到 

 皆可使用　　預設情況下，從h1到h6的font-size如下所顯示

2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;

　　初始情況，1em = 16px，則換算如下 

32px -> 24px -> 18.72px -> 16px -> 13.28px -> 10.72px;

　　Boostrap將h1-h6的字體大小font-size重新進行了設置，如下所示

36px -> 30px -> 24px -> 18px -> 14px -> 12px;

　　另外，也提供了 

.h1 到 .h6 類，為的是給內聯（ inline）屬性的文字賦予標題的樣式，除了display屬性不同外，其他屬性與<h1> 到<h6 id="樣式相同">樣式相同</h6> </h1>

h1,.h1{
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

 【small】

#　　在標題內還可以包含 

 標籤或賦予 .small 類別的元素，可用來標記副標題。 <small>標籤和.small類別的元素的樣式相同</small>

h1 small,.h1 small, h1 .small, .h1 .small{
    font-size: 65%;
    font-weight: normal;
    line-height: 1;
    color: #777;
}

<h1>标题一 <small>副标题一</small>
</h1><h2>标题二 <small>副标题二</small>
</h2><h3>标题三 <small>副标题三</small>
</h3><h4>标题四 <small>副标题四</small>
</h4><h5>标题五 <small>副标题五</small>
</h5><h6>标题六 <small>副标题六</small>
</h6>

 

#段落

【body】

　　預設情況下，頁面font-size為16px，行高line-height(chrome下)為1.334

#　　Bootstrap 將全域 

font -size 設定為 14px，line-height 設定為 20px。這些屬性直接賦予 

 元素和所有段落元素

<span style="color: #000000;">body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    background-color: #fff;<br>　　 margin:0;
}</span>

【p】

　　另外，

 （段落）元素也被設定了等於1/2 行高（即10px）的底部外邊距（margin）

p{
    margin: 0 0 10px;
}

【.lead】

　　透過新增 

.lead 類別可以讓段落反白

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
}

<p>一般内容</p><p>中心内容</p><p>一般内容</p>

 

#內聯文字

【標記文字】

　　文字需要標記，使用標籤

mark, .mark {
    padding: .2em;
    background-color: #fcf8e3;
}

【刪除文字】

　　對於被刪除的文字使用標籤

【無用文字】

　　對於沒用的文字使用 標籤

#【插入文字】

　　額外插入的文字使用 標籤

【帶下劃線的文字】

　　為文字新增底線，使用 標籤

#【小號文本】

　　對於不需要強調的inline或block類型的文本，使用 標籤包裹，其內的文本將被設定為父容器字體大小的85%。標題元素中嵌套的 元素被設定不同的 font-size 。

　　也可以為行內元素賦予.small 類別以代替任何 元素

small, .small {
    font-size: 85%;
}

【著重】

　　透過增加font-weight值強調一段文字

【斜體】

　　用斜體強調一段文字

　　[注意]在HTML5 中可以放心使用 和 標籤。 用於高亮單字或片語，不帶有任何著重的意味；而 標籤主要用於發言、技術詞彙等

<div>You can use the mark tag to <mark>highlight</mark> text.</div><div><del>This line of text is meant to be treated as deleted text.</del></div><div><s>This line of text is meant to be treated as no longer accurate.</s></div><div><ins>This line of text is meant to be treated as an addition to the document.</ins></div><div><u>This line of text will render as underlined</u></div><div><small>This line of text is meant to be treated as fine print.</small></div><div><strong>rendered as bold text</strong></div><div><em>rendered as italicized text</em></div>

# 

對齊

　　透過文字對齊類，可以簡單方便的將文字重新對齊

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-justify {
    text-align: justify;
}
.text-nowrap {
    white-space: nowrap;
}

<p>Left aligned text.</p>
<p>Center aligned text.</p>
<p>Right aligned text.</p>
<p>Justified text.</p>
<p>No wrap text.</p>

 大小寫

　　透過這幾個類別可以改變文字的大小寫

.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}

#

<p>Lowercased text.</p>
<p>Uppercased text.</p>
<p>Capitalized text.</p>

 

縮寫

#　　當滑鼠懸停在縮寫和縮寫詞上時就會顯示完整內容，Bootstrap 實現了對HTML 的 

 元素的增強樣式。縮寫元素帶有 

title

 屬性，外觀表現為具有較淺的虛線框，滑鼠移至上面時會變成帶有「問號」的指標。如想看完整的內容可把滑鼠懸停在縮寫上（對使用輔助技術的使用者也可見）, 但需要包含title 屬性

【基本縮寫】

abbr[title], abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #777;
}

【縮寫】

　　為縮寫添加 

.initialism

 類，可以讓font-size 變得稍微小一點

###

.initialism {
    font-size: 90%;
    text-transform: uppercase;
}

## ####

<abbr>attr</abbr>
<abbr>HTML</abbr>

############### ######位址######　　讓聯絡資訊以最接近日常使用的格式呈現。在每行結尾加入 ###
### 可以保留所需的樣式######

address {
    margin-bottom: 20px;
    font-style: normal;
    line-height: 1.42857143;
}

######

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr>P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a>first.last@example.com</a>
</address>

###

 

引用

【默认样式的引用】 

　　将任何 HTML 元素包裹在

中即可表现为引用样式。对于直接引用，建议用

标签

blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
}

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

【多种引用样式】

　　对于标准样式的

，可以通过几个简单的变体就能改变风格和内容

　　1、命名来源

　　添加

用于标明引用来源。来源的名称可以包裹进 标签中

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite>Source Title</cite></footer>
</blockquote>

　　2、另一种展示风格

　　通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite>Source Title</cite></footer>
</blockquote>

.blockquote-reverse, blockquote.pull-right {
    padding-right: 15px;
    padding-left: 0;
    text-align: right;
    border-right: 5px solid #eee;
    border-left: 0;
}

 

列表

【无序列表】

　　排列顺序无关紧要的一列元素 

ul, ol {
    margin-top: 0;
    margin-bottom: 10px;

  
• Lorem ipsum dolor sit amet
  
• Consectetur adipiscing elit
  
• Integer molestie lorem at massa
  
• Facilisis in pretium nisl aliquet
  
• Nulla volutpat aliquam velit
        
  • Phasellus iaculis neque
        
  • Purus sodales ultricies
        
  • Vestibulum laoreet porttitor sem
        
  • Ac tristique libero volutpat at
      
    
  
• Faucibus porta lacus fringilla vel
  
• Aenean sit amet erat nunc
  
• Eget porttitor lorem

【有序列表】

　　顺序至关重要的一组元素。 

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

【无样式列表】

　　移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式 

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

  
• Lorem ipsum dolor sit amet
  
• Consectetur adipiscing elit
  
• Integer molestie lorem at massa
  
• Facilisis in pretium nisl aliquet
  
• Nulla volutpat aliquam velit
        
  • Phasellus iaculis neque
        
  • Purus sodales ultricies
        
  • Vestibulum laoreet porttitor sem
        
  • Ac tristique libero volutpat at
      
    
  
• Faucibus porta lacus fringilla vel
  
• Aenean sit amet erat nunc
  
• Eget porttitor lorem

【内联列表】

　　通过设置 display: inline-block; 并添加少量的内边距（padding），将所有元素放置于同一行 

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

  
• Lorem ipsum
  
• Phasellus iaculis
  
• Nulla volutpat

【描述】 

　　带有描述的短语列表。

dl {
    margin-top: 0;
    margin-bottom: 20px;
}
dt {
    font-weight: bold;
}
dt, dd {
    line-height: 1.42857143;
}
dd {
    margin-left: 0;
}

  

Description lists

  

A description list is perfect for defining terms.

  

Euismod

  

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

  

Donec id elit non mi porta gravida at eget metus.

  

Malesuada porta

  

Etiam porta sem malesuada magna mollis euismod.

【水平排列的描述】

　　.dl-horizontal 可以让

内的短语及其描述排在一行。开始是像

的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行

.dl-horizontal dt {float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dl-horizontal dd {
    margin-left: 180px;
}

  

Description lists

  

A description list is perfect for defining terms.

  

Euismod

  

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

  

Donec id elit non mi porta gravida at eget metus.

  

Malesuada porta

  

Etiam porta sem malesuada magna mollis euismod.

  

Felis euismod semper eget lacinia

  

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

 

代码

【内联代码】

 　　通过 标签包裹内联样式的代码片段。

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}

【用户输入】

　　通过 标签标记用户通过键盘输入的内容。

kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #333;
    border-radius: 3px;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}

【代码块】

　　多行代码可以使用

 标签。为了正确的展示代码，注意将尖括号做转义处理。<div class="cnblogs_code"><pre class="brush:php;toolbar:false">pre {
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}