你的位置:首页 > 软件开发 > 网页设计 > BootStap学习笔记(未完待续)

BootStap学习笔记(未完待续)

发布时间:2016-04-20 19:00:05
移动设备优先: 为了让开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的head之中添加viewport meat标签:如下:<metaname="viewport"content="width=device-width, i ...

   移动设备优先: 

为了让开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的head之中添加viewport meat标签:如下:
<metaname="viewport"content="width=device-width, initial-scale=1.0">
 响应式图像:
 通过对图像添加可以让图像对响应式布局设计的更好;
 伪元素
http://www.w3school.com.cn/css/css_pseudo_elements.asp
 Bootstrap3 css有一个申请响应的媒体查询,在不同的媒体查询阈值范围内都为container设置了max-width,用以匹配网格系统.
 @media (min-width: 768px) {  .container {   width: 750px; }
 网格系统
提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
  行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding);
  使用行来创建列的水平组;
  内容应该放置在列内,且唯有列可以是行的直接子元素;
  预定义的网格类,比如 .row.col-xs-4,可用于快速创建网格布局。其中如果有多行,那么每行都要有.row
个人总结:如果同时定义了col-sm-* col-md-* col-lg-*,那么如果有匹配的就会采用匹配的列模式,如果窗口应用了col-lg-*,此时删除col-lg-*,那么窗口布局就会采用col-md-*。
 <div ></div>主要用在响应式列的重置
col-md-offset-*可以实现把一个列的左外边距(margin)增加*列.

原标题:BootStap学习笔记(未完待续)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录