bootstrap 导航 -按钮组导航

 
 

  
  
不要和其他组件混合使用
  
  
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span>标签，并将图标类应用到这个 <span> 标签上。
 
 
 
 

  
  
只对内容为空的元素起作用
  
  
图标类只能应用在不包含任何文本内容或子元素的元素上
 
 

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

//按钮带图标+字体

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

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>  //白色

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>    //深蓝色

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>   //绿色

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>   //蓝色

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>  //橙色

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>   //红色

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>   //无按钮样式
导航：
水平方向
<ul class="nav nav-tabs">
  <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 nav-stacked">
  <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>



<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>
<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>