导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多。

导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航)、表单以及表单和导航一起结合等多种形式。

在制作一个基础导航条时,主要分以下几步:

  • 首先在制作导航的列表(<ul class='nav'>)上添加类名 navbar-nav;
  • 在列表外部添加一个容器(nav),并且使用类名 navbar 和 navbar-default。
  • <nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
    <li><a href="#">首页</a></li>
    ...
    </ul>
    </nav>

    如果我们希望将导航条固定在浏览器顶部或底部,Bootstrap 框架提供了两种固定导航条的方式:

    • 将导航固定在顶部,下面的内容会自动上移
    <nav class="navbar navbar-default navbar-fixed-top">
    • 将导航补丁在底部
    <nav class="navbar navbar-default navbar-fixed-bottom">

Bootstrap——导航条(navbar)的更多相关文章

  1. Bootstrap 导航条理解

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

  2. bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何

    bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...

  3. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  4. Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  5. bootstrap导航条相关知识

    在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 为导航条添加标题.二级菜单及状态 <div class=&quo ...

  6. 浅谈Bootstrap——导航条起步

    不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...

  7. bootstrap导航条+模态对话框+分页样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  9. bootstrap导航条组件

    一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...

随机推荐

  1. MariaDB数据库

      MySQL作者Michael Widenius自己创办了新公司Monty Program AB,在MySQL基础上新创了MariaDB开源数据库.MariaDB带来更好的数据库管理特性,更好的自由 ...

  2. vue实现简易计算器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. PHP5底层原理之变量

    PHP5底层原理之变量 变量结构 zval 结构体 PHP 所有类型的变量在底层都会以 zval 结构体的形式实现 (源码文件Zend/zend.h) 源码根目录搜索 grep -rin --colo ...

  4. 惊人!Spring5 AOP 默认使用Cglib ?从现象到源码深度分析

    Spring5 AOP 默认使用 Cglib 了?我第一次听到这个说法是在一个微信群里: 真的假的?查阅文档 刚看到这个说法的时候,我是保持怀疑态度的. 大家都知道 Spring5 之前的版本 AOP ...

  5. Redis(五)持久化

    一.RDB RDB持久化是把当前进程数据生成快照保存到硬盘的过程,触发RDB持久化过程分为手动触发和自动触发. 1.触发机制 (1)手动触发:save命令和bgsave命令 save命令:阻塞当前Re ...

  6. 最常用 最完整 最清晰 的git使用命令大全!

    Git 常用命令 初始化项目步骤 mkdir WebApp //创建文件夹 cd WebApp //进入到该文件夹 git init //初始化 touch README //生成README git ...

  7. Java开发中的23中设计模式详解(一)工厂方法模式和抽象工厂模式

    一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接 ...

  8. 面向云原生的混沌工程工具-ChaosBlade

    作者 | 肖长军(穹谷)阿里云智能事业群技术专家   导读:随着云原生系统的演进,如何保障系统的稳定性受到很大的挑战,混沌工程通过反脆弱思想,对系统注入故障,提前发现系统问题,提升系统的容错能力.Ch ...

  9. 转:PHP删除目录及目录下所有文件

    PHP删除目录及目录下所有文件 <?php //循环删除目录和文件函数 function delDirAndFile( $dirName ) { if ( $handle = opendir(  ...

  10. 操作系统实现(一):从Bootloader到ELF内核(转载)

    原文链接: http://www.cppblog.com/airtrack/archive/2014/10/30/208729.html Bootloader 我们知道计算机启动是从BIOS开始,再由 ...