bootstrap入门-2.固定的内置样式
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 |
|
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.固定的内置样式的更多相关文章
- 【Go入门教程2】内置基础类型(Boolean、数值、字符串、错误类型),分组,iota枚举,array(数值),slice(切片),map(字典),make/new操作,零值
这小节我们将要介绍如何定义变量.常量.Go内置类型以及Go程序设计中的一些技巧. 定义变量 Go语言里面定义变量有多种方式. 使用var关键字是Go最基本的定义变量方式,与C语言不同的是Go把变量类型 ...
- python入门之数据类型及内置方法
目录 一.题记 二.整形int 2.1 用途 2.2 定义方式 2.3 常用方法 2.3.1 进制之间的转换 2.3.2 数据类型转换 3 类型总结 三.浮点型float 3.1 用途 3.2 定义方 ...
- 08python语法入门--基本数据类型及内置方法
数字类型int与float 定义 类型转换 使用 字符串 定义 类型转换 使用 优先掌握的操作 需要掌握的操作 了解操作 列表 定义 类型转化 使用 优先掌握的操作 需要掌握的操作 了解操作 元组 作 ...
- net core体系-web应用程序-4net core2.0大白话带你入门-8asp.net core 内置DI容器(DependencyInjection,控制翻转)的一点小理解
asp.net core 内置DI容器的一点小理解 DI容器本质上是一个工厂,负责提供向它请求的类型的实例. .net core内置了一个轻量级的DI容器,方便开发人员面向接口编程和依赖倒置(IO ...
- javascript快速入门4--函数与内置对象
函数 函数(又称为方法)用于对一大段为了达到某种目的的代码进行归类,以使代码更具有条理: //一段计算三角形面积的代码 var wide=window.prompt("请输入三角形的底边长度 ...
- 解决css样式被内置样式覆盖的问题
.preImg { height:400px !important } <img id="preImg" class="preImg" style=&qu ...
- Bootstrap入门及其常用内置实现
BootStrap是一个专门做页面的 1.BS是基于HTML CSS JS 的一个前端框架(半成品) 2.预定义了一套CSS样式与JQurey实现 3.BS和Validation类似,都是JQ的插件, ...
- 《zw版·Halcon入门教程与内置demo》
<zw版·Halcon入门教程与内置demo> halcon系统的中文教程很不好找,而且大部分是v10以前的版本. 例如,QQ群: 247994767(Delphi与halcon), 共享 ...
- JSP内置标签 JSP中JavaBean标签 JSP开发模式 EL和JSTL快速入门
2 JSP内置标签(美化+业务逻辑) 1)为了取代<%%>脚本形式,使用JSP标签/JSP动作,目的:与JSP页面的美化,即JSP面页都是由标签组成,不再有其它的内容 2)JSP内 ...
随机推荐
- Linux下rar命令详解
Linux下rar命令详解 用法: rar <命令> -<选项1> ….-<选项N> < 操作文档> <文件…> <@文件列表…> ...
- node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用提高nodejs调试效率
在开发或调试Node.js应用程序的时候,当你修改js文件后,总是要按下CTRL+C终止程序,然后再重新启动,即使是修改一点小小的参数,也 总是要不断地重复这几个很烦人的操作.这是因为Node.js ...
- SpringMVC原理和框架
SpringMVC工作原理 在上一篇章[spring]01_环境配置 中,我们演示了一个简单的HelloWorld工程. 本篇章重点讲述SpringMVC的基本工作原理,让大家进一步加深认识. 工作流 ...
- webkit内核浏览器的CSS写法
-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择 ...
- iOS开发-二维码扫描和应用跳转
iOS开发-二维码扫描和应用跳转 序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...
- Git初使用
今天开始初次使用Git,Git作为一个使用广泛的分布式版本控制系统,我们有必要熟悉掌握. 这次主要是实现将本地上的“Hello World”的完整的项目文件提交到github上新建的代码库,主要过程如 ...
- linux 清除驱动对网卡的记录
1.情况说明: 通过U盘做了一个linux 系统镜像(可读可写),设置eth0的ip=10.0.73.11.第一次启动的时候ip正确. 当我将该镜像)在另一台服务器启动的时候,无法通过10.0.73. ...
- EhCache WebCache 与 SpringMVC集成时 CacheManager冲突的问题
转自:点击打开链接 http://www.cnblogs.com/daxin/p/3560989.html EhCache WebCache 与 SpringMVC集成时 CacheManager冲突 ...
- cat命令在文件中插入内容
eg: cat>> xxx <<EOFinsert 1insert 2 EOF
- java.util.HashMap
做LeeCode上的题目,发现关于数组的题目用HashMap后简化运算,包括在之前的工作中,也多次用到HashMap而我对它的了解却不多,现在来总结一下. 在算法中的用处,暂时的理解是,当数组中两个数 ...