bootstrap框架下的响应式自适应布局

响应式布局:一个网站的展示能够兼容多个终端(手机,iPad,PC等),而不需要为每一个终端单独做一个展示版本.

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

为什么需要响应式布局？

因为有的网页在手机上看会变得很小，需要手动放大，很不方便；有的网页响应式没做好，一些导航栏会被吞掉。

就比如这个工具栏，后面的内容没有了，导致分屏写博客的时候很难受，不方便贴代码。

如何配置bootstrap?

1. 下载bootstrap插件

2.  在index.html中输入b4-$，生成一段代码

什么是网格系统？ 

如图所示，一块屏幕共12格，元素可以占1格，就是占屏幕的1/12；元素占4格就是占屏幕的1/3；元素占12格就是宽度占满整个屏幕。

Bootstrap 的工作原理是什么？

from Bootstrap 网格系统 | 菜鸟教程

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

• 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
• 使用行来创建列的水平组。
• 内容应该放置在列内，且唯有列可以是行的直接子元素。
• 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
• 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
• 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

  	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
  Class 前缀	.col-xs-*	.col-sm-*	.col-md-*	.col-lg-*

食用方法：

<div class="container">
   <div class="row">
      <div class="col-lg-12">
            <div class="xxxxx"></div>
      </div>

      <div class="col-*-*">...</div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

举一些栗子(*^▽^*)

需要注意的是，如果默认该屏幕一行所含有元素的个数，只需要写一个class="col-lg-12 col-md-12"就行，后面的会自适应变小。

而class="col-xs-6 col-sm-3"，则表示平板显示一行4个，手机显示一行2个，因为手机屏幕比较小，因此需要放大。

还有一个小问题

如果我想让两个div在电脑端并列排放，在手机端上下排放怎么办？类似于下图

首先用一个大类将并列的这两个div打包一下，然后试试看下面的方法。

1.css  float

图源：百度灵医智惠 I 智慧医院-百度智能云

 在并列的两个类的css中添加float:left即可。

2.css display

在我的vue中不好使，我没用过。

可以看下这个博主的文章。

DIV横向排列_CSS如何让多个div盒子并排同行显示 - DIVCSS5

继续加油！！！