bootstrap框架之基本CSS樣式
排版
標題
從 <h1> 到 <h6> 所有的HTML標題都是可用的.
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Body copy
Bootstrap定義的全局 font-size 是 14px，line-height 是 20px。這些樣式應用到了 <body> 和所有的段落上。另外，對 <p> (段落)還定義了1/2行高(默認爲10px)的底部外邊距(margin)屬性。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Lead body copy
要突出一個段落只需加 .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
構建在Less
排版規模是在variables.less這2個LESS變量: @baseFontSize and @baseLineHeight的基礎上.
第一個是貫穿整個font-size, 第二個是line-heightThe. 我們使用這些變量和一些簡單的數值來創建margin, padding, 和 line-height 等等類型.
強調
<small>
強調內嵌和文本塊, 使用小標籤.
This line of text is meant to be treated as fine print.
<p> <small>This line of text is meant to be treated as fine print.</small> </p>
加粗
用font-weight強調一小段文字.
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
斜體
用 斜體 強調一小段文字.
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
注意! 在HTML5可隨意使用 <b> 和 <i>, <b>是爲了突出詞或短語,
而不會有其他重要含義, 而 <i> 提供主要是語態, 專業術語等含義.
對齊
簡單方便將文字對齊的屬性.
居左文字.
居中文字.
居右文字.
- <p class="text-left">居左文字.</p>
- <p class="text-center">居中文字.</p>
- <p class="text-right">居右文字.</p>
強調的屬性
通過一些顏色屬性來強調.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
- <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>
縮寫
參照在鼠標懸停在縮寫和縮寫詞就顯示完整內容的HTML的<abbr> 元素.
abbr元素帶有 title 屬性之後, 縮寫的部分的底部會有一條虛線,
並且鼠標懸停在上面會有一個“幫助”符號, 同時還會顯示title所提供的內容.
<abbr>
如想看完整文字可把鼠標懸停在縮寫詞, 但需要包含 title 屬性.
An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
如需對縮寫詞字體大小稍微縮小, 可添加 .initialism .
HTML is the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
地址
讓聯繫信息最接近原始格式的形式呈現.
<address>
換行使用 <br>.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
[email protected]
- <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:#">[email protected]</a>
- </address>
引用
在標準的引用裏, 可以很簡單的改變風格和內容.
默認引用
把任何 HTML 嵌套在 <blockquote> 裏面即可.
對於直接的引用, 我們建議使用 <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
- </blockquote>
引用選項
在標準的引用裏, 可以很簡單的改變風格和內容.
標出來源
添加 <small>> 標籤來註明引用的來源. 來源標題可以放在這個<cite> 標籤裏面.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
- <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 屬性, 可讓引用向右靠齊.
- <blockquote class="pull-right">
- ...
- </blockquote>
列表
無序列表
用於沒有明確信息的列表.
- 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
- <ul>
- <li>...</li>
- </ul>
有序列表
用於有明確或需按序號排序的信息的列表.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- <ol>
- <li>...</li>
- </ol>
無樣式列表
用於不需要列表樣式的列表裏.
- 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
- <ul class="unstyled">
- <li>...</li>
- </ul>
行(水平)列表
使用 inline 讓列表項水平排列一行, 同時每項之間都有一定的間距.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
- <ul class="inline">
- <li>...</li>
- </ul>
描述
對一個(條款)列表進行關聯描述.
- 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>
- <dt>...</dt>
- <dd>...</dd>
- </dl>
水平狀態的描述
使用<dl>把列表和對其的描述一對一橫向顯示.適用於術語的定義/解釋
- A description list is perfect for defining terms.
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Etiam porta sem malesuada magna mollis euismod.
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- <dl class="dl-horizontal">
- <dt>...</dt>
- <dd>...</dd>
- </dl>
注意!水平描述通過text-overflow會對過長而無法在左欄中完全顯示的列名截斷掉一部分.
而在較窄的視口(寬度)中, 會改變成垂直(形式)表述, 來適應當前屏幕.