bootstrap46-垂直的按钮组

<!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-vertical">

<button class="btn btn-default">Button1</button>

<button class="btn btn-default">Button2</button>

<div class="btn-group-vertical">

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

下拉

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

</button>

<ul class="dropdown-menu">

<li><a href="#">下拉链接 1</a></li>

<li><a href="#">下拉链接 2</a></li>

</ul>

</div>

</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-04 16:43:00

bootstrap46-垂直的按钮组的相关文章

Bootstrap按钮组嵌套、垂直排列、两端对齐

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

BootStrap 按钮组简单介绍

学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdown-menu 和属性 data-toggle="dropdown"; 1:基本按钮组,仅仅一个 btn-group 就 OK 了. 1 <span class="btn-group " > 2 <button class="btn btn-p

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&lt;基础十三&gt; 按钮组

原文:Bootstrap<基础十三> 按钮组 按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class: Class 描述 代码示例 .btn-group 该 class 用于形成基本的按钮组.在 .btn-group 中放置一系列带有 class .btn 的按钮. <

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上,当您想要把按钮对齐在一起时,使用按钮组就显得非常有用了. 下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class: Class 描述 代码示例 .btn-group 该 class 用于形成基本的按钮组.在 .btn-group 中放置一系列带有 class .btn 的按钮. <div class="btn-group"> <button type="button" class=&quo

Bootstrap入门（九）组件3：按钮组

先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link href="css/bootstrap.min.css" rel="stylesheet"> 1.按钮组 先在容器中创建一个class为 btn-group的div <div class='container'> <div class='btn-group'> ... </div&g

bootstrap中的按钮组

第一.基本的按钮组: <div class="btn-group"> <button type="button" class="btn btn-default">default按钮</button> <button type="button" class="btn btn-success"> success按钮</button> </div&

Bootstrap按钮组学习

简介 通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为. 按钮组中的工具提示和弹出框需要特别的设置 当为 .btn-group 中的元素应用工具提示或弹出框时,必须指定container: 'body' 选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角). 确保设置正确的 role 属性并提供一个 label 标签 为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组,需要提供一个合

Bootstrap组件之按钮组

.btn-group--设置div为按钮组: .btn-group-toolbar--设置div为按钮工具栏(须包裹按钮组): .btn-group-lg..btn-group-sm..btn-group-xs--改变按钮组的尺寸: .btn-group-vertivcal--设置按钮组垂直堆叠排列: .btn-group-justified--设置div包裹的按钮组充满父元素: <!DOCTYPE html> <html lang="en"> <head