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. 【JAVA】Quartz 任务调度和异步执行器

    Quartz基础结构         Quartz对任务调度的领域问题进行了高度抽象,提出了调度器(Scheduler).任务(Job)和触发器(Trigger)这3个核心概念,并在Trigger触发 ...

  2. Invalid escape sequence(valid ones are \b \t \n \f \r \" \' \\)

    Invalid escape sequence(valid ones are \b \t \n \f \r \" \' \\) 在运行eclipse的相关程序代码时遇到了报错信息,查看控制台 ...

  3. 20145330第十周《Java学习笔记》

    20145330第十周<Java学习笔记> 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就 ...

  4. vim 使用笔记

    vim命令笔记 a 插入 insert 插入 :%!xxd 以16进制方式进行编辑 :%!xxd -r 从16进制还原

  5. Ohana Cleans Up

    Ohana Cleans Up Description Ohana Matsumae is trying to clean a room, which is divided up into an n  ...

  6. cat命令在文件中插入内容

    eg: cat>> xxx <<EOFinsert 1insert 2 EOF

  7. crontab的坑

    1. 命令  全路径 (eg:which mysql) 2.执行脚本  (脚本中加上#!/bin/bash) eg: /bin/bash script.sh 3. 输出信息(>>) 使用全 ...

  8. php date()获取的时间不对解决办法

    因为php默认获取的是格林威治时间,与北京时间相差8小时. 我们要获取到北京时间有两个办法: 1.修改php.ini配置文件: 打开php.ini文件,一般在php配置根目录下,找到其中的 ;date ...

  9. 全选，不选，反选 jquery

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

  10. (转)MySQL优化实例

    在Apache, PHP,MySQL的体系架构中,MySQL对于性能的影响最大,也是关键的核心部分.对于Discuz!论坛程序也是如此,MySQL的设置是否合理优化,直接影响到论坛的速度和承载量!同时 ...