(五)Bootstrap 輔助組和響應式工具
本節知識點
- 輔助類
- 響應式工具
(一) 輔助類
Bootstrap提供了一些細小的輔組樣式,用於文字顏色和背景色的設定,顯示關閉圖示等等。
(1) 情景文字顏色
<p class="text-info">學習Bootstrap</p>
<p class="text-danger">學習Bootstrap</p>
<p class="text-warning">學習Bootstrap</p>
<p class="text-success">學習Bootstrap</p>
<p class="text-promary">學習Bootstrap</p>
<p class="text-muted">學習Bootstrap</p>
(2) 背景色也一樣
<p class="bg-info">學習Bootstrap</p>
<p class="bg-danger">學習Bootstrap</p>
<p class="bg-warning">學習Bootstrap</p>
<p class="bg-success">學習Bootstrap</p>
<p class="bg-promary">學習Bootstrap</p>
(3)關閉按鈕 close
<button class="close">X</button>
(4) 三角符號 caret
<span class="caret"></span>
(5) 快速浮動
<div class="pull-left"></div>
<div class="pull-right"></div>
(6) 清理浮動
這個div可以放在需要清理浮動區塊的前面即可
<div class="clearfix"></div>
(7) 顯示和隱藏
<div class="show"></div>
<div class="hidden"></div>
(8) 響應式工具 visible ,hidden
<div class="col-xs-5 visible-xs a">Bootstrap</div>
<div class="visible-sm-block a">Bootstrap2</div>
<div class="hidden-md a">Bootstrap3</div>
相關文章
- bootstrap 響應式工具 隱藏效果boot
- bootstrap32-響應式實用工具類boot
- 第 6 章 輔組類和響應式工具
- bootstrap6-響應式影像boot
- bootstrap17-響應式表格佈局boot
- Bootstrap 響應式後臺管理皮膚boot
- bootstrap 響應式佈局 居中問題boot
- [譯] 響應式 Web 應用(五)Web
- 模仿bootstrap寫響應式圖片佈局boot
- 使用BootStrap進行響應式佈局案例boot
- 響應式佈局:CSS-flexbox & BootstrapCSSFlexboot
- bootstrap重置項 及響應式版心 row類清除marginboot
- [開發教程]第7講:Bootstrap響應式佈局boot
- 基於 Bootstrap 的響應式後臺儀表板boot
- 18個最好的響應式Web設計工具和庫Web
- 響應式專案總結-輪播和響應式圖片
- 五,搭建環境:輔助功能
- Vue響應式—-資料響應式原理Vue
- Vue響應式----資料響應式原理Vue
- [開發教程]第9講:Bootstrap響應式佈局的實用類boot
- Bootstrap3的響應式縮圖幻燈輪播效果設計boot
- 7 個 Bootstrap 線上編輯器用於快速開發響應式網站boot網站
- 響應式佈局測試工具,響應式網站線上測試【日照藍圖網路】網站
- [開發教程]第25講:Bootstrap導航選單的響應式設計boot
- 29個基於Bootstrap的HTML5響應式網頁設計模板bootHTML網頁
- 響應式程式設計與響應式系統程式設計
- Response響應位元組資料
- bootstrap學習筆記 Bootstrap 列表組boot筆記
- 自己實現一個VUE響應式--VUE響應式原理Vue
- 響應式前端框架前端框架
- 響應式影象教程
- 響應式影像教程
- 響應式佈局
- Vue 響應式原理Vue
- 響應式變數變數
- 基於ThinkPHP5.0+BootStrap框架開發的響應式介面部落格系統PHPboot框架
- 利用bootstrap框架 實現響應式佈局阿里百秀案例以及遇到的問題!boot框架阿里
- 推薦15款響應式Web設計測試工具Web