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

一、下拉菜单

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)_下拉菜单&按钮组的更多相关文章

⑧bootstrap组件文字图片下拉菜单按钮组使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Bootstrap 学习笔记8 下拉菜单滚动监听
代码部分: <nav class="navbar navbar-default"> <a href="#" class="navba ...
Bootstrap <基础十二>下拉菜单（Dropdowns）
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下列菜单,只需要在 ...
ios学习--iphone 实现下拉菜单
原文地址:ios学习--iphone 实现下拉菜单作者:sdglyuan00 #import @interface DropDown1 : UIView <</span>UITabl ...
Bootstrap历练实例：下拉菜单插件方法的使用
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
Bootstrap 字体图标、下拉菜单、按钮组
Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...
Bootstrap中的各种下拉菜单
@*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div cl ...
bootstrap和JS实现下拉菜单
// bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...
Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
详情请查看http://aehyok.com/Blog/Detail/16.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

随机推荐

[iOS]多线程和GCD
新博客wossoneri.com 进程和线程进程是指在系统中正在运行的一个应用程序. 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内. 比如同时打开QQ.Xcode,系统就会分别 ...
udev和devfs的区别
devfs(设备文件系统)是由Linux2.4内核引入的,它的出现主要使得设备驱动程序能够自主管理自己的设备文件.具体来说,devfs具有如下优点: 可以通过程序在设备初始化时在/dev目录下创建设备 ...
npm install node-sass 本地安装失败
$ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taob ...
Django应用：学习日志网站
目录一.创建虚拟环境(Windows) 二.创建项目三.创建应用程序四.创建网页:学习笔记主页五.创建其他网页六.用户输入数据七.用户账户八.让用户拥有自己的数据九.设置应用程序样式 ...
C语言四舍五入
//今天遇到了四舍五入的问题,这些问题如果不看别人的真的难想出这么巧妙的方法啊.努力积累,早日成为大佬. int i = (int)(a + 0.5) ////小数部分大于0.4,加上0.5就会超过整 ...
Mysql基础之基础知识解释
Mysql基础知识 RDBMS:关系型数据库管理系统.是将数据组织成相关的行和列的系统存储过程:是存储在数据库中的一段声明性语句.触发器.java.php等都可以调用其存储过程.早期的mysql版本 ...
初探boost之timer库学习笔记
timer 使用方法 #include <boost/timer.hpp> #include <iostream> using namespace std; usi ...
lij IDEA项目包分层结构显示设置
使用Intellij IDEA创建项目发现包没有分层,使用不方便. 可以点击右上角的设置,把红框选项的√去掉即可. 就会分层显示了,这就很舒服了.
NOIP 2000 进制转换
题目描述我们可以用这样的方式来表示一个十进制数: 将每个阿拉伯数字乘以一个以该数字所处位置的(值减1)为指数,以10为底数的幂之和的形式.例如:123可表示为 1\times 10^2+2\time ...
chm文件转换成html文件，解决chm文件无法使用浏览器打开的问题
每天学习一点点编程PDF电子书免费下载: http://www.shitanlife.com/code CHM是英语“Compiled Help Manual”的简写,即“已编译的帮助文件”.CHM ...