Detailed explanation of JS component Bootstrap button group and drop-down button_javascript skills

this article will first share with you how to use button group. the specific content is as follows

1. button groups

1. single button group
use .btn-group to encapsulate multiple with .btn

<div class="btn-group"> 
 <button class="btn">1</button> 
 <button class="btn">2</button> 
 <button class="btn">3</button> 
</div> 

2. multiple button groups
put multiple

into

.

<div class="btn-toolbar"> 
 <div class="btn-group"> 
  ... 
 </div> 
 <div class="btn-group"> 
  ... 
 </div> 
</div> 

3. vertical button group
add .btn-group-vertical to .btn-group.

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

2. button dropdowns

example

<div class="btn-group"> 
 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
  action 
  <span class="caret"></span> 
 </a> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

1. control size
also use .btn-large, .btn-small, and .btn-mini to control the size.

2. split drop-down button

<div class="btn-group"> 
 <button class="btn">action</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3. menu that appears upward

<div class="btn-group dropup"> 
 <button class="btn">dropup</button> 
 <button class="btn dropdown-toggle" data-toggle="dropdown"> 
  <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu"> 
  <!-- dropdown menu links --> 
 </ul> 
</div> 

3. javascript

example
loading status. add data-loading-text="loading...".

copy code the code is as follows:

loading state

switch status. add data-toggle="button".

copy code the code is as follows:

single toggle

check box. add data-toggle="buttons-checkbox" after btn-group.

<div class="btn-group" data-toggle="buttons-checkbox"> 
 <button type="button" class="btn btn-primary">left</button> 
 <button type="button" class="btn btn-primary">middle</button> 
 <button type="button" class="btn btn-primary">right</button> 
</div> 

single choice. add data-toggle="buttons-radio" after btn-group.

<div class="btn-group" data-toggle="buttons-radio"> 
 <button type="button" class="btn btn-primary">left</button> 
 <button type="button" class="btn btn-primary">middle</button> 
 <button type="button" class="btn btn-primary">right</button> 
</div> 

usage
javascript code triggers the switch state.
$().button("toggle")
you can also add the data-toggle attribute to trigger it automatically.
…

use javascript code to trigger the loading state, and the button displays the value specified by the data-loading-text attribute.

$().button("loading")

... note: firefox will keep the button disabled while the page loads. the workaround is to apply autocomplete="off" on the button.

reset button state using javascript code.
$().button("reset")

reset the button state and change the button text to the specified text. the complete in the following example is just an example and can be replaced.

<button class="btn" data-complete-text="finished!" >...</button> 
<script> 
 $('.btn').button('complete') 
</script> 

the above is the entire content of this article, i hope it will be helpful to everyone's study.

Related labels：

Bootstrap按钮组 Bootstrap下拉按钮

source：php.cn

Previous article：How to use AngularJs to build a permission management system [Simple]_AngularJS Next article：Detailed explanation of Bootstrap button drop-down menu component_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• What is a NullPointerException, and how do I fix it?
  2024-10-22 09:46:29
• From Novice to Coder: Your Journey Begins with C Fundamentals
  2024-10-13 13:53:41
• Unlocking Web Development with PHP: A Beginner's Guide
  2024-10-12 12:15:51
• Demystifying C: A Clear and Simple Path for New Programmers
  2024-10-11 22:47:31
• Unlock Your Coding Potential: C Programming for Absolute Beginners
  2024-10-11 19:36:51
• Unleash Your Inner Programmer: C for Absolute Beginners
  2024-10-11 15:50:41
• Automate Your Life with C: Scripts and Tools for Beginners
  2024-10-11 15:07:41
• PHP Made Easy: Your First Steps in Web Development
  2024-10-11 14:21:21
• Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
  2024-10-11 12:59:11
• The Key to Coding: Unlocking the Power of Python for Beginners
  2024-10-11 12:17:31

Latest Issues

sql groupby not working, I want to group by code_branch ->select('a.statusasstatus','b.nameascustomer_name','e.nameasbranch_name','c.nameas...

From 2024-04-06 19:24:49

0

2

488

Group MySQL results by ID for looping over I have a table with flight data in mysql. I'm writing a php code that will group and displ...

From 2024-04-06 17:27:56

0

1

406

Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...

From 2024-04-06 14:54:03

0

2

421

Best way to implement three-state switching in react? I'm creating some buttons in React that trigger a state change from one to the next. Some ...

From 2024-04-06 13:51:32

0

1

418

How to print selected checkbox value after submission This is my list of checkboxes and the buttons I need to submit data..<label>AccessLo...

From 2024-04-06 13:07:43

0

2

337

Related Topics

More>

• What are the life cycles of vue3
• cdn server security protection measures
• There are several types of browser kernels
• What is the difference between blocking and deleting on WeChat?
• vb.net tutorial
• U coin price today
• Introduction to hard disk performance indicators
• unetbootin usage