響應式網(wǎng)格系統(tǒng)隨著屏幕或視口（viewport）尺寸的增加鱼辙，系統(tǒng)會自動分為最多12列
規(guī)則
行必須放置在 .container class 內(nèi)涩咖，以便獲得適當?shù)膶R（alignment）和內(nèi)邊距（padding）。
使用行來創(chuàng)建列的水平組沪停。
內(nèi)容應該放置在列內(nèi)陪拘，且唯有列可以是行的直接子元素。
預定義的網(wǎng)格類苍糠，比如 .row 和 .col-xs-4，可用于快速創(chuàng)建網(wǎng)格布局啤誊。Bootstrap 中的媒體查詢允許您基于視口大小移動岳瞭、顯示并隱藏內(nèi)容拥娄。下面的媒體查詢在 LESS 文件中使用，用來創(chuàng)建 Bootstrap 網(wǎng)格系統(tǒng)中的關鍵的分界點閾值瞳筏。
注意下面的像素值都是設備獨立像素（對應邏輯分辨率）稚瘾，iphone xs max的邏輯分辨率才414x896，目前所有手機都屬于xs設備
/* 超小設備（手機乏矾，小于 768px） /---xs
/ Bootstrap 中默認情況下沒有媒體查詢 */
/* 小型設備（平板電腦孟抗，768px 起） */--sm
@media (min-width: @screen-sm-min) { ... }
/* 中型設備（臺式電腦，992px 起） */--md
@media (min-width: @screen-md-min) { ... }
/* 大型設備（大臺式電腦钻心，1200px 起） */--lg
@media (min-width: @screen-lg-min) { ... }
- div沒在網(wǎng)格布局中時凄硼，是獨占一行的，網(wǎng)格把屏幕寬度平分為12個網(wǎng)格捷沸，可以定義每個列在各種屏幕占用多少個網(wǎng)格摊沉，在沒有定義的屏幕中還是獨占一行（更大的尺寸沒有定義時會向下兼容）
下面代碼在平板設備（768-992）中側(cè)邊占4格，內(nèi)容占8格痒给，由于沒有定義更大尺说墨，768以上尺寸都會是這個布局
小于768的各自獨占一行
原理就是通過@media媒體查詢獲取當前屏幕寬度，然后設置相應div的寬度比例
比如下例中div.col-sm-4在屏幕寬度大于768px時苍柏，css中會出現(xiàn)：
@media (min-width: 768px)
.col-sm-4 {
width: 33.33333333%;
}
@media (min-width: 768px)
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="row">
<div class="col-sm-4">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-sm-8">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
</div>
</body>
</html>
- 組合使用網(wǎng)格
以下布局在任何屏幕下尼斧，左右都會保持4：8的比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-4 col-sm-4">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-xs-4 col-sm-8">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
</div>
</body>
</html>
當然，也可以設置在不同屏幕尺寸下占比不一樣,兩個div加起來的也可以大于或小于12试吁，比如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-2 col-md-4">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-xs-12 col-md-8">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
</div>
</body>
</html>
上面定義了xs和md尺寸比例棺棵，中間的sm沒有定義，所以sm會向下兼容熄捍，保持xs的比例
所以烛恤，在md以下都是2：12的比例，由于超出了屏幕最大的12個網(wǎng)格余耽，所以會有兩行顯示缚柏，第一行保持2/12的顯示寬度，第二行12/12的顯示寬度
瀏覽器拉大到md的寬度以上碟贾，會按4：8比例顯示
- 位置推拉
下面代碼會在md寬度下币喧，把第一個div向右推3個網(wǎng)格，第二個div位置不動袱耽，所以會重疊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4 col-md-push-3">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-md-8">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
</div>
</body>
</html>
以下代碼會把左右div對換：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4 col-md-push-8">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-md-8 col-md-pull-4">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
</div>
</body>
</html>
原位置+推拉可以推拉到屏幕外去粱锐，而不是限制在12個網(wǎng)格內(nèi)
-
網(wǎng)格嵌套
row里面可以嵌套row
下面代碼在md以上屏幕上效果圖：
小屏幕：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-md-8">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
<div class="row">
<div class="col-md-4">
<h2>內(nèi)容標題1</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題2</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題3</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
</div>
</div>
</div>
</body>
</html>
再繼續(xù)添加2個div，并且設置第一個div內(nèi)容長一些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-md-8">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
<div class="row">
<div class="col-md-4">
<h2>內(nèi)容標題1</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題2</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題3</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題4</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題5</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
</div>
</div>
</div>
</body>
</html>
效果如下：
可以看到有點亂扛邑，這是因為網(wǎng)格設置了float:left的原因，可以在中間加一個clearfix類的div來清除浮動铐然，解決這個問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-md-8">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
<div class="row">
<div class="col-md-4">
<h2>內(nèi)容標題1</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題2</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題3</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="clearfix"></div>
<div class="col-md-4">
<h2>內(nèi)容標題4</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題5</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
</div>
</div>
</div>
</body>
</html>
- offset偏移
offset跟pull push不同蔬崩，它會把后面的div一起偏移恶座，不會發(fā)生重疊，如果自己或后面的div偏移超過屏幕沥阳，會另起一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-md-8">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
<div class="row">
<div class="col-md-4">
<h2>內(nèi)容標題1</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題2</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題3</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-md-offset-4">
<h2>內(nèi)容標題4</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題5</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
</div>
</div>
</div>
</body>
</html>
- alert-info
讓某個div更醒目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-md-8">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
<div class="row">
<div class="col-md-4">
<h2>內(nèi)容標題1</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題2</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4">
<h2>內(nèi)容標題3</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="clearfix"></div>
<div class="col-md-4 col-md-offset-4">
<h2>內(nèi)容標題4</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
<div class="col-md-4 alert-info">
<h2>內(nèi)容標題5</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
</div>
</div>
</div>
</div>
</body>
</html>
- 動態(tài)顯示或隱藏
以下側(cè)邊欄再小屏幕下會隱藏
同時小屏幕下會在右側(cè)底下顯示一段小的說明文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="./lib/jquery-3.3.1.min.js"></script>
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-4 hidden-xs">
<h2>側(cè)邊標題</h2>
<p>這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊這里是側(cè)邊</p>
</div>
<div class="col-md-8">
<h2>內(nèi)容標題</h2>
<p>這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容這里是內(nèi)容</p>
<div class="visible-xs alert-info">我顯示出來了</div>
</div>
</div>
</body>
</html>
