标题
<h1>或者使用类.h1
副标题
<h1>标题<small>副标题</small></h1>
强调文本
class="lead"
文本颜色
使用不同类：.text-danger(危险褐色).text-info(信息浅蓝).text-primary(主要蓝色).text-success(成功绿色)
文本对齐
类名.text-left左对齐， .text-center：居中对齐，text-justify两段对齐
无装饰列表
Class=”list-unstyled”
水平列表
Class=”list-inline”
代码
<code>单行代码</code><pre>多行代码</pre>
<kbd>模仿键盘风格</kbd>
<pre class=”pre-scrollable”>固定代码区域大小</pre>
表格<table>
class=”table-hover”
鼠标悬浮高亮
class=”table”
基础表格样式
class=”table-striped”
斑马线表格
class=”table-bordered”
带外围边框表格
class=”table-hover”
悬浮高亮
class=”table-condensed”
紧凑型的表格
class=”table-responsive”
响应式表格
表单<form>
Class=”form-horizontal”
水平排列
Class=”form-inline”
内联表单，在一行显示
class=”form-control”
表单的元素都要添加这个类来保证控制正确
class=”input-lg/sm”
控制input(表单元素)比原来更大/小
<div class=”clo-xs-n”>
n为数字，控制宽度
<formtag disabled>
禁用元素
<div class=”has-success/warning/error”>
表单显示成功、警告、错误状态，加class=”has-feedback”后会有图标
<span class=”help-block”>
添加提示信息，随不同div状态显示不同效果
按钮<button>
<button class=”btn”>
基本按钮，不仅适用于button，还支持其他标签
Class=”btn btn-default”
默认按钮
Class=”btn btn-success/primary/info/warning/danger/link”>
定制按钮绿色/蓝色/浅蓝/黄色/红色/链接按钮
Class=”btn btn-lg/sm”
控制按钮大/小
Class=”btn btn-block”
按钮充满容器
Class=”disabled”
元素禁用的样式
<div class=”btn-group”>
把按钮放到一个组容器里
<div class="btn-group-vertical">
按钮组垂直显示
<div class=”btn-group-justified”>
按钮等分显示
图像<img>
Class=”img-rounded/circle/responsive/thumbnail”
圆角、圆形、响应式、缩略图
缩略图
Class=”thumbnail”
缩略图容器
Class=”caption”
缩略图相关文本
图标
<span class="glyphicon glyphicon-search/plus"></span>
glyphicons.com网站提供的图标库，搜索/加号图标
网格系统
<div class="container">
<div class="row"> <div class="col-md-4">.col-md-4</div><div class="col-md-8">.col-md-8</div> </div>
行row包含在container中，子对象为列col-md-n，控制列宽度，一行所有列和为12
下拉菜单
Class=”divider”
分割线
Class=”dropdown-header”
菜单标题
Class=”pull-left/right”
菜单与父元素左/右对齐
导航
Class=”nav nav-tab”
标签型导航可以附加”active”,”disabled”类
Class=”nab nav-pills”
圆角导航
Class=”breadcrumbs”
面包屑导肮
导航条
Class=”navbar”
导航条外部容器
Class=”navbar-fixed-top”
导航条固定在页面上方
Class=”navbar-header”
导航条标题
Class=”navbar-navr”
导航条内容
Class=”navbar-form”
导航条表单
Class=”navbar-inverse”
黑色导航条
分页导航
Class=”pagination”
分页导航
Class=”pager”
翻页导航
标签
Class=”label label-danger”
错误标签
徽章
Class=”bage”
小图标徽章
警示框
Class=”alert alert-success/info/danger/warning
绿色/蓝色/红色/黄色警示框
Class=”dismissable”并且添加按钮<button class=”close” data-dismiss=”alert”>×</button>
可关闭的警示框
进度条
<div class=”progress”><div class=”progress-bar”>条上显示内容</div></div>
外层class=”progress”内层class=”progress-bar”
基本进度条，通过设置内层width属性来表示进度
Class=”progress-bar-success/info/warning/danger”
内层，绿色/蓝色/黄色/红色进度条，可以设置多个内层叠放显示
Class=”progress-striped”
外层，条纹进度条
Class=”progress-striped active”
外层，动态进度条
媒体对象
Class=”media”
Class=”media-list”内层class=”media”
媒体对象列表
列表组
Class=”list-group”内层class=”list-group-item”
class="list-group-item list-group-item-success/ifo/warning/danger"
绿色/蓝色/黄色/红色列表
面板
外层Class=”panel panel-default”
默认面板
内层clas=”panel-heading/body/footer”
内层面板的头、主体、底部
外层Class=”panel panel-primary/success/info/warning/danger”
蓝色/绿色/浅蓝/黄色/红色面板
下面记录一些例子:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Bootstrap实例</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <!--下拉菜单--> <div class="dropdown"><!--使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，向上为dropup--> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span><!--三角--> </button><!--使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和 自定义“data-toggle”属性--> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”--> <li><a href="#">下拉菜单项</a></li> <li><a href="#">下拉菜单项</a></li> <li><a href="#">下拉菜单项</a></li> <li><a href="#">下拉菜单项</a></li> </ul> </div> <!--导航条--> <div class="navbar navbar-default"> <div class="navbar-header"><!--导航条标题--> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="##" class="navbar-brand">网站名</a> </div> <ul class="nav navbar-nav"><!--导航条内容--> <li class="active"><a href="##">网站首页</a></li> <li class="dropdown"><!--二级菜单--> <a href="##" data-toggle="dropdown" class="dropdown-toggle">导航1 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="##">导航1选项1</a></li> <li><a href="##">导航1选项2</a></li> <li class="disabled"><a href="##">导航1选项3</a></li> </ul> </li> <li><a href="##">导航2</a></li> <li><a href="##">导航3</a></li> <li><a href="##">导航4</a></li> </ul> <form action="##" class="navbar-form navbar-left"><!--导航条搜索框--> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入关键词" /> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div> <!--响应式导航条--> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 --> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --> <a href="##" class="navbar-brand">网站标题</a> </div> <div class="collapse navbar-collapse navbar-responsive-collapse"> <!-- 屏幕宽度小于768px时，容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，展开。 --> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li><a href="##">导航1</a></li> <li><a href="##">导航2</a></li> <li><a href="##">导航3</a></li> <li><a href="##">导航4</a></li> </ul> </div> </div> <!--表单提示信息--> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="help-block">你输入的信息是正确的</span> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
