Bootstrap柵格系統(tǒng)簡單實現(xiàn)代碼
更新時間：2017年03月06日 09:01:12 作者：deepquiet
這篇文章主要為大家詳細介紹了Boostrap柵格系統(tǒng)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Bootstrap柵格系統(tǒng)的簡單介紹，供大家參考，具體內(nèi)容如下
柵格系統(tǒng)：總共分為12個，超過12個會自動換行，可嵌套，嵌套也不可超過12個，且不會超過父欄
代碼：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet">
<link rel="stylesheet">
<style>
div{
border:1px solid #cccccc;
}
</style>
</head>
<body>
<!-- 柵格系統(tǒng) -->
<div class="container">
<div class="row">
<div class="bg-primary col-sm-9">A</div>
<div class="bg-success col-sm-2">B</div>
<div class="bg-info col-sm-1">C</div>
</div>
</div>
<!-- 中等屏幕與超小屏幕的處理 -->
<div class="container bg-primary">
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>
<!-- 偏移：offset -->
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
</div>
<!-- 嵌套 -->
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2
</div>
<div class="col-xs-4 col-sm-6">
Level 2
</div>
</div>
</div>
</div>
</div>
<!-- pull:從右向左 push:從左向右 -->
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-9 .col-md-pull-9</div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>
結(jié)果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
點擊按鈕輸入框會從0開始一直進行計時，具體的實現(xiàn)示例如下，感興趣的朋友可以嘗試操作下哦2013-11-11
JavaScript網(wǎng)頁表單form中禁止自動提交的兩種方式
本文是我本人在開發(fā)網(wǎng)頁時,在表單中加入了button按鈕,本來是用于jQuery點擊相應(yīng)事件的按鈕,然后,但我點擊button時,發(fā)現(xiàn)不是達到j(luò)Query指定效果,所以在本文中,我們將討論網(wǎng)頁表單（form）中提交的兩種方式,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細介紹了tracking.js頁面識別人臉插件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要為大家介紹了使用GPT寫代碼實現(xiàn)高亮頁面關(guān)鍵字示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
javascript執(zhí)行環(huán)境及作用域詳解
這篇文章主要為大家詳細介紹了javascript執(zhí)行環(huán)境及作用域，分別針對javascript執(zhí)行環(huán)境及作用域進行探討，感興趣的小伙伴們可以參考一下2016-05-05
JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來dump某些對象的詳細信息,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了js分析url獲取url參數(shù)，可以獲取?前面部分、#及后面部分，大家看代碼吧2013-12-12
Javascript實現(xiàn)html轉(zhuǎn)pdf高清版（提高分辨率）
這篇文章主要介紹了Javascript將html轉(zhuǎn)成pdf高清版（提高分辨率）,需要的朋友可以參考下2020-02-02
JavaScript動態(tài)創(chuàng)建二維數(shù)組的方法示例
這篇文章主要介紹了JavaScript動態(tài)創(chuàng)建二維數(shù)組的方法,結(jié)合實例形式分析了javascript動態(tài)創(chuàng)建二維數(shù)組的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-02-02
Proxy是ES6新增的內(nèi)置對象,用于攔截并自定義對象的各種操作,通過定義攔截器,可以實現(xiàn)數(shù)據(jù)校驗和保護、日志記錄、數(shù)據(jù)綁定和觀察等功能2025-01-01