BootStap学习笔记(1)
2016-04-20 18:41
204 查看
移动设备优先:
为了让开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的head之中添加viewport meat标签:如下:
col-md-offset-*可以实现把一个列的左外边距(margin)增加*列.
使用 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序来实现列排序,带有.col-md-push-*的就推到左边,带有.col-md-pull-*推到右边,无关他 们在html中的顺序
为了让开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的head之中添加viewport meat标签:如下:
<metaname="viewport"content="width=device-width, initial-scale=1.0">
响应式图像:
通过对图像添加class="img-responsive"可以让图像对响应式布局设计的更好;
伪元素
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 class="clearfix visible-xs"></div>主要用在响应式列的重置
col-md-offset-*可以实现把一个列的左外边距(margin)增加*列.
使用 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序来实现列排序,带有.col-md-push-*的就推到左边,带有.col-md-pull-*推到右边,无关他 们在html中的顺序
相关文章推荐
- nyoj 722 数独
- SpringMVC深度探险(四) —— SpringMVC核心配置文件详解
- 【学习】关于datatable组件的使用(一)
- linux网络编程基础(二)
- 【Redis数据库安装简介】
- ios开发时,在Xcode中添加多个targets进行版本控制
- php算法之快速排序
- SpringMVC深度探险(三) —— DispatcherServlet与初始化主线
- iOS获取App版本号
- HTTP协议详解
- FTP协议笔记
- winForm开发
- Mysql 5.7 报错 3534 错误
- 使用maven构建java项目
- eclipse使用教程系列一:配置环境变量和jdk以及集成tomcat_maven_svn图文详解
- 在Ubuntu 12.04.1中设置静态IP
- 自定义progressbar控件
- angular的$q服务以及js的promise编程
- PHP关键字
- 团队冲刺第一阶段个人工作总结2