首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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组件之下拉菜单,多级菜单及按钮布局方法实例

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

- Author -

GQ_cyan

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Json和Jsonp理论实例代码详解
Nov 15 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
jquery常用操作小结
Jul 21 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
js评分组件使用详解
Jun 06 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
详解 TypeScript 枚举类型
Nov 02 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
http_stub_status_module(1) BufferPool(1) 缓存机制(1) zabbix(9) location(2) RTMP(1) keeplive_timeout(1) TypeScript(2) 复合索引(1) text-shadow(1)
You might like
评分9.0以上的动画电影，剧情除了经典还很燃
2020/03/04 日漫
中国第一家无线电行
2021/03/01 无线电
PHPMailer 中文使用说明小结
2010/01/22 PHP
php实现读取超大文件的方法
2014/07/28 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
Centos7 中 Node.js安装简单方法
2016/11/02 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
重命名批处理python脚本
2013/04/05 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
不要用强制方法杀掉python线程
2017/02/26 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
营销与策划应届生求职信
2013/11/04 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
学生会主席任命书
2015/09/21 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS