1)基础结构
<!DOCTYPE html> 要求h5类型
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> viewport确保适当的绘制和触屏缩放,user-scalable=no禁止缩放,更像原生网页
</html>
2)布局
- 为了增强跨浏览器表现的一致性,我们使用了 Normalize.css
- .container 类用于固定宽度并支持响应式布局的容器
- .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container">
</div>
3)栅格系统
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
保证所有列一样高,使用.clearfix:
<div class="clearfix visible-xs-block"></div>
保证所有列一样高,使用偏移.col-md-offset-4:
保证所有列一样高,在最低层级使用.col-*-offset-0 :
<div class="row"> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-sm-4"> </div> <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0"> </div> </div>
保证所有列一样高,使用后推或前拉.col-md-push-* 、.col-md-pull-*:
4)排版
标题, small里面是副标题
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
通过添加 .lead 类可以让段落突出显示
- 被删除的文本del标签
对齐
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
改变文本大小写
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
缩略语
<abbr title="attribute">attr</abbr>基本缩写 <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>首字母缩写
5)表格
- 基本实例: table
- 条纹状表格:table-striped
- 带边框的表格:table-bordered
- 鼠标悬停:table-hover
- 响应式表格:将任何 .table 元素包裹在 .table-responsive 元素内
6)表单
- 基本实例:form-control,form-group
7)按钮
- 状态:active、disabled
- 大小、颜色
8)图片
- 响应式图片:.img-responsive
- 图片形状:.img-rounded、.img-circle、.img-thumbnail
关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
三角符号
<span class="caret"></span>
快速浮动:pull-left、pull-right
- 内容块居中:center-block
- 清除浮动:clearfix
- 显示或隐藏:show;hidden,sr-only、sr-only-focusable(隐藏后显示)