bootstrap柵格系統(tǒng)示例代碼分享
更新時(shí)間：2017年05月22日 14:49:57 作者：YY小蘋果
這篇文章主要為大家詳細(xì)介紹了bootstrap柵格系統(tǒng)示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了bootstrap柵格系統(tǒng)的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>柵格系統(tǒng)</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
<style>
.a{
background-color: #ccc;
height: 50px;
border: 1px solid #333;
}
</style>
</head>
<body>
<!--1170px-->
<div class="container">
<div class="row">
<div class="col-md-1 a">1</div>
<div class="col-md-1 a">2</div>
<div class="col-md-1 a">3</div>
<div class="col-md-1 a">4</div>
<div class="col-md-1 a">5</div>
<div class="col-md-1 a">6</div>
<div class="col-md-1 a">7</div>
<div class="col-md-1 a">8</div>
<div class="col-md-1 a">9</div>
<div class="col-md-1 a">10</div>
<div class="col-md-1 a">11</div>
<div class="col-md-1 a">12</div>
</div>
<div class="row">
<div class="col-md-9 a">9</div>
<div class="col-md-3 a">3</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
<div class="col-lg-3 col-md-4 a">a</div>
</div>
</div>
<!--嵌套
style="padding: 0",因?yàn)闁鸥裣到y(tǒng)默認(rèn)有15px 的padding-->
<div class="container">
<div class="row">
<div class="col-lg-9 a" style="padding: 0">
<div class="col-lg-4 a">a</div>
<div class="col-lg-4 a">a</div>
<div class="col-lg-4 a">a</div>
</div>
<div class="col-lg-3 a">a</div>
</div>
</div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了基于canvas的二維碼邀請函生成插件。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
JS獲取當(dāng)前日期時(shí)間并定時(shí)刷新示例
這篇文章主要介紹了JS如何獲取當(dāng)前日期時(shí)間并執(zhí)行定時(shí)刷新，示例代碼如下，需要的朋友不要錯(cuò)過2014-06-06
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)底部分享功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
手機(jī)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了手機(jī)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
一個(gè)模塊就是實(shí)現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。模塊開發(fā)需要遵循一定的規(guī)范，否則就都亂套了2016-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)登錄與注冊界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了JavaScript按值刪除數(shù)組元素的方法,涉及javascript操作數(shù)組的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript實(shí)現(xiàn)ArrayBuffer到Base64的轉(zhuǎn)換
本文探討了在 JavaScript 中將 ArrayBuffer 轉(zhuǎn)換為 Base64 字符串時(shí)遇到的棧溢出問題,并提供了幾種實(shí)用的解決方案,我們將通過生動的比喻來解釋相關(guān)概念,比較不同方法的性能和兼容性,最終提供一個(gè)平衡而實(shí)用的方法,需要的朋友可以參考下2024-10-10
完美兼容各大瀏覽器獲取HTTP_REFERER方法總結(jié)
發(fā)現(xiàn)一個(gè)關(guān)于瀏覽器兼容的問題，當(dāng)用JS 執(zhí)行代碼 window.location.href=”http://m.fzitv.net” 來進(jìn)行跳轉(zhuǎn)的時(shí)候，F(xiàn)irefox 可以獲取到到HTTP_REFERER頁面，但是在IE中這一項(xiàng)為空2014-06-06
TypeScript?是一種強(qiáng)類型的超集?JavaScript,它為開發(fā)者提供了靜態(tài)類型檢查、代碼提示以及更好的可維護(hù)性,本文將深入解析?TypeScript?裝飾器,從基礎(chǔ)概念到高級用法,逐步探討其作用、原理以及實(shí)際應(yīng)用場景,以幫助你更好地理解和利用這一功能,需要的朋友可以參考下2023-09-09