Home > Article > Web Front-end > Detailed example of Bootstrap button group
Detailed example of Bootstrap button group
- 零下一度Original
- 2017-07-03 11:40:291469browse
Previous words
The use of a single button in a Web page sometimes does not meet our business needs. We often see multiple buttons used together, such as a button in a rich text editor. Set of small icon buttons and more. This article will introduce the Bootstrap button group in detail
How to use
The button group, like the drop-down menu component, needs to rely on the button.js plug-in to run properly. However, we can also directly call only the bootstrap.js file. Because this file has integrated button.js plug-in function
Similarly, because Bootstrap’s component interaction effects all rely on plug-ins written by the jQuery library, jquery.js must be loaded before using bootstrap.js Only then will the effect be produced
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11" rel="stylesheet"></head><body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></script></body></html>
Basic usage
The button group structure is very simple. Use a container named "btn-group" and put multiple buttons into this container
In order to convey the correct grouping of buttons to screen reader users, you need to provide an appropriate role Attributes. For button groups, it should be role="group", for toolbar (toolbar) it should be role="toolbar"
In addition, button groups and toolbars An explicit label should be given, as most assistive technologies will not read them correctly despite setting the correct role attributes. You can use aria-label or aria-labelledby
In addition to the <button> element, you can also use other label elements, such as the label. The only thing to ensure is that no matter what tag is used, the tag element in the ".btn-group" container needs to have the class name ".btn"
<div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button></div>
Button Toolbar
In the rich text editor, group button groups together, such as copy, cut and paste a group; left-aligned, middle-aligned, Align right and align one group. The Bootstrap framework button toolbar also provides such a production method. You only need to place the button group "btn-group" in a large container "btn-toolbar" by group
<div class="btn-toolbar"> <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button> </div> <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button> </div> <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button> </div> <div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button> </div></div>
Button size
In the blog post introducing form buttons, we know that buttons are divided into three categories: btn-lg, btn-sm and btn-xs name to adjust the padding, font-size, line-height and border-radius property values to change the button size. Then we can also use a similar method to determine the size of the button group:
☑ .btn-group-lg: Large button group
☑ .btn-group-sm: Small button group
☑ .btn-group-xs: Ultra-small button group
Just append the corresponding class name to the ".btn-group" class name to get button groups of different sizes
<div class="btn-group btn-group-lg"> <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">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 btn-group-sm"> <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 btn-group-xs"> <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>
Nested Grouping
Many times, we often arrange drop-down menus and ordinary button groups in Together, we achieve an effect similar to a navigation menu. When using it, you only need to change the "dropdown" container of the original drop-down menu to "btn-group" and put it at the same level as the ordinary button
<div class="btn-group"> <button class="btn btn-default" type="button">首页</button> <button class="btn btn-default" type="button">产品展示</button> <button class="btn btn-default" type="button">案例分析</button> <button class="btn btn-default" type="button">联系我们</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们 <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><a href="##">客服服务</a></li></ul> </div></div>
Vertical arrangement
By default, button groups are displayed horizontally. But in actual application, you will always encounter the effect of vertical display. This style is also provided in the Bootstrap framework. Just change the "btn-group" class name of the horizontal grouping to "btn-group-vertical"
<div class="btn-group-vertical"> <button class="btn btn-default" type="button">首页</button> <button class="btn btn-default" type="button">产品展示</button> <button class="btn btn-default" type="button">案例分析</button> <button class="btn btn-default" type="button">联系我们</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<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><a href="##">客服服务</a></li></ul> </div></div>
Equally divided button
The effect of the equal divided button is particularly practical on the mobile terminal. The entire button group width is 100% of the container, and each button in the button group divides the entire container width equally. For example, if there are five buttons in the button group, then each button is 20% wide, if there are four buttons, then each button is 25% wide, and so on. Equally divided buttons are also common. It is called an adaptive group button, and its implementation method is also very simple. You only need to append a "btn-group-justified" class name to the button group "btn-group"
. The implementation principle is very simple. Simulate "btn-group-justified" as a table (display:table), and simulate the buttons inside as table cells (display:table-cell)
[Note] When making equal button groups , try to use the tag element to make buttons, because when using the <button> tag element, using display:table is not friendly in some browsers.
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}.btn-group-justified > .btn-group .btn {
width: 100%;
}
<div class="btn-group btn-group-justified"><a class="btn btn-default" href="#">首页</a><a class="btn btn-default" href="#">产品展示</a><a class="btn btn-default" href="#">案例分析</a><a class="btn btn-default" href="#">联系我们</a></div>
为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。因为大部分的浏览器不能将CSS 应用到对齐的 <button> 元素上，但是，可以用按钮式下拉菜单来解决这个问题
<div class="btn-group btn-group-justified"><div class="btn-group" role="group"><button class="btn btn-default" >首页</button></div> <div class="btn-group" role="group"><button class="btn btn-default" >产品展示</button></div> <div class="btn-group" role="group"><button class="btn btn-default" >案例分析</button></div> <div class="btn-group" role="group"><button class="btn btn-default" >联系我们</button></div> </div>
The above is the detailed content of Detailed example of Bootstrap button group. For more information, please follow other related articles on the PHP Chinese website!