移动设备优先: 

为了让开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的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中的顺序

BootStap学习笔记(1)的更多相关文章

  1. BootStap学习笔记(2)

    学习该内容之前可能会用到的内容: css属性Font-Weight:如果数字为700就是加粗的.或者更粗的为bolder,更细的是lighter. html Cite标签定义文档的引用,默认字体以斜体 ...

  2. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  3. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  4. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  5. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  6. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  7. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  8. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  9. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

随机推荐

  1. Linux 系统DNS解析原理

    DNS:域名的解析,也称A记录,CDN服务器   配置文件位置:       vi /etc/resolv.conf 解析原理 DNS就像一个倒挂的树,定点是点. www.baidu.com ==&g ...

  2. marquee 标签的鼠标放上去滚动效果 鼠标离开继续滚动

    效果很实用,可以轻松的实现鼠标放上去停止滚动.鼠标离开继续滚动的效果.下面是具体的用法(特别注意onMouseOver和onMouseOut是需要同时写进去才会出现比较好的效果):onMouseOut ...

  3. SVN那些事

    非原创,引用于青松世界博客,最近在使用svn,因为方便复制内容在这查看.原地址 https://www.cnblogs.com/Rambo635755402/p/5549447.html Totois ...

  4. 如何检查oracle的归档空间是否满了

    如何检查oracle的归档空间是否满了   关于如何检查归档空间是否慢了,大多数人会去先检查放归档的目录的磁盘空间是否满了,通过该归档目录空余情况来判断归档空间是否满了,但我觉得这个方法不一定代表实际 ...

  5. FreeMaker常用方法

    FreeMaker常用方法 1.表达式转换类 ${expression}计算expression并输出 #{ expression }数字计算#{ expression ;format}安格式输出数字 ...

  6. BZOJ 1040 骑士 基环树 树形DP

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1040 题目大意: Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫 ...

  7. oc消息转发:forwardInvocation、签名、参量个数、SEL 相关测试

    结论1.签名的参量类型伪造不正确会导致崩溃. 结论二.签名个数不对可能会导致参量丢失. 结论三:在签名配置正确的情况下,系统会将函数调用的所有信息打包到NSInvocation准备转发: - (voi ...

  8. 虚拟内存(VirtualAlloc),堆(HeapAlloc/malloc/new)和Memory Mapped File

    http://blog.csdn.net/zj510/article/details/39400087 内存管理有三种方式: 1. 虚拟内存,VirtualAlloc之类的函数 2. 堆,Heapxx ...

  9. Spring Boot中使用EhCache实现缓存支持

     SpringBoot提供数据缓存功能的支持,提供了一系列的自动化配置,使我们可以非常方便的使用缓存.,相信非常多人已经用过cache了.因为数据库的IO瓶颈.一般情况下我们都会引入非常多的缓存策略, ...

  10. 20145203盖泽双 《Java程序设计》第四周学习总结

    20145203盖泽双 <Java程序设计>第四周学习总结 教材学习内容总结 1.多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承单 ...