[英]How do I achieve my bootstrap nav design?
我有以下Twitter Bootstrap導航欄設計,當前外觀如下圖所示:
在付諸實踐的那一刻,它看起來如下所示...
只是使用了標准的引導程序代碼和CSS。 我也想知道如何消除活動選項卡頂部和底部都可以看到的細微間隙。
提前致謝。
編輯:
這是導航欄的當前代碼。
.navbar { margin-bottom: 0; } .navbar-branded { background-color: #00b9f2; font-weight: bold; border-radius: 0; } .navbar-branded .navbar-brand { color: #ffffff; } .navbar-branded .navbar-brand:hover, .navbar-branded .navbar-brand:focus { color: #00b9f2; } .navbar-branded .navbar-text { color: #ffffff; } .navbar-branded .navbar-nav > li > a { color: #ffffff; } .navbar-branded .navbar-nav > li > a:hover, .navbar-branded .navbar-nav > li > a:focus { color: #00b9f2; } .navbar-branded .navbar-nav > .active > a, .navbar-branded .navbar-nav > .active > a:hover, .navbar-branded .navbar-nav > .active > a:focus { color: #00b9f2; background-color: #ffffff; } .navbar-branded .navbar-nav > .open > a, .navbar-branded .navbar-nav > .open > a:hover, .navbar-branded .navbar-nav > .open > a:focus { color: #00b9f2; } .navbar-branded .navbar-toggle {} .navbar-branded .navbar-toggle:hover, .navbar-branded .navbar-toggle:focus { background-color: #ffffff; } .navbar-branded .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-branded .navbar-collapse, .navbar-branded .navbar-form {} .navbar-branded .navbar-link { color: #ffffff; } .navbar-branded .navbar-link:hover { color: #00b9f2; } @media (max-width: 767px) { .navbar-branded .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-branded .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-branded .navbar-nav .open .dropdown-menu > li > a:focus { color: #00b9f2; } .navbar-branded .navbar-nav .open .dropdown-menu > .active > a, .navbar-branded .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-branded .navbar-nav .open .dropdown-menu > .active > a:focus { color: #00b9f2; background-color: #ffffff; } }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <nav class="navbar navbar-branded"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Our Team</a> </li> <li> <a href="#">Schedule</a> </li> <li> <a href="#">Requests</a> </li> <li> <a href="#">News</a> </li> <li> <a href="#">Partners</a> </li> <li> <a href="#">Contact us</a> </li> </ul> </div> </div> </nav>
您可以使用表格布局在整個導航欄上分配鏈接,並且我相信您指的是導航欄圍繞活動鏈接周圍的“間隙”時所圍繞的border: none;
。
@media (min-width: 768px) {
.navbar.navbar-branded .navbar-nav {
display: table;
width: 100%;
}
.navbar.navbar-branded .navbar-nav > li {
display: table-cell;
float: none;
}
.navbar.navbar-branded .navbar-nav > li > a {
text-align: center;
}
}
請參見整頁上的示例示例。
.navbar { margin-bottom: 0; } .navbar.navbar-branded { background-color: #00b9f2; font-weight: bold; border-radius: 0; border: none; } .navbar.navbar-branded .navbar-brand { color: #ffffff; } .navbar.navbar-branded .navbar-brand:hover, .navbar.navbar-branded .navbar-brand:focus { color: #00b9f2; } .navbar.navbar-branded .navbar-text { color: #ffffff; } .navbar.navbar-branded .navbar-nav > li > a { color: #ffffff; } .navbar.navbar-branded .navbar-nav > li > a:hover, .navbar.navbar-branded .navbar-nav > li > a:focus { color: #00b9f2; } .navbar.navbar-branded .navbar-nav > .active > a, .navbar.navbar-branded .navbar-nav > .active > a:hover, .navbar.navbar-branded .navbar-nav > .active > a:focus { color: #00b9f2; background-color: #ffffff; } .navbar.navbar-branded .navbar-nav > .open > a, .navbar.navbar-branded .navbar-nav > .open > a:hover, .navbar.navbar-branded .navbar-nav > .open > a:focus { color: #00b9f2; } .navbar.navbar-branded .navbar-toggle:hover, .navbar.navbar-branded .navbar-toggle:focus { background-color: #ffffff; } .navbar-branded .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar.navbar-branded .navbar-collapse, .navbar.navbar-branded .navbar-link { color: #ffffff; } .navbar.navbar-branded .navbar-link:hover { color: #00b9f2; } @media (max-width: 767px) { .navbar.navbar-branded .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar.navbar-branded .navbar-nav .open .dropdown-menu > li > a:hover, .navbar.navbar-branded .navbar-nav .open .dropdown-menu > li > a:focus { color: #00b9f2; } .navbar.navbar-branded .navbar-nav .open .dropdown-menu > .active > a, .navbar.navbar-branded .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar.navbar-branded .navbar-nav .open .dropdown-menu > .active > a:focus { color: #00b9f2; background-color: #ffffff; } } @media (min-width: 768px) { .navbar.navbar-branded .navbar-nav { display: table; width: 100%; } .navbar.navbar-branded .navbar-nav > li { display: table-cell; float: none; } .navbar.navbar-branded .navbar-nav > li > a { text-align: center; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-branded"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Our Team</a> </li> <li> <a href="#">Schedule</a> </li> <li> <a href="#">Requests</a> </li> <li> <a href="#">News</a> </li> <li> <a href="#">Partners</a> </li> <li> <a href="#">Contact us</a> </li> </ul> </div> </div> </nav>
您可以利用bootstrap的內置類.nav-justified並編輯背景,並鏈接顏色和填充以匹配您的設計。
.navbar { margin-bottom: 0; } .navbar.navbar-branded { background-color: #00b9f2; font-weight: bold; border-radius: 0; border: none; } .nav-justified { color: #ffffff; } .nav.nav-justified > li > a { text-align: left; } .nav-justified a { color: #ffffff; } .nav-justified a:hover, .nav-justified:focus { color: #00b9f2; } .nav-justified .active > a, .nav-justified .active > a:hover, .nav-justified .active > a:focus { color: #00b9f2; background-color: #ffffff; } .navbar-toggle .icon-bar { background-color: #fff; } @media (min-width: 768px) { .nav.nav-justified > li > a { text-align: center; } .nav.nav-justified > li > a { padding-top: 15px; padding-bottom: 15px; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-branded"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs"> <ul class="nav nav-justified"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Our Team</a> </li> <li> <a href="#">Schedule</a> </li> <li> <a href="#">Requests</a> </li> <li> <a href="#">News</a> </li> <li> <a href="#">Partners</a> </li> <li> <a href="#">Contact us</a> </li> </ul> </div> </div> </nav>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.