正文

BootStrap学习(2)_下拉菜单&按钮组

IP云
IP云V管理员/5 阅读
06/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、下拉菜单

1.基本下拉菜单

如需使用下列菜单，只需要在class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle"
data-toggle="dropdown">
二手家电
<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 class="divider"></li>
<li>
<a href="#">热水器</a>
</li>
</ul>
</div>
</body>
</html>

效果图:

2.标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle"
data-toggle="dropdown">
58二手市场
<span class="caret"></span>
</button>
<ul class="dropdown-menu" >
<li class="dropdown-header">二手电器(下拉菜单标题)</li>
<li>
<a href="#">冰箱</a>
</li>
<li>
<a href="#">洗衣机</a>
</li>
<li>
<a href="#">
电视
</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">二手家私(下拉菜单标题)</li>
<li>
<a href="#">沙发</a>
</li>
<li>
<a href="#">电脑桌</a>
</li>
<li>
<a href="#">床</a>
</li>
</ul>
</div>
</body>
</html>

效果图:

二、按钮组

按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。

下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：

1.基本的按钮组

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
</body>
</html>

效果:

2.按钮工具栏

class .btn-toolbar 的使用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head>
<body>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-default">按钮 9</button>
</div>
</div>
</body>
</html>

效果:

3.嵌套

在一个 .btn-group 内嵌套另一个 .btn-group 。当您向让下拉菜单与一系列按钮组合使用时，就会用到这个。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head>
<body> <div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
二手家电
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">冰箱</a></li>
<li><a href="#">洗衣机</a></li>
</ul>
</div>
</div>
</body>
</html>

效果:

4.垂直的按钮组

class .btn-group-vertical 的使用

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head>
<body> <div class="btn-group-vertical">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
二手家电
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">冰箱</a></li>
<li><a href="#">洗衣机</a></li>
</ul>
</div>
</div>
</body>
</html>

效果:

5.分割的按钮下拉菜单

分割的按钮下拉菜单使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了原始的功能。分割按钮的左边是原始的功能，右边是显示下拉菜单的切换。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head>
<body> <div class="btn-group">
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能1</a></li>
<li><a href="#">功能2</a></li>
<li><a href="#">其他功能</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">原始</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能1</a></li>
<li><a href="#">功能2</a></li>
<li><a href="#">其他功能</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div></body>
</html>

效果:

6.按钮上拉菜单

菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head>
<body style="margin-top:200px;"> <div class="btn-group">
<button type="button" class="btn btn-default">默认</button>
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能1</a></li>
<li><a href="#">功能2</a></li>
<li><a href="#">其他功能</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">原始</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">功能1</a></li>
<li><a href="#">功能2</a></li>
<li><a href="#">其他功能</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div></body>
</html>

效果:

BootStrap学习(2)_下拉菜单&按钮组的更多相关文章

  1. ⑧bootstrap组件 文字图片 下拉菜单 按钮组 使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Bootstrap 学习笔记8 下拉菜单滚动监听

    代码部分: <nav class="navbar navbar-default"> <a href="#" class="navba ...

  3. Bootstrap &lt&semi;基础十二&gt&semi;下拉菜单（Dropdowns）

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

  4. ios学习--iphone 实现下拉菜单

    原文地址:ios学习--iphone 实现下拉菜单作者:sdglyuan00 #import @interface DropDown1 : UIView <</span>UITabl ...

  5. Bootstrap历练实例：下拉菜单插件方法的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  7. Bootstrap中的各种下拉菜单

    @*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...

  8. bootstrap和JS实现下拉菜单

    // bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...

  9. Bootstrap3&period;0学习第十轮&lpar;下拉菜单、按钮组、按钮式下拉菜单&rpar;

    详情请查看http://aehyok.com/Blog/Detail/16.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

随机推荐

  1. &lbrack;LintCode&rsqb; Add and Search Word 添加和查找单词

    Design a data structure that supports the following two operations: addWord(word) and search(word) s ...

  2. &lpar;3&rpar;Spring定时任务的几种实现

    Spring定时任务的几种实现 近日项目开发中需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息,借此机会整理了一下定时任务的几种实现方式,由于项目采用spring框架,所以我都将 ...

  3. siege安装和使用

    siege(支持http.https).多url. 下载地址:http://www.joedog.org/index/siege-home Cent os系统: 1)./configure 2)mak ...

  4. cpanel 定时运行sh&sol;php

    php -q /home/用户/public_html/cron.php                   -------------------php格式 /home/用户/public_html ...

  5. python中的turtle库绘制图形

    1. 前奏: 在用turtle绘制图形时,需要安装对应python的解释器以及IDE,我安装的是pycharm,在安装完pycharm后,在pycharm安装相应库的模块,绘图可以引入turtle模块 ...

  6. retry

    async function retryGetItem( oriFun) { var operation = retry.operation(); operation.attempt(function ...

  7. Python从菜鸟到高手（3）：声明变量

    变量(variable)是Python语言中一个非常重要的概念.变量的主要作用就是为Python程序中的某个值起一个名字.类似于"张三"."李四"." ...

  8. 使用脚本与orm模型交互对数据库操作

    场景:如不想启动服务在框架中查看数据库数据,同时使用ORM框架对数据库操作带来的好处 import os import sys #将脚本所在的工程添加到环境变量 sys.path.append('.. ...

  9. &lbrack;UE4&rsqb;装饰器：Blackboard（装饰器的一种，不是黑板）

    装饰器Blackboard可以检查黑板的值是否满足期望的条件: 添加“Blackboard装饰器”:在组合或者任务节点上右键“添加装饰器...”,跟普通装饰器一样. Notify Observer:通 ...

  10. 写文章 TEE技术分析【转】

    转自:https://zhuanlan.zhihu.com/p/24222064 首先介绍一下TEE的主要关键技术: 1．安全启动(Secure Boot) 安全启动技术可以用于需要防止篡改系统镜像, ...