不多说,直接上代码。

<div class="navbar navbar-default">

  <div class="container">

   <div class="navbar-header">

     <a href="#" class="navbar-brand">

       <span class="logo"></span>

     </a>

     <a href="#menu" class="navbar-toggle" data-toggle="collapse">

       <span class="icon-bar"></span>

       <span class="icon-bar"></span>

       <span class="icon-bar"></span>

     </a>

   </div>

   <div id="menu" class="collapse navbar-collapse">

    <ul class="nav navbar-nav">    

      <li><a href="#">首页</a></li>
      <li><a href="#">新闻</a></li>

    </ul>

    <ul class="nav navbar-nav navbar-right">

      <li><a href="#">简体中文</a></li>

    </ul>

    <form class="navbar-form navbar-right">

      <div class="form-group has-feedback">

        <label class="sr-only" for="kw">搜索关键字:</label>

        <input id="kw" class="form-control" placeholder="请输入搜索关键字">

        <span class="glyphicon glyphicon-search form-control-feedback"></span>

      </div>

    </form>

   </div>    

  </div>

</div>

以上就是一个基于Bootstrap框架最简单的导航条

浅谈Bootstrap——导航条起步的更多相关文章

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

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

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

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

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

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

  4. Bootstrap 导航条理解

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

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

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

  6. Bootstrap——导航条(navbar)

    导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...

  7. bootstrap导航条组件

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

  8. bootstrap导航条等样例持续更新》。。

    1.导航条 <!-- 导航条 --> <nav class="navbar navbar-static-top navbar-inverse"> <d ...

  9. bootstrap导航条相关知识

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

随机推荐

  1. 从零开始的Android新项目1 - 架构搭建篇

    记录一下新项目的搭建. 试想一下,如果没有历史负担,没有KPI压力,去新搭建一个项目,你会怎么设计和实现呢? 本系列文章不是教你怎么从0开始学Android,从0开始怎么建一个项目,而定位于零负担的情 ...

  2. bzoj2424 [HAOI2010]订货

    模拟一下仓库里面存储物品的价格情况即可,如果当前物品大于仓库里面物品那么就替换一下仓库里的物品,然后订货直接从仓库里先取,仓库里不够则直接购买,每次做完后记得买当前物品填补一下仓库直至仓库填满,当然这 ...

  3. 学生各门课程成绩统计SQL语句大全

    学生成绩表(stuscore): 姓名:name 课程:subject 分数:score 学号:stuid 张三 数学 89 1 张三 语文 80 1 张三 英语 70 1 李四 数学 90 2 李四 ...

  4. poj 1888 Crossword Answers 模拟题

    Crossword Answers Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 869   Accepted: 405 D ...

  5. Failed to execute request because the App-Domain could not be created.

    原错误信息: 服务器应用程序不可用 您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的“刷新”按钮重试您的请求. 管理员注意事项: 详述此特定请求失败原因的错误 ...

  6. C# 参数化SQL语句中的like和in

    在写项目的时候遇到一个问题,sql 语句进行 like in 参数化,按照正常的方式是无法实现的我们一般的思维是: Like 参数:string strSql = "select * fro ...

  7. __block 与 __weak的区别理解

    Blocks理解: Blocks可以访问局部变量,但是不能修改 如果修改局部变量,需要加__block __block int multiplier = 7; int (^myBlock)(int) ...

  8. iconfont-矢量图标字体的运用

    发现一个奇怪的现象:(http://m.muzhiwan.com) 这里面的图标竟然不是一张张小图标图片?Firebug下查看一下元素,竟然是这样的: 页面源代码如下: 好奇怪啊,这些个乱七八糟的&a ...

  9. postgresql如何实现回收站机制

         在oracle10G之后:oracle提供一种回收站的机制:即闪回技术.闪回技术通常用于快速简单恢复数据库中出现的认为误操作等逻辑错误.发展到11G之后:回收站更加完善:对在可闪回时间内:数 ...

  10. js基础的知识整理

    一.操作样式: .style   操作行间样式 .className 修改class 二.操作属性 1. .  更简单,操作已有的属性 2. [] 更灵活,点能做的,方括号都能做.方括号中放的是字符串 ...