Bootstrap--全局CSS样式之概览
（1）HTML5文档类型
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在项目中的每个页面都要参照下面的格式进行设置。
Code<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
（2）移动设备优先
Bootstrap3 是对移动设备优先的，为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
Code<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
Code<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
（3）排版与链接
Bootstrap 排版、链接样式设置了基本的全局样式。分别是：
- 为
body元素设置background-color: #fff; - 使用
@font-family-base、@font-size-base和@line-height-basea变量作为排版的基本参数 - 为所有链接设置了基本颜色
@link-color，并且当链接处于:hover状态时才添加下划线
这些样式都能在 scaffolding.less 文件中找到对应的源码。
（4）布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding等属性的原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
Code<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
Code<div class="container-fluid">
...
</div>
以上只是简单的对Bootstrap3的概览
本文参考了bootstrap3 中文文档，更详细的内容，请参考Bootstrap3文档
Bootstrap--全局CSS样式之概览的更多相关文章
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- 响应式布局和BootStrap 全局CSS样式
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1
1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...
- Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
- Bootstrap全局CSS样式之button和图片
.btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...
- Bootstrap全局CSS样式之表单
.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...
- bootstrap全局css样式
以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...
- 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2
1.表格 <div class="container"> <table class="table "> <thead> &l ...
随机推荐
- Android用户界面 UI组件--TextView及其子类(四) Chronometer计时器
Chronometer是一个简单的定时器,你可以给它一个开始时间,并以此定时,或者如果你不给它一个开始时间,它将会使用你的时间通话开始.默认情况下它会显示在当前定时器的值的形式“分:秒”或“H:MM: ...
- 三星 PMU NXE2000，x-powers的AXP228，NXE2000
核心板PMIC X4418CV2并没有用三星推荐的PMU NXE2000,而是自主研发,采用x-powers的AXP228,这是因为AXP228更符合用户的习惯,更适合做产品,他们有如下区别: PMU ...
- asp.net中bin目录下的 dll.refresh文件
首先找到了这篇文章http://www.cnblogs.com/haokaibo/archive/2010/07/31/1789342.html 然后找到一篇英文的文章http://monsur.xa ...
- MySQL 备份表和数据
方法1: Create table new_table_name (Select * from old_table_name); 方法2: 1.先备份表结构和数据#导出命令 -u用户名 -p密码 -h ...
- 用vmware安装gho文件
方法1:diskgenius+ghostexp 用vm新建一个空白硬盘虚拟机, 记住虚拟机文件的存储位置, 最好将默认的scsi硬盘移除另外新建ide的硬盘(否则可能开机蓝屏),然后用host机DIS ...
- 【转】从QA到EP
从QA到EP 两三年以前,和友人谈到 QA(软件质量保证) 这个行业,还有 QA 这个团队的未来,就有了一丝忧虑.而现在,终于有机会实践一下自己之前的想法,在这里分享给大家. 从我有限的从业经验到现在 ...
- Axure RP 8.0 中继器初体验
为了解决增删等复杂交互的问题,中继器是个不错的选择. 拖拽出一个默认的中继器 中继器的数据集感觉就像是数据库一样,在右边检视窗口中可以看到中继器的默认数据集,可以理解成一张二维表.默认有1列,现成的3 ...
- nyoj 353 3D dungeon
3D dungeon 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 You are trapped in a 3D dungeon and need to find ...
- flashback drop（2015-2-3学习日记）
知识面是由知识点组成的,你在研究某一个知识点的时候常常会遇到另一个知识点,然后你去研究那个知识点,又会带出更多的知识点,最终组成了知识面. 今天在看书的时候看到一个删除表的语句: DROP TABLE ...
- UNITY打包问题
1,打包有二种,打包可执行程序-player,打包资源包-assetbundle 2,打包player后,在PC平台去看打包后对应的资源大小,发现比原始资源小得多,模型资源压缩率约60%,图资源压缩率 ...