主导航的设计《 HTML5 与 Bootstrap 应用实例》

我们的主导航使用了很简单的样式，导航菜单的下面，使用了一条贯穿整个页面的灰色线 .... 每个菜单项并排显示 ... 激活的菜单项的下面有一个 3 像素的绿色边线。

Bootstrap 架构设计好了一些导航菜单的样式，我们可以直接使用，打开 twitter.github.com/bootstrap

打开 Components ，点击 Navbar ，你可以找到导航菜单的样式，复制一下这段代码 ....

回到我们自己的网页设计里面 ... 在 </header> 也就是 <header> 结束的地方，另一行 ... 把刚才复制的导航菜单的代码粘贴过来 ...

在页面中你会看到一个导般菜单 ... 想让它居中显示我们可以用一组带有 .container 类的 <div> 标签包围住导航菜单 ...

下面我们再修改一下这个导航菜单里的内容 ... 先去掉这个带有 .brand 类的 <a> 标签，因为我们不需要在导航菜单里加上网站的名称 ...

Home 改成首页 ... 再修改一下后面这两个菜单项 ... 真实婚礼 ... 活动 ...

导航菜单一般会用无序列表来标记，也就是这组 <ul> 标签，在这个 <ul> 标签上要添加一个 .nav 类。

然后每一个菜单项就是一个列表项目，每个列表项目都使用一组 <li> 标签来标记 ...

在首页这个菜单项上添加了一个 .active 类，在网页的视图模式下，你可以看到这个首页菜单项的样式跟其它菜单项的样式都不一样。

这样用户可以很容易区分当前所在的位置属于哪个菜单项 ...

在这组无序列表的外面用一组带有 .navbar-inner 类的 <div> 标签包围住，在它的外面是一组带有 .navbar 类的 <div> 标签包围。

Bootstrap 为这些类都添加了各自的样式 ...

下面我们可以再添加一个下拉菜单，比如点击真实婚礼这个菜单项的时候，会弹出一个下拉菜单 ...

回到 Bootstrap 架构的页面，我们可以找到在导航菜单里添加下拉菜单的代码示例 ...

在这里，先复制一下，<li> ... </li> 之间的代码 ... 这就是一个带下拉菜单的菜单项的代码结构 ...

回过来，替换一下真实婚礼这个菜单项 ...

然后修改一下 ... 真实婚礼 ... 在这组 <li> 标签的里面，嵌套了一组 <ul> 无序列表，这个列表里的东西就是点击真实婚礼弹出的下拉菜单 ...

在这里我们添加几个菜单项列表 ...

在网页的视图模式下 ... 点击真实婚礼这个菜单项，可以弹出一个下拉菜单 ....

在下面视频里我们按照自己的设计来修改一下导航菜单的样式 ...

主导航的设计