导航条基础

导航条（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. nosql使用感受

    最近一个项目尝试了使用ssdb(一个类似于redis的数据结构数据库),主要感受有几点: 优势 nosql的无模式在修改和插入时很方便,不需要预先新建表或者修改表结构来新加字段,只需要代码里面使用就行 ...

  2. 性能测试分享： Jmeter的源码分析main函数参数

    性能测试分享: Jmeter的源码分析main函数参数   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大 ...

  3. 1.熟悉Java基本类库系列 - 目录

    写这个系列是想让自己多熟悉熟悉Java的基本类库,忘记的时候可以在这里看看之前写过的例子,这样就可以很快的回忆起来如何使用了. 这样就可以很节省时间了. ======= 下面是传送门啦 ======= ...

  4. First Article

    Hello World 愚人节的这天,我在我师傅的引导下,踏上了博客园这条不归路...... 先做下自我介绍,我姓李,木子李,因为本人比较中二,所以大家就叫我李中二吧! 工作是前端开发,目前正在深圳一 ...

  5. Ubuntu16.04部署python2和python3共存的Jupyter Notebook

    一.安装python和python-pip sudo apt-get install python python3 python-pip python3-pip sudo pip install -- ...

  6. 2017腾讯实习生Android客户端开发面试总结

    欢迎访问我的个人博客转发请注明出处:http://wensibo.top/2017/04/13/2017Tencent_review/ 前言 先做个自我介绍,本人大三狗一枚,就读的是广州一个普通的一本 ...

  7. .NET遇上Docker - Harbor的安装与基本使用

    Harbor是一个开源企业级Docker注册中心,可以用于搭建私有的Docker Image仓库.可以实现权限控制等. 安装Harbor 首先,需要安装Docker和Docker Compose,参考 ...

  8. es5和es6实现lazyman

    es6实现 1 class _LazyMan { constructor(name) { this.tasks = []; this.sleep = this.sleep.bind(this); th ...

  9. iOS 播放GIf图, 动态效果

    一.如果你集成了SDWebImage , 有一个很简单的方法 //导入sdwebImage的某个头文件 #import "UIImage+GIF.h" _bubble1.backg ...

  10. ES6入门

    整理了ES6常用的一些语法,跟大家分享(promise.generator什么的还没有梳理清楚,后续再更新...) 1⃣️ 变量声明-let 与 const (首先关于测试结果:这里有个小问题,如果用 ...