What is the label of the bootstrap button?

bootstrap buttons can be: 1. a tag, syntax ""; 2. button tag, syntax "> ;"; 3. Input tag of button type, syntax "".

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7, DELL G3 computer

The bootstrap button can be: a label , button tag, input tag of button type

##1. btn class

Basic button class, add a tag, button tag , button type input tags are converted into basic button styles under bootstrap.

<div style="margin-bottom:15px">
  <a href="#">查看评论</a>
  </div>
  <div style="margin-bottom:15px">
  <button type="submit">结账</button>
  </div>
  <div style="margin-bottom:15px">
  <input type="button" value="设置">
  </div>

The original style of a label, button label, and button type input label

is used for a label, button label, and button type input label.

Add bootstrap default button style to the above tags.

<div   style="max-width:90%">
  <a class="btn" href="#">查看评论</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn" type="submit">结账</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn" type="button" value="设置">
  </div>

a label, button label, button type input label set the style after btn class

2. btn-primary class, btn -info class, btn-success class, btn-warning class, btn-danger class, btn-inverse class

<div style="margin-bottom:15px">
  <a class="btn btn-primary" href="#">.btn .btn-primary</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info" type="submit">.btn .btn-info</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-success" type="button" value=".btn .btn-success">
  </div>
  <div style="margin-bottom:15px">
  <a class="btn btn-warning" href="#">.btn .btn-warning</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-danger" type="submit">.btn .btn-danger</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-inverse" type="button" value=".btn .btn-inverse">
  </div>

.btn .btn-*Button style

3. btn-large class, btn-small class, btn-mini class

is used to set the label size, it seems to not work .

 <div style="margin-bottom:15px">
  <a class="btn btn-primary btn-large" href="#">.btn .btn-primary</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info btn-small" type="submit">.btn .btn-info</button>
  </div>
  <div style="margin-bottom:15px">
  <input  class="btn btn-success btn-mini" type="button" value=".btn .btn-success">
  </div>

Style after using btn-large class, btn-small class, btn-mini class

4. i tag

is used inside the button label to add an icon to the button. Didn't work.

<div style="margin-bottom:15px">
  <a class="btn btn-primary btn-large" href="#"><i class="icon-comment icon-white"></i> 查看评论</a>
  </div>
  <div style="margin-bottom:15px">
  <button  class="btn btn-info btn-small" type="submit"><i class="icon-shopping-cart"></i> 结账</button>
  </div>

Style after adding i tag

5. Button group

-btn -group class: used to contain a group of buttons.

-btn-toolbar class: used to display multiple button groups side by side with space in between.

<div class="btn-toolbar">
  <div class="btn-group">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
  </div>
  
  <div class="btn-group">
  <button class="btn">左</button>
  <button class="btn">中</button>
  <button class="btn">右</button>
  </div>
 </div>

6. Button with drop-down menu

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">字体<span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="#">黑体</a></li>
  <li><a href="#">宋体</a></li>
  <li><a href="#">仿宋</a></li>  
  </ul>
  </div>

div tag: used to contain drop-down menu Menu buttons and drop-down menus.

-btn-group class
a tag: a button with a drop-down menu, which can contain span tags and button names.
-dropdown-toggle class: Add styles to drop-down menu buttons.
-data-toggle attribute:
After setting data-toggle="dropdown", you can control the pop-up and collapse of the drop-down menu by clicking the button.
span tag
-caret class: Add a triangle drop-down logo
ul tag: Contains the content of the drop-down menu
-dropdown-menu class
li tag: Contains each list item

Button with drop-down menu

<div class="btn-group">
   <a class="btn" href="#">字体</a>
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
  <li><a href="#">黑体</a></li>
  <li><a href="#">宋体</a></li>
  <li><a href="#">仿宋</a></li>  
  </ul>
  </div>

Extract the button name and put it into a separate a tag.

The small triangle controls the drop-down menu independently

[Related recommendations: "

bootstrap tutorial"]

The above is the detailed content of What is the label of the bootstrap button?. For more information, please follow other related articles on the PHP Chinese website!