7.5.6 导航条中的品牌图标
在导航条的最前端一般可以添加文字或图标来标识公司的品牌。Bootstrap
为品牌图标提供了如下两个样式。
样式 |
描述 |
.navbar-header |
该样式应用于导航条的头部。 |
.navbar-brand |
该样式应用于导航条的品牌图标上。该样式为品牌图标设置了合适的padding 和height 。如果有特殊需要,开发者也可添加一些CSS 代码覆盖默认设置。 |
## 程序示例 ## |
|
下面的代码示范了如何为导航条添加品牌图标。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| <!DOCTYPE html> <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> 品牌图标 </title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css"> </head>
<body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" style="padding-top:0" href="#"> <img alt="疯狂软件" src="../fklogo.gif" style="width:52px;height:52px"> </a> </div> <ul class="nav navbar-nav"> <li role="presentation"><a href="#">主页</a></li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true"> 课程体系 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Java基础强化营</a></li> <li><a href="#">全栈式程序员就业营</a></li> <li><a href="#">全栈式程序员突击营</a></li> </ul> </li> <li role="presentation" class="active"><a href="#">师资介绍</a></li> <li role="presentation"><a href="#">教育理念</a></li> <li role="presentation" class="disabled"><a href="#">退出系统</a></li> </ul> </div> </nav> <script type="text/javascript" src="../jquery-3.1.1.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> </body>
</html>
|
|
|
该代码中的1号代码为<a>
元素设置了.nav-brand
样式,因此该元素将会作为品牌图标。此外,为了更好地放置品牌图标,本例将图标的padding-top
值设为0
,这样使得图标可以居于最上面。
原文链接: 7.5.6 导航条中的品牌图标