Bootstrap 导航栏

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

这些在最新版的dreamviewer cc2015中都有相应的代码库，可以直接添加，但是为了后续的修改和样式的渲染，最好还是稍微了解一下它的结构。

为了分析的方便我就直接在代码中用注释的方式分析了
默认的导航（多数用于PC端）

<!-- 向 <nav> 标签添加 class .navbar .navbar-default（可选择不同的，但是最少一个）。向上面的元素添加 role="navigation"，有助于增加可访问性。 -->
<nav class="navbar navbar-default" role="navigation"> 
<!--向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号（可有可无，根据需求来）-->
   <div class="navbar-header">
      <a class="navbar-brand" href="#">题目</a>
   </div>
   <div>
   	<!--为了向导航栏添加链接，只需要简单地添加带有 class .nav .navbar-nav 的无序列表即可-->
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">导航一</a></li>
         <li class="dropdown"> <!--做下来列表导航的必须在li加  class="dropdown"-->
         	<!--在需要点击的导航文字的<a>上加class="dropdown-toggle" data-toggle="dropdown"-->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">导航三 <b class="caret"></b></a>
            <!--在下拉框上加  class="dropdown-menu" -->
            <ul class="dropdown-menu">
               <li><a href="#">son_nav</a></li>
               <li><a href="#">son_nav</a></li>
               <li><a href="#">son_nav</a></li>
               <li class="divider"></li><!--这是一个分割线 -->
               <li><a href="#">son_nav</a></li>
               <li class="divider"></li>
               <li><a href="#">son_nav</a></li>
            </ul>
         </li>
      </ul>
   </div>
</nav>

响应式的导航栏
框架代码加注释

<!--nav的class等 都和默认的导航条一样就可以了-->
<nav class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<!--折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮-->
		<!--第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素（很重要）-->
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">可有可无的题目</a>
	</div>
	<!--为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse .navbar-collapse 的 <div> 中。
   	这个div的id是一个标识符，必须与上面的 button的 data-target="#example-navbar-collapse" 对应
   -->
	<div class="collapse navbar-collapse" id="example-navbar-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">导航一</a></li>
			<li><a href="#">导航二</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">导航三 <b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="#">son_nav</a></li>
					<li><a href="#">son_nav</a></li>
					<li><a href="#">son_nav</a></li>
					<li class="divider"></li>
					<li><a href="#">son_nav</a></li>
					<li class="divider"></li>
					<li><a href="#">son_nav</a></li>
				</ul>
			</li>
		</ul>
	</div>
</nav>

只介绍了这两种，其他的大同小异，具体的可以参考这里

文章评论