不多说,直接上代码。

<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. html中嵌入天气预报

    先看效果: html代码: <div id="weather"></div> js代码: function findWeather() { var city ...

  2. (地址)propedit安装说明的地址

    proedit http://propedit.sourceforge.jp/eclipse/updates/

  3. LUA 函数式编程demo

    什么是函数式编程 http://www.zhihu.com/topic/19585411/hot 函数式编程的本质函数式编程中的函数这个术语不是指计算机中的函数(实际上是Subroutine),而是指 ...

  4. RDIFramework.NET ━ 9.16 案例模块━ Web部分

    RDIFramework.NET ━ .NET快速信息化系统开发框架 9.15  案例模块 -Web部分 9.16.1.产品管理模块 产品管理模块提供了基本的增.删.改.查.导出.分页等的实现,用户可 ...

  5. react-native 计算时间差

    //计算时间var sendTime = this.props.obj.send_time; console.log(sendTime); //当前时间var nowTime = (new Date( ...

  6. DNS分别在什么情况下使用UDP和TCP

    DNS同时占用UDP和TCP端口53是公认的,这种单个应用协议同时使用两种传输协议的情况在TCP/IP栈也算是个另类.但很少有人知道DNS分别在什么情况下使用这两种协议.     如果用wiresha ...

  7. Maven聚合与继承的实例讲解(一)

    概述 在javaweb高速发展的今天,我们软件设计人员往往会用很多种方式对软件划分模块,目的就是为了能有清晰的设计和低耦合性的,高重用性的软件.Maven有很好的依赖管理系统(Dependency M ...

  8. ANE 从入门到精通 --- 简单的Whatever

    Flash还是很好的,不过国内没人用. Whatever了. 以下是ANE制作中的一点笔记 分享下 也留作备份 Step1 编写As3 Library package com.eran { impor ...

  9. session跟cookies区别

    Session和Cookie的使用总结: Session和cookie都是asp.Net中的内置对象,至于他们有什么区别,在这里就不在多说,现在来说说一些比较实用点的东西: 我们知道网站都有一个后台管 ...

  10. CPU cache

    cache是一种小而快的缓冲器,用在CPU和main memory之间进行数据读写. 在processor访问主memory时,首先检查cache中是不是有一份copy,如果cache hit,则直接 ...