首頁 > web前端 > js教程 > 第六章之輔組類別與響應式工具_javascript技巧

第六章之輔組類別與響應式工具_javascript技巧

WBOY
發布: 2016-05-16 15:04:07
原創
1475 人瀏覽過

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">&times;</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組件之輔組類與響應式工具的相關內容,希望對大家有所幫助!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板