如何在bootstrap中创建图像图标导航栏

Question

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

Answer 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