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. [Cocos2D-x For WP8]Box2D物理引擎

    物理引擎通过为刚性物体赋予真实的物理属性的方式来计算运动.旋转和碰撞反映.为每个游戏使用物理引擎并不是完全必要的—简单的“牛顿”物理(比如加速和减速)也可以在一定程度上通过编程或编写脚本来实现.然而, ...

  2. 【POJ】3133 Manhattan Wiring

    http://poj.org/problem?id=3133 题意:n×m的网格,有2个2,2个3,他们不会重合.还有障碍1.现在求2到2的路径和3到3的路径互不相交的最短长度-2.(2<=n, ...

  3. BZOJ3105: [cqoi2013]新Nim游戏 博弈论+线性基

    一个原来写的题. 既然最后是nim游戏,且玩家是先手,则希望第二回合结束后是一个异或和不为0的局面,这样才能必胜. 所以思考一下我们要在第一回合留下线性基 然后就是求线性基,因为要取走的最少,所以排一 ...

  4. BZOJ3343: 教主的魔法 分块

    2016-05-28  10:27:19 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3343 比较显然的分块题,分块后块内排序,维护整块的附 ...

  5. JsonP的简单demo

    服务器端代码 public ActionResult GetNewUploadCourseIds() { "; var result = new Result<NewUpload> ...

  6. C# Double保留小数点后面位数

    C# Double保留小数点后面位数 有的时候我们要对一些数据进行百分比的操作.一般的数据我们只要用 .ToString("P")就可以得到小数点后2位的百分比.而且是自动 加上% ...

  7. 【转】在C#中使用SendMessage

    SendMessage是一个在user32.dll中声明的API函数,在C#中导入如下: using System.Runtime.InteropServices; [DllImport(" ...

  8. 如何用PHP开发机器人。

    近段时间由于工作需要,需要写个QQ通知的功能,仔细百度了一下,发现了现有的码,现分享大家.特别应该注意的是腾讯公司并未提供过QQ直接通讯的API接口,不过很庆幸的是咋们还有个3g qq可以小小利用下, ...

  9. 利用SQL注入漏洞登录后台的实现方法 。。。。转载

    一.SQL注入的步骤 a) 寻找注入点(如:登录界面.留言板等) b) 用户自己构造SQL语句(如:' or 1=1#,后面会讲解) c) 将sql语句发送给数据库管理系统(DBMS) d) DBMS ...

  10. JS写四个图片滚动显示的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...