本文实例为大家分享了引导栅格系统的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=坝τ谩北?
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,user-scalable=不”比;
& lt; title>栅格系统& lt;/title>
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/lib/bootstrap/css/bootstrap.css "比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/main.css "比;
& lt; !——(如果lt IE 9)比;
& lt;脚本src=" https://www.yisu.com/zixun/lib/html5shiv/html5shiv.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/lib/respond/respond.min.js "祝辞& lt;/script>
& lt; ! [endif]——比;
& lt; style>
。{
background - color: # ccc;
高度:50 px;
边界:1 px固体# 333;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; !——1170 px的在
& lt; div类="容器"比;
& lt; div类="行"比;
& lt; div class=" col-md-1“祝辞1 & lt;/div>
& lt; div class=" col-md-1“祝辞2 & lt;/div>
& lt; div class=" col-md-1“祝辞3 & lt;/div>
& lt; div class=" col-md-1“祝辞4 & lt;/div>
& lt; div class=" col-md-1“祝辞5 & lt;/div>
& lt; div class=" col-md-1“祝辞6 & lt;/div>
& lt; div class=" col-md-1“祝辞7 & lt;/div>
& lt; div class=" col-md-1“祝辞8 & lt;/div>
& lt; div class=" col-md-1“祝辞9 & lt;/div>
& lt; div class=" col-md-1“祝辞10 & lt;/div>
& lt; div class=" col-md-1“祝辞11 & lt;/div>
& lt; div class=" col-md-1“祝辞12 & lt;/div>
& lt;/div>
& lt; div类="行"比;
& lt; div class=" col-md-9“祝辞9 & lt;/div>
& lt; div class=" col-md-3“祝辞3 & lt;/div>
& lt;/div>
& lt;/div>
& lt; div类="容器"比;
& lt; div类="行"比;
& lt; div class=" col-lg-3 col-md-4“祝辞a
& lt; div class=" col-lg-3 col-md-4“祝辞a
& lt; div class=" col-lg-3 col-md-4“祝辞a
& lt; div class=" col-lg-3 col-md-4“祝辞a
