在此就不做 bootstrap 的介绍了，近几年 bootstrap 越来越流行，一点不亚于 js 中的 jquery。
以下为 bootstrap 3.3.5 学习中记录的东西，方便查阅，作者使用的是 jsp ，跟 html 可能有稍许不同，请自行参考修改
【引用文件】
【页面引用】
路径请自行规划
<script type="text/javascript" src="https://www.jb51.net/<%=path%>/js-lib/jquery/jquery-1.11.2.min.js"></script> <!-- 未压缩 --> <link type="text/css" href="https://www.jb51.net/<%=path%>/js-lib/bootstrap/css/bootstrap.css" /> <link type="text/css" href="https://www.jb51.net/<%=path%>/js-lib/bootstrap/css/bootstrap-theme.css" /> <script type="text/javascript" src="https://www.jb51.net/<%=path%>/js-lib/bootstrap/js/bootstrap.js"></script> <!--[if lt IE 9]> <script src="https://www.jb51.net/<%=path%>/js-lib/html5/html5shiv.min.js"></script> <script src="https://www.jb51.net/<%=path%>/js-lib/html5/respond.min.js"></script> <![endif]-->
【标准模板】
<!DOCTYPE html> <html> <head> <base href="https://www.jb51.net/<%=basePath%>"> <meta lang="zh-CN"/> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta content="width=device-width, initial-scale=1" /> <title>bootstrap 模板</title> <script type="text/javascript" src="https://www.jb51.net/<%=path%>/js-lib/jquery/jquery-1.11.2.min.js"></script> <!-- 未压缩 --> <link type="text/css" href="https://www.jb51.net/<%=path%>/js-lib/bootstrap/css/bootstrap.css" /> <link type="text/css" href="https://www.jb51.net/<%=path%>/js-lib/bootstrap/css/bootstrap-theme.css" /> <script type="text/javascript" src="https://www.jb51.net/<%=path%>/js-lib/bootstrap/js/bootstrap.js"></script> <!--[if lt IE 9]> <script src="https://www.jb51.net/<%=path%>/js-lib/html5/html5shiv.min.js"></script> <script src="https://www.jb51.net/<%=path%>/js-lib/html5/respond.min.js"></script> <![endif]--> </head> <body> hello bootstrap! </body> </html>
【css选择器优先级】
依次为
style 属性
id
class
元素标签
【媒体查询与 container 源码】
该样式利用媒体查询，根据页面宽度不同，展示不同
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } }
【12栅格系统】
.row: 一行
.col-md-*: * 为列号
.col-md-offset-*: 列向右移几列的宽度
.col-md-push-*: 向右推（移动）几列
.col-md-pull-*: 向左拉（移动）几列
.clearfix visible-xs: 清除浮动，只在小型屏幕生效
【基础组件5种颜色】
primary(重点蓝)
success(成功绿)
info(信息蓝)
warning(警告橙)
danger(危险红)
【按钮】
<button type="button">btn-primary</button> <button type="button">btn-success</button>
按钮大小分为以下几个尺寸
xs: 超小
sm: 小型
缺省: 普通
lg: 大型
<button type="button">btn-primary</button> <button type="button">btn-success</button> <button type="button">btn-success</button> <button type="button">btn-success</button>
【进度条】
进度条需js进行进度变动
<div> <div> 45% Complete </div> </div>
【下拉框】
<div> <button type="button" data-toggle="dropdown"> 我的书籍 <span></span> </button> <ul> <li> <a href="https://www.jb51.net/javaScript:void(0)">JavaScript 编程精解</a> </li> <li> <a href="https://www.jb51.net/javaScript:void(0)">JavaScript 设计模式</a> </li> <li> <a href="https://www.jb51.net/javaScript:void(0)">JavaScript 启示录</a> </li> <li></li> <li> <a href="https://www.jb51.net/javaScript:void(0)">深入理解 bootstrap3</a> </li> </ul> </div>
【选项卡】