bootstrap49-Bootstrap 分割的按钮下拉菜单

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 分割的按钮下拉菜单</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<div class="btn-group">

<button class="btn btn-default">默认</button>

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

<span class="caret"></span>

<span class="sr-only">切换下拉菜单</span>

</button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">功能 1</a></li>

<li><a href="#">功能 2</a></li>

<li><a href="#">功能 3</a></li>

<li class="divider"></li>

<li><a href="#">功能 4</a></li>

</ul>

</div>

<div class="btn-group">

<button class="btn btn-primary">默认</button>

<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

<span class="caret"></span>

<span class="sr-only">切换下拉菜单</span>

</button>

<ul class="dropdown-menu" role="menu">

<li><a href="#">功能 1</a></li>

<li><a href="#">功能 2</a></li>

<li><a href="#">功能 3</a></li>

<li class="divider"></li>

<li><a href="#">功能 4</a></li>

</ul>

</div>

</div>

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

时间: 2024-10-12 18:12:28

bootstrap49-Bootstrap 分割的按钮下拉菜单的相关文章

bootstrap分割的按钮下拉菜单,按钮和下拉菜单不对齐问题

[背景] 最近在研究bootstrap,在实现分割的按钮下拉菜单时,遇到这样一个问题,按钮和下拉菜单不对齐.大小不一样,见下图: [解决方式] 需要加一句<!DOCTYPE html>,html加在<html>标签前面,jsp加在<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Bootstrap系列 -- 34. 按钮下拉菜单

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普通的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素.唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”. <div class="btn-group"> <button class=&quo

Bootstrap&lt;基础十四&gt; 按钮下拉菜单

使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单. 下面的实例演示了一个基本的简单的按钮下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的按钮下拉菜单&

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

一.下拉菜单 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"

Bootstrap中的各种下拉菜单

@*基本下拉菜单与按钮下拉菜单的样式完全一致.不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行.而按钮式下拉菜单<div class="btn-group">按钮组包裹,属于内联样式,不换行. 分割的按钮下拉菜单多了一个<button></button>作为默认选项,另一个button的内容是<span class="caret">. 而<li

按钮下拉菜单

按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单. 按钮下拉菜单其实就是普通的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素.唯一不同的是外部容器“div.dropdown”换成了“div.btn-group” <div class="btn-group"> <button class=&quo

bootstrap48-Bootstrap 按钮下拉菜单-原始

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 按钮下拉菜单-原始</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css&qu

Bootstrap &lt;基础十二&gt;下拉菜单(Dropdowns)

Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title> <li

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

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:下拉菜单插件方法的使用</title> <meta charset="utf-8" /> <meta name="v