Hello, world!

Hello, world!

h1. Bootstrap 框架 Secondary text

h2. Bootstrap 框架 Secondary text

h3. Bootstrap 框架 Secondary text

h4. Bootstrap 框架 Secondary text

h5. Bootstrap 框架 Secondary text
h6. Bootstrap 框架 Secondary text

你可以使用 mark 標籤以 醒目提示 文字內容。

刪除線    此行文字是要被視為已刪除文字。This line of text is meant to be treated as no longer accurate.

底線      此行文字是要被視為已新加入的文字。此行文將會呈現底線效果。此行文將會呈現底線效果。

粗體     呈現粗體文字效果

斜體    呈現斜體文字效果

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
4 .active. .success. .warning. .danger. .info. Table cell
    Primary link Link
自適應圖片 Responsive image
圖片形狀
 ... ... ...    

 

 

 

 

 

 

 

 

 

 


Example heading Default Primary Success Info Warning Danger

 

 

Inbox 42

 

 

Hello, world!

這是一個輕量、彈性的元件,它能延展至整個瀏覽器的可視區域以展示網站的關鍵內容。

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

 

 

 

...

Thumbnail label

...

Button Button

 

 

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

 

 

Generic placeholder image

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Generic placeholder image

 

 

自定內容

清單項目幾乎可加入任何 HTML 在其中,甚至類似下面的已連結清單群組

禁用項目 disabled 14 提示標誌 badge list-group-item active list-group-item-success active list-group-item-success list-group-item-info list-group-item-warning list-group-item-danger

 

 

3.19 面板 基本範例
Panel heading without title
Panel content
混合

Panel 面板標題

Panel 面板內容
list-group-item-success list-group-item-info list-group-item-warning list-group-item-danger
...
...

 

 

2.2.6 範例:行動與桌面
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
2.2.7 範例:行動、平板、桌面
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
2.2.8 範例:column 換行
.col-xs-9
.col-xs-4
因為 9 + 4 = 13 > 12,此 4 column 寬度的 div 會被包裝到新的一行作為一個連續的單元。
.col-xs-6
後續 column 會順著新行繼續
2.2.9 重設自適應 column
.col-xs-6 .col-sm-3
重置你的可視區域大小,或是在你的手機瀏覽此範例。
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
2.2.10 巢狀 column
Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
2.2.11 column 排序
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9