Bootstrap Common Components

Drop-down menu dropdown

Triggered by a button pull-down menu buttons based .dropdown-toggle modified using data-toggle = "dropdown" Trigger

Use the drop-down list of options is a class .dropdown-menu modifications such as

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        下拉菜单<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">选项一</a></li>
        <li><a href="#">选项二</a></li>
        <li class="divider"></li>
        <li><a href="#">选项三</a></li>
    </ul>
</div>

 

Button group btn-group default horizontal well vertical btn-group-vertical well justified btn-group-justified (not applicable to <a> <button>) Further button group can also nest

<!--水平-->
<div class="btn-group">
    <button type="button" class="btn btn-default">button1</button>
    <button type="button" class="btn btn-default">button2</button>
</div>
<!--垂直-->
<div class="btn-group-vertical">...</div>
horizontal alignment here only with <a> can not <button><! --> 
< div class = "BTN-Group-justified" > 
    < A type = "Button" class = "BTN-BTN default" > Button1 </ A > 
    < A type = "Button" class = "BTN-default BTN " > Button2 </ a > 
</ div > 
<-! button nested in a nesting button group dropdown menu -> 
< div class =" BTN-group " > 
    < button type =" button " class="btn btn-default">button1</button>
    <button type="button" class="btn btn-default">button2</button>
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            button3<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">button31</a> </li>
            <li><a href="#">button32</a> </li>
        </ul>
    </div>
</div>

 input controls group input-group common with buttons ( input-group-btn ) + Forms also can not click the buttons ( input-group-the Add ) + form such as

<div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">搜索</button>
    </span>
</div>
<div class="input-group">
    <input type="text" class="form-control">
    <span class = "INPUT-Group-Addon" > Enter carriage return </ span > 
</ div >

List group list-group wherein each further with list-group-item modified e.g.

<ul class="list-group">
    <li class="list-group-item"><span class="badge">52</span>中国队金牌</li>
    <li class="list-group-item"><span class="badge">48</span>美国队金牌</li>
</ul>

Pagination pagination as well as large pagination-lg and small pagination-sm

When using large trumpet but also with class .pagination modifications, such as

<ul class="pagination pagination-sm">
    <li class="disabled"><a href="#">&laquo;</a> </li>
    <li class="active"><a href="#">1</a> </li>
    <li><a href="#">2</a> </li>
    <li><a href="#">3</a> </li>
    <li><a href="#">&raquo;</a> </li>
</ul>

There paging up and down paging pager

 

<ul class="pager">
    <li><a href="#">上一页</a> </li>
    <li><a href="#">下一页</a> </li>
</ul>

 

Labels and badges label has six forms label-default label-primary label- success label-info label-waring label-danger

 Each form has a different color e.g.

<span class="label label-default">Default</span>
<span class="label label-danger">Danger</span>

Button btn large button btn-lg Small button btn-sm similar tag has six forms btn-default btn-primary btn- success btn-info btn-warning btn -danger

 

<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-success">成功</button>

 

The progress bar progress there are five forms of progress-bar-primary progress-bar  -success progress-bar-info progress-bar-danger progress-bar-warning

Wherein the primary and use the same default class .progress-bar-striped can be striped effect to the progress bar e.g.

<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 60%"></div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%"></div>
</div>

Faceplate panel and a progress bar has five similar situations panel-primary panel-success panel- info panel-warning panel-danger

The head panel is divided into panel-heading , and the contents of panel-body e.g.

<div class="panel panel-primary">
    <div class="panel-heading">面板头部</div>
    <div class="panel-body">primary面板内容</div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">面板头部</div>
    <div class="panel-body">div</success Panel content>
</div>