不多说,直接上代码。

<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. mac地址、IP地址和端口号

    看了很多遍,才整理出来我对整个通信过程的理解,大致如下,后期会不断学习补充更正: 在利用TCP/IP协议族进行通信的时候,有三个比较关键的确认身份的信息:mac地址.IP地址和端口号. mac地址是在 ...

  2. windows2003服务器mysql每天定时备份

    1.php利用mysqldump备份数据库,代码如下: <?php /** * 数据库备份 */ $sqlname = $argv[1]; //接受bat或cmd传过来的第一个参数 要备份的数据 ...

  3. kernel update 2.6.18-2.6.38

    细致某种程度上可以体现作者的开放精神 copy for build a note needed when config the kernel 主要的问题出在了menu.lst 和 grub.conf文 ...

  4. Spring+Mybatis+Maven+MySql搭建实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲了如何使用Maven来搭建Spring+Mybatis+MySql的的搭建实例 ...

  5. install MCR in silent mode linux server

    ./install -mode silent -agreeToLicense yes -destinationFolder /home/yanzhh/wq/Programs/MCR export LD ...

  6. 起因:dell超级密码算号器 1F66

    班里有几个比较调皮的同学~(显然不包括我[开玩笑的]) 当初班长设置了密码,结果那几个玩拳皇的想玩,就找我删除了密码~ 最后有个大神就过来设置了BIOS.有种终于出动了的样子.有种我看你怎么办的样子. ...

  7. 创建和导出SVG的技巧(转载)

    本文转载自: 创建和导出SVG的技巧

  8. WPF关于Generic.xaml

    如果需要用到Themes/Generic.xaml作为默认风格资源文件,不要忘了该项目的AssemblyInfo.cs中必须要有以下这段: [assembly: ThemeInfo( Resource ...

  9. How to run a (Tomcat)Java application server on a Azure virtual machine

    http://www.windowsazure.com/en-us/documentation/articles/virtual-machines-java-run-tomcat-applicatio ...

  10. jquery file upload 文件上传插件

    1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...