Button groups allow multiple buttons to be stacked on the same line . When you want to align the buttons , This is very useful . You can go through Bootstrap Button （Button） plug-in unit Add optional JavaScript Radio box and check box style behavior .
The following table summarizes Bootstrap Provides some important... For using button groups class：
| Class | describe | Code example |
|---|---|---|
| .btn-group | The class Used to form basic button groups . stay .btn-group A series with class .btn The button . | <div class="btn-group"> |
| .btn-toolbar | The class It helps to put several groups <div class="btn-group"> Combine into one <div class="btn-toolbar"> in , Generally get more complex components . | <div class="btn-toolbar" role="toolbar"> |
| .btn-group-lg, .btn-group-sm, .btn-group-xs | these class Resizing that can be applied to the entire button group , Instead of having to resize each button . | <div class="btn-group btn-group-lg">...</div> |
| .btn-group-vertical | The class Let a group of buttons stack vertically , Instead of stacking horizontally . | <div class="btn-group-vertical"> |
Basic button groups
The following example demonstrates the class .btn-group Use ：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap example - Basic button groups </title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="btn-group">
<button type="button" class="btn btn-default"> Button 1</button>
<button type="button" class="btn btn-default"> Button 2</button>
<button type="button" class="btn btn-default"> Button 3</button>
</div> </body>
</html>
The results are shown below ：
Button toolbar
The following example demonstrates the class .btn-toolbar Use ：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap example - Button toolbar </title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default"> Button 1</button>
<button type="button" class="btn btn-default"> Button 2</button>
<button type="button" class="btn btn-default"> Button 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default"> Button 4</button>
<button type="button" class="btn btn-default"> Button 5</button>
<button type="button" class="btn btn-default"> Button 6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default"> Button 7</button>
<button type="button" class="btn btn-default"> Button 8</button>
<button type="button" class="btn btn-default"> Button 9</button>
</div>
</div> </body>
</html>
The results are shown below ：
Size of button
The following example demonstrates the class .btn-group-* Use ：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap example - The size of the button group </title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default"> Button 1</button>
<button type="button" class="btn btn-default"> Button 2</button>
<button type="button" class="btn btn-default"> Button 3</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default"> Button 4</button>
<button type="button" class="btn btn-default"> Button 5</button>
<button type="button" class="btn btn-default"> Button 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default"> Button 7</button>
<button type="button" class="btn btn-default"> Button 8</button>
<button type="button" class="btn btn-default"> Button 9</button>
</div> </body>
</html>
The results are shown below ：
nesting
You can embed another button group in one button group , namely , In a .btn-group Insert another .btn-group . When you combine a drop-down menu with a series of buttons , You'll use this .
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap example - Nested button groups </title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="btn-group">
<button type="button" class="btn btn-default"> Button 1</button>
<button type="button" class="btn btn-default"> Button 2</button> <div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
The following
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#"> Drop down link 1</a></li>
<li><a href="#"> Drop down link 2</a></li>
</ul>
</div>
</div> </body>
</html>
The results are shown below ：
Vertical button group
The following example demonstrates the class .btn-group-vertical Use ：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap example - Vertical button group </title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <div class="btn-group-vertical">
<button type="button" class="btn btn-default"> Button 1</button>
<button type="button" class="btn btn-default"> Button 2</button> <div class="btn-group-vertical">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
The drop-down
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#"> Drop down link 1</a></li>
<li><a href="#"> Drop down link 2</a></li>
</ul>
</div>
</div> </body>
</html>
The results are shown below ：
Bootstrap< Foundation two > Network system
Bootstrap< Foundation three > Typesetting
Bootstrap< Foundation four > Code
Bootstrap < Foundation five > form
Bootstrap< Foundation six > Forms
Bootstrap < Foundation seven > Button
Bootstrap < Foundation 8 > picture
Bootstrap< Foundation 9 > Auxiliary class
Bootstrap< Foundation 10 > Responsive Utilities
Bootstrap< Foundation 11 > The fonts icon (Glyphicons)
Bootstrap < Foundation 12 > The drop-down menu （Dropdowns）
Bootstrap< Foundation 13 > Button group
Bootstrap< Foundation 14 > Button drop-down menu
Bootstrap< Foundation 13 > More articles about button group
- Bootstrap < Foundation seven > Button
Anything with a class .btn All elements inherit the default appearance of the rounded gray button . however Bootstrap Provides options to define the style of the button , The details are shown in the table below : The following styles are available for <a>, <butto ...
- Bootstrap series -- 29. Button group
Single button in Web Sometimes the use of the page can not meet our business needs , It's often seen that multiple buttons are used together , For example, a group of small icons and buttons in the rich text editor Button groups are the same as drop-down menu components , Need to rely on button.js The plug-in works ...
- Bootstrap3 Basics btn-group-vertical Button group （ Sideways 、 Stand up ）
Content Parameters OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- Bootstrap < Foundation 28 > List group
List group . List components are used to present complex and custom content in the form of lists . The steps to create a basic list group are as follows : To the element <ul> add to class .list-group. towards <li> add to cl ...
- Bootstrap < Foundation 23 > The page title （Page Header）
The page title (Page Header) It's a nice feature , It will add appropriate spacing around the title of the page . When there are multiple titles in a web page and a certain space needs to be added between each title , Page title is very useful . To use the page title (Page ...
- Bootstrap< Foundation 15 > Input box group
Bootstrap Another feature supported , Input box group . Input box group extended from The form controls . Using input box groups , You can easily add text or buttons as prefixes and suffixes to text-based input boxes . By adding prefixes and suffixes to the input field , You can input to the user ...
- Bootstrap< Foundation 14 > Button drop-down menu
Use Bootstrap class Add a drop-down menu to the button . To add a drop-down menu to the button , Just simply in one .btn-group Place the button and drop-down menu in . You can also use <span class=&qu ...
- Bootstrap < Foundation 32 > Modal frame （Modal） plug-in unit
Modal frame (Modal) Is a child form that is overlaid on the parent form . Usually , The goal is to display content from a single source , There can be some interaction without leaving the parent form . Subform provides information . Interaction, etc. . If you want to refer to the functionality of the plug-in separately , So you need to quote ...
- Bootstrap < Foundation 31 > Plug in Overview
The components discussed in the previous layout components are just the beginning .Bootstrap Bring their own 12 Kind of jQuery plug-in unit , Expanded functionality , You can add more interaction to the site . Even if not a senior JavaScript Developer , You can also start ...
Random recommendation
- A Introduction to star routing algorithm
Do you want to create some monsters or protagonists in a game , Move them to a specific location , Avoid walls and obstacles ? If so , Take a look at this tutorial , We'll show you how to use A Star pathfinding algorithm to achieve it ! There have been many articles on the Internet about A Star search algorithm ...
- JAVA WEB WITH IDEA
This paper mainly introduces the use of IDEA development environment , establish JAVA WEB engineering , And introduce war The process of making bags . 1 establish MAVEN engineering
- Android Development of Fragment
One .Fragment Life cycle : Two . Dynamic addition Fragment Three steps of : 1. get Fragment The manager of FragmentManager FragmentManager fragmentManager = ...
- WPF gossip ——Trigger trigger
I'm using WPF In the process , I've seen three kinds of triggers :Trigger.DataTrigger.EventTrigger. One of the most commonly used is Trigger. As for triggers, when the value of an attribute changes , We should do something ...
- C# Medium GET and SET accessor
We are learning C# The properties of syntax , We have to start with GET,SET Visitors , From the literal meaning of English ,GET It should be what you get , and SET What should be set up , Let's take a look , How does the official define this pair of accessors :get Is read ...
- 0/1 knapsack dp Study ~6
Topic linking :http://acm.hdu.edu.cn/showproblem.php?pid=1203 I NEED A OFFER! Time Limit: 2000/1000 MS (Java/O ...
- And MP3 Related technical summary
MP3 File format analysis Peter Lee 2008-06-05 Catalog 33 B7 00 0001 02 FF FF FF F4 E1 2F FF FF FFFF DF FF FF FB52 8C 12 ...
- How to set font and colors of Eclipse UI
The original URL of this article is https://codeyarns.com/2014/11/03/how-to-set-font-and-font-size-o ...
- redis Batch deletion keys
#!/bin/bash redis_list=("192.168.252.174:7000" "192.168.252.174:7001" "192. ...
- win10 The new folder is gone
1 function -regedit 2 In the open registry editor window , an HKEY_CLASSES_ROOT, stay HKEY_CLASSES_ROOT Expand to find :Directory, And then in turn :Directory\Ba ...