BootStrap入门教程(二)之固定的内置样式

相关阅读：

BootStrap入门教程(一)之可视化布局

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:0}

链接样式

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浏览器/设备支持

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

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

以上所述是小编给大家介绍的BootStrap入门教程(二)之固定的内置样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap精简教程_动力节点Java学院整理

    bootstrap精简教程_动力节点Java学院整理

    bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap提供了三种类型的下载: 1.用于生产环境的 Bootstrap 编译并压缩后的 CSS.JavaScript 和字体文件.不包含文档和源码文件. 2.Bootstrap 源码 Less.JavaScript 和 字体文件的源码,并且带有文档.需要 Less 编译器和一些设置工作. 3.Sass 这是 Bootstrap 从 Less 到 Sass 的源码移植项目,用于快

  • BootStrap入门教程(三)之响应式原理

    BootStrap入门教程(三)之响应式原理

    相关阅读: BootStrap入门教程(一)之可视化布局 BootStrap入门教程(二)之固定的内置样式 Bootstrap网格系统(Grid System) 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 工作原理 · 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding). · 使用行来创建列的水平组. · 内容应该放置在列内,且唯有列可以是行的直接子元素. · 预定义的网格类,比如 .

  • Bootstrap零基础入门教程(三)

    Bootstrap零基础入门教程(三)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.

  • Bootstrap入门教程一Hello Bootstrap初识

    Bootstrap入门教程一Hello Bootstrap初识

    一.Bootstrap简介 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap是基于 HTML5.CSS3和Javascriopt开发的,它在 jQuery的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件,为实现快速开发提供了一套前端工具包,包括丰富的布局.栅格.丰富的Web组件和jQuery插件等,并能通过Less进行样式定制. 二.Hello Bootstrap 1.建立项目目录结构,新建app.css.fo

  • Bootstrap零基础入门教程(二)

    Bootstrap零基础入门教程(二)

    什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.

  • BootStrap入门教程(一)之可视化布局

    BootStrap入门教程(一)之可视化布局

    下载地址:http://v3.bootcss.com/getting-started/#download HTML模板: <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引

  • BootStrap入门教程(二)之固定的内置样式

    BootStrap入门教程(二)之固定的内置样式

    相关阅读: BootStrap入门教程(一)之可视化布局 HTML5文档类型(Doctype) Bootstrap使用了一些HTML5元素和CSS属性,所以需要使用HTML5文档类型. <!DOCTYPE html> <html> .... </html> 移动设备优先 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 宽度设置

  • Python入门教程(二十九)Python的RegEx正则表达式

    RegEx 或正则表达式是形成搜索模式的字符序列. RegEx 可用于检查字符串是否包含指定的搜索模式. RegEx 模块 Python 提供名为 re 的内置包,可用于处理正则表达式. 导入 re 模块: import re Python 中的 RegEx 导入 re 模块后,就可以开始使用正则表达式了: 实例 检索字符串以查看它是否以 “China” 开头并以 “country” 结尾: import re txt = "China is a great country" x =

  • Python入门教程(二十八)Python中的JSON

    JSON 是用于存储和交换数据的语法. JSON 是用 JavaScript 对象表示法(JavaScript object notation)编写的文本. Python 中的 JSON Python 有一个名为 json 的内置包,可用于处理 JSON 数据. 实例 导入 json 模块: import json 解析 JSON - 把 JSON 转换为 Python 若有 JSON 字符串,则可以使用 json.loads() 方法对其进行解析. 结果将是 Python 字典 实例 把 JS

  • Python入门教程(二十五)Python的作用域

    目录 局部作用域 函数内部的函数 全局作用域 命名变量 Global 关键字 变量仅在创建区域内可用.这称为作用域. 局部作用域 在函数内部创建的变量属于该函数的局部作用域,并且只能在该函数内部使用. 实例 在函数内部创建的变量在该函数内部可用: def myfunc(): x = 100 print(x) myfunc() 运行实例 100 函数内部的函数 如上例中所示,变量 x 在函数外部不可用,但对于函数内部的任何函数均可用: 实例 能够从函数内的一个函数访问局部变量: def myfun

  • Python入门教程(二十二)Python的类和对象

    目录 Python 类/对象 创建类 创建对象 init() 函数 对象方法 self 参数 修改对象属性 删除对象属性 删除对象 pass 语句 Python 类/对象 Python 是一种面向对象的编程语言. Python 中的几乎所有东西都是对象,拥有属性和方法. 类(Class)类似对象构造函数,或者是用于创建对象的“蓝图”. 创建类 如需创建类,请使用 class 关键字: 实例 使用名为 x 的属性,创建一个名为 MyClass 的类: class MyClass: x = 5 运行

  • Python入门教程(二十一)Python的数组

    目录 前言 数组 一.什么是数组? 访问数组元素 数组长度 循环数组元素 添加数组元素 删除数组元素 二.数组的内置方法 前言 在Python中没有内置对数组的支持,但可以使用 Python 列表代替 数组 数组用于在单个变量中存储多个值: 创建一个包含汽车品牌的数组: cars = ["Porsche", "Volvo", "BMW"] 一.什么是数组? 数组是一种特殊变量,能够一次包含多个值. 如果我们有一个项目列表(例如,汽车品牌列表),将

  • Python入门教程(二十)Python的Lambda表达式

    目录 语法 lambda 函数可接受任意数量的参数: 为何使用 Lambda 函数? lambda 函数是一种小的匿名函数. lambda 函数可接受任意数量的参数,但只能有一个表达式. 语法 lambda arguments : expression 执行表达式并返回结果: 实例 一个 lambda 函数,它把作为参数传入的数字加 10,然后打印结果: x = lambda a : a + 10 print(x(5)) 运行实例 17 lambda 函数可接受任意数量的参数: 实例 一个 la

  • 零基础易语言入门教程(二)之编程思路

    零基础易语言入门教程(二)之编程思路

    易语言简介: 易语言是一门以中文作为程序代码编程语言.以"易"著称.创始人为吴涛.早期版本的名字为E语言.易语言最早的版本的发布可追溯至2000年9月11日.创造易语言的初衷是进行用中文来编写程序的实践.从2000年至今,易语言已经发展到一定的规模,功能上.用户数量上都十分可观. 上一篇跟大家讲了零基础易语言入门教程(一)编写第一个程序,然后接下来大家应该自己把支持库和易语言组件里面的控件全部认真的看一下,下面我直接跟大家分享下易语言简单编程思路. 方法和步骤如下所示: 1.易语言程序

随机推荐