一个最小可行性的导航栏

发表于 |

我们先来看一张图： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="" class="navbar-brand">JDStore</a>
    </div>
    <div class="navbar-collapse">
        <div class="nav navbar-nav navbar-right">
        <li><%= link_to("导航", '#')%></li>
        <li class="dropdown">
            <a href="/" class="dropdown-toggle" data-toggle="dropdown">下拉
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><%= link_to("子菜单", '#')%></li>
            </ul>
        </li>
    </div>
</div>
</nav>

分两部解析，整体框架和下拉菜单。

我们先来看看整体框架：

1
2
3
4
5
6
7
8
9
10
11
12
13
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="" class="navbar-brand">JDStore</a>
    </div>
    <div class="navbar-collapse">
        <div class="nav navbar-nav navbar-right">
          <li><%= link_to("导航", '#')%></li>
        </div>
    </div>
</nav>

好的，这部分让我们多看几遍，记起来吧！

再看看下拉菜单部分：

这些是关键代码，找时间多看几遍，记起来吧……

1
2
3
4
5
6
7
8
<li class="dropdown">
    <a href="/" data-toggle="dropdown">下拉
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><%= link_to("子菜单", '#')%></li>
    </ul>
</li>

好的吧，把教材上的导航栏给肢解了再装回去，总算弄明白了哪些是必要的，哪些是可以暂时不要的！