bootstrap32-響應式實用工具類
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Bootstrap 輔助類</title>
<link rel=”stylesheet” href=”http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css”>
</head>
<body>
<div class=”container” style=”padding: 40px;”>
<div class=”row visible-on”>
<div class=”col-xs-6 col-sm-3″ style=”background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;”>
<span class=”hidden-xs”>特別小型</span>
<span class=”visible-xs”> 在特別小型裝置上可見</span>
</div>
<div class=”col-xs-6 col-sm-3″ style=”background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;”>
<span class=”hidden-sm”>小型</span>
<span class=”visible-sm”> 在小型裝置上可見</span>
</div>
<div class=”clearfix visible-xs”></div>
<div class=”col-xs-6 col-sm-3″ style=”background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;”>
<span class=”hidden-md”>中型</span>
<span class=”visible-md”> 在中型裝置上可見</span>
</div>
<div class=”col-xs-6 col-sm-3″ style=”background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;”>
<span class=”hidden-lg”>大型</span>
<span class=”visible-lg”> 在大型裝置上可見</span>
</div>
</div>
</div>
<script src=”http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js”></script>
<script src=”http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js”></script>
</body>
</html>
相關文章
- 第 6 章 輔組類和響應式工具
- [開發教程]第9講:Bootstrap響應式佈局的實用類boot
- [譯] 響應式 Web 應用(四)Web
- [譯] 響應式 Web 應用(五)Web
- [譯] 響應式 Web 應用(三)Web
- [譯] 響應式 Web 應用(二)Web
- [譯] 響應式 Web 應用(一)Web
- bootstrap 響應式工具 隱藏效果boot
- 自己實現一個VUE響應式--VUE響應式原理Vue
- [譯] 用 Flutter 實現 Facebook 的響應式按鈕Flutter
- 響應式設計的5個CSS實用技巧CSS
- Vue 響應式實現原理Vue
- 網頁響應式佈局的應用網頁
- Vue響應式—-資料響應式原理Vue
- Vue響應式----資料響應式原理Vue
- (五)Bootstrap 輔助組和響應式工具boot
- 由淺入深,帶你用JavaScript實現響應式原理(Vue2、Vue3響應式原理)JavaScriptVue
- 前端簡潔並實用的工具類函式封裝前端函式封裝
- 用Google Chrome移動模擬工具做更好的響應式設計GoChrome
- 替你解憂!9款免費且超實用的響應式網頁測試工具網頁
- 響應式佈局測試工具,響應式網站線上測試【日照藍圖網路】網站
- SpringBoot中的響應式web應用Spring BootWeb
- rem在響應式佈局中的應用REM
- 響應式程式設計與響應式系統程式設計
- bootstrap重置項 及響應式版心 row類清除marginboot
- Vue 3 響應式原理及實現Vue
- 標籤實現響應式圖片
- 通用結果類用於返回響應結果
- Web應用課 2.4 CSS——flex、響應式佈局WebCSSFlex
- 【vue】用圖告訴你響應式原理Vue
- Facebook暫停中國工具類應用廣告
- 在檢視類裡新增左鍵響應函式OnLButtonDown函式
- 實用性工具類——Post請求
- RSocket一種新的響應式應用新協議協議
- 前端響應式佈局原理與實踐前端
- 如何實現 font-size 的響應式
- Vue響應式原理與模擬實現Vue
- Vue響應式資料: Observer模組實現VueServer