Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例


Posted in Javascript onMay 25, 2017

本文实例讲述了Bootstrap组件之下拉菜单,多级菜单及按钮布局方法。分享给大家供大家参考,具体如下:

下拉菜单

菜单: ,dropdown(.dropup改变这个是上显示)   data-toggle="dropdown" (激活文本处)      .dropdown-menu   .pull-left   .pull-right
按钮组:.btn-group(各种类为btn的标签集合)    .btn-toolbar(按钮导航条)  .btn-group-vertical   .btn-mini  .btn-small   .btn-large   .nav-pills(胶囊样式)
导航:  .nav   .nav-tabs  .pull-right   .disabled     .nav-stacked(堆叠)  .nav-list     data-toggle="tab"    .tabbable(容器)   .tabs-left (right  , below)   .tab-content

注意: .dropdown-submenu(多级导航中,可能bootstrap中没有)自行添加:

<style type="text/css">
  .dropdown-submenu {
   position: relative;
  }
  .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: 100%;
   margin-top: -6px;
   margin-left: -1px;
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px;
   border-radius: 0 6px 6px 6px;
  }
  .dropdown-submenu:hover > .dropdown-menu {
   display: block;
  }
  .dropdown-submenu > a:after {
   display: block;
   content: " ";
   float: right;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
   border-width: 5px 0 5px 5px;
   border-left-color: #ccc;
   margin-top: 5px;
   margin-right: -10px;
  }
  .dropdown-submenu:hover > a:after {
   border-left-color: #fff;
  }
  .dropdown-submenu.pull-left {
   float: none;
  }
  .dropdown-submenu.pull-left > .dropdown-menu {
   left: -100%;
   margin-left: 10px;
   -webkit-border-radius: 6px 0 6px 6px;
   -moz-border-radius: 6px 0 6px 6px;
   border-radius: 6px 0 6px 6px;
  }
</style>

添加这段css即可使.dropdown-submenu有效

实现菜单样式:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="bootstrap-3.3.6/js/jquery.cyan1.js"></script>
<script type="text/javascript" src="bootstrap-3.3.6/js/dropdown.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.6/dist/css/bootstrap.min.css" rel="external nofollow" />
 <style type="text/css">
  .dropdown-submenu {
   position: relative;
  }
  .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: 100%;
   margin-top: -6px;
   margin-left: -1px;
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px;
   border-radius: 0 6px 6px 6px;
  }
  .dropdown-submenu:hover > .dropdown-menu {
   display: block;
  }
  .dropdown-submenu > a:after {
   display: block;
   content: " ";
   float: right;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
   border-width: 5px 0 5px 5px;
   border-left-color: #ccc;
   margin-top: 5px;
   margin-right: -10px;
  }
  .dropdown-submenu:hover > a:after {
   border-left-color: #fff;
  }
  .dropdown-submenu.pull-left {
   float: none;
  }
  .dropdown-submenu.pull-left > .dropdown-menu {
   left: -100%;
   margin-left: 10px;
   -webkit-border-radius: 6px 0 6px 6px;
   -moz-border-radius: 6px 0 6px 6px;
   border-radius: 6px 0 6px 6px;
  }
 </style>
</head>
<body>
<ul class="nav nav-pills">
<li class="dropdown">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-large" data-toggle="dropdown">cyan111<i class="caret"></i></a>
 <ul class="dropdown-menu">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao1</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao2</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao3</a></li>
 </ul>
</li>
<li class="dropdown">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-large" data-toggle="dropdown">cyan222<i class="caret"></i></a>
 <ul class="dropdown-menu">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >gao1</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >gao2</a></li>
  <li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >gao3</a>
    <ul class="dropdown-menu pull-right">
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao1</a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao2</a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qiao3</a></li>
    </ul>
  </li>
 </ul>
</li>
</ul>
<div class="dropup">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-large" data-toggle="dropdown">cyan333<i class="caret"></i></a>
 <ul class="dropdown-menu">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >chao1</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >chao2</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >chao3</a></li>
 </ul>
</div>
</body>
</html>

结果:

Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例

Javascript 相关文章推荐
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
vue实现购物车结算功能
Jun 18 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 #Javascript
Angular 2.x学习教程之结构指令详解
May 25 #Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 #Javascript
js获取一组日期中最近连续的天数
May 25 #Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 #Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 #Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
node中Express 动态设置端口的方法
2017/08/04 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python深入学习之内存管理
2014/08/31 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python异常处理知识点总结
2019/02/18 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
最新pycharm安装教程
2020/11/18 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
html5 标签
2009/07/16 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
标准导师推荐信(医学类)
2013/10/28 职场文书
打架检讨书400字
2014/01/17 职场文书
开业庆典策划方案
2014/02/18 职场文书
运动会方队口号
2014/06/07 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
警用民用对讲机找不同
2022/02/18 无线电