Bootstrap学习笔记-css组件Hello_yihao的博客

输入框组

输入框前面，后面或是两边加上文字或按钮

只支持文本输入框

不要将表单组或栅格列（column）类直接和输入框组混合使用 而是将输入框组嵌套到表组或栅格相关元素内部。

<!--文本框组 input-group-->
<div class="input-group">

<input type="text" class="form-control" placeholder="请输入内容"/>
<!--变成按钮的样式 input-group-addon 放在 后 面-->
<span class="input-group-addon">百度一下</span>
</div>

图标

在内联元素上使用（glyphicon glyphicon-*）

图标类不能和其他组件直接联合使用

bootstrap假定所有的图标字体文件全部位于../fonts/目录内，相对于预编译版css文件的目录

<a href="#" class="glyphicon  glyphicon-floppy-open a"></a>

bootstrap 提供了上百种图标可以到官网直接复制类名使用即可

下拉菜单

在网页交互的时候经常会需要上下文菜单或者隐藏/展开菜单

下拉菜单的javascript插件能让它具有交互性

下拉菜单的用法：

-名为 .dropdown样式所在的是大容器

-.dropdown-menu是放菜单li的容器

-.open可以控制菜单展开与否

<!--下拉-->
<div class="dropdown">
<!--必须加data-toggle="dropdown" 才可以实现下拉效果-->
<button class="btn btn-primary" data-toggle="dropdown">
click here!
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>这是下拉的菜单</li>
<li>这是下拉的菜单</li>
<li>这是下拉的菜单</li>
<li>这是下拉的菜单</li>
<li>这是下拉的菜单</li>
<li>这是下拉的菜单</li>
</ul>
</div>

span标签里的 class=”caret” 是下拉图标，当需要实现上拉菜单时， 只需要给最外层的父容器div标签 class=”dropdown” 修改成 class=”dropup” 即可 ，而且向下的图标也会自动变成向上的图标。

按钮组

按钮组：把按钮放在名为btn-group的容器内即可 除第一个、最后一个按钮和dropdown按钮外其他按钮取消圆角

按钮工具栏：把按钮组放在名为btn-toolbar的容器内即可

按钮尺寸：btn-group-lg、btn-group-sm、btn-group-xs

<div class="box btn-group">
<button class="btn btn-primary">look here!</button>
<button class="btn btn-danger">look here!</button>
<button class="btn btn-default">look here!</button>
<button class="btn btn-info">look here!</button>
<button class="btn btn-success">look here!</button>
</div>
<!--按钮组-->
<div class="box btn-toolbar">
<!--大按钮-->
<div class=" btn-group btn-group-lg">
<button class="btn btn-primary">look here!</button>
<button class="btn btn-danger">look here!</button><
4000
/span>
<button class="btn btn-default">look here!</button>
</div>
<!--小按钮-->
<div class=" btn-group btn-group-sm">
<button class="btn btn-primary">look here!</button>
<button class="btn btn-danger">look here!</button>
<button class="btn btn-default">look here!</button>
<div class="btn-group">
<button class="btn btn-primary" data-toggle="dropdown">
click here!
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>look here !</li>
<li>look here !</li>
<li>look here !</li>
</ul>
</div>
</div>
<!--超小按钮-->
<div class=" btn-group btn-group-xs">
<button class="btn btn-primary">look here!</button>
<button class="btn btn-danger">look here!</button>
<button class="btn btn-default">look here!</button>
</div>
</div>

垂直分组按钮：将btn-group替换为btn-group-vertical

嵌套分组：按钮组与下拉菜单综合使用

自适应分组：该样式仅完美支持a元素按钮

<!--自适应按钮组 btn-group-justified-->
<div class=" btn-group btn-group-justified">
<!--使用button按钮并不能完美适应浏览器-->
<!--<button class="btn btn-primary">look here!</button>-->
<!--最好使用a元素-->
<a href="#" class="btn btn-success">look there!</a>
<a href="#" class="btn btn-success">look there!</a>
<a href="#" class="btn btn-success">look there!</a>
<a href="#" class="btn btn-success">look there!</a>
<a href="#" class="btn btn-success">look there!</a>
</div>

<!--如果必须要使用button-->
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-success">click here!</button>
</div>
<div class="btn-group">
<button class="btn btn-success">click here!</button>
</div>
<div class="btn-group">
<button class="btn btn-success">click here!</button>
</div>
<div class="btn-group">
<button class="btn btn-success">click here!</button>
</div>
</div>

最方便还是使用a元素 a元素也可以模拟出按钮的效果：Bootstrap学习笔记-css布局

按钮下拉菜单

-组合式下拉菜单：下拉菜单外部容器的样式从.dropdown改为.btn-group

-分离式菜单按钮和箭头分离的菜单

<div class="btn-group">
<!--让按钮和箭头分离 裂变式按钮-->
<button class="btn btn-success">look here!</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!--在li标签里面加上a标签效果会更好 文字会自动排版-->
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

导航

选项卡导航（nav-tabs）

胶囊式选项卡导航（nav-pills）

堆叠式导航（nav-stacked）

自适应导航（nav-justified）

二级导航

<div class="container">
选项卡导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">买家</a></li>
<li><a href="#">卖家</a></li>
<li><a href="#">店主</a></li>
<li><a href="#">淘金币</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">客服中心</a></li>
</ul>
胶囊式选项卡导航
<ul class="nav nav-pills">
<!--class="active" 表示被选中的状态-->
<li><a href="#">首页</a></li>
<li class="active"><a href="#">买家</a></li>
<li><a href="#">卖家</a></li>
<li><a href="#">店主</a></li>
<li><a href="#">淘金币</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">客服中心</a></li>
</ul>
堆叠式导航
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">买家</a></li>
<li><a href="#">卖家</a></li>
<li><a href="#">店主</a></li>
<li><a href="#">淘金币</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">客服中心</a></li>
</ul>
自适应
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">买家</a></li>
<li><a href="#">卖家</a></li>
<li><a href="#">店主</a></li>
<li><a href="#">淘金币</a></li>
<li><a href="#">购物车</a></li>
<li><a href="#">客服中心</a></li>
</ul>
二级导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">买家</a></li>
<li><a href="#">卖家</a></li>
<li><a href="#">店主</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">淘金币
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">抢金币</a></li>
<li><a href="#">送金币</a></li>
<li><a href="#">花金币</a></li>
<!--角色   分割线          分频器-->
<li role="separator" class="divider"></li>
<li><a href="#">买金币</a></li>
</ul>
</li>
<li><a href="#">购物车</a></li>
<li><a href="#">客服中心</a></li>
</ul>

</div>