Bootstrap 下拉框 按钮组、工具栏

来源:互联网 发布:ipad虚拟机运行windows 编辑:程序博客网 时间:2024/05/06 07:33

1.下拉框

<div class="dropdown">
<button class="btn btn-primary" type="button"data-toggle="dropdown">//下拉框触发器
   Dropdown
   <span class="caret"></span>
</button>
  <ul class="dropdown-menu">

    <li class="dropdown-header">标题内容</li>//下拉框内容
   <li><a href="#">Action</a></li>
   <li><a href="#">Another action</a></li>
   <li><a href="#">Something else here</a></li>
   <li class="divider"></li>
   <li><a href="#">Separated link</a></li>
</ul>

</div>

2.按钮组: div class="btn-group" /div

3.按钮工具栏  <div class="btn-toolbar">   

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

</div>

4.按钮垂直排列class=" btn-group-vertical "

5.dropup 上拉菜单

6.input-group-addon 添加自定义字符

<divclass="input-group">  

<spanclass="input-group-addon">@</span>  

<inputtype="text"class="form-control"placeholder="Username">

</div>

7.input-group-btn 添加自定义按钮

<spanclass="input-group-btn"><button> </button></span>  

8.标签页nav nav-tabs nav-pills   垂直排列   nav-stacked

<ulclass="nav nav-tabs">  

<liclass="active"><ahref="#">Home</a></li>  

<li><ahref="#">Profile</a></li>  

<li><ahref="#">Messages</a></li>

</ul>

<ulclass="nav nav-pillsnav-stacked">  

<liclass="active"><ahref="#">Home</a></li>  

<li><ahref="#">Profile</a></li>  

<li><ahref="#">Messages</a></li>

</ul>



0 0
原创粉丝点击