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. HDU 4751 Divide Groups

    题目链接 比赛时候,建图建错了.大体算法想到了,不过很多细节都没想好. #include <cstdio> #include <cstring> #include <cm ...

  2. storyboard自动布局时,代码修改 constraint 的值,没有反应

    从 width equalto 其他控件的 width   到  当前控件固定的 width, 再到不固定当前控件的 width, 只固定当前控件的 trailing 是一个不错的思想.

  3. 如何让代码实现C++

    其实本来就知道 但是主要突然忘了去怎样实现C++代码  ,所以写个笔记记忆一下 让代码实现C++ 只需要修改.m文件为 .mm  就可以了  突然是不是很像打脸. 不过希望能给不知道的小伙伴一点帮助哦 ...

  4. Spring MVC过滤器-字符集过滤器（CharacterEncodingFilter）

    spring的字符集过滤通过用于处理项目中的乱码问题,该过滤器位于org.springframework.web.filter包中,指向类CharacterEncodingFilter,Charact ...

  5. python算法——第四天

    一.递归 def func(num): if num / 2 > 0: num -= 1 print(num) num = func(num) print('quit') return num ...

  6. URL编码：不同的操作系统、不同的浏览器、不同的网页字符集，将导致完全不同的编码结果。

    URL编码:不同的操作系统.不同的浏览器.不同的网页字符集,将导致完全不同的编码结果. 因此如果Url中有中文或特殊字符,一定要自己调用函数编码解码,不要让浏览器帮你编码,否则出现了问题会浪费你很多时 ...

  7. 使用数据泵导入(impdp)和导出(expdp)

    数据泵技术是Oracle Database 10g 中的新技术,它比原来导入/导出(imp,exp)技术快15-45倍.速度的提高源于使用了并行技术来读写导出转储文件. expdp使用 使用EXPDP ...

  8. 放弃iOS4，拥抱iOS5

      前言 苹果在2011年的WWDC大会上发布了iOS5,不过考虑到要支持iOS4.x的系统,大多数App都无法使用iOS5的新特性.现在将近1年半过去了,从我们自己的App后台的统计数据.一些第三方 ...

  9. Hadoop.2.x_源码编译

    一.基本环境搭建 1. 准备 hadoop-2.5.0-src.tar.gz apache-maven-3.0.5-bin.tar.gz jdk-7u67-linux-x64.tar.gz proto ...

  10. Js的引用关系示例和总结

    三种引用(指针引用)关系,借助引用关系可以形成复杂的链关系,巧妙借助链关系可以实现收放自如,形散神不散的神奇效果,jquery就是其中一例: 1.对象指向属性;        2.a=b(b是对象,a ...