一个最小可行性的导航栏

我们先来看一张图:

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

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

我们先来看看整体框架:
<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>

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

再看看下拉菜单部分:

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

    <li class="dropdown">
        <a href="/" data-toggle="dropdown">下拉
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><%= link_to("子菜单", '#')%></li>
        </ul>
    </li>

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

comments powered by Disqus