Image 如何在引导中创建图像图标导航栏
是否可以使用twitter引导创建页面底部带有图像图标的导航栏,下面是图标栏的示例图像Image 如何在引导中创建图像图标导航栏,image,twitter-bootstrap,twitter-bootstrap-3,Image,Twitter Bootstrap,Twitter Bootstrap 3,是否可以使用twitter引导创建页面底部带有图像图标的导航栏,下面是图标栏的示例图像 以下是一个示例: <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
以下是一个示例:
<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;
}