相关类:

nav, nav-pills, nav-tags, nav-stacked ul里使用,导航格胶囊,方片外观,堆叠外观

navbar, navbar-header, navbar-brand, navbar-nav, navbar-default, 导航条相关类

dropdown, dropdown-menu, dropdown-toggle,二级菜单相关类

divider二级导航里的分割线

相关属性:

data-toggle="tab",点击导航格会变为选中状态,背景颜色改变

data-toggle="dropdown",点击弹出二级菜单

说明:不用记太多类,记住几个必须用到类就行,其他的可以用jquery解决。

<div class="container">
<div>
<ul class="nav nav-pills">
<li class="active"><a href="">主页</a></li>
<li><a href="">主页</a></li>
<li><a href="">主页</a></li>
<li>
<a data-toggle="dropdown" href="">主页<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="">123</a></li>
<li><a href="">123</a></li>
<li><a href="">123</a></li>
</ul>
</li> </ul>
</div>

Bootstrap学习笔记(4)--导航栏的更多相关文章

  1. bootstrap学习笔记之导航条基础

    导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...

  2. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  3. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

  4. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  5. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  6. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  7. Bootstrap学习笔记(8)--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  8. Bootstrap 学习笔记 项目实战 响应式导航栏

    导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  9. Bootstrap 学习笔记13 附加导航插件

    附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...

  10. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

随机推荐

  1. FreeBSD与Linux十个本质上的区别

    Linux的标志是一只十分可爱的小企鹅,而FreeBSD的标志是一个拿着叉子的小恶魔.你是否经常会听到人们把 Linux及 BSD 系统混为一谈?是的,我有时会经常听到一些新手,甚至于媒体都这么说.当 ...

  2. 设置 IE 默认模式为 IE8

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

  3. 解决 vs2010问题 error MSB8008: 指定的平台工具集(v110)未安装或无效

    一次编译程序时.出现故障 >------ 已启动生成: 项目: PhotoStore, 配置: Debug Win32 ------ 1>生成启动时间为 2013-01-15 18:10: ...

  4. “建议127:Lock与synchronized是不一样的问题”实际验证

    近期又一次翻看    "编写高质量代码:改善Java程序的151个建议"  一书的时候看到"建议127"的文章中作者提供的測试用例存在一些值得商榷的地方. 在使 ...

  5. div浏览器兼容问题

    1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;} 2. 水平居中的问题 问题: 设置 text-align: center ie6- ...

  6. 排序算法及其java实现

    各种排序算法:冒择路(入)兮(稀)快归堆,桶式排序,基数排序 冒泡排序,选择排序,插入排序,稀尔排序,快速排序,归并排序,堆排序,桶式排序,基数排序 一.冒泡排序(BubbleSort) 1. 基本思 ...

  7. 解决tmux在PuTTY下工作异常的问题

    ubuntu 默认系统配置文件位置/usr/share/byobu/profiles/tmux 来自 PC通过PuTTY连接到VPS,在使用VPS上安装的tmux时遇到了一些小问题.主要是因为PuTT ...

  8. 2.4.1 用NPOI操作EXCEL关于HSSFClientAnchor(dx1,dy1,dx2,dy2,col1,row1,col2,row2)的参数

    NPOI教程:http://www.cnblogs.com/atao/archive/2009/11/15/1603528.html 之所有说NPOI强大,是因为常用的Excel操作她都可以通过编程的 ...

  9. ado.net 调用带参数的存储过程

    String connString = "Data Source = localhost; Initial Catalog = hkjc;User ID = sa;Pwd = 123&quo ...

  10. Tomcat中部署Java Web应用程序的方式

    Tomcat中部署Java Web应用程序的几种方式: #PetWeb是工程名 1.在TOMCAT_HOME\conf\server.xml文件的HOST节点中加入 <Context docBa ...