BootStap学习笔记(未完待续)_html/css_WEB-ITnose-html教程-PHP中文网

BootStap学习笔记(未完待续)_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:20:22

原创

1014人浏览过

移动设备优先:

Get笔记

Get笔记，一款AI驱动的知识管理产品

125

为了让开发的网站对移动设备友好,确保适当的绘制和触屏缩放，需要在网页的head之中添加viewport meat标签：如下：

<metaname="viewport"content="width=device-width, initial-scale=1.0">

登录后复制

<strong> 响应式图像:</strong>

登录后复制

 通过对图像添加class="img-responsive"可以让图像对响应式布局设计的更好；

登录后复制

 <strong>伪元素</strong>

登录后复制

http://www.w3school.com.cn/css/css_pseudo_elements.asp

登录后复制

 Bootstrap3 css有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为container设置了max-width,用以匹配网格系统.

登录后复制

  @media (min-width: 768px) {   .container {      width: 750px;  }

登录后复制

<strong> 网格系统</strong>

登录后复制

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

登录后复制

    行必须放置在 <strong>.container</strong> class 内，以便获得适当的对齐（alignment）和内边距（padding);

登录后复制

    使用行来创建列的水平组；

登录后复制

    内容应该放置在列内，且唯有列可以是行的直接子元素；

登录后复制

    预定义的网格类，比如 <strong>.row</strong> 和 <strong>.col-xs-4</strong>，可用于快速创建网格布局。其中如果有多行,那么每行都要有.row

登录后复制

<strong>个人总结:如果同时定义了col-sm-* col-md-* col-lg-*,那么如果有匹配的就会采用匹配的列模式，如果窗口应用了col-lg-*,此时删除col-lg-*,那么窗口布局就会采用col-md-*。</strong>

登录后复制

  <div class="clearfix visible-xs"></div>主要用在响应式列的重置

登录后复制

col-md-offset-*可以实现把一个列的左外边距(margin)增加*列.

使用 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序来实现列排序，带有.col-md-push-*的就推到左边,带有 .col-md-pull-*推到右边，无关他们在html中的顺序

大家都在看：