Bootstrap -网格-基础，自适应

Bootstrap 

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

一个扩展包

主要用于响应式网站设计（网站内容根据用户环境，比如手机，笔记本，浏览器大小，屏幕分辨率）进行自动调整。 挺简单的东西非要起个高大上的名字- -

 

基本格式：col-型号-列数     

型号：

手机：col-xs- 

平板：col-sm-

笔记本：col-md-

宽屏：col-lg-

屏幕过小时（比如你用col-md-6，但是在手机上看）就会把内容纵向排列。

 

列数：

Bootstrap 把每列分成了12部分，如class="col-md-12"就是中等大小的浏览器下占满一行，class="col-md-6"就是中等大小的浏览器下占一半

例子：

<div class="container"> <div class="row"> <div class="col-md-4">1</div> <!--确保每行列数总和是12--> <div class="col-md-8">2</div> </div> <div class="row">...</div> </div>

列重置：根据屏幕大小使用不同的格式排列

<div class="col-xs-6 col-sm-3">1</div>

<div class="col-xs-6 col-sm-3">2</div>

<div class="col-xs-6 col-sm-3">3</div>

<div class="col-xs-6 col-sm-3">4</div>

小屏幕上占1/2，大屏幕上占1/4

如果不加col-xs-6，则大屏幕上占1/4，屏幕缩小时纵向列出，每个占一行。

 

转载于:https://www.cnblogs.com/clamp7724/p/11247962.html