Bootstrap栅格参数
Bootstrap柵格參數
跨設備組合定義
定義一行，在中等分辨率下是8:4，在超小分辨率下是6:6，在小分辨率下是3:6
<hr />
?? <div class="row">
??? ??<div class="col-md-8 col-xs-6 col-sm-3">8</div>
??? ??<div class="col-md-4 col-xs-6 col-sm-6">4</div>
?? </div>
運行結果：
這是在中等分辨率下，此時它是8:4
這是在超小分辨率下，此時它是6:6
這是在小分辨率下，此時它是3:6
也就是說，我們可以指定4種分辨率底下的比例模式。這個我們就叫做跨設備組合。
清除浮動clearfix visible-xs
1）首先我們先重新建一個demo04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo04</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
? <script type="application/javascript" src="js/jquery-1.11.1.min.js"></script>
? ? ? ? ? <script type="application/javascript" src="js/bootstrap.min.js"></script>
?? ?
</head>
<body>
<div id="container">
<div class="row">
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 </div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 ?</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 ?</div>
<div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3 ?</div>
</div>
</div>
</body>
</html>
運行效果：
在超小分辨率底下，前兩個各占6格，后兩個也各占6格，所以要排兩列。44
在小分辨率下，第一個占3格，第二個占3格，第三個占3格，第四個也占3格，所以一行就可以排完了。
2）我們可以給它設置一個背景
<style type="text/css">
?? ? div{ border: 1px #101010 solid;}
?? ? #container{ width: 800px; margin: 10px auto;}
?? ?</style>
運行效果：
3）我們可以在第一行第一列添加內容。
運行結果：
第一個占了兩行的位置，第一列的內容比較多，所以第三個沒有從最左邊排。
4）我們把第三列排到第一列的底下，就要在第三列前面加清除浮動。
“clearfix visible-xs”
“visible-xs”表示只在超小分辨率下才加清除浮動，其它分辨率底下不清除。
運行結果：
這樣就回到了原始的排版方式
注意：一個container拆分成12個小格，當你給的格數大于12格就自動排到下面來了。
總結
以上是生活随笔為你收集整理的Bootstrap栅格参数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 美股数据获取 python_几行Pyth
- 下一篇： LeetCode每日一题495. 提莫攻