Bootstrap學習筆記（六）--導航

標籤：

一、基礎

<ul class="nav nav-tabs">    <li><a href="##">Home</a></li>    <li><a href="##">CSS3</a></li>     <li><a href="##">Sass</a></li>     <li><a href="##">jQuery</a></li>     <li><a href="##">Responsive</a></li></ul>

Bootstrap架構中製作導航條主要通過“.nav”樣式。預設的“.nav”樣式不提供預設的導航樣式，必須附加另外一個樣式才會有效，比如“nav-tabs”、“nav-pills”之類

二、標籤形tab導航

添加類“nav-tabs”，如果是當前在li上添加“active”，如果禁用添加“disabled”

 <ul class="nav nav-tabs">    <li class="active"><a href="##">Home</a></li>     <li><a href="##">CSS3</a></li>     <li><a href="##">Sass</a></li>     <li><a href="##">jQuery</a></li>     <li class="disabled"><a href="##">Responsive</a></li> </ul>

 三、膠囊形導航

<ul class="nav nav-pills">   //這裡用nav-pills    <li class="active"><a href="##">Home</a></li>     <li><a href="##">CSS3</a></li>     <li><a href="##">Sass</a></li>     <li><a href="##">jQuery</a></li>     <li class="disabled"><a href="##">Responsive</a></li></ul>

四、垂直導航

 <ul class="nav nav-tabs nav-stacked">   //加上nav-stacked     <li class="active"><a href="##">Home</a></li>     <li><a href="##">CSS3</a></li>     <li><a href="##">Sass</a></li>     <li><a href="##">jQuery</a></li>     <li class="disabled"><a href="##">Responsive</a></li> </ul> <br /><ul class="nav nav-pills nav-stacked">  //加上nav-stacked    <li class="active"><a href="##">Home</a></li>     <li><a href="##">CSS3</a></li>     <li><a href="##">Sass</a></li>     <li><a href="##">jQuery</a></li>    <li class="nav-divider"></li>     <li class="disabled"><a href="##">Responsive</a></li></ul>

 五、自適應導航

自適應導航是指導航佔據容器的整個寬度，添加類“nav-justified”，要和“nav-pills”或“nav-tabs”一起使用。

<ul class="nav nav-tabs nav-justified">  <li class="active"><a href="##">Home</a></li>  <li><a href="##">CSS3</a></li>  <li><a href="##">Sass</a></li>  <li><a href="##">jQuery</a></li>  <li><a href="##">Responsive</a></li></ul>

六、二級導航

<ul class="nav nav-pills">  <li class="active"><a href="##">首頁</a></li>  <li class="dropdown">             //添加dropdown      <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>  //添加dropdown-toggle類和 data-toggle="dropdown"屬性      <ul class="dropdown-menu">           //添加dropdown-menu類        <li><a href="##">CSS3</a></li>        <li><a href="##">Sass</a></li>        <li><a href="##">jQuery</a></li>        <li><a href="##">Responsive</a></li>      </ul>  </li> <li><a href="##">關於我們</a></li></ul>

七、麵包屑導航

<ol class="breadcrumb">  <li><a href="#">首頁</a></li>  <li><a href="#">我的書</a></li>  <li class="active">《圖解CSS3》</li></ol> 

 

Bootstrap學習筆記（六）--導航