DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 第六章之輔組類與響應式工具
第六章之輔組類與響應式工具
編輯:關於JavaScript     

Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發更加快捷。

學習要點:

1.輔組類

2.響應式工具

本節課我們主要學習一下 Bootstrap 的輔組類和響應式工具, 輔助類提供了一組類來輔組頁面設計,而響應式工具則利用媒體查詢顯示或隱藏某些內容。

一.輔助類

Bootstrap 在布局方面提供了一些細小的輔組樣式,用於文字顏色以及背景色的設置、顯示關閉圖標等等。

1.情景文本顏色

樣式列表
樣式名 描述
text-muted 柔和灰
text-primary 主要藍
text-success 成功綠
text-info 信息藍
text-warning 警告黃
text-danger 危險紅 
//各種色調的字體
<p class="text-muted">Bootstrap 視頻教程</p>
<p class="text-primary">Bootstrap 視頻教程</p>
<p class="text-success">Bootstrap 視頻教程</p>
<p class="text-info">Bootstrap 視頻教程</p>
<p class="text-warning">Bootstrap 視頻教程</p>
<p class="text-danger">Bootstrap 視頻教程</p> 

2.情景背景色

樣式列表

樣式名 描述
bg-primary 主要藍
bg-success 成功綠
bg-info 信息藍
bg-warning 警告黃
bg-danger 危險紅 
//各種色調的背景
<p class="bg-primary">Bootstrap 視頻教程</p>
<p class="bg-success">Bootstrap 視頻教程</p>
<p class="bg-info">Bootstrap 視頻教程</p>
<p class="bg-warning">Bootstrap 視頻教程</p>
<p class="bg-danger">Bootstrap 視頻教程</p> 

3.關閉按鈕

<button type="button" class="close">×</button> 

4.三角符號

<span class="caret"></span> 

5.快速浮動

<div class="pull-left">左邊</div>
<div class="pull-right">右邊</div> 

注:這個浮動其實就是 float,只不過使用了!important 加強了優先級。

6.塊級居中

<div class="center-block">居中</div> 

注:就是 margin:x auto;並且設置了 display:block;。

7.清理浮動

<div class="clearfix"></div> 

注:這個 div 可以放在需要清理浮動區塊的前面即可。

8.顯示和隱藏

<div class="show">show</div>
<div class="hidden">hidden</div> 

二.響應式工具

在媒體查詢時,針對不同的屏幕大小,有時需要顯示和隱藏部分內容。響應式工具類,就提供了這種解決方案。

//超小屏幕激活顯示
<div class="visible-xs-block a">Bootstrap</div> 
//超小屏幕激活隱藏
<div class="hidden-xs a">Bootstrap</div> 

注:對於顯示的內容,有三種變體,分別為:block、inline-block、inline。

以上所述是小編給大家介紹的BootStrap組件之輔組類與響應式工具的相關內容,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved