HTML5文档类型（Doctype）

Bootstrap使用了一些HTML5元素和CSS属性，所以需要使用HTML5文档类型。

<!DOCTYPE html>

<html>

....

</html>

移动设备优先

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

　　宽度设置为device-width可以确保它能正确呈现在不同设备上。

　　initial-scale=1.0确保网页加载时，以1:1的比例呈现。

　　可以为viewport meta标签添加user-scalable=no来禁止其缩放功能。

<meta name="viewport" content="width=device-width,

                                     initial-scale=1.0,

                                     maximum-scale=1.0,

                                     user-scalable=no">

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

　　bootstrap.css里设置了img-responsive的属性：

.img-responsive {

  display: inline-block;

  height: auto;

  max-width: 100%;

}

基本的全局显示

body {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-size: 14px;

  line-height: 1.428571429;

  color: #333333;

  background-color: #ffffff;

}

body {margin:}

链接样式

a:hover,

a:focus {

  color: #2a6496;

  text-decoration: underline;

}

a:focus {

  outline: thin dotted #333;

  outline: 5px auto -webkit-focus-ring-color;

  outline-offset: -2px;

}

　　默认设置有好有坏，难免嘛。

　　不想要下划线的话可以在a链接上加一个名为btn的class，该class的默认设置如下：

a:hover,

a:focus {

  color: #2a6496;

  text-decoration: underline;

}

a:focus {

  outline: thin dotted #333;

  outline: 5px auto -webkit-focus-ring-color;

  outline-offset: -2px;

}

避免跨浏览器的不一致

　　Normalize.css提供了更好的跨浏览器一致性。

容器（Container）

<div class=”container”>

...

</div>

　　.container的样式：

.container {

   padding-right: 15px;

   padding-left: 15px;

   margin-right: auto;

   margin-left: auto;

}

　　左右外边距交由浏览器决定。

　　由于内边距是固定宽度，默认情况下容器是不可嵌套的。

.container:before,.container:after {

  display: table;

  content: " ";

}

　　设置display为table，会创建一个匿名的table-cell和一个新的块格式化上下文。:before伪元素防止上边距崩塌，:after伪元素清除浮动。content:” ”修复一些Opera bug。

.container:after {

  clear: both;

}

　　另外还有申请相应的媒体查询：

@media (min-width: 768px) {

   .container {

      width: 750px;

　　}

}

Bootstrap浏览器/设备支持

 

Chrome

Firefox

IE

Opera

Safari

QQ

UC

Android

YES

YES

NO

NO

NO

未测试

未测试

iOS

YES

NO

NO

NO

NO

YES

YES

Mac OS X

YES

YES

NO

YES

YES

未测试

未测试

Windows

YES

YES

YES*

YES

NO

YES

YES

* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

参考：http://www.runoob.com/bootstrap/bootstrap-css-overview.html

bootstrap入门-2.固定的内置样式的更多相关文章

  1. 【Go入门教程2】内置基础类型（Boolean、数值、字符串、错误类型），分组，iota枚举，array（数值），slice（切片），map（字典），make/new操作，零值

    这小节我们将要介绍如何定义变量.常量.Go内置类型以及Go程序设计中的一些技巧. 定义变量 Go语言里面定义变量有多种方式. 使用var关键字是Go最基本的定义变量方式,与C语言不同的是Go把变量类型 ...

  2. python入门之数据类型及内置方法

    目录 一.题记 二.整形int 2.1 用途 2.2 定义方式 2.3 常用方法 2.3.1 进制之间的转换 2.3.2 数据类型转换 3 类型总结 三.浮点型float 3.1 用途 3.2 定义方 ...

  3. 08python语法入门--基本数据类型及内置方法

    数字类型int与float 定义 类型转换 使用 字符串 定义 类型转换 使用 优先掌握的操作 需要掌握的操作 了解操作 列表 定义 类型转化 使用 优先掌握的操作 需要掌握的操作 了解操作 元组 作 ...

  4. net core体系-web应用程序-4net core2.0大白话带你入门-8asp.net core 内置DI容器（DependencyInjection，控制翻转）的一点小理解

    asp.net core 内置DI容器的一点小理解   DI容器本质上是一个工厂,负责提供向它请求的类型的实例. .net core内置了一个轻量级的DI容器,方便开发人员面向接口编程和依赖倒置(IO ...

  5. javascript快速入门4--函数与内置对象

    函数 函数(又称为方法)用于对一大段为了达到某种目的的代码进行归类,以使代码更具有条理: //一段计算三角形面积的代码 var wide=window.prompt("请输入三角形的底边长度 ...

  6. 解决css样式被内置样式覆盖的问题

    .preImg { height:400px !important } <img id="preImg" class="preImg" style=&qu ...

  7. Bootstrap入门及其常用内置实现

    BootStrap是一个专门做页面的 1.BS是基于HTML CSS JS 的一个前端框架(半成品) 2.预定义了一套CSS样式与JQurey实现 3.BS和Validation类似,都是JQ的插件, ...

  8. 《zw版·Halcon入门教程与内置demo》

    <zw版·Halcon入门教程与内置demo> halcon系统的中文教程很不好找,而且大部分是v10以前的版本. 例如,QQ群: 247994767(Delphi与halcon), 共享 ...

  9. JSP内置标签 JSP中JavaBean标签 JSP开发模式 EL和JSTL快速入门

    2 JSP内置标签(美化+业务逻辑)   1)为了取代<%%>脚本形式,使用JSP标签/JSP动作,目的:与JSP页面的美化,即JSP面页都是由标签组成,不再有其它的内容   2)JSP内 ...

随机推荐

  1. 移动开发流量省起来之Zepto

    一张图说明Zepto.js的优势:   jquery 1.x最新版284KB,压缩后94KB:jquery2.x最新版247KB,压缩后84KB:Zepto最新版54KB,压缩后9KB!!!   然后 ...

  2. [WP8.1UI控件编程]Windows Phone动画方案的选择

    8.1 动画方案的选择 Windows Phone的动画实现方式有线性插值动画(3种类型).关键祯动画(4种类型)和基于帧动画,甚至还有定时器动画,然后动画所改变的UI元素属性可以是普通的UI元素属性 ...

  3. BZOJ 1798 题解

    1798: [Ahoi2009]Seq 维护序列seq Time Limit: 30 Sec  Memory Limit: 64 MBSubmit: 5531  Solved: 1946[Submit ...

  4. NOIP欢乐模拟赛 T1 解题报告

    小澳的方阵 (matrix.cpp/c/pas) [题目描述] 小澳最近迷上了考古,他发现秦始皇的兵马俑布局十分有特点,热爱钻研的小澳打算在电脑上还原这个伟大的布局. 他努力钻研,发现秦始皇布置兵马俑 ...

  5. xml学习

    一,数据类型 xmlChar  对char的基本代替,是一个UTF-8编码字符串中的一个字节.如果你的数据使用了其他编码,在使用libxml函数前就必须转换为UTF-8. xmlDoc和xmlDocP ...

  6. JavaScript 页面模板引擎

    var TemplateEngine = function(html, options) { var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(i ...

  7. selenium grid中的多个线程同步执行

    需求:有一个工作流,每一步审批都需要多个领导参与,才能推流程到下一步去 代码思考:多个领导在自己的线程中运行,速度有的快有的慢,如何保证下一步的领导审批时,这个步骤已经激活 如下是代码:思路为:如果这 ...

  8. nginx资源定向 css js路径问题

    今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...

  9. Effective STL（第7条）

    第7条:如果容器中包含了通过new操作创建的指针,切忌在容器对象析构前将指针delete掉 //向一个vector中添加多个new出来的对象 void doSomething(){ vector< ...

  10. Xss里img标签的一些利用

    <img src=x onerror=with(document)body.appendChild(document.createElement('script')).src="//x ...