菜单样式bootstrap!
来源:互联网 发布:js当前时间加一小时 编辑:程序博客网 时间:2024/05/15 13:10
因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使http://write.blog.csdn.net/postedit?ref=toolbar用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
1.下拉菜单:
...dropdown 或者btn-group类名容器包裹了整个下拉菜单元素
...使用了一个<button>按钮做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,
且值必须和最外容器类名一致为dropdown。 data-toggle="dropdown"
...caret类名:改变容器div的类名: 下三角箭头(dropdown)上三角箭头(dropup)
...下拉菜单项使用一个ul列表,并且定义一个类名为“dropdown-menu”
2.<li>添加类名“divider”来实现添加下拉分隔线的功能
3.菜单标题:"dropdown-header"
4.菜单右对齐:“pull-right”或者“dropdown-menu-right”类名(默认左对齐)
同时一定要为.dropdown添加float:left
css样式。
5.悬浮状态 hover 和 焦点状态 focus。当前状态(.active)和禁用状态(.disabled)
1.按钮
类名为“btn-group”的容器,把多个按钮放到这个容器..btn-group”容器里的标签元素需要带有类名“.btn”
类名为"btn-toolbar"需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中
2.嵌套按钮分组
下拉菜单的“dropdown”的容器换成“btn-group”,并且和普通的按钮放在同一级。
3.等分按钮也常被称为是自适应分组按钮
在按钮组“btn-group”上追加一个“btn-group-justified”类名
<div class="btn-group" > <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul></div>4.按钮垂直分组
需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可
1.导航nav
实现方法就是为ul标签加入.nav 和(nav-tabs或nav-pills)(水平的导航)
.active和.disabled 可以使用:可以表示导航的一个li一直被选中和不能使用。
2.垂直导航
垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名
3.自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用
4.二级菜单
<ul>中的一个li。
<li class="<span style="color:#CC0000;">dropdown</span>"> <a href="##" class="<span style="color:#990000;">dropdown-toggle</span>" data-toggle="dropdown">教程<span class="caret"></span></a> <ul class="<span style="color:#CC0000;">dropdown-menu</span>"> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul> </li>5.面包屑(Breadcrumb)一般用于导航,主要是起的作用是告诉用户现在所处页面的位置(当前位置)
为ol加入breadcrumb类名
6.导航条
在制作一个基础导航条时,主要分以下几步:
第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”
第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”
7.菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑, 其通过“navbar-header”和“navbar-brand”来实现
<div class="<span style="color:#CC0000;">navbar-header</span>"> <a href="##" class="<span style="color:#CC0000;">navbar-brand</span>">慕课网</a> </div>8.导航条中会带有搜索表单form "navbar-form”
“navbar-left”让表单左浮动,更好实现对齐。还提供了“navbar-right”样式,让元素在导航条靠右对齐。
9.导航条中的按钮navbar-btn 导航条中的文本navbar-text 导航条中的普通链接navbar-link
10..navbar-fixed-top:导航条固定在浏览器窗口顶部
.navbar-fixed-bottom:导航条固定在浏览器窗口底部
11.响应式导航条(重点)在上篇写过了 这些文章都是基础,为了自己复习,学习!大家也可以看着学习
- 菜单样式bootstrap!
- bootstrap 样式的左侧菜单树
- Bootstrap样式
- bootstrap样式
- Bootstrap 菜单
- bootstrap菜单、按钮及导航学习笔记5-15导航(基础样式)
- bootstrap菜单、按钮及导航学习笔记5-18导航(基础样式)
- bootstrap之bootstrap&type样式
- bootstrap样式的整理
- bootstrap样式案例
- Bootstrap常用样式备忘
- bootstrap 之 CSS样式
- bootstrap分页样式
- bootstrap样式的引用
- Bootstrap select样式
- CI 分页 bootstrap样式
- bootstrap入门【表单样式】
- 全局样式 bootstrap
- 2186: [Sdoi2008]沙拉公主的困惑
- Linux下的动态链接库(DLL) - so文件
- 推理集 —— 特殊的空间
- 该博客MarkDown编辑器的使用方法
- html 图形绘制动画效果
- 菜单样式bootstrap!
- JSON 与 JavaScript
- Design Support Library 之 NavigationView
- 泛型
- linux 下动态链接实现原理
- 使用链表求一元多项式的和
- Java创建XML方法
- TODO
- windows下安装DUBBO-admin管控台