导航条基础

导航条（navbar）和上一节介绍的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。

导航条和导航一样，在Bootstrap框架中是一个独立组件，所以你也可以根据自己的需求使用不同的版本：

  • LESS版本：对应的源文件navbar.less
  • Sass版本：对应的源文件_navbar.scss

实例：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>导航条</title>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>

<body>

<!--基本导航条-->

<div class="navbar navbar-default" role="navigation">

     <ul class="nav navbar-nav">

     	<li class="active"><a href="##">网站首页</a></li>

        <li><a href="##">系列教程</a></li>

        <li><a href="##">名师介绍</a></li>

        <li><a href="##">成功案例</a></li>

        <li><a href="##">关于我们</a></li>

	 </ul>

</div>

<div class="navbar navbar-default" role="navigation">

  　<div class="navbar-header">

  　    <a href="##" class="navbar-brand">慕课网</a>

  　</div>

     <ul class="nav navbar-nav">

	 	<li class="active"><a href="##">网站首页</a></li>

      <li class="dropdown">

        <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>

        <ul class="dropdown-menu">

        	<li><a href="##">CSS3</a></li>

        	<li><a href="##">JavaScript</a></li>

        	<li class="disabled"><a href="##">PHP</a></li>

        </ul>

     </li>

      <li><a href="##">名师介绍</a></li>

      <li><a href="##">成功案例</a></li>

      <li><a href="##">关于我们</a></li>

	 </ul>

  <form action="##" class="navbar-form navbar-left" rol="search">

   	<div class="form-group">

   		<input type="text" class="form-control" placeholder="请输入关键词" />

   	</div>

     <button type="submit" class="btn btn-default">搜索</button>

   </form>

</div>

<!--代码-->

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

</body>

</html>

慕客学习网站：http://www.imooc.com/code/3110

bootstrap学习笔记之导航条基础的更多相关文章

  1. Bootstrap 学习笔记5 进度条媒体对象和well组件

    代码: <ul class="media-list"> <li class="media"> <div class="m ...

  2. Bootstrap 我的学习记录3 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  3. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  4. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  5. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  6. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  7. Linux 学习笔记之超详细基础linux命令(the end)

    Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 14---------------- ...

  8. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  9. 【学习笔记】JavaScript的基础学习

    [学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

随机推荐

  1. Visual Studio 2017创建.net standard类库编译出错原因

    正式版上个月已经Release了,从那时到现在经常会收到更新提示,估计问题还不少吧!其中最吸引我的当然是.net standard与.net core. 刚好最近接触.net standard项目,新 ...

  2. Centos安装MySql、Java、Tomcat

    一.安装MySql 安装MySql yum install -y mysql-server mysql mysql-devel 启动MySql服务 service mysqld start 为root ...

  3. 鼠标滚动：mousewheel事件在Firefox采用DOMMouseScroll事件的统一处理

    这是一个小事件,但当下的WEB应用交互非常丰富,判断鼠标的滚动来执行相应的操作是比较常见的.我用Chrome/IE/Firefox/Opera 4种浏览器做测试,发现只有firefox的处理方法有很大 ...

  4. Maven工程webinfo下面的JSP页面无法加载.js、.css文件的解决方案

    --下面是我的工程路径 --我jsp的写法 -----启动工程,访问js文件的路径是这样的, href="http://localhost:8080/activiti/css/public. ...

  5. 【redis专题(8)】命令语法介绍之通用KEY

    select num 数据库选择 默认有16[0到15]个数据库,默认自动选择0号数据库 move key num 移动key到num服务器 del key [key ...] 删除给定的一个或多个 ...

  6. Java NIO之Buffers

    一.前言 在笔者打算学习Netty框架时,发现很有必要先学习NIO,因此便有了本博文,首先介绍的是NIO中的缓冲. 二.缓冲 2.1 层次结构图 除了布尔类型外,其他基本类型都有相对应的缓冲区类,其继 ...

  7. Java中如何动态创建接口的实现

    有很多应用场景,用到了接口动态实现,下面举几个典型的应用: 1.mybatis / jpa 等orm框架,可以在接口上加注解进行开发,不需要编写实现类,运行时动态产生实现. 2.dubbo等分布式服务 ...

  8. MySQL执行sql查询并上传至远程服务器

    最近项目中有需要做一个shell脚本,可以对一个数据库执行sql操作,并将结果转为txt,筛选结果用tab隔开,保存至一个远程服务器上,以供其他人用Excel读取用txt中的内容. MySQL中将结果 ...

  9. waiting for spring......

    世间哪得双全法,不负如来不负卿....<仓央嘉措>

  10. 【代码学习】MYSQL数据库的常见操作

    ---恢复内容开始--- ============================== MYSQL数据库的常见操作 ============================== 一.mysql的连接与 ...