3.2Bootstrap学习组件篇之按钮组
2014-05-04 11:55
344 查看
按钮组
用按钮组把一组按钮放在同一行里。通过使用我们的按钮插件,可以设置为单选框或多选框样式及行为。
当为
基本案例:
把一系列的
代码段:
按钮工具栏
把一组
代码段:
尺寸
只要给
代码段:
嵌套
想要把下拉菜单混合到一系列按钮中,就把
代码段:
<h1 class="page-header">嵌套</h1>
<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 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>
</ul>
</div>预览:
让一组按钮竖直显示而不是水平显示。
代码段:
<h1 class="page-header">垂直排列</h1>
<div class="btn-group-vertical">
<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 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>
</ul>
</div>
让一组按钮拉长为相同的尺寸,适应父元素的宽度。对于按钮组中的按钮下拉菜单也同样适用。
这只适用
代码段:
<h1 class="page-header">两端对齐的链接排列</h1>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default" role="button">Link</a>
<a href="#" class="btn btn-default" role="button">Link</a>
<a href="#" class="btn btn-default" role="button">Link</a>
</div>预览:
把任何按钮放入
按钮下拉菜单需要你的版本的Bootstrap的下拉菜单插件。
单按钮下拉菜单
只要改变一些基本的标记,就能把按钮变成下拉菜单开关。
代码段:<h1 class="header">单按钮下拉菜单</h1>
<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="#">链接</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li class="divider"></li>
<li><a href="#">链接</a></li>
</ul>
</div>预览效果
相似地,分裂式按钮下拉菜单也需要同样的改变标记,但只要多一个分开的按钮。
代码段:
下拉菜单按钮适用所有尺寸的按钮。
代码段:
<h1 class="page-header">下拉菜单按钮适合所有尺寸的按钮</h1>
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" type="button">
Large button
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" type="button">
Small button
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" type="button">
Extra small button
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
</ul>
</div>预览:
给父元素添加
代码段:
<div class="btn-group dropup">
<button type="button" class="btn btn-default">向上弹出式按钮菜单</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
<li><a href="#">链接4</a></li>
</ul>
</div>预览:
用按钮组把一组按钮放在同一行里。通过使用我们的按钮插件,可以设置为单选框或多选框样式及行为。
按钮组中的工具提示和弹出框需要特别的设置
当为.btn-group中的元素应用工具提示或弹出框时,必须指定
container: 'body'选项,这样可以避免不必要的副作用(例如工具提示或弹出框触发时,会让页面元素变宽和/或失去圆角)。(这个是毛线?)
基本案例:
把一系列的
.btn按钮放入
.btn-group。
代码段:
<div class="btn-group"> <button type="button" class="btn btn-default">left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> </div>预览:
按钮工具栏
把一组
<div class="btn-group">组合进一个
<div class="btn-toolbar">做成更复杂的组件。
代码段:
<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>预览效果:
尺寸
只要给
.btn-group加上
.btn-group-*,而不是给组中每个按钮都应用大小类。
代码段:
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default">按钮</button> <button type="button" class="btn btn-default">按钮</button> <button type="button" class="btn btn-default">按钮</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">按钮</button> <button type="button" class="btn btn-default">按钮</button> <button type="button" class="btn btn-default">按钮</button> </div> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-default">按钮</button> <button type="button" class="btn btn-default">按钮</button> <button type="button" class="btn btn-default">按钮</button> </div> <div class="btn-group btn-group-xs"> <button type="button" class="btn btn-default">按钮</button> <button type="button" class="btn btn-default">按钮</button> <button type="button" class="btn btn-default">按钮</button> </div>预览效果:
嵌套
想要把下拉菜单混合到一系列按钮中,就把
.btn-group放入另一个
.btn-group中。
代码段:
<h1 class="page-header">嵌套</h1>
<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 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>
</ul>
</div>预览:
垂直排列
让一组按钮竖直显示而不是水平显示。代码段:
<h1 class="page-header">垂直排列</h1>
<div class="btn-group-vertical">
<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 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>
</ul>
</div>
两端对齐的链接排列
让一组按钮拉长为相同的尺寸,适应父元素的宽度。对于按钮组中的按钮下拉菜单也同样适用。
特定元素的用法
这只适用 <a>元素,因为
<button>元素不能应用这些样式并将其所包含的内容两端对齐(就像
display: table-cell;之类的表现形式)。
代码段:
<h1 class="page-header">两端对齐的链接排列</h1>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default" role="button">Link</a>
<a href="#" class="btn btn-default" role="button">Link</a>
<a href="#" class="btn btn-default" role="button">Link</a>
</div>预览:
按钮式下拉菜单
把任何按钮放入.btn-group然后加入正确的菜单标记,就可以做成下拉菜单触发器。
插件需求
按钮下拉菜单需要你的版本的Bootstrap的下拉菜单插件。单按钮下拉菜单
只要改变一些基本的标记,就能把按钮变成下拉菜单开关。
代码段:<h1 class="header">单按钮下拉菜单</h1>
<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="#">链接</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li class="divider"></li>
<li><a href="#">链接</a></li>
</ul>
</div>预览效果
分裂式按钮下拉菜单
相似地,分裂式按钮下拉菜单也需要同样的改变标记,但只要多一个分开的按钮。代码段:
<h1 class="page-header">分列式按钮下拉菜单</h1> <div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> <li class="divider"></li> <li><a href="#">Action</a></li> </ul> </div>预览:
尺寸
下拉菜单按钮适用所有尺寸的按钮。代码段:
<h1 class="page-header">下拉菜单按钮适合所有尺寸的按钮</h1>
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" type="button">
Large button
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" type="button">
Small button
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" type="button">
Extra small button
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
</ul>
</div>预览:
向上弹出式菜单
给父元素添加.dropup就能使触发的下拉菜单在元素上方。
代码段:
<div class="btn-group dropup">
<button type="button" class="btn btn-default">向上弹出式按钮菜单</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
<li><a href="#">链接4</a></li>
</ul>
</div>预览:
相关文章推荐
- 学习u3d笔记(一) OnGui实现动态创建cube组件 并按钮控制cube旋转 停止 销毁
- Bootstrap学习总结笔记(8)-- 基本组件之按钮组
- Bootstrap组件学习笔记(二)——按钮组和输入框组
- [学习笔记] bootstrap (四) : 布局组件1(下拉,按钮组[toolbar],上拉)
- extjs学习笔记----按钮和日期组件
- JAVA学习Swing章节按钮组件JButton的简单学习
- JAVA学习Swing章节按钮组件JButton的简单学习
- 18. JAVA 图形界面 Part 2(JTextComponent、事件处理、单选按钮、复选框、列表框、下拉列表框、菜单组件、文件选择) ----- 学习笔记
- Bootstarp学习教程(10) 按钮组组件
- Java学习笔记(AWT组件 之 按钮)
- SWING组件学习5:单选按钮
- SWING组件学习2:按钮
- JAVA学习Swing章节按钮组件JButton的简单学习
- Metro UI CSS 学习笔记之组件(进度条、按钮组和评分)
- SWING组件学习3:图片以及创建一个带有图片的按钮
- SWING组件学习4:复选按钮
- BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
- Bootstrap基本组件学习笔记之按钮组(8)
- bootstrap的less源码学习之button组件控制
- Extjs学习总结之16组件component