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 ...
随机推荐
- 几个很实用的BOM属性对象方法
location对象 location.href-- 返回或设置当前文档的URLlocation.search -- 返回URL中的查询字符串部分.例如 http://www.dreamdu.com/ ...
- (剑指Offer)面试题11:数值的整数次方
题目: 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 思路: 看题目似乎很简单,循环相乘不就行了吗?不是的. 需要考虑几个问题: 1. ...
- Log4j配置文件例子
Log4j配置文件例子: # Define somedefault values that can be overridden by system properties hbase.root.logg ...
- ScheduledThreadPoolExecutor的scheduleAtFixedRate方法探究
ScheduledThreadPoolExecutor除了具有ThreadPoolExecutor的所有功能外,还可以延迟执行任务或者周期性的执 行某个任务.scheduleWithFixedDela ...
- 算法笔记_133:最大连续乘积子数组(Java)
目录 1 问题描述 2 解决方案 2.1 蛮力法 2.2 动态规划法 1 问题描述 给定一个浮点数组,任意取出数组中的若干个连续的数相乘,请找出其中乘积最大的子数组. 2 解决方案 2.1 蛮力法 ...
- gre tunnel搭建
应用场景: 客户端(client)与服务器A在同一个运营商网络,应用部署在服务器B,服务器A .B之间建立tunnel,A设置dnat,client通过访问A的8000端口来访问服务器B,B返回的响应 ...
- alitomcat maven以及Autoconfig
maven概述 Maven的核心是POM(Project Object Model),即项目对象模型.最直观的,maven对项目依赖进行统一的管理,让开发者从纷杂错乱的jar包世界摆脱出来,更加专注于 ...
- js 不固定传参
js 不固定传参 CreationTime--2018年7月2日15点18分 Author:Marydon /** * 声明一个函数 * @explain 传参个数不确定 */ function ...
- 干货首发,能够清理,带动画的自己定义控件CuteEditText
转载请注明出处:王亟亟的大牛之路 总想创造个什么,可是又不知道要详细做什么. 那么仅仅有丛一直用的那些东西上面開始创造,哈哈.然后再摸索的过程中进步吧. 先上一下效果: 这样的带删除button的形式 ...
- 17-spring学习-AOP初步实现
AOP是面向方面的编程,在实际开发中,AOP都会工作在业务层,因为业务层要调用数据层,而业务层也要完成所有辅助性的业务层操作. 范例:定义业务层操作接口: package com.Spring.Ser ...