1. 1标题
Bootstrap标题样式进行了以下显著的优化重置：
1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。small：font-size: 65%;
element.h1~h6,element={h1-h6,div,p,...}=>标题
element.h1~h6>small ,element={h1-h6,div,p,...}=>副标题
1.2段落
//文本 p>small,p>strong,p>cite,p>em,p.lead //强调相关的类 .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：两端对齐
1.3列表
//去点列表 ul.list-unstyled //内联列表 ul.list-inline //对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。
1.4代码
//单行内联代码 //多行块代码 //用户输入代码 pre.pre-scrollable//控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条
1.5表格
table.table//基础表格 .table-striped//斑马线表格 .table-bordered//带边框的表格 .table-hover//鼠标悬停高亮的表格 .table-condensed//紧凑型表格 .table-responsive//响应式表格
2.1表单
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。
在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：
1、在
//水平表单 form.form-form-horizontal>div.form-group>label.col-sm-xx>input.form-control > form class="form-horizontal" role="form"> > > > > //内联表单 form.form-inline>div.form-group>label.col-sm-xx>input.form-control //input form[role='form']>div.form-group>input[type=''].form-control //表单控件(下拉选择框select) form[role='form']>div.form-group>select.form-control //textarea form[role='form']>div.form-group>textarea.form-control //radio,checkbox,大小,排列 form[role='form']>div.checkbox>lable.formcontrol>input[type='checkbox'].form-control lg checkbox-inline //表单按钮，按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现： > input[type=“submit”] > input[type=“button”] > input[type=“reset”] >
多标签支持
一般制作按钮除了使用
img.img-responsive//响应式图片，主要针对于响应式设计 img.img-rounded//圆角图片 img.img-circle//圆形图片 img.img-thumbnail//缩略图片 //在任何内联元素上应用所对应的样式即可：
3.1网格系统
![图片描述][1]
工作原理:
div.container>div.row>div.col-md-x
Bootstrap框架的网格系统工作原理如下：
1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：
3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响
//列偏移 .col-md-offset-x //列排序 .col-md-push-x,.col-md-pull-x
4.1菜单按钮及导航
//一般 div.dropdown>button.btn btn-default dropdown-toggle+span.carret+ul.dropdown-menu>li*x //对齐 ul.pull-right,dropdown-menu-right //下拉分割线 li.divider //菜单标题 li.dropdown-header //菜单状态 li.disabled,li.active
//基本 div.btn-group>btn btn-default ... //按钮工具栏 div.btn-group>btn btn-default ...>span.glyphicon glyphicon-align-left... //嵌套分组（加下拉） ... div.btn-group>button.btn btn-default dropdown-toggle>ul.dropdown-menu>li*x //垂直分组 div.btn-group-vertical... //等分按钮 div.btn-wrap>div. btn-group btn-group-justified>a.btn btn-defaul...
4.3导航
//基础样式 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
5.1导航条
使用方法：
第一步：首先在制作导航的列表()基础上添加类名“navbar-nav”
第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”div.nav navbar-default>ul.nav navbar-nav>li.active>a
**5.2响应式**
慕课网
**5.3标签徽章**
//标签
span.label label-infodangersuccesslinkwarningdefault
//徽章
span.badge
**6.1其它内置组件**
//1.缩略图div.container>div.row>div.col-xs- col-md->a+div.caption
Bootstrap框架系列教程
//2.警示框
div.alert alert-success... alert-dismissable(可关闭)
//进度条
div.progress>div.progress-bar progress-bar-success...
(动态条纹：在进度条“progress progress-striped”两个类的基础上再加入“active”类名)
//媒体对象--默认媒体对象
div.media>a.pull-left>img.media-object; div.meidia-body>h4.media-heading>div
//3.媒体对象列表
ul.meidia-list>li.media
//4.列表组
ul.list-group>li.list-grop-item>span.badge（带徽章）a(带连接)；
ele.list-group-item-heading>ele.list-group-item-text;
ele.list-group>ele.list-group-item active list-group-item-sccuess
//5.面板
div.panel panel-default>div.panel-heading+div.panel-body+div.panel-footer
**7.js插件**
> 默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果： >模态弹出窗（Modal）的滑动和渐变效果； > 选项卡（Tab）的渐变效果； > 警告框（alert）的渐变效果； > 图片轮播（Carousel）的滑动效果。 **7.1模态弹出框结构**
div.modal-show>div.modal-dialog>div.modal-content>div.modal-header+div.modal-body+div.modal-footer
![图片描述][2] ![图片描述][3] [1]: http://img1.sycdn.imooc.com/57a552a900018b9305540282.jpg [2]: http://img1.sycdn.imooc.com/57a5807c0001d6c409000872.png [3]: http://img1.sycdn.imooc.com/57a583ef0001b34409020384.png
