Bootstrap 常用组件

下拉菜单 dropdown

下拉菜单由一个按钮触发 按钮用类.dropdown-toggle修饰 使用data-toggle="dropdown"触发器

下拉选项是一个列表 用类.dropdown-menu修饰 例如

<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>

 

按钮组 btn-group默认是水平的 还有垂直的btn-group-vertical 还有两端对齐的btn-group-justified(适用于<a>而不是<button>) 另外按钮组还可以嵌套

<!--水平-->
<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>
<!--水平对齐 这里只能用<a> 不能用<button>-->
<div class="btn-group-justified">
    <a type="button" class="btn btn-default">button1</a>
    <a type="button" class="btn btn-default">button2</a>
</div>
<!--按钮嵌套 按钮组里嵌套一个下拉菜单-->
<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控件组 input-group 常见的有按钮(input-group-btn)+表单 还有不可单击的按钮(input-group-add)+表单 例如

<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">输入完成后回车</span>
</div>

列表组 list-group 其中每项还可用list-group-item来修饰 例如

<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-lg 和小号 pagination-sm

在使用大号小号时 也要用类.pagination修饰 例如

<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>

分页还有上下分页pager

 

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

 

标签与徽章 label 有六种形式 label-default label-primary label-success label-info label-waring label-danger

 每一种形式有不同的颜色 例如

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

按钮 btn 大号按钮btn-lg 小号按钮 btn-sm 与标签类似有六种形式 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>

 

进度条 progress 也有五种形式progress-bar-primary progress-bar-success progress-bar-info progress-bar-danger progress-bar-warning 

其中primary和default 相同 使用类.progress-bar-striped可以给进度条加上条纹效果 例如

<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>

面板 panel 和进度条类似有五种情况 panel-primary panel-success panel-info panel-warning panel-danger

面板分为头部panel-heading和内容panel-body 例如

<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">success面板内容</div>
</div>