文章标题
2015-12-23 19:28
585 查看
欢迎收看大奥编写的Bootstrap快速学习笔记(4)菜单按钮及导航
本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦:下拉菜单
按钮
导航
详细介绍
下拉菜单基本用法:首先设置一个外围div标签有dropdown类<div class="dropdown">,其次设置一个button元素,<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单,然后是一个向下箭头的icon图标<span class="caret">,至此button标签结束,接下来是一个无序列表,<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">,之后是各个下拉选项,用li标签实现,<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>;其他功能:下拉分隔线,通过添加一个带有divider类的li元素来实现,<li role="presentation" class="divider"></li>;菜单标题,通过添加一个带有dropdown-header类的li元素来实现,<li role="presentation" class="dropdown-header">第一部分菜单头部</li>;对齐方式,如果想让下拉菜单与父容器的右边框对齐,则在ul元素上追加类pull-right或dropdown-menu-right;菜单项状态,分为active状态,需要在li元素上添加类class="active",disabled状态,需要在li元素上添加类class="disabled",以及悬浮和焦点状态,这是已经设置好的
按钮
按钮组:通过设置一个btn-group容器来实现,<div class="btn-group">,然后将多个按钮添加在容器当中;按钮工具栏:通过将多个按钮组放置在同一个大容器里来实现,<div class="btn-toolbar">;按钮组大小:通过在按钮组btn-group后面追加类名来实现,btn-group-lg btn-group-sm btn-group-xs;导航菜单:通过组合按钮组和下拉菜单实现,使用时,只需要把原来设置下拉菜单的div容器的类名由dropdown改为btn-group并和其他按钮放在同一级就行了;按钮组垂直显示:只需要把原来按钮组的类名由btn-group改为btn-group-vertical;
导航 “
注意:知识的积累是一个漫长的过程,请继续关注后续内容。
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- Bootstrap每天必学之前端开发框架
- 基于Bootstrap的网页设计实例
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- 全面解析Bootstrap手风琴效果
- JS组件Bootstrap Table表格行拖拽效果实现代码
- Bootstrap每天必学之按钮
- 全面解析Bootstrap弹窗的实现方法
- Bootstrap每天必学之js插件
- 全系IE支持Bootstrap的解决方法
- Bootstrap轮播加上css3动画,炫酷到底!
- Bootstrap每天必学之标签与徽章
- 详解基于Bootstrap扁平化的后台框架Ace
- Bootstrap每天必学之表单
- Bootstrap每天必学之面板
- 全面解析Bootstrap排版使用方法(文字样式)
- Bootstrap每天必学之按钮(一)
- BootStrap实现带有增删改查功能的表格(DEMO详解)