[imtoken针对哪些国家]前端响应式布局与Bootstrap栅格系统如何应用

下一节：IIS多个协议显示一个问号怎么修改编程技术 和 程序设计

所以，如下：

比如，我在一个.container父盒子里定义了四个子盒子，我想要它们四个子盒子在一行上平均分配父盒子的空间排列，又因为.container会自动最多分配为12列，那么每个子盒子不就是占3列么。当然，这四个子盒子还要用一个盒子包裹它们，这个盒子代表一行，通过定义类名.row实现，系统会自动识别。

<div class="container">         <div class="row">             <div class="col-lg-6">1</div>             <div class="col-lg-2">2</div>             <div class="col-lg-1">3</div>             <div class="col-lg-3">4</div>         </div>         <div class="row">             <div class="col-lg-3">1</div>             <div class="col-lg-2">2</div>             <div class="col-lg-1">3</div>             <div class="col-lg-3">4</div>         </div>     </div>

效果如下：

如果如果全部子盒子加起来超过12列咋办，多的会另起一行显示：

<button type="button" class="btn btn-success self">（成功）Success</button> .self{              background-color: skyblue;          }

（3）适合于单独做移动端开发。

初始代码如下，还没定义宽度：

比如下面有左右两个盒子，我想把原本右边的盒子放到左边，左边的盒子放到右边。

2.8 响应式工具：

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。简单来说就是当在不同尺寸的设备下，一些元素要显示或者隐藏起来，那么可以通过给元素标签直接定义下面的类快速达到效果。

上面这些都是定义在大屏幕的排列方式，如果我想当变成中等屏幕尺寸时每行只显示3个子盒子那该咋办呢？可以同时为一列指定多个设备的类名,以便划分不同份数例如class= “col-md-4 col-sm-6”。

媒体查询@media的CSS语法 例子：

2.2 快速上手：

Bootstrap里有很多现成封装好的组件，可以直接复制拿来使用。

2.4 bootstrap栅格系统：