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. NET中的规范标准注释(一) -- XML注释标签讲解

    一.摘要 .Net允许开发人员在源代码中插入XML注释,这在多人协作开发的时候显得特别有用. C#解析器可以把代码文件中的这些XML标记提取出来,并作进一步的处理为外部文档. 这篇文章将展示如何使用这 ...

  2. wp8.1 Study16：网络之 使用Azure移动服务及利用Azure推送通知服务

    一.WP8.1有关网络的API WP8.1与其它平台的对比如下图: 二.Azure移动服务 前提: Azure移动服务可以让使用者的数据存放在云空间,从而方便使用者的App在不同平台上的数据共享. 1 ...

  3. 一步步调试解决iOS内存泄漏

      虽然iOS 5.0版本之后加入了ARC机制,由于相互引用关系比较复杂时,内存泄露还是可能存在.所以了解原理很重要. 这里讲述在没有ARC的情况下,如何使用Instruments来查找程序中的内存泄 ...

  4. 记录一次fat32格式U盘不识别问题

    升级了4.1.15内核发现U盘不识别了,考虑到内核编译前的配置是通过localmodconfig完成的,所以大略是缺模块导致. 于是开始查配置,USB控制器,EHCI,mass storeage de ...

  5. iOS ShareSDK 使用

    流量精灵软件中,也在大部分地方使用到了shareSDK 这个三方开源库.具体的有两种需求 a.弹出所有分享模块 b.只弹出指定的平台:如微信朋友圈和QQ . 配置方法,三方库中也很详细,这里我只有写出 ...

  6. Android常见控件— — —ProgressDialog

    package com.example.uiwidgettest2; import android.app.Activity;import android.app.AlertDialog;import ...

  7. 获取su后执行的脚本的返回值

    错误的方式: # su - testuser -c "/tmp/test.sh; echo $?"Sun Microsystems Inc.   SunOS 5.10      G ...

  8. plist文件Boolean类型读写方法

    http://blog.csdn.net/a6472953/article/details/7659505   转 1.读取plist文件中的Boolean类型的字段值时,要先把它转为NSNumber ...

  9. VC中预处理指令与宏定义详解

    刚接触到MFC编程的人往往会被MFC 向导生成的各种宏定义和预处理指令所吓倒,但是预处理和宏定义又是C语言的一个强大工具.使用它们可以进行简单的源代码控制,版本控制,预警或者完成一些特殊的功能. 一个 ...

  10. Mousejack Hacking : 如何利用MouseJack进行物理攻击

    0×00 前言 近期安全公司Bastille Networks(巴士底狱)安全研究员发现大多数无线鼠标和接收器之间的通信信号是不加密的.黑客可对一百米范围内存在漏洞的蓝牙无线键鼠进行嗅探甚至劫持,从而 ...