Bootstrap 新手求助，自适应导航栏，当小屏幕时那个汉堡按钮无法显示出来，谢谢！
1dian01 · 2015-07-30 17:23:51 +08:00 · 3718 次点击这是一个创建于 3438 天前的主题，其中的信息可能已经有所发展或是发生改变。
html文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>GhostChina</title>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="app.css" rel="stylesheet">
</head>
<body>
<!--start header-->
<header class="main-header" style="background-image: url(http://static.ghostchina.com/image/6/d1/fcb3879e14429d75833a461572e64.jpg)">
<div class="container" >
<div class="row">
<div class="clo-sm-12">
<!--start logo-->
<a class="branding" href="http://www.nfchome.org" title="gohost china">
<img src="http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png" alt="ghsot">
</a>
<!--end logo-->
</div>
</div>
</div>
</header>
<!--end header-->
<!-- start navigation -->
<nav class="main-navigation">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="menu">
<li class="nav-current" role="presentation"><a href="#">首页</a></li>
<li role="presentation"><a href="#">论坛</a></li>
<li role="presentation"><a href="#">快捷手册</a></li>
<li role="presentation"><a href="#">中文文档</a></li>
<li role="presentation"><a href="#">下载</a></li>
<li role="presentation"><a href="#">关于</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<!-- end navigation -->
<script src="jquery-2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
css文件
/公共通用属性/
html,body{
color: #505050;
line-height: 1.75em;
background: #ebebeb;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/头部属性/
.main-header{
text-align: center;
padding: 90px 0;
}
/logo/
.main-header .branding{
font-size: 3.5em;
color: #303030;
}
/a链接默认属性/
a {
color: #e67e22;
outline: none;
text-decoration: none;
}
/不想图片自适应拉伸的话就是max-width:100%,想图片都统一拉升的话就用width:100%/
.main-header .branding img{
max-width: 100%;
}
a:active,a:focus,a img{
outline: none;
}
.main-navigation{
text-align: center;
background: #ffffff;
border-top: 1px solid #ebebeb;
border-bottom: 3px solid #e1e1e1;
margin-bottom: 35px;
}
.main-navigation .menu{
padding: 0;
margin: 0;
}
.main-navigation .menu li.nav-current{
border-bottom: 3px solid #e67e22;
margin-bottom: -2px;
}
.main-navigation .menu li{
list-style: none;
display: inline-block;
position: relative;
}
.main-navigation .menu li a{
color: #505050;
line-height: 4em;
display: block;
padding: 0 21px;
}
.main-navigation button .icon-bar {
color:#059808;
text-align: center;
}
3 条回复 • 2015-07-31 09:15:59 +08:00
 |
1
wildplant 2015-07-31 00:15:50 +08:00
<!DOCTYPE html>
<html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GhostChina</title> <!-- Latest compiled and minified CSS & JS --> <link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> /*css文件*/ /*公共通用属性*/ html, body { color: #505050; line-height: 1.75em; background: #ebebeb; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } /*/头部属性/*/ .main-header { text-align: center; padding: 90px 0; } /*/logo/*/ .main-header .branding { font-size: 3.5em; color: #303030; } /*/a链接默认属性/*/ a { color: #e67e22; outline: none; text-decoration: none; } .main-header .branding img { max-width: 100%; } a:active, a:focus, a img { outline: none; } .main-navigation { text-align: center; background: #ffffff; border-top: 1px solid #ebebeb; border-bottom: 3px solid #e1e1e1; margin-bottom: 35px; } .main-navigation .menu { padding: 0; margin: 0; } .main-navigation .menu li.nav-current { border-bottom: 3px solid #e67e22; margin-bottom: -2px; } .main-navigation .menu li { list-style: none; display: inline-block; position: relative; } .main-navigation .menu li a { color: #505050; line-height: 4em; display: block; padding: 0 21px; } .main-navigation button .icon-bar { color: #059808; text-align: center; } </style> </head> <body> <!--start header--> <header class="main-header" style="background-image: url(http://static.ghostchina.com/image/6/d1/fcb3879e14429d75833a461572e64.jpg)"> <div class="container"> <div class="row"> <div> <!--start logo--> <a class="branding" href="http://www.nfchome.org" title="gohost china"> <img src="http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png" alt="ghsot"> </a> <!--end logo--> </div> </div> </div> </header> <!--end header--> <!-- start navigation --> <nav class="navbar navbar-default main-navigation"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target="#main-menu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="" class="navbar-brand">写点啥</a> </div> <div class="collapse navbar-collapse" id="main-menu"> <ul class="nav navbar-nav"> <li class="nav-current" role="presentation"><a href="#">首页</a></li> <li role="presentation"><a href="#">论坛</a></li> <li role="presentation"><a href="#">快捷手册</a></li> <li role="presentation"><a href="#">中文文档</a></li> <li role="presentation"><a href="#">下载</a></li> <li role="presentation"><a href="#">关于</a></li> </ul> </div> </nav> <!-- end navigation --> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html> |
|
2
wildplant 2015-07-31 00:16:57 +08:00
其实直接从 http://v3.bootcss.com/components/#navbar 拷贝代码再改样式就挺好。
|
Select Language