菜单样式bootstrap!
2016-08-20 18:46
239 查看
因为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:leftcss样式。
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”类名
![](http://img.mukewang.com/53e466ac0001273008410307.jpg)
<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菜单、按钮及导航学习笔记5-15导航(基础样式)
- bootstrap菜单、按钮及导航学习笔记5-18导航(基础样式)
- bootstrap 样式的左侧菜单树
- bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
- Bootstrap树形菜单,就这么简单
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有)
- Bootstrap 辅助样式
- 黄页前台联动菜单修改时不能显示,要重新选择|没样式
- angularjs+bootstrap菜单的使用示例代码
- 在Asp.Net 2.0中使用Css Tab Design样式美化菜单
- Bootstrap 折叠(Collapse)插件制作侧边栏导航菜单
- 在Asp.Net 2.0中使用Css Tab Design样式美化菜单
- QTableWidget详解(样式、右键菜单、表头塌陷、多选等)
- 利用cookie实现侧滑菜单,在刷新以后依然保持原来的展开或者收缩样式
- 菜单的新样式:圆形菜单
- JQuery- 鼠标样式(二级菜单简易通俗版)
- bootstrap之scaffolding&tables样式
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
- BootStrap mvcpager分页样式(get请求,刷新页面)
- 全面解析Bootstrap表单使用方法(表单样式)