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

导航条(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. DP题 总结 [更新中]

    建设中 ... 预防针 : 本蒟蒻代码风格清奇(⊙﹏⊙)b 一.选学霸 题目描述 老师想从N名学生中选M人当学霸,但有K对人实力相当,如果实力相当的人中,一部分被选上,另一部分没有,同学们就会抗议.所 ...

  2. Java根据参数返回相应类

    问题初衷:如何根据参数变换方法的返回类型(参数为 类) 解决方案: 下面方法是放在工具类(例:YslRequestUtil) public <T> T response(Object re ...

  3. electron开发环境搭建

    开发环境 Node.js Vscode vscode安装Debugger for Chrome 创建开发目录(也是解决方案) 执行初始化命令,创建electronpicture工程,并添加main.j ...

  4. RGB颜色值

  5. 音视频入门-12-手动生成一张PNG图片

    * 音视频入门文章目录 * 预热 上一篇 [PNG文件格式详解]详细介绍了 PNG 文件的格式. PNG 图像格式文件由一个 8 字节的 PNG 文件署名域和 3 个以上的后续数据块(IHDR.IDA ...

  6. 文本查重算法SimHash

    1.介绍 爬虫采集了大量的文本数据,如何进行去重?可以使用文本计算MD5,然后与已经抓取下来的MD5集合进行比较,但这种做法有个问题,文本稍有不同MD5值都会大相径庭, 无法处理文本相似问题.另一种方 ...

  7. 爬虫连接mongodb、多线程多进程的使用

    一.连接mongodb 1.            设置数据库 client=pymongo.MongoClient(‘localhost’) 2.            db=client[‘lag ...

  8. node留言板

    这是一个nodejs + mongodb 的小项目,对数据库的增删改查 1. 引入项目依赖 "art-template": "^4.13.2", "b ...

  9. SpringCloud 中集成Sentinel+Feign实现服务熔断降级

    Sentine 1.背景 Sentinel 是阿里中间件团队开源的,面向分布式服务架构的轻量级高可用流量控制组件,主要以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度来帮助用户保护服务的稳 ...

  10. Redis开发与运维:SDS

    STRING 我们会经常打交道的string类型,在redis中拥有广泛的使用.也是开启redis数据类型的基础. 在我最最开始接触的redis的时候,总是以为字符串类型就是值的类型是字符串. 比如: ...