Bootstrap3.2.0 導覽列寫法拆解
最基本的導覽列框架整理如下,因為我自己被表太多次了(XD)。至於導覽列的內容請再參考bootstrap3的navbar,若有機會再補上。
.navbar 起手式
<body> <div class="navbar" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body>
.navbar .navbar-default 基本背景樣式
.navbar-default 使得導覽列有淺灰漸層的背景。<body> <div class="navbar navbar-default" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body>
.navbar .navbar-static-top 置上
.navbar-static-top 置上,不過它會增加1px的border,讓導覽列稍微被撐寬。<body> <div class="navbar navbar-static-top" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body>
.navbar .navbar-fixed-top 置上
<body> <div class="navbar navbar-fixed-top" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body>
.navbar-fixed-top 也是維持置上,不過當加上內文...
<h1>網頁標題在這裡!!!</h1>
真是悲劇,body必須加上padding才能解決這問題。
<body style="padding-top:50px;">
.navbar .navbar-static-top .navbar-default 基本樣式置上
<body> <div class="navbar navbar-static-top navbar-default" role="navigation"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </body>
.navbar .navbar-static-top .navbar-inverse 反黑樣式置上
只是.navbar-default 改成.navbar-inverse<body> <div class="navbar navbar-static-top navbar-inverse" role="navigation">
.container 適當寬度
.container 用適應性設計,按照body不同寬度設計了:- @media (min-width: 768px) 對應到 750px
- @media (min-width: 992px) 對應到 970px
- @media (min-width: 1200px) 對應到 1170px
<body> <div class="container"> <div class="navbar navbar-static-top navbar-default"> <a class="navbar-brand" href="#">手工斷詞系統</a> </div> </div>
.container + .navbar-inverse 適當寬度的反黑樣式
<body> <div class="container"> <div class="navbar navbar-static-top navbar-inverse">
留言
張貼留言