1. 程式人生 > >5_bootstrap之響應式佈局|列表|按鈕

5_bootstrap之響應式佈局|列表|按鈕

5、響應式工具

為針對性地在移動頁面上展示和隱藏不同的內容,bootStrap提供響應式工具。

可以讓開發人員通過該工具決定,在何種螢幕尺寸下,隱藏或者顯示某些元素

幫助手冊位置:全域性CSS樣式---響應式工具

 

6、列表

BootStrap同樣提供了實用的列表樣式供開發人員使用。

幫助手冊位置:全域性CSS樣式----排版----列表

.list-inline

將列表所有元素放置於一行

 

示例:

 

效果:

7、按鈕

BootStrap提供了豐富的按鈕樣式供開發人員使用。

幫助手冊位置:全域性CSS樣式----按鈕

任何HTML元素加上以下樣式都會變成對應按鈕

.btn btn-default

示例:

<a class="btn btn-default">Link</a>

效果:

.btn btn-primary

示例:

<a class="btn btn-primary">(首選項)Primary</a>

效果:

.btn btn-success

示例:

<a class="btn btn-success">(成功)Success</a>

效果:

.btn btn-info

示例:

<a class="btn btn-info">(一般資訊)Info</a>

效果:

.btn btn-warning

示例:

<a class="btn btn-warning">(警告)Warning</a>

效果:

        

.btn btn-danger

示例:

<a class="btn btn-danger">(危險)Danger</a>

效果:

   

.active

表示按鈕被點選的樣式

示例:

<a class=”btn btn-danger active”>(危險)Danger</a>

效果:

   

.disabled

表示按鈕被禁用的樣式

示例:

<a class=”btn btn-danger disabled”>(危險)Danger</a>

效果: