CSS布局概述
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布局概述的更多相关文章
- CSS 布局入门
概述 Web 兴起之后,关于CSS的介绍和学习资料已经铺天盖地. 本文不涉及具体的CSS语法之类的,而是希望从初学者的角度,让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用. ...
- 《深入理解bootstrap》读书笔记：第三章 CSS布局
一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...
- [Bootstrap]7天深入Bootstrap(3)CSS布局
Bootstrap三大核心内容的基础,即基础的CSS 布局语法.其包括基础排版(Typography).代码(Code).表 格(Tables).表单(Forms).按钮(Buttons).图片 (I ...
- 深度理解div+css布局嵌套盒子
1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...
- WEB入门.七 CSS布局模型
学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...
- CSS布局奇淫巧计之-强大的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- CSS布局之-强大的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
随机推荐
- warning MSB3391
1.用C#生成dll文件 提示 (warning MSB3391)"未包含任何可为 COM 互操作注销的类型"和 ( warning MSB3214)"不包含任何可为 C ...
- [转]Java 8：不要再用循环了
以下内容为转载,没有在jdk8中测试,具体业务场景是否存在BUG或使用需要注意的地方有待测试. ------------------分割线---------------------- 正如我之前所写的 ...
- js实现继承
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现 ...
- 启动本地Oracle
net start OracleOraDb10g_home1TNSListenernet start OracleServiceORCL第一个是监听服务第二个是数据库服务
- 从0到1---“保多多”APP的开发（一）
2015年8月份,我正式接手了公司保多多APP的开发(和另一个同事一起). 我之前并没有过从0开始创建一款APP,这次能有这样的机会,实在让我感到兴奋.因为我相信,作为这款APP的主要开发人员,在这一 ...
- OC 解决NSArray、NSDictionary直接打印中文出现乱码的问题
在iOS开发中,经常需要查看数组中得元素是否是自己想要的,但是苹果并没有对直接打印数组中得中文作处理,直接打印就会出现一堆很讨厌的东西,解决其实很简单,就是需要通过为NSArray添加分类,重写 - ...
- SVG 2D入门12 - SVG DOM
使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式.由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为 ...
- Day2 summary
感觉今天就对电脑大扫除了. 卸了一早上cygwin也没找到方法,只能先放着不管,真上linux时才说. 搜了搜linux视频教程很多,应该好开个头.但这个毕竟是优先级不够高的. 高的必须是论文啊,还有 ...
- WCF vs ASMX WebService
This question comes up a lot in conversations I have with developers. “Why would I want to switch to ...
- hibernate的数据库乱码问题
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE hibernate-configuration ...