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

- Author -

GQ_cyan

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

Javascript 相关文章推荐

THREE.JS入门教程(3)着色器-下

Jan 24 Javascript

JS JSON对象转为字符串的简单实现方法

Nov 18 Javascript

JS求平均值的小例子

Nov 29 Javascript

Bootstrap table使用方法详细介绍

Dec 09 Javascript

bootstrap datetimepicker实现秒钟选择下拉框

Jan 05 Javascript

JavaScript实现两个select下拉框选项左移右移

Mar 09 Javascript

AngularJS中的拦截器实例详解

Apr 07 Javascript

vue配置多页面的实现方法

May 22 Javascript

vue.js图片转Base64上传图片并预览的实现方法

Aug 02 Javascript

Vue实现远程获取路由与页面刷新导致404错误的解决

Jan 31 Javascript

viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

Apr 01 jQuery

js实现随机点名功能

Dec 23 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