bootstrap中css组件（除导航条）

一，小图标

用法1 <span class="glyphicon glyphicon-user"></span>

用法2 <i class="glyphicon glyphicon-user"></i>

二，下拉菜单

 例1基本用法

<div class="dropdown">  //父定位relative，

<button type="button" class="btn"
data-toggle="dropdown">// data-toggle=”dropdown”与父级相关联，dropup表示向上弹出
主题

<span class="caret"></span>  //下三角

</button>  //点击以后加一个open样式，显示下拉菜单

<ul class="dropdown-menu pull-right">//子定位 绝对定位  ， 添加 class .pull-right 来向右对齐下拉菜单

<li  class="dropdown-header">下拉菜单标题</li> //菜单标题
<li>
<a tabindex="-1" href="#">Java</a>
</li>
<li>
<a tabindex="-1" href="#">数据挖掘</a>
</li>
<li>
<a tabindex="-1" href="#">数据通信/网络</a>
</li>
<li class="divider"></li>

<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li>
<a tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>

例2多级嵌套

  

  <ul class="dropdown-menu" >
              <li><a href="#">Some action</a></li>
              <li><a href="#">Some other action</a></li>
              <li class="divider"></li>
              <li class="dropdown-submenu">  //子菜单上用dropdown-submenu
                <a tabindex="-1" href="#">Hover me for more options</a>
                <ul class="dropdown-menu">  //dropdown-menu
                  <li><a tabindex="-1" href="#">Second level</a></li>
                  <li class="dropdown-submenu">
                    <a href="#">Even More..</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">3rd level</a></li>
                        <li><a href="#">3rd level</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Second level</a></li>
                  <li><a href="#">Second level</a></li>
                </ul>
              </li>
            </ul>

三，按钮组

1.基本用法：在多个按钮外部使用一个容器，如div，再应用.btn-group样式

效果

容器四周是圆角，其余直角

2.按钮工具栏

在容器上应用.btn-toolbar

3.按钮组尺寸大小

在使用.btn-group基础上，再设置btn-group-lg,btn-group-sm,btn-group-xs

在按钮组内设置btn-sm等无效果

4.嵌套分组

将下拉菜单和普通按钮排在一起，只需要在.dropdown下拉菜单外部包装一个div容器，并应用.btn-group样式,本质上是用

.btn-group代替.dropdown样式，其也设置了相对定位样式

5.垂直分组

将容器的.btn-group样式替换为.btn-group-vertical样式

6.自适应分组

将容器的.btn-group样式替换为.btn-group-justified样式

四，按钮下拉菜单

其是普通的下拉菜单基础上封装了,btn样式,效果为单击一个按钮，显示隐藏的下拉菜单

1.普通下拉菜单

把二de下拉菜单.btn-down换成.btn-group，其余不变

2.分离式下拉菜单

把按钮和箭头分离，即将箭头设置成一个单独的按钮

五，输入框组

1.基本用法

将文本输入框和文字或小icon组合在一起进行显示，我们称其为addon

使用方法

<div class="input-group">//在容器上添加input-group样式，尾部添加-lg等控制大小

<input type="text" class="form-control">//.form-control样式必须添加，否则会变成下图

<span class="input-group-addon">.00</span>//个性元素上添加.input-group-addon样式

</div>

 2.复选框与单选框作为addon

在.input-group-addon样式中，不仅可以放置label,icon,checkbox和radio。

例<div class="input-group">

<span class="input-group-addon"> <input type="radio"></span>

<input type="text" class="form-control">

</div>

3.按钮作为addon

把.input-group-addon换为.input-group-btn，在里面放按钮

4.下拉菜单作为addon

在普通的.btn按钮上，应用一个data-toggle='dropdown'属性就可作为addon，这特么..

例

<div class="input-group">

<div class="input-group-btn">

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span> </button>

<ul class="dropdown-menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul>

</div><!-- /btn-group -->

<input type="text" class="form-control">

</div><!-- /input-group -->

5.分段按钮作为addon

在input-group-btn中放多个按钮

六，标签

添加.label样式可以实现高亮，并且有hover和focus效果

和按钮元素类似，label样式也提供了多种颜色的支持，分别是成功绿，警告黄，危险红，信息蓝，用来改变背景颜色

<span class="label label-default">默认标签</span>

<span class="label label-primary">主要标签</span>

<span class="label label-success">成功标签</span>

<span class="label label-info">信息标签</span>

<span class="label label-warning">警告标签</span>

<span class="label label-danger">危险标签</span>

七，徽章

在label或span上使用.badge样式，用来信息提示

<a href="#">Mailbox <span class="badge">50</span></a>

在激活状态的胶囊式导航和列表导航中放置徽章。通过使用 <span class="badge"> 来激活链接

<ul class="nav nav-pills">

<li class="active"> <a href="#">首页 <span class="badge">42</span> </a> </li>

<li> <a href="#">简介</a> </li> <li> <a href="#">消息 <span class="badge">3</span> </a> </li>

</ul>

八，大屏幕展播

 该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。

<div class="container">

<div class="jumbotron">

<h1>欢迎登陆页面！</h1>

<p>这是一个超大屏幕（Jumbotron）的实例。</p>

<p><a class="btn btn-primary btn-lg" role="button"> 学习更多</a> </p>

</div>

</div>

九，缩略图

.thumbnail不太好用

十，警告框

1.基本用法

通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框

<div class="alert alert-success">成功！很好地完成了提交。</div>

<div class="alert alert-info">信息！请注意这个信息。</div>

<div class="alert alert-warning">警告！请不要提交。</div>

<div class="alert alert-danger">错误！请进行一些更改。</div>

2.可取消的警告

向上面的 <div> class 添加可选的 .alert-dismissable。

<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">
&times;
</button> //请确保使用带有相关设置的 <button> 元素。
信息！请注意这个信息。
</div>

3. .alert-link 实体类来快速提供带有匹配颜色的链接。

 <div class="alert alert-success"> <a href="#" class="alert-link">成功！很好地完成了提交。</a> </div>

十一，进度条

1.基本样式

<div class="progress">
<div class="progress-bar" style="60%">
111
</div>
</div>

2.多彩样式

在.progress-bar基础上，添加。progress-bar-*的样式可以实现不同颜色，*为 success、info、warning、danger。

3.条纹样式

在.progress基础上，添加.progress-striped

4.动画样式

在条纹基础山添加.active，让条纹动起来，宽度不变

5.堆叠

内部div多次添加即可堆叠

十二，列表组

1.基础列表组

使用ul li

ul上.list-group

li上.list-group-item

2.多彩

li上list-group-item-success

3.自定义列表组

.list-group-item-heading列表头

.list-group-item-text

支持active

十三，面板

1.基础面板

<div class="panel panel-default">//颜色panel-primary、panel-success、panel-info、panel-warning、panel-danger

<div class="panel-body"> 这是一个基本的面板 </div></div>

2.带有头和尾的面板

<div class="panel panel-default">

<div class="panel-heading"> 不带 title 的面板标题 </div>

<div class="panel-body"> 面板内容 </div>

</div> <div class="panel panel-default">

<div class="panel-heading">

<h3 class="panel-title"> 带有 title 的面板标题 </h3> </div>

<div class="panel-body"> 面板内容 </div>

<div class="panel-footer">面板脚注</div>

</div>

3.带有表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格。

十四，洼地

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。

<div class="well">您好，我在 Well 中！</div>

 

尺寸大小

well-lg

well-sm