响应式布局:一个网站的展示能够兼容多个终端(手机,iPad,PC等),而不需要为每一个终端单独做一个展示版本.
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
为什么需要响应式布局?
因为有的网页在手机上看会变得很小,需要手动放大,很不方便;有的网页响应式没做好,一些导航栏会被吞掉。
就比如这个工具栏,后面的内容没有了,导致分屏写博客的时候很难受,不方便贴代码。
如何配置bootstrap?
-
下载bootstrap插件
-
在index.html中输入b4-$,生成一段代码
什么是网格系统?
如图所示,一块屏幕共12格,元素可以占1格,就是占屏幕的1/12;元素占4格就是占屏幕的1/3;元素占12格就是宽度占满整个屏幕。
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
在并列的两个类的css中添加float:left即可。
2.css display
在我的vue中不好使,我没用过。
可以看下这个博主的文章。
DIV横向排列_CSS如何让多个div盒子并排同行显示 - DIVCSS5
继续加油!!!