1.HTML5文档类型

　　由于Bootstrap使用了HTML5特定的HTML元素和CSS属性，所以使用Bootstrap的时候，所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性，如下所示：

<!DOCTYPE html>

<html lang="en">

  ...

</html>

2.移动先行

　　Bootstrap3.x版本是一个移动先行的框架集，移动先行的影子在整个框架集都可以发现，如下所示：

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

　　在移动设备浏览器上，通过viewprot meta标签添加的user-scalable=no也禁用其缩放(zooming)功能。禁用缩放功能后，用户只能滚动屏幕，这样能让你的网站看上去更像原生应用。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3.响应式图片

　　面的样式，可以让图片按比例缩放，并且不超过其父元素的尺寸，所以说该样式对响应式布局的支持更加友好。使用的时候，只需要在相应图片原生上加一个.img-responsive样式即可。

.img-responsive {

  display: block;

  max-width: 100%;

  height: auto;

}

4.排版与链接

　　Bootstrap为网页设置了一些基本的全局样式、排版和链接风格，尤其是具有如下特征：

  • 在body元素上取消了margin设置，改为默认的0，margin:0
  • 在body元素上设置了背景色为白色，background-color:#ffff
  • 在布局排版方面，字体、字体大小、行间距使用的标准值分别如下
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;

line-height: 1.428571429; // 20除14

5.Normailze.css

　　为了改进跨浏览器呈现，Bootstrap使用了第三方CSS库Normailze。Normail.css是一个专门用于将不同浏览器的默认CSS特性设置为统一效果的CSS库，以便开发人员使用更标准的方式去访问或设置页面元素。该项目只专注于样式，比如button按钮在不同浏览器上效果都是一致的。参考

6.容器居中

　　一个页面(或元素)要居中显示，可以在外部容器上简单应用.container样式即可。示例代码和样式源码：

<div class="container">

  ...

</div>
// 源码734行

.container {

  padding-right: 15px;

  padding-left: 15px;

  margin-right: auto;                   /*左右居中的设置*/

  margin-left: auto;

}

CSS布局概述的更多相关文章

  1. CSS 布局入门

    概述 Web 兴起之后,关于CSS的介绍和学习资料已经铺天盖地. 本文不涉及具体的CSS语法之类的,而是希望从初学者的角度,让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用. ...

  2. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  3. [Bootstrap]7天深入Bootstrap(3)CSS布局

    Bootstrap三大核心内容的基础,即基础的CSS 布局语法.其包括基础排版(Typography).代码(Code).表 格(Tables).表单(Forms).按钮(Buttons).图片 (I ...

  4. 深度理解div+css布局嵌套盒子

    1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...

  5. WEB入门.七 CSS布局模型

    学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...

  6. CSS布局奇淫巧计之-强大的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  7. CSS布局之-强大的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  8. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  9. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

随机推荐

  1. 寻找C语言和.NET之间的桥梁

    一提到C语言,在偶这个始终的C语言菜鸟眼里,是个神奇的语言.经过了近半世纪的历史,多少技术湮灭在信息时代的长河中,C语言却依然在TIBOE排行榜中笑傲群雄. 本文是谈.NET开发者看来,C语言有什么特 ...

  2. F2工作流引擎之 工作流运转模型（三）

    1流程单起点单终止模型 单起点:一个流程定义必须有且唯一起点 单结束点:一个流程定义必须有且唯一结束点. 约定:提单与结束是每个流程必须有的活动,且唯一只有一个提单和结束. 2串行模型 描述:串行(S ...

  3. Rest接口测试，巧用firebug插件

    两年前开始做软件测试,刚接触的是关于rest接口的测试.作为一个刚进职场的测试小菜鸟,当时对接口的理解并不是很充分,具体是怎么实现的也不清楚.在进行接口测试时,只是设置接口入参,调用接口,查看接口是否 ...

  4. C#/ASP.NET MVC微信公众号接口开发之从零开发（一） 接入微信公众平台

    微信公众平台接入:其实很简单,把两个参数(地址和token)填入微信公众平台后台,暂时选择明文模式 ,其中token自己定义.微信服务器会根据后台填写的地址访问,并且带上对于的参数 如 url+&am ...

  5. OC语言BLOCK和协议

    OC语言BLOCK和协议 一.BOLCK (一)简介 BLOCK是什么?苹果推荐的类型,效率高,在运行中保存代码.用来封装和保存代码,有点像函数,BLOCK可以在任何时候执行. BOLCK和函数的相似 ...

  6. 最小割 总结&&做题记录

    模型要点: 1.一般适用于二取一问题或者01规划. 2.利用最小割=最大流,转化为最大流求之. 建议阅读胡伯涛的论文 <<最小割模型在信息学竞赛的应用>>,有精彩有序的证明和各 ...

  7. 二模 （15）day2

    第一题:Alice和Bob两个人正在玩一个游戏,游戏有很多种任务,难度为p的任务(p是正整数),有1/2p 的概率完成并得到2p−1分,如果完成不了,得0分.一开始每人都是0分,从Alice开始轮流做 ...

  8. eval解析非标准json

    以前一直在用,但是不知道原理,惭愧啊,今天把自己想法加上. eval("{a:1}"); eval("{a:,b:1}"); 第一眼的感觉是都会得到一个对象,其 ...

  9. iOS8定位问题解决方案

    原文  http://blog.csdn.net/nextstudio/article/details/40050095 1.修改info 新增Key: NSLocationAlwaysUsageDe ...

  10. Linux摄像头驱动学习之：（四）UVC-摄像头驱动框架分析

    UVC: USB Video ClassUVC驱动:drivers\media\video\uvc\ uvc_driver.c分析:1. usb_register(&uvc_driver.dr ...