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(适用于而不是) 另外按钮组还可以嵌套

<div class="btn-group">
    <button type="button" class="btn btn-default">button1button>
    <button type="button" class="btn btn-default">button2button>
div>

<div class="btn-group-vertical">...div>

<div class="btn-group-justified">
    <a type="button" class="btn btn-default">button1a>
    <a type="button" class="btn btn-default">button2a>
div>

<div class="btn-group">
    <button type="button" class="btn btn-default">button1button>
    <button type="button" class="btn btn-default">button2button>
    <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="#">button31a> li>
            <li><a href="#">button32a> 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">52span>中国队金牌li>
    <li class="list-group-item"><span class="badge">48span>美国队金牌li>
ul>

分页 pagination 还有大号 pagination-lg 和小号 pagination-sm

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

<ul class="pagination pagination-sm">
    <li class="disabled"><a href="#">«a> li>
    <li class="active"><a href="#">1a> li>
    <li><a href="#">2a> li>
    <li><a href="#">3a> li>
    <li><a href="#">»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">Defaultspan>
<span class="label label-danger">Dangerspan>

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