组件

最新推荐文章于 2021-08-01 09:34:38 发布

wsjp1992

最新推荐文章于 2021-08-01 09:34:38 发布

阅读量205

点赞数

分类专栏： Bootstrap

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.字体图标

（1）单独的图标

例子：

<span class="glyphicon glyphicon-search"></span>

（2）按钮图标

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

____________________________________________________________________________________________________________________________________

2.下拉菜单

（1）基本实例

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
  </ul>
</div>

（2）对齐

为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐

（3）对li的内容添加标题

<li role="presentation" class="dropdown-header">Dropdown header</li>

（4）分割线

<li role="presentation" class="divider"></li>

（5）禁止的菜单项

 <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>

____________________________________________________________________________________________________________________________________

3.按钮组

（1）基本实例

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

（2）按钮工具栏

<pre name="code" class="html"><pre name="code" class="html"><div class="btn-toolbar" role="toolbar">
  <div class="btn-group">  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button></div>
  <div class="btn-group">  <button type="button" class="btn btn-default">3</button>
  <button type="button" class="btn btn-default">4</button>  <button type="button" class="btn btn-default">5</button>
  <button type="button" class="btn btn-default">6</button></div>
  <div class="btn-group">  <button type="button" class="btn btn-default">7</button>
  <button type="button" class="btn btn-default">8</button>  <button type="button" class="btn btn-default">9</button>
  <button type="button" class="btn btn-default">10</button>  <button type="button" class="btn btn-default">11</button>
  <button type="button" class="btn btn-default">12</button></div>
</div>

（3）按钮大小
只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了。

<div class="btn-group btn-group-lg">大</div>
<div class="btn-group">普通</div>
<div class="btn-group btn-group-sm">小</div>
<div class="btn-group btn-group-xs">超小</div>

（4）嵌套
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

（5）垂直排列

<div class="btn-group-vertical">
<button type="button" class="btn btn-default">12</button>
        <button type="button" class="btn btn-default">12</button>
<div class="btn-group">
        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <button type="button" class="btn btn-default">12</button>
        <button type="button" class="btn btn-default">12</button>
<div class="btn-group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>

</div>

____________________________________________________________________________________________________________________________________

4.按钮式下拉菜单

（1）基本实例（未分裂）

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <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">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>//保证屏幕阅读器正确读取
  </button>
  <ul class="dropdown-menu" role="menu">
    <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>

（3）尺寸

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    ...
  </ul>
</div>

btn-lg→大

btn-sm→小

btn-xs→超小

（4）向上弹出式菜单

<div class="btn-group<span style="color:#ff0000;"> dropup</span>">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

5.输入框组

（1）基本实例

<div class="input-group">
  <span class="<span style="color:#ff0000;">input-group-addon</span>">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

（2）尺寸

<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

（3）作为额外元素的多选框和单选框

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="<span style="color:#ff0000;">checkbox</span>">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="<span style="color:#ff0000;">radio</span>">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

（4）作为额外元素的按钮

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
       <span style="color:#ff0000;"> <button class="btn btn-default" type="button">Go!</button></span>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <span style="color:#ff0000;"><button class="btn btn-default" type="button">Go!</button></span>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

（5）作为额外元素的按钮下拉菜单

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
      <span style="color:#ff0000;">  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button></span>
        <ul class="dropdown-menu" role="menu">
          <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><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <span style="color:#ff0000;"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button></span>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <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><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

（6）作为额外元素的分裂式按钮下拉菜单

<div class="col-lg-6">
        <div class="input-group">
          <div class="input-group-btn">
            <button type="button" class="btn btn-default">Action</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <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>
          <input type="text" class="form-control">
        </div><!-- /.input-group -->
      </div>

____________________________________________________________________________________________________________________________________

5.导航

（1）标签页

<ul class="nav <span style="color:#ff0000;">nav-tabs</span>" role="tablist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

（2）胶囊式标签页

水平

<ul class="nav <span style="color:#ff0000;">nav-pills</span>" role="tablist">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

垂直

<ul class="nav nav-pills <span style="color:#ff0000;">nav-stacked</span>" role="tablist">
  ...
</ul>

（3）两端对齐的标签页

<ul class="nav nav-tabs nav-justified" role="tablist">
  ...
</ul>

（4）禁用的链接

<ul class="nav nav-pills" role="tablist">
  ...
  <li role="presentation" class="<span style="color:#ff0000;">disabled</span>"><a href="#">Disabled link</a></li>
  ...
</ul>

（5）添加下拉菜单

<ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#">Home</a></li><pre name="code" class="html"><ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Help</a></li>
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <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>
      </li>
    </ul>

<li role="presentation"><a href="#">Help</a></li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <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> </li> </ul>

（6）带下拉菜单的胶囊标签页

<ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Help</a></li>
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <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>
      </li>
    </ul>

____________________________________________________________________________________________________________________________________

6.导航条

（1）默认样式

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <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>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <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>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

（2）BrandImage

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="<span style="color:#ff0000;">图片地址</span>">
      </a>
    </div>
  </div>
</nav>

（3）表单

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <span style="color:#ff0000;"><input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button></span>
</form>

（4）按钮

<button type="button" class="btn btn-default<span style="color:#ff0000;"> navbar-btn</span>">Sign in</button>

（5）文本

<p class="navbar-text">Signed in as Mark Otto</p>

（6）非导航的链接

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

（7）组件排列

通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。

例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的 <ul> 标签里。

这些类是 .pull-left 和 .pull-right 的 mixin 版本，但是他们被限定在了媒体查询（media query）中，这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

（8）固定在顶部

<nav class="navbar navbar-default <span style="color:#ff0000;">navbar-fixed-top</span>" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

如果设置了固定顶部，需要添加body{padding-top:70px;}

（9）固定在底部

<nav class="navbar navbar-default <span style="color:#ff0000;">navbar-fixed-bottom</span>" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

如果设置了固定顶部，需要添加body{padding-bottom:70px;}

（10）静止在顶部

<nav class="navbar navbar-default <span style="color:#ff0000;">navbar-static-top</span>" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

（11）反色的导航条

<nav class="navbar <span style="color:#ff0000;">navbar-inverse</span>" role="navigation">
  ...
</nav>

____________________________________________________________________________________________________________________________________

7.路径导航

<ol class="<span style="color:#ff0000;">breadcrumb</span>">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

____________________________________________________________________________________________________________________________________

8.分页

（1）默认分页

<nav>
  <ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">»</a></li>
  </ul>
</nav>

（2）激活与禁止

 <nav>
  <ul class="pagination">
    <li class="<span style="color:#ff0000;">disabled</span>"><a href="#">&laquo;</a></li>
    <li class="<span style="color:#ff0000;">active</span>"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

（3）尺寸

<nav><ul class="pagination <span style="color:#ff0000;">pagination-lg</span>">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination <span style="color:#ff0000;">pagination-sm</span>">...</ul></nav>

____________________________________________________________________________________________________________________________________

9.翻页

（1）默认实例

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

（2）对齐链接(两端对齐)

<nav>
  <ul class="pager">
    <li class="<span style="color:#ff0000;">previous</span>"><a href="#">← Older</a></li>
    <li class="<span style="color:#ff0000;">next</span>"><a href="#">Newer →</a></li>
  </ul>
</nav>

（3）可选的禁用状态

<nav>
  <ul class="pager">
    <li class="previous <span style="color:#ff0000;">disabled</span>"><a href="#">← Older</a></li>
    <li class="next"><a href="#">Newer →</a></li>
  </ul>
</nav>

____________________________________________________________________________________________________________________________________

10.标签

（1）大小

<<span style="color:#ff0000;">h1</span>><span class="label<span style="color:#ff0000;"> label-info</span>">Info</span><<span style="color:#ff0000;">/h1</span>>

（2）颜色

<span class="label <span style="color:#ff0000;">label-default</span>">Default</span>
<span class="label <span style="color:#ff0000;">label-primary</span>">Primary</span>
<span class="label <span style="color:#ff0000;">label-success</span>">Success</span>
<span class="label<span style="color:#ff0000;"> label-info</span>">Info</span>
<span class="label <span style="color:#ff0000;">label-warning</span>">Warning</span>
<span class="label <span style="color:#ff0000;">label-danger</span>">Danger</span>

____________________________________________________________________________________________________________________________________

11.徽章

<a href="#">Inbox <span class="<span style="color:#ff0000;">badge</span>">42</span></a>
<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

____________________________________________________________________________________________________________________________________

12.巨幕

<div class="<span style="color:#ff0000;">jumbotron</span>">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

____________________________________________________________________________________________________________________________________

13.页头

<div class="<span style="color:#ff0000;">page-header</span>">
  <h1>Example page header <<span style="color:#ff0000;">small</span>>Subtext for header</small></h1>
</div>

____________________________________________________________________________________________________________________________________

14.缩略图

（1）默认样式的实例

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

（2）自定内容

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img data-src="holder.js/300x300" alt="...">
<span style="color:#ff0000;">      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div></span>
    </div>
  </div>
</div>

____________________________________________________________________________________________________________________________________

15.警告

（1）基类

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

（2）可关闭

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" <span style="color:#ff0000;">data-dismiss="alert"</span>><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

（3）链接

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

____________________________________________________________________________________________________________________________________

16.进度条

（1）基本实例

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="<span style="color:#ff0000;">width: 60%;</span>">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

（2）带提示标签的进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

（3）数值比较低的情况

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
    2%
  </div>
</div>

（4）情境变化效果

</pre><pre name="code" class="html"><div class="progress">
  <div class="progress-bar <span style="color:#ff0000;">progress-bar-success</span>" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar <span style="color:#ff0000;">progress-bar-info</span>" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar <span style="color:#ff0000;">progress-bar-warning</span>" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar <span style="color:#ff0000;">progress-bar-danger</span>" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

（5）条纹效果

<div class="progress">
  <div class="progress-bar progress-bar-success <span style="color:#ff0000;">progress-bar-striped</span>" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info <span style="color:#ff0000;">progress-bar-striped</span>" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning <span style="color:#ff0000;">progress-bar-striped</span>" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger <span style="color:#ff0000;">progress-bar-striped</span>" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

（6）动画效果

<div class="progress">
  <div class="progress-bar progress-bar-striped <span style="color:#ff0000;">active</span>" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

（7）堆叠效果

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

____________________________________________________________________________________________________________________________________

17.媒体对象

（1）默认样式

<div class="media">
  <a class="media-left" href="#">
    <img src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

（2）媒体定位

<ul class="media-list">
  <li class="media">
    <a class="media-left" href="#">
      <img src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

—————————————————————————————————————————————————————————————————————————————

18.列表组

（1）基本实例

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

（2）徽章

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

（3）链接

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

（4）被禁用的条目

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

（5）情景类

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

（6）定制内容

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

19.面板

（1）基本实例

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

（2）带标题

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

（3）带脚注

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

（4）情景模式

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

（5）带表格

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

（6）带列表组的面板

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

20.Well

（1）默认实例

<div class="well">...</div>

（2）尺寸

<div class="well well-lg">...</div>

wsjp1992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件

1.字体图标（1）单独的图标例子：（2）按钮图标 Star____________________________________________________________________________________________________________________________________2.下拉菜单（1）基本实例
复制链接

扫一扫