bootstrap知识点总结-1

bootstrap
主要分为四个部分：
 (1)全局CSS样式
容器、按钮、图片、文本、背景、浮动、排版、栅格系统、表格、表单
 (2)组件
  Glyphicons、下拉菜单、按钮组、导航、导航条、路径导航、分页、标签、徽章、巨幕、页头、缩略图、警告框、进度条、媒体对象、列表组、面板、具有响应式特性的嵌入内容、Well
 (3)js插件
  过渡、模态框、下拉菜单、滚动监听、标签页、工具提示、弹出框、警告框、按钮、Collapse、Carousel、Affix
 (4)定制

nav:
navbar navbar-inverse navbar-fixed-top navbar-header
btn:
.btn-default .btn-danger .btn-info .btn-primary .btn-success .btn-warning .btn-lg .btn-sm .btn-xs .btn-block .btn-link
img:
.img-responsive:响应式图片max-width:100%; display:block;

.img-circle:图片显示为圆形
.img-rounded:圆角图片
.img-thumnail:缩略图片（会添加图片边框）
text:
.text-primary
.text-danger
.text-info
.text-success
.text-warning
.text-left 文本左对齐
.text-right 文本右对齐
.text-center 文本居中对齐
.text-justify 文本调整对齐(两端对齐)
.text-lowercase文本中每个单词都小写
.text-uppercase文本中每个单词都大写
.text-capitalize文本中每个单词首字母大写


.bg-primary
.bg-danger
.bg-info
.bg-success
.bg-warning
.caret 插入符号(向下的小三角)，可以使用文本颜色控制三角的颜色
块级元素:
.pull-left 让区块元素向左浮动(自动变为行内块)   float:left   
.pull-right 让区块元素向右浮动(自动变为行内块)   float:right 
.center-block 让区块元素在父元素中水平居中   margin-left/right: auto;
.clearfix clear: both
.show  display: auto;
.hide  display: none;
.sr-only  Screen Reader Only 仅屏幕阅读器可见
全局CSS样式——与代码相关的标签
<code></code> 以粉色底粉色字突出显示一段代码
<kbd></kbd> 以黑底白字突出显示一个键盘击键操作
<pre></pre> 以灰底灰框原始格式显示一段代码
.pre-scrollable声明pre元素可以竖直方向上显现滚动条
<var></var> 以斜体形式显示一个代码中的变量名
<samp></samp> 以特殊字体显示一段代码的输出结果


.h1~.h6
<small></small>用在h1~h6内部，显示一个副标题
.small
.lead 把文字显示为导读效果
<blockquote></blockquote>
.blockquote-reverse
<footer></footer>


<ul><li></li></ul>
<ol><li></li></ol>
.list-unstyled去除列表项前的圆点/数字
.list-inline 将所有的li显示在一行中并添加填充


<dl>
<dt></dt> Definition Title/Type
<dd></dd> Definition Detail/Description
</dl>
.dl-horizontal定义列表水平显示


栅格系统：
<div class="container/container-fluid">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>


使用此布局方式，应注意：
 (1).row必须放在.container/.container-fluid内部
 (2)一个.row默认会分为12个等宽的列
 (3)一个.row中只能放置用于布局的.col-lg-*  .col-md-*  .col-sm-*  .col-xs-*列：
 (4).col-lg-*设置只对lg的屏幕有效
.col-md-*设置只对md/lg的屏幕有效
.col-sm-*设置对sm/md/lg的屏幕有效
.col-xs-*设置对xs/sm/md/lg的屏幕都有效
 (5)若某中屏幕下某个元素无需显示，可以使用
.hidden-lg  .hidden-md   .hidden-sm   .hidden-xs
全局CSS样式——表格
 .table
 .table-bordered表格带外框
 .table-condensed 表格中的单元格变紧凑
 .table-striped 表格中的数据行隔行变色
 .table-hover 表格中的数据行悬停变色
 .table-responsive用于<table>的父元素！当表格一行中的内容显示不下时，会显示横向的滚动条。


 .active 用于tr/td，背景色变为“激活色”(浅灰色)
 .success 用于tr/td，背景色变为“成功色”(色)
 .danger 用于tr/td，背景色变为“危险色”(色)
 .warning 用于tr/td，背景色变为“警告色”(色)
 .info 用于tr/td，背景色变为“提示色”(色)
全局CSS样式——表单
.form-group  用于input和label的共同父元素  margin-bottom: 15px;
.form-group-lg  大号的输入框
.form-group-sm小号的输入框
.checkbox 用于<input type="checkbox">的父容器(div)上！对其中的label文字作了设定
.checkbox-inline
.radio 用于<input type="radio">的父容器(div)上！对其
中的label文字作了设定
.radio-inline
.form-inline  用于form元素，实现输入域处于一行内


<form class="[] | form-horizontal | form-inline">
 <div class="form-group  has-error|has-success|has-warning">
<label class="control-label col-*-*" for=""></label>
<input class="form-control">
<p class="help-block">用户名已被占用</p>
 </div>
</form>
Bootstrap组件(Component)——字体图标
 提示：Bootstrap官方借用了Glyphicon Halflings提供的字体图标文件，无需使用图片就可以文字的形式显示出260+图标——可以任意的放大缩小、或者字体颜色。


Bootstrap组件——下拉菜单
 注意！下拉菜单必需至少三级结构：
 <div id="父级容器">
<button>触发元素</button>
<div>目标元素</div>
 </div>


5.Bootstrap组件——按钮组
 有两种按钮组：
.btn-group 水平放置的多个按钮
.btn-group-vertical竖直放置的多个按钮
 每一种按钮组又可以声明大小号：
.btn-group-lg
.btn-group-sm
.btn-group-xs  
.btn-group.btn-group-justified  对于使用a实现的按钮组可以实现占满一整行的效果。
6.Bootstrap组件——输入框组
 <div class="input-group">
<span class="input-group-addon">请输入：</span>
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">搜索</button>
</span>
 </div>