标题

Bootstrap标题样式进行了以下显著的优化重置：

• 重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。

• 所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。

• 固定不同级别标题字体大小：h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。small：font-size: 65%;

段落

• 强调

    .text-muted：提示，使用浅灰色（#999）.text-primary：主要，使用蓝色（#428bca）.text-success：成功，使用浅绿色(#3c763d).text-info：通知信息，使用浅蓝色（#31708f）.text-warning：警告，使用黄色（#8a6d3b）.text-danger：危险，使用褐色（#a94442）
  复制代码

• 文本对齐

    .text-left：左对齐.text-center：居中对齐.text-right：右对齐.text-justify：两端对齐
  复制代码

代码

<code></code>//单行内联代码
<pre></pre>//多行块代码
# 注pre.pre-scrollable//控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条
<kbd></kbd>//用户输入代码
复制代码

表格

.table//基础表格
.table-striped//斑马线表格
.table-bordered//带边框的表格
.table-hover//鼠标悬停高亮的表格
.table-condensed//紧凑型表格
.table-responsive//响应式表格
复制代码

表单

在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

1 在<form>元素是使用类名“form-horizontal”。

2 配合Bootstrap框架的网格系统。

form

form class="form-horizontal" role="form">
复制代码

form-group

<div class="form-group">
复制代码

col-sm-*

<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
复制代码

form-control

<input type="email" class="form-control" placeholder="用户名">
复制代码

常用组合

form.form-inline>div.form-group>label.col-sm-xx>input.form-control
form[role='form']>div.form-group>select.form-control
form[role='form']>div.form-group>textarea.form-control
复制代码

表单按钮

input[type=“submit”]
input[type=“button”]
input[type=“reset”]
复制代码

按钮

.btn btn-primary
.btn btn-warning
.btn btn-success
.btn btn-danger
.btn btn-info
.btn btn-link
.btn btn-inverse
复制代码

网格系统

工作原理:div.container>div.row>div.col-md-x

Bootstrap框架的网格系统工作原理如下：

• 数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)

• 在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：

    <div class="container"><div class="row"><div class="col-md-4"></div><div class="col-md-8"></div></div></div>
  复制代码

• 具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

• 通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

菜单按钮

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 </button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li></ul>
</div>
复制代码

导航

• 基础样式

  ul.nav nav-tabs>li>a

• 胶囊型导航

  ul.nav nav-pills>li>a

• 垂直堆叠导航

  ul.nav nav-tabs nav-stacked>li>a

• 自适应导航 ul.nav nav-tabs nav-justified>li>a

• 面包屑导航

  ul.breadcrumb>li>a

导航条

使用方法： 第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

大概这个样子 div.nav navbar-default>ul.nav navbar-nav>li.active>a

<div class="navbar navbar-default" role="navigation"><ul class="nav navbar-nav"><li class="active"><a href="##">网站首页</a></li></ul>
</div>
复制代码

模态弹出框结构

内置组件