Bootstrap柵格系統(tǒng)簡(jiǎn)單實(shí)現(xiàn)代碼
更新時(shí)間：2017年03月06日 09:01:12 作者：deepquiet
這篇文章主要為大家詳細(xì)介紹了Boostrap柵格系統(tǒng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Bootstrap柵格系統(tǒng)的簡(jiǎn)單介紹，供大家參考，具體內(nèi)容如下
柵格系統(tǒng)：總共分為12個(gè)，超過12個(gè)會(huì)自動(dòng)換行，可嵌套，嵌套也不可超過12個(gè)，且不會(huì)超過父欄
代碼：
<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é)果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
簡(jiǎn)單時(shí)間提示DEMO從0開始一直進(jìn)行計(jì)時(shí)
點(diǎn)擊按鈕輸入框會(huì)從0開始一直進(jìn)行計(jì)時(shí)，具體的實(shí)現(xiàn)示例如下，感興趣的朋友可以嘗試操作下哦2013-11-11
JavaScript網(wǎng)頁表單form中禁止自動(dòng)提交的兩種方式
本文是我本人在開發(fā)網(wǎng)頁時(shí),在表單中加入了button按鈕,本來是用于jQuery點(diǎn)擊相應(yīng)事件的按鈕,然后,但我點(diǎn)擊button時(shí),發(fā)現(xiàn)不是達(dá)到j(luò)Query指定效果,所以在本文中,我們將討論網(wǎng)頁表單（form）中提交的兩種方式,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了tracking.js頁面識(shí)別人臉插件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
使用GPT寫代碼實(shí)現(xiàn)高亮頁面關(guān)鍵字
這篇文章主要為大家介紹了使用GPT寫代碼實(shí)現(xiàn)高亮頁面關(guān)鍵字示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
javascript執(zhí)行環(huán)境及作用域詳解
這篇文章主要為大家詳細(xì)介紹了javascript執(zhí)行環(huán)境及作用域，分別針對(duì)javascript執(zhí)行環(huán)境及作用域進(jìn)行探討，感興趣的小伙伴們可以參考一下2016-05-05
JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來dump某些對(duì)象的詳細(xì)信息,需要的朋友可以參考下2014-12-12
js獲取url參數(shù)代碼實(shí)例分享(JS操作URL)
這篇文章主要介紹了js分析url獲取url參數(shù)，可以獲取?前面部分、#及后面部分，大家看代碼吧2013-12-12
Javascript實(shí)現(xiàn)html轉(zhuǎn)pdf高清版（提高分辨率）
這篇文章主要介紹了Javascript將html轉(zhuǎn)成pdf高清版（提高分辨率）,需要的朋友可以參考下2020-02-02
JavaScript動(dòng)態(tài)創(chuàng)建二維數(shù)組的方法示例
這篇文章主要介紹了JavaScript動(dòng)態(tài)創(chuàng)建二維數(shù)組的方法,結(jié)合實(shí)例形式分析了javascript動(dòng)態(tài)創(chuàng)建二維數(shù)組的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-02-02
Proxy是ES6新增的內(nèi)置對(duì)象,用于攔截并自定義對(duì)象的各種操作,通過定義攔截器,可以實(shí)現(xiàn)數(shù)據(jù)校驗(yàn)和保護(hù)、日志記錄、數(shù)據(jù)綁定和觀察等功能2025-01-01