妖哲开始搞前端3 变形！导航栏_前端异型按钮导航栏-优快云博客

本文深入探讨了HTML与Bootstrap在网页设计中的应用，特别是如何利用Bootstrap实现动态导航栏和折叠菜单功能。通过实例代码演示，展示了如何构建响应式导航栏，实现菜单项的自动折叠与展开，以及在导航栏中嵌套子菜单。此外，文章还指导读者如何在主页上添加互动元素，提升用户体验。

各位，我又回来了！
上次说到，我们粗略的见识了一下HTML以及Bootstrap的用法，并且在不知情的情况下召唤出了装逼神器导航栏，让我们回顾一下代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
...
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <!--关于Button的注释-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Color</a>
        <!--带有navbar－brand的a元素会让文本看起来大一号-->
      </div>
      <!--/.nav-collapse -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Black</a></li>
          <li><a href="#">White</a></li>
          <li><a href="#">Grey</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="jumbotron">
    <h1>Hello!</h1>
    <p> Welcome to a new world consists of html,javascript and css!</p>
  </div>

</body>
</html>

OK,接着昨天的继续讲下去，我们可以看见整个导航栏Nav元素中被分割成两个div元素，而这两个div元素分别是导航栏的标题以及导航按钮。

Navbar-header	Navbar-collapse
Color	Black,White,Grey

那我们优先来看下Navbar－header。
我们首先使用一个带有“navbar-header”属性的div划分出一个专属区域。
然后在这里定义了一个按钮Button标签

Button

标签定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
控件与相比，提供了更为强大的功能和更丰富的内容。与标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。

下面这张表列出了Button的所有属性
Button的属性
当然，我们的代码中出现了许多额外的属性，这都要归功于bootstrap的插件。

自动折叠(切换) Collapse.Js

本来这些应该一起呗我们扔到爪哇岛彻底忘记的，但是本着＝＝折腾到底的态度，我们还是来了解一下这个插件的作用吧.

关于
为可折叠的组件(比如手风琴式应用，导航栏)提供基本的样式和灵活的支持。
* 需要包含过渡插件.

我们注意到在这个button标签中，包含了data－target和data－toggle两个属性，而这两个属性正是实现折叠功能的罪魁祸首，我们来看一段示例代码（你可以将其添加在原有的代码中或新建一个）

<body>
  <button type="button" class="btn btn-primary" data-toggle="collapse"
  data-target="#collapseExample"aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
  </button>
  <div class="collapse in" id="collapseExample">
    <div class="well">
      这边是一大堆废话所以我们直接不要看了
    </div>
  </div>

</body>

在body中添加完这段代码后是不是感觉很眼熟！！！，没错简直和导航栏题头的代码一毛一样。看看效果
这里写图片描述

哇塞，按下按钮还能自动伸缩诶，什么？你不能这么做？不要忘了我们现在是依靠Js在运作的，所以千万不要忘记在body的最后加上js索引

OK，那么我们差不多就清楚插件的具体工作方式了。先赋予标签特定的属性值，然后js脚本通过查询标签的这些属性值，在特定的地方发挥功效。嗯。具体关于JS的内容还在后边的后边，这里只是稍作引入，以免看见陌生的属性而不知所错。
OK，在掌握了这个技能之后，给你的主页添加一个小彩蛋吧！

List

而Navbar－collapse则显得较为简单，这里面只是装载了一个列表。
我们使用< ul >标签来定义无序列表，用 < li >来定义列表元素.
这边就是定义了一个1x3的列表，分别装下了Black，White，Grey。1
难道今天就这样结束了吗！！No，答案是否定的，因为我们还要升级改造我们的导航栏，使他成为战舰级别的。
一个成熟的网站一定会有许多子类别，那么面对这种情况我们该怎么办！！！还记得我们刚刚搞的那个列表吗？没错，我们在列表里搞列表久能完美解决这个问题。打开还是熟悉的代码，在body的第三个导航Grey标签里面嵌套List元素和折叠元素。

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <!--关于Button的注释-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
          data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">Color</a>
        <!--带有navbar－brand的a元素会让文本看起来大一号-->
      </div>
      <!--/.nav-collapse -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Black</a></li>
          <li><a href="#">White</a></li>
          <!--在list中嵌套使用list并且使用了下拉菜单“dropdown”属性。注意有一个特别的li属性为dropdownheader，在图片中观察区别-->
          <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"
              role="button" aria-expanded="false">Grey</a>
              <ul class="dropdown-menu" role ="menu">
                <li class="dropdown-header">attention please</li>
                <li>Small</li>
                <li>middle</li>
                <li>Big</li>
              </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>