<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle collapsed" aria-expanded="false" aria-controls="navbar" type="button" data-toggle="collapse" data-target="#navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse" id="navbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" aria-expanded="false" href="#" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Bootstrap——导航栏编写的更多相关文章

  1. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  2. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  3. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  4. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  5. Bootstrap导航栏navbar源码分析

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

  6. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  7. Bootstrap导航栏

    导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...

  8. bootstrap导航栏的辛酸史

    昨天本来想完成test10的页面内容的,但是给老铁拉出去打麻将呢.不过还好昨天写了一些内容.现在奉上.不作更改. 今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题.) 我 ...

  9. bootstrap导航栏PC端移动端之不同样式

    在此之前,我先说我之所以要改变网站PC移动双端不同样式的原因. 首先我的网站用到了bootstrap响应式布局,这是我网站的PC端导航栏: 这是我网站的移动端导航栏,看着就难受: 我用谷歌浏览器F12 ...

随机推荐

  1. const 关键字及作用

    1.const 修饰一般常量,可以把变量变成常量 例如: int  num=10; num=100; printf(“num=%d\n”,num); 输出的来得值为:100: 但是如果const in ...

  2. C++的STL在C#中的应用

    这里主要讲几个重要的STL在C#中的应用:vector, map, hash_map, queue, set, stack, list. vector: 在C#中换成了list using Syste ...

  3. 动画--过渡所需时间 transition-duration

    transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间. 案例演示: 在鼠标悬停(hover)状态下,让容器从 ...

  4. 继承 Bean 配置

    继承 Bean 配置 Spring 允许继承 bean 的配置, 被继承的 bean 称为父 bean. 继承这个父 Bean 的 Bean 称为子 Bean子 Bean 从父 Bean 中继承配置, ...

  5. struts几个配置文件加载顺序_2015.01.04

    struts几个配置文件加载顺序: 01:struts-default.xml 02:struts-plugin.xml 03:struts.xml 04:struts.properties 05:w ...

  6. Qt源码包中的一段代码

    之所以单独拣出来是因为Qt的开发者们给普通开发者提供了高效编程的商业代码例子: bool QWidget::testAttribute_helper(Qt::WidgetAttribute attri ...

  7. 形状特征提取-Hu不变矩(转载)

    [原文部分转载]:http://blog.csdn.net/wrj19860202/archive/2011/04/16/6327094.aspx 在连续情况下,图像函数为 ,那么图像的p+q阶几何矩 ...

  8. APP的UI测试要点

    1.文字显示是否正确 比如与需求图片对比是否正确,无错别字 2.对齐方式是否正确 3.图片 图片显示的篇幅不要太大. 4.颜色是否正确 颜色与需求规定的是否一致

  9. Centos的Inode及Block相关知识

    Centos的Inode及Block相关知识 时间:2016-06-04 01:54来源:blog.51cto.com 作者:"tao" 博客 举报 点击:173次 本经验均在Ce ...

  10. linux 文件删除原理

    文件删除: i_link 文件的硬连接数 i_count 引用计数(有一个程序使用i_count加1) 文件删除的条件: i_link=0 and i_count=0 被进程占用的文件可以删除