Bootstrap学习笔记(4)--导航栏
相关类:
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)--导航栏的更多相关文章
- bootstrap学习笔记之导航条基础
导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- Bootstrap学习笔记(8)--响应式导航栏
说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...
- Bootstrap 学习笔记 项目实战 响应式导航栏
导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- Bootstrap 学习笔记13 附加导航插件
附加导航代码: <style> a:focus { outline: none; } .nav-pills { width: 150px; } .nav-pills.affix { top ...
- Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记 概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
随机推荐
- IOS中WebView的使用
UIWebView是iOS sdk中一个最常用的控件.是内置的浏览器控件,我们可以用它来浏览网页.打开文档等等,UIWebView能够加载html/htm.pdf.docx.txt等格式的文件 系统 ...
- Android面试,View绘制流程以及invalidate()等相关方法分析
整个View树的绘图流程是在ViewRoot.java类的performTraversals()函数展开的,该函数做的执行过程可简单概况为 根据之前设置的状态,判断是否需要重新计算视图大小(measu ...
- [置顶] 自娱自乐1之Linux UDC驱动(形式模板)
首先,我不是做驱动的开发人员.所以只能用自娱自乐来表示我的行为. 我不知道udc和gadget驱动是不是冷门的驱动,资料真是不多.我之前买了一本书,上面说到这些,就教你如何调试已写好的驱动.这样也可以 ...
- (剑指Offer)面试题41:和为s的连续正数序列
题目: 输入一个正数s,打印出所有和为s的连续正数序列(至少含有两个数).例如输入15,由于1+2+3+4+5=4+5+6=7+8=15,所以结果打印出3个连续序列1-5,,4-6和7-8. 思路: ...
- (剑指Offer)面试题5:从尾到头打印链表
题目: 输入一个链表的头结点,从尾到头反过来打印每个结点的值. 链表结点定义: struct ListNode{ int value; ListNode* pNext; }; 思路: 1.改变链表结构 ...
- Java内存溢出的详细解决方案(转http://developer.51cto.com/art/200906/129346.htm)
一.内存溢出类型 1.java.lang.OutOfMemoryError: PermGen space JVM管理两种类型的内存,堆和非堆.堆是给开发人员用的上面说的就是,是在JVM启动时创建:非堆 ...
- 深入一点 让细节帮你和Fragment更熟络
有一段时间没有写博客了.作为2017年的第一篇,初衷起始于前段时间一个接触安卓开发还不算太长时间的朋友聊到的一个问题: "假设,想要对一个Fragment每次在隐藏/显示之间做状态切换时进行 ...
- MQTT---HiveMQ源代码具体解释(四)插件载入
源博客地址:http://blog.csdn.net/pipinet123 MQTT交流群:221405150 实现功能 将全部放在plugins文件夹下的全部符合plugin编写规范的plugin ...
- Java之深入JVM(6) - 字节码执行引擎(转)
本文为转载,来自 前面我们不止一次的提到,Java是一种跨平台的语言,为什么可以跨平台,因为我们编译的结果是中间代码—字节码,而不是机器码,那字节码在整个Java平台扮演着什么样的角色的呢?JDK1. ...
- Linux环境下GNU, GCC, G++编译器(转)
一,GNU GNU是“GNU 's Not Unix”的递归缩写, Stallman宣布GNU应当发音为Guh-NOO(革奴)以避免与new这个单词混淆(注:Gnu在英文中原意为非洲牛羚,发音与new ...