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 ...
随机推荐
- 9个实用的Javascript代码高亮脚本
代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目 ...
- 线程本地存储TLS(Thread Local Storage)的原理和实现——分类和原理
本文为线程本地存储TLS系列之分类和原理. 一.TLS简述和分类 我们知道在一个进程中,所有线程是共享同一个地址空间的.所以,如果一个变量是全局的或者是静态的,那么所有线程访问的是同一份,如果某一个线 ...
- Centos7 安装pycharm
可以通过浏览器访问http://www.jetbrains.com/pycharm/,选择需要下载的版本,也可以通过wget下载可执行程序. [root@localhost ~] wget https ...
- uva 10518 - How Many Calls?(矩阵快速幂)
题目链接:uva 10518 - How Many Calls? 公式f(n) = 2 * F(n) - 1, F(n)用矩阵快速幂求. #include <stdio.h> #inclu ...
- Thinkphp学习笔记1-URL模式
PATHINFO模式 PATHINFO模式是系统的默认URL模式,提供了最好的SEO支持,系统内部已经做了环境的兼容处理,所以能够支持大多数的主机环境.对应上面的URL模式,PATHINFO模式下面的 ...
- win10 当前操作环境不支持支付宝控件 完美解决办法
第一步,修改系统配置 在运行中输入“gpedit.msc”打开本地组策略编辑器: 打运行窗口的方法是:按win键+R (按下win键再按R键之后 同时松开) win键 即windows 的微标键 如 ...
- static对象
1.static对象包括: global对象 namespace作用域下的对象 在class,function,file作用域内的static对象 2.在方法内的static对象成为 local st ...
- [OpenGL红宝书]第一章 OpenGL概述
第一章 OpenGL概述 标签(空格分隔): OpenGL 第一章 OpenGL概述 1 什么是OpenGL 2 初识OpenGL程序 3 OpenGL语法 4 OpenGL渲染管线 41 准备向Op ...
- T-SQL 之 运行时生成语句
一.用EXECUTE执行动态命令 EXECUTE命令可以执行存储过程.函数和动态的字符串命令.注意此语句的作用正如前面在介绍批处理时,如果批中的第一条语句是"EXECUTE Proc_nam ...
- CAS中的ABA问题
http://coolshell.cn/articles/8239.html CAS的ABA问题 所谓ABA(见维基百科的ABA词条),问题基本是这个样子: 进程P1在共享变量中读到值为A P1被抢占 ...