移动设备优先: 

为了让开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的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. 11g数据库查看dataguard是否同步

    一.环境      主库:       ip地址:192.168.122.203       oracle根目录:/data/db/oracle       SID:qyq       数据文件路径/ ...

  2. September 25th 2017 Week 39th Monday

    No man is rich enough to buy back his own past. 没有人富有到可以赎回自己的过去. Those rich are not willing to buy b ...

  3. 【4】python函数基础

    ---恢复内容开始--- 案例1:时间下一秒程序 #__author:"吉勇佳" #date: 2018/10/14 0014 #function: timestr=input(& ...

  4. Spring Boot 以 war 方式部署

    Spring Boot 默认自带了一个嵌入式的 Tomcat 服务器,可以以jar方式运行,更为常见的情况是需要将 Spring Boot 应用打包成一个 war 包,部署到 Tomcat.Jerry ...

  5. ascii2native 转码 解码

    //把十六进制的编码转为原码function asciiHex2native(strAscii) { var output = ""; var posFrom = 0; var p ...

  6. CSS3 新增颜色表示方式

    一.CSS1&2颜色表示方式(W3C标准) 1.Color name  颜色名称方式(用颜色关键字表示对应的颜色.) 例如:red(红色).blue(蓝色).pink(粉色) 优点:方便快捷而 ...

  7. shell基础--cat命令的使用

    一.cat的常用用法 1.总结 2.实验 (1).非交互式编辑 [root@~_~ day5]# cat > cattest.sh <<STOP > hello > ST ...

  8. 既生 Redis 何生 LevelDB ?

    了解 Redis 的同学都知道它是一个纯内存的数据库,凭借优秀的并发和易用性打下了互联网项的半壁江山.Redis 之所以高性能是因为它的纯内存访问特性,而这也成了它致命的弱点 —— 内存的成本太高.所 ...

  9. ASP.NET MVC编程——路由

    框架自动生成的路由配置 上图中,路由配置文件为App_Start文件夹下的RouteConfig.cs. 代码如下: public class RouteConfig { public static ...

  10. zoc license code

    点击导航栏上的zoc-about zoc,然后: 点击enter license: 然后输入内容即可: part A:  51698/01027/34713 part B:  00937 还有很多其他 ...