如何在引导程序中创建图像图标导航栏答案

【问题标题】：How to create image icon navigation bar in bootstrap如何在引导程序中创建图像图标导航栏
【发布时间】：2014-05-19 23:54:02
【问题描述】：

是否可以使用 twitter bootstrap 在页面底部创建带有图像图标的导航栏，这是图标栏的示例图像，

【问题讨论】：

标签： image twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这里有一个例子：

<div class="nav-bottom">
  <ul class="container nav nav-pills">
    <li class="col-xs-4 col-sm-2 active">
      <a href="#">
        <i class="glyphicon glyphicon-comment"></i><br>
        Message Board
      </a>
    </li>
    <li class="col-xs-4 col-sm-2">
      <a href="#">
        <i class="glyphicon glyphicon-home"></i><br>
        Rooms
      </a>
    </li>
    <li class="col-xs-4 col-sm-2">
      <a href="#">
        <i class="glyphicon glyphicon-shopping-cart"></i><br>
        Shopping List
      </a>
    </li>
    <li class="col-xs-4 col-sm-2">
      <a href="#">
        <i class="glyphicon glyphicon-wrench"></i><br>
        Home Helpers
      </a>
    </li>
    <li class="col-xs-4 col-sm-2">
      <a href="#">
        <i class="glyphicon glyphicon-cog"></i><br>
        Settings
      </a>
    </li>
    <li class="col-xs-4 col-sm-2">
      <a href="#">
        <i class="glyphicon glyphicon-user"></i><br>
        User
      </a>
    </li>
  </ul>
</div>

.nav-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    padding: 5px 0;
}
.nav-bottom li + li {
    margin-left: 0px;
}
.nav-bottom li a {
    text-align: center;
    background: black;
    color: #ecf0f1;
}
.nav-bottom li:hover a,
.nav-bottom li:focus a {
    background: #2980b9;
    color: #ecf0f1;
}
.nav-bottom li.active a {
    background: black;
    color: #3498db;
}

Bootply

【讨论】：