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">

留言

這個網誌中的熱門文章

ajax call relative url 相對網址

AngularJS (8) directive templateUrl