网站开发之Bootstrap篇
2018-04-12 本文已影响212人
平安喜乐698
目录
1. 概念
2. 使用
3. 插件
4. 适配
5. 规范
1.概念
Bootstrap是对html、js、css的封装
目前最受欢迎的前端框架（来自Twitter）
优势：
1. 支持浏览器：IE、火狐、欧朋、谷歌、Safari
2. 响应式设计（兼容 移动端、电脑端）
3. 强大的内置组件
4. 开源
5. 优先移动设备
2.使用
引用
<!DOCTYPE html> 【必须是HTML5】
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0" > ,,禁止用户缩放
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
2.1 布局
响应式网格系统
将内容划分成块（最多12列,可小于12列）
块宽随屏幕尺寸的增加而增加
例：一行2列（手机39分，平板平分，且在大型设备上39分）
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-3"></div>
<div class="col-sm-9 col-md-6 col-lg-9"></div>
</div>
</div>
说明：
1. row(一行）必须放置在 container内。
2. col(一列) 是行的唯一直接子元素，内容放置在列内。
3. 可嵌套（列中包含行）
4. 可换顺序
<div class="col-md-4 col-md-push-8"></div>
<div class="col-md-8 col-md-push-4"></div>
5. 列偏移（.col-xs-* 类不支持）
<div class="col-xs-6 col-md-offset-3"></div>
6.列重置
<div class="clearfix visible-xs"></div>
表格
<table class="table table-striped">
<caption>基本的表格布局</caption> 描述
<thead> 标题
<tr class="warning">
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody> 内容
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
table的class
table-striped 斑马线形式
table-bordered 边框
table-hover 鼠标悬停整行颜色变深
table-condensed 更紧凑
行、列（<tr>, <th> 和 <td> ）的class
info 颜色
warning 颜色
danger 颜色
success 颜色
active 颜色（悬停）
列表
有序列表
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
无序列表
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
未定义样式列表
<ul class="list-unstyled"> 移除默认类型
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
内联列表
<ul class="list-inline"> 同一行
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
定义列表
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
水平的定义列表 dt dd同行
<dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
2.2. 组件
2.2.1 导航栏
导航栏navBar
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header"> 首页
<a class="navbar-brand" href="#">首页</a>
</div>
<div> 其他菜单
<ul class="nav navbar-nav">
当前选中项
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">HTML</a></li>
下拉菜单同下（nav元素）
</ul>
</div>
</div>
</nav>
navbar-right 居右
navbar-left 居左
navbar-fixed-top 固定到顶部
navbar-fixed-bottom 固定到底部
navbar-static-top 随内容滚动
navbar-inverse 黑色背景白色文本
导航栏navBar---响应式（适配手机）
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">首页</a>
菜单按钮（适配手机的）
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航（该文本不显示）</span>
3条横线
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
折叠 ：collapse navbar-collapse
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
</ul>
</div>
</div>
</nav>
导航元素nav
标签式 nav-tabs
胶囊式 nav-pills
垂直胶囊式 nav-stacked
屏幕等宽 nav-justified
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li> 当前tab
<li class="disabled"><a href="#menu1" data-toggle="tab">iOS</a></li> 禁用链接（仅改变了样式，需要js禁用）
<li ><a href="#menu2" data-toggle="tab">HTML</a></li>
<li class="dropdown"> 下拉菜单
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">jMeter</a></li>
<li class="divider"></li> 分割线
<li><a href="#">分离的链接</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active"> 当前内容
<h3>首页</h3>
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜单 1</h3>
</div>
<div id="menu2" class="tab-pane fade">
<h3>菜单 2</h3>
</div>
<div id="menu3" class="tab-pane fade">
<h3>菜单 3</h3>
</div>
</div>
</div>
</div>
导航栏中的表单、按钮、文本
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">首页</a>
</div>
表单（居右）
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
按钮
<button type="button" class="btn btn-default navbar-btn">
导航栏按钮（form表单外的按钮）
</button>
文本
<p class="navbar-text">Runoob 用户登录</p>
带图标
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>
</div>
</nav>
面包屑导航
Home/2013/十一月
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2013</a></li>
<li class="active">十一月</li>
</ol>
分页
大小
pagination-lg 大
pagination-sm 小
<ul class="pagination">
<li><a href="#">«</a></li> 左
<li class="disabled"><a href="#">1</a></li> 不可点
<li class="active"><a href="#">2</a></li> 当前选中项
<li><a href="#">3</a></li>
<li><a href="#">»</a></li> 右
</ul>
翻页
previous 居左
next 居右
disabled 不可点
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
2.2.2 表单
form 垂直
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
form-inline 内联左对齐
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label class="sr-only" for="inputfile">文件输入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
form-horizontal 水平
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname" placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
支持input 类型：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color
<form role="form">
<div class="form-group">
<label for="name">标签</label>
输入框
<input type="text" class="form-control" placeholder="文本输入">
文本框
<textarea class="form-control" rows="3"></textarea>
多选框
<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">选项 2</label>
</div>
单选框
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
</label>
</div>
内联-多选
<div class="checkbox-inline">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox-inline">
<label><input type="checkbox" value="">选项 2</label>
</div>
内联-单选
<div class="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
</label>
</div>
下拉
<label for="name">选择列表</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
下拉-多选
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
纯文本
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
</form>
<input class="form-control" id="focusedInput" type="text" value="该输入框获得焦点">
disabled 禁止输入
<input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
区域内都禁止输入
<fieldset disabled>
</fieldset >
大小
高度
input-lg 大号
input-sm 小号
宽度
col-lg-数字
col-sm-数字
<div class="col-lg-2">
<input class="form-control input-lg" type="text" placeholder="hello">
</div>
帮助文本
<span>帮助文本</span>
<span class="help-block">占据整个宽度
</span>
2.2.3 按钮
可修饰 <a>, <button>, 或 <input>
样式
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link
大小
btn-lg 大号
btn-sm 小号
btn-xs 小小号
btn-block 充满父元素宽
交互
active 可交互
disabled 不可交互
<button type="button" class="btn btn-default">默认按钮</button>
<a class="btn btn-default" href="#" role="button">链接</a>
按钮组(可嵌套)
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
</div>
btn-group-lg 大号
btn-group-sm 小号
btn-group-xs 小小号
btn-group-vertical 垂直
btn-group 水平
多组
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 7</button>
</div>
</div>
按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">功能</a>
</li>
<li class="divider"></li>
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div>
btn-default 默认白色
btn-primary 深蓝色
btn-lg 大号
btn-sm 小号
btn-xs 小小号
右侧带分割线 、上拉菜单
<div class="btn-group dropup"> 上拉菜单
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">切换下拉菜单</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>
下拉菜单
pull-right 居右
pull-left 居左
dropdown-menu-right 居右
dropdown-menu 居左
dropdown 下拉菜单
dropup 上拉菜单
disabled 不可点
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-left" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">下拉菜单标题</li> 下拉菜单标题
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
2.2.4 标签label、 徽章（Badges）、警告alert
标签label
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>
徽章（Badges）
pull-right 居右
pull-left 居左
<span class="badge">50</span>
用于提示未读消息数
警告alert
<div class="alert alert-success">成功</div>
<div class="alert alert-info">信息</div>
<div class="alert alert-warning">警告！</div>
<div class="alert alert-danger">错误！</div>
带有关闭按钮
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
×
</button>
成功！很好地完成了提交。
</div>
带链接
<div class="alert alert-success">
<a href="#" class="alert-link">成功！</a>
</div>
2.2.5 图片、标题、按钮（图标和文本）
图片
img-rounded 圆角矩形
img-circle 圆形
img-thumbnail 带边框矩形
img-responsive 响应式
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
标题
<div class="page-header">
<h1>标题
<small>子标题</small>
</h1>
</div>
图标文本
200多种
搜索
<span class="glyphicon glyphicon-search"></span>
按钮（图标和文本）
按钮（图标和文本）
改变字体大小、颜色、阴影 会改变图标
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px;color: rgb(212, 106, 64);text-shadow: black 5px 3px 3px;">
<span class="glyphicon glyphicon-user"></span> User
</button>
2.2.6 进度条
progress-striped 条纹
active 动画
progress-bar-success
progress-bar-info
progress-bar-warning
progress-bar-danger
<div class="progress progress-striped active">
可以放多个进行叠加
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> 最小值0，最大值100，进度40%
<span class="sr-only">40% 完成</span>
</div>
</div>
2.2.7 超大屏幕
<div class="jumbotron">
<div class="container">
<h1>欢迎登陆页面！</h1>
<p>这是一个超大屏幕（Jumbotron）的实例。</p>
<p><a class="btn btn-primary btn-lg" role="button">
学习更多</a>
</p>
</div>
</div>
2.2.8 缩略图
<div class="thumbnail">
缩略图
<img src="/wp-content/uploads/2014/06/kittens.jpg"
alt="通用的占位符缩略图">
自定义内容
<div class="caption">
<h3>缩略图标签</h3>
<p>一些示例文本。一些示例文本。</p>
<p>
<a href="#" class="btn btn-primary" role="button">
按钮
</a>
<a href="#" class="btn btn-default" role="button">
按钮
</a>
</p>
</div>
</div>
2.2.9 图文混排
可嵌套media
<div class="media">
<a class="media-left" href="#">
<img class="media-object" src="/wp-content/uploads/2014/06/64.jpg"
alt="媒体对象">
</a>
<div class="media-body">
<h4 class="media-heading">媒体标题</h4>
这是一些示例文本。这是一些示例文本。
</div>
</div>
<ul class="media-list">
<li class="media"> 同上
</li>
<li class="media">
</li>
<ul>
2.2.10 面板
panel-primary
panel-success
panel-info
panel-warning
panel-danger
<div class="panel panel-default">
<div class="panel-body">
这是一个基本的面板
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
面板标题
</h3>
</div>
<div class="panel-body">
面板内容
</div>
表格内容
<table class="table">
<th>产品</th><th>价格 </th>
<tr><td>产品 A</td><td>200</td></tr>
<tr><td>产品 B</td><td>400</td></tr>
</table>
列表内容
<ul class="list-group">
<li class="list-group-item">免费域名注册</li>
<li class="list-group-item">免费 Window 空间托管</li>
<li class="list-group-item">图像的数量</li>
<li class="list-group-item">24*7 支持</li>
<li class="list-group-item">每年更新成本</li>
</ul>
<div class="panel-footer">面板脚注</div>
</div>
2.2.11 well
凹凸感
well-lg 大号
well-sm 小号
<div class="well">您好，我在 Well 中！</div>
2.2.12 输入框
input-group-sm 小号
input-group-lg 大号
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group input-group-lg">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="100">
<span class="input-group-addon">.00</span>
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox"></span> 多选框
<input type="text" class="form-control">
</div>
<div class="input-group">
<span class="input-group-addon">
<input type="radio"></span> 单选框
<input type="text" class="form-control">
</div>
<div class="input-group">
按钮
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
</div>
下拉菜单
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">功能</a>
</li>
<li class="divider"></li> 分割线
<li>
<a href="#">分离的链接</a>
</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div>
</form>
</div>
2.2.13 Other
<pre>保留所有回车空格</pre>
<code>不保留多余的回车空格</code>
var
<p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>
提示
<kbd>ctrl + p</kbd>
多行代码带有滚动条（超过最大高度为340px）
<pre class="pre-scrollable"></pre>
电脑输出
<samp></samp>
<h1>我是标题1 h1</h1>
<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>
<p class="lead">更大更粗行更高</p>
<p class="small">小</p>
<small>小</small>
<strong>粗</strong>
<em>斜体</em>
文本位置
<p class="text-left">居左</p>
<p class="text-center">居中</p>
<p class="text-right">居右</p>
？？？
<p class="text-justify">超过屏幕自动换行</p>
<p class="text-nowrap">超过屏幕不换行</p>
<p class="text-lowercase">小写</p>
<p class="text-uppercase">大写</p>
<p class="text-capitalize">单词首字母大写</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>
缩写（指向缩写时提示全称）
<abbr title="World Wide Web" class="initialism">WWW</abbr>
小写转大写
地址
<address></address>
引用
<blockquote></blockquote>
<blockquote class="blockquote-reverse"></blockquote >
颜色
text-muted
text-primary
text-success
text-info
text-warning
text-danger
背景色
bg-primary
bg-success
bg-info
bg-warning
bg-danger
其他
pull-left 居左
pull-right 居右
center-block 设置元素为 display:block 并居中显示
clearfix 清除浮动
show 强制显示
hidden 强制隐藏
sr-only 除了屏幕阅读器外，其他设备上隐藏元素
sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
text-hide 将页面元素所包含的文本内容替换为背景图
close 右方显示关闭按钮
caret 显示下拉式按钮
<p class="text-muted">hello</p>
响应式实用工具
目前只适用于块和表切换
超小屏幕-手机 (<768px) 小屏幕-平板 (≥768px) 中等屏幕-桌面 (≥992px) 大屏幕-桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;
打印类
浏览器 打印机
visible-print-block 隐藏 可见
.visible-print-inline 隐藏 可见
.visible-print-inline-block 隐藏 可见
.hidden-print 可见 隐藏
3.插件
Bootstrap 自带 12 种 jQuery 插件
关闭data属性
$(document).off('.data-api')
关闭特定插件的data属性
$(document).off('.alert.data-api')
避免命名冲突
// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict()
// 为 $().bootstrapBtn 赋予 Bootstrap 功能
$.fn.bootstrapBtn = bootstrapButton
3.1 弹框
弹框
data-toggle="modal"
指定弹框id（要对应）
data-target="#myModal" 或href="#myModal"
隐藏直到触法
aria-hidden="true"
指定标题id（要对应）
aria-labelledby="#hello"
关闭
data-dismiss="modal"
内容
class="modal-body"
底部
class="modal-footer"
背景
data-backdrop=""
当点击escape时关闭弹框（默认：true）
data-keyboard="true"
初始化时显示
data-show="true"
设置内容（在href="1.html"时，将html内容置在内容中）
data-remote="true"
触发按钮
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击</button>
<!-- 模态框（Modal） -->
modal弹框，fade淡入淡出
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
关闭按钮
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script>
$(function() {
$('#myModal').modal({
keyboard: true
});
显示
$('#identifier').modal('toggle');
隐藏
$('#identifier').modal('toggle');
切换显示/隐藏
$('#identifier').modal('toggle');
调用hide后调用
$('#myModal').on('hide.bs.modal',function() {})});
隐藏后调用
$('#myModal').on('hidden.bs.modal',function() {})});
调用show后调用
$('#myModal').on('show.bs.modal',function() {})});
显示后调用
$('#myModal').on('shown.bs.modal',function() {})});
</script>
3.2 下拉菜单
dropdown
可以向导航栏、标签页、胶囊式导航菜单、按钮等添加。
<script>
$(function() {
js下拉
$('.dropdown-toggle').dropdown()
js切换上下拉
$('.dropdown-toggle').dropdown('toggle')
});
</script>
例：
<div class="dropdown">
<a role="button" data-toggle="dropdown" data-target="#" href="/page.html">
下拉菜单 <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">111</a></li>
<li class="divider"></li>
<li><a href="#">222</a></li>
</ul>
</div>
3.3 按钮
<button type="button" class="btn btn-default">默认按钮</button>
点击可变为按压状态（有阴影，颜色变深）
data-toggle="button"
<div type="button" class="btn btn-primary" data-toggle="button"> 按钮
</div>
点击可变为按压状态（有阴影，颜色变深）【一组-多选】
data-toggle="buttons"
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> 选项 1
</label>
<label class="btn btn-primary">
<input type="checkbox"> 选项 2
</label>
</div>
点击可变为按压状态（有阴影，颜色变深）【一组-单选】
data-toggle="buttons"
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1"> 选项 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> 选项 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> 选项 3
</label>
</div>
来回切换选中状态 .button('toggle')
<div id="myButtons1" class="bs-example">
<button type="button" class="btn btn-primary">原始</button>
</div>
$(function () {
$("#myButtons1 .btn").click(function(){
$(this).button('toggle');
});
});
将按钮置为加载状态 .button('loading')
此时文本显示为data-loading-text属性指定的文本，且不可交互
重置初始状态 .button('reset')
将按钮置为完成状态 .button('complete')
此时文本显示为data-complete-text属性指定的文本
<div id="myButtons2" class="bs-example">
<button type="button" class="btn btn-primary"
data-loading-text="Loading..." data-complete-text="Loading finished">原始
</button>
</div>
$(function() {
$("#myButtons2 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() { 1s后
切换为重置状态
$(this).button('reset');
切换为完成状态
$(this).button('complete');
});
});
});
3.4 警告框
<div class="alert alert-success">成功</div>
添加关闭警告x功能
data-dismiss="alert"
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">
×
</a>
<strong>警告！</strong>您的网络连接有问题。
</div>
关闭所有alert警告框
$("#myAlertHello").alert('close');
点击关闭时调用
.bind('close.bs.alert', function () {})
警告框被关闭时调用
.bind('closed.bs.alert', function () {})
<div id="myAlertHello" class="alert alert-warning">
<a href="#" class="close">
×
</a>
<strong>警告！</strong>您的网络连接有问题。
</div>
<script>
$(function(){
$(".close").click(function(){
$("#myAlertHello").alert('close');
});
});
$(function(){
$("#myAlert").bind('closed.bs.alert', function () {
alert("点击关闭时调用");
});
$("#myAlert").bind('closed.bs.alert', function () {
alert("警告框被关闭时调用");
});
});
</script>
?
.alert()
3.5 弹出框（气泡）
弹框（气泡）
data-toggle="popover"
弹框（气泡）标题
title="" 或 data-title=""
弹框（气泡）内容
data-content=""
弹框（气泡）位置（默认：top）top left bottom right auto
data-placement="auto left"
弹框（气泡）是否动画(默认：true)
data-animation="true"
弹框标题内容是否支持html（默认：false）
data-html="true"
？
data-selector
如何弹出弹框(click| hover | focus | manual)默认：click
data-trigger=""
延迟500ms(对manual无效)
data-delay="500"
在指定的父元素内弹框（默认：false，不用指定）
data-container="body"
<div class="container" style="padding: 100px 50px 10px;" >
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
</div>
<script>
必须使用 jquery 激活它（读取 javascript）,以下代码必须加
$(function (){
$("[data-toggle='popover']").popover();
});
弹出
$(function () { $('.hello').popover('show');});
隐藏
$(function () { $('.hello').popover('hide');});
切换 弹出/隐藏
$(function () { $('.hello').popover('toggle');});
隐藏并销毁
$(function () { $('.hello').popover('destroy');});
使标题内容可以使用html
$(function () { $('.hello').popover({html : true });});
事件
调用show立即调用
$(function () { $('.hello').on('show.bs.popover', function () {});
弹框可见时调用
$(function () { $('.hello').on('shown.bs.popover', function () {});
调用hide立即调用
$(function () { $('.hello').on('hide.bs.popover', function () {});
弹框隐藏后调用
$(function () { $('.hello').on('shown.bs.popover', function () {});
</script>
</div>
3.5 提示工具
常用于描述这是一个链接，或按钮提示
提示工具
data-toggle="tooltip"
标题
title="" 或 data-title=""
内容
data-content=""
位置（默认：top）top left bottom right auto
data-placement="auto left"
是否动画(默认：true)
data-animation="true"
标题内容是否支持html（默认：false）
data-html="true"
？
data-selector
如何弹出(click| hover | focus | manual)默认：click
data-trigger=""
延迟500ms(对manual无效)
data-delay="500"
在指定的父元素内弹出（默认：false，不用指定）
data-container="body"
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
<script>
必须添加以下代码，进行激活
$(function () { $("[data-toggle='tooltip']").tooltip(); });
隐藏
$(function () { $('.hello').tooltip('hide');});
显示
$(function () { $('.hello').tooltip('show');});
切换隐藏/显示
$(function () { $('.hello').tooltip('toggle');});
隐藏并销毁
$(function () { $('.hello').tooltip('destroy');});
标题内容是否支持html
$(function () { $('.hello').tooltip({html : true });});
调用show时立即调用
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {});
显示后调用
$(function () { $('.tooltip-show').on('shown.bs.tooltip', function () {});
调用hide时立即调用
$(function () { $('.tooltip-show').on('hide.bs.tooltip', function () {});
隐藏后调用
$(function () { $('.tooltip-show').on('hidden.bs.tooltip', function () {});
</script>
3.6 标签页
tab按钮
修饰ul
class="nav nav-tabs"
修饰li
data-toggle="tab"
tab内容
tab-content
内容的每项
tab-pane
<ul id="myTab" class="nav nav-tabs">
当前选中
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
可下拉
<li class="dropdown">
下拉按钮
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
下拉菜单选项
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#iOS1" tabindex="-1" data-toggle="tab">iOS1</a></li>
<li><a href="#iOS2" tabindex="-1" data-toggle="tab">iOS2</a></li>
</ul>
</li>
</ul>
内容
<div id="myTabContent" class="tab-content">
此处的id是上方按钮href中的#home（对应）
淡入淡出fade
active当前内容项
<div class="tab-pane fade in active" id="home"><p>主页</p></div>
<div class="tab-pane fade" id="ios"><p>iOS</p></div>
<div class="tab-pane fade" id="iOS1"><p>hei</p></div>
<div class="tab-pane fade" id="iOS2"><p>hei2</p></div>
</div>
<script>
$(function () {
// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
// 选取第一个标签页
$('#myTab a:first').tab('show')
// 选取最后一个标签页
$('#myTab a:last').tab('show')
// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')
// 点击某标签显示前
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {});
// 点击某标签显示后
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// 获取已激活的标签页的名称
var activeTab = $(e.target).text();
// 获取前一个激活的标签页的名称
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
})
</script>
3.7 滚动监听(根据滚动位置切换菜单选项，或点击菜单项滚动到某位置)
想监听的元素
data-spy="scroll"
导航
data-target=""
距离顶部位置（默认：10）
data-offset="10"
例1:
<head>
<style>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
#section1 {color: #fff; background-color: #1E88E5;}
#section2 {color: #fff; background-color: #673ab7;}
#section3 {color: #fff; background-color: #ff9800;}
#section41 {color: #fff; background-color: #00bcd4;}
#section42 {color: #fff; background-color: #009688;}
@media screen and (max-width: 810px) {
#section1, #section2, #section3, #section41, #section42 {
margin-left: 150px;
}
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<div class="container-fluid">
<div class="container-fluid">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section2">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section3">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section41">
<h1>Section 4-1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section42">
<h1>Section 4-2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>
</div>
例2:(水平菜单栏)
<head>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
例3：
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">教程名称</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#ios">iOS</a></li>
<li><a href="#svn">SVN</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu"
aria-labelledby="navbarDrop1">
<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
<li><a href="#ejb" tabindex="-1">ejb</a></li>
<li class="divider"></li>
<li><a href="#spring" tabindex="-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<h4 id="ios">iOS</h4>
<p>iOS</p>
<h4 id="svn">SVN</h4>
<p>SVN</p>
<h4 id="jmeter">jMeter</h4>
<p>jMeter</p>
<h4 id="ejb">EJB</h4>
<p>EJB</p>
<h4 id="spring">Spring</h4>
<p>Spring</p>
</div>
<script>
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove();
$('[data-spy="scroll"]').each(function () {
刷新（当元素发生变动时）
var $spy = $(this).scrollspy('refresh')
});
}
$("#myScrollspy").scrollspy();
当新项目激活时调用
$('#myScrollspy').on('activate.bs.scrollspy', function () {
var currentItem = $(".nav li.active > a").text();
$("#activeitem").html("目前您正在查看 - " + currentItem);
})
});
</script>
3.8 折叠
点击可折叠展开
data-toggle="collapse"
指定折叠内容id（要对应）
href="#helloId"
将折叠内容添加到指定父元素
data-parent="#accordion"
初始显示
class="collapse in" collapse隐藏
例一：
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#demo">简单的可折叠组件
</button>
<div id="demo" class="collapse in">hello</div>
例二：
<div class="panel-group" id="accordion">
<div class="panel panel-default">
头部
<div class="panel-heading">
标题
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">点击</a></h4>
</div>
内容
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">hello</div>
</div>
</div>
</div>
<script>
$(function () { $('#collapseFour').collapse({
toggle: false
})});
展开
$(function () { $('#collapseTwo').collapse('show')});
折叠
$(function () { $('#collapseOne').collapse('hide')});
切换折叠展开
$(function () { $('#collapseThree').collapse('toggle')});
调用show后调用
$('#collapseexample').on('show.bs.collapse', function () {});
展开后调用
$('#collapseexample').on('shown.bs.collapse', function () {});
调用hide后调用
$('#collapseexample').on('hide.bs.collapse', function () {});
隐藏后调用
$('#collapseexample').on('hidden.bs.collapse', function () {});
</script>
3.9 轮播
向前向后
data-slide="prev" next
跳到第几张
data-slide-to="0"
自动轮播（页面加载后）
data-ride="carousel"
延迟（默认：5000ms）
data-interval="3000"
鼠标悬停时暂停滚动（默认：hover）
data-pause="hover"
是否连续循环滚动（默认：true）
data-wrap="true"
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播小圆点 -->
<ol class="carousel-indicators">
当前小圆点
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播内容-->
<div class="carousel-inner">
当前内容
<div class="item active">
<img src="slide1.png" alt="First slide">
标题（可选）
<div class="carousel-caption">标题 1</div>
</div>
<div class="item"><img src="slide2.png" alt="Second slide"></div>
<div class="item"><img src="slide3.png" alt="Third slide"></div>
</div>
<!-- 轮播左右箭头-->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›
</a>
</div>
<script>
$(function(){
$(".hello").click(function(){
// 开始滚动
$("#myCarousel").carousel('cycle');
// 暂停
$("#myCarousel").carousel('pause');
// 上一页
$("#myCarousel").carousel('prev');
// 下一页
$("#myCarousel").carousel('next');
// 跳到指定页
$("#myCarousel").carousel(0);
});
调用slide后调用
$('#hello').on('slide.bs.carousel', function () {});
完成过度后调用
$('#hello').on('slid.bs.carousel', function () {});
});
</script>
3.10 附加导航
内容滚动某位移后固定到指定位置
附加导航
data-spy="affix"
位移（向下滚动125触发固定）
data-offset-top="125" data-offset ？
固定到指定位置
ul.affix{
top: 300px;
}
？
.affix、.affix-top 和 .affix-bottom
或者 js
<script>
$(document).ready(function(){
$("#myHelloNav").affix({
offset: {
top: 125
}
});
});
</script>
4. 适配
针对不同分辨率使用不同布局
超小设备（手机，小于 768px）
默认情况下没有媒体查询
小型设备（平板电脑，768px 起）
@media (min-width: @screen-sm-min) {
}
中型设备（台式电脑，992px 起）
@media (min-width: @screen-md-min) {
}
大型设备（1200px起）
@media (min-width: @screen-lg-min) {
}
@media (max-width: @screen-xs-max) {
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { }
超小设备手机（<768px） 小型设备平板电脑（≥768px） 中型设备台式电脑（≥992px） 大型设备台式电脑（≥1200px）
网格行为 一直是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的 以折叠开始，断点以上是水平的
最大容器宽度 None (auto) 750px 970px 1170px
Class 前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数量和 12 12 12 12
最大列宽 Auto 60px 78px 95px
间隙宽度 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px） 30px（一个列的每边分别 15px）
可嵌套 Yes Yes Yes Yes
偏移量 Yes Yes Yes Yes
列排序 Yes Yes Yes Yes
其他
加徽章
<ul class="list-group">
<li class="list-group-item">11</li>
<li class="list-group-item">22</li>
<li class="list-group-item"> 加徽章
<span class="badge">新</span>
33
</li>
</ul>
带链接
<a href="#" class="list-group-item active">11</a>
<a href="#" class="list-group-item">22</a>
多组
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">
11
</h4>
<p class="list-group-item-text">
text
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">
1111
</h4>
<p class="list-group-item-text">
text
</p>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">
22
</h4>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">
22222
</h4>
</a>
</div>
5.规范
HTML规范
1.用两个空格来代替制表符（tab）
2.嵌套元素应当缩进一次（即两个空格）
3.属性使用双引号(绝不要使用单引号)
4.不要在自闭合后加斜杠
5.不要省略结束标签
6.属性顺序
class
id, name
data-*
src, for, type, href
title, alt
aria-*, role
7. Bool型属性如：disabled，不必写值（有则true）
8. 尽量减少标签
9. 尽量减少js生成标签
HTML5
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="code-guide.css">
<style></style>
<script src="code-guide.js"></script>
</head>
</html>
CSS规范
1. 用两个空格来代替制表符（tab）
2. 分组选择器时，每个选择器占一行
3. 在{ 前添加一个空格
4. }应单独一行
5. ：后加空格
6. 一个声明占一行
7. 每一个声明加；（最后一个也加上）
8. 不要为 0 值指定单位
9. 选择器中的属性添加双引号
10. 尽量使用简写形式的小写十六进制值
11. 省略小于1 的小数前面的 0 （.5）
12. 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格
13. 以逗号分隔的属性值，每个逗号后面都应该插入一个空格
14. 声明顺序
Positioning 位置
Box model 大小
Typographic 自有属性
Visual 共有属性
15. 不要使用 @import（与 <link> 标签相比，@import 指令要慢很多）
16. 组织代码结构：注释+相同回车进行分隔
17.
对于通用元素使用 class ，这样利于渲染性能的优化
对于经常出现的组件，避免使用属性选择器
18. 只包含一条声明的放在一行。
19. 不要滥用“一个声明”（如padding、margin、font、background、border、border-radius）
20. 避免非必要的嵌套（修饰子元素的）
21. class命名
只能出现小写字符和破折号（-）（不是下划线，也不是驼峰命名法）。
避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
应当尽可能短，并且意义明确。
使用有意义的名称。
基于最近的父 class 或基本（base） class 作为新 class 的前缀。
使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中
其他
UI编辑器
1.Bootstrap Magic 主题生成器
在线编辑
http://www.oschina.net/p/bootstrap-magic
2.BootSwatchr 从底层开始创建 Bootstrap 主题
在线编辑
http://bootswatchr.com/
3.其他
Bootstrap Live Editor
Fancyboot
Style Bootstrap
Lavish
Bootstrap ThemeRoller
LayoutIt！
Pingendo
Kickstrap
Bootply
X-Editable
Jetstrap
DivShot
PaintStrap
