Bootstra5 button handling

Posted by damanic on Sun, 10 Nov 2019 16:37:24 +0100

1 Basic button

1.1 buttons outside the form form

The form form is just a container. Multiple data items form a form. The reason why they form a form is that it is easy to submit.
Therefore, forms that are not used for submission can be written out separately

< button > this is a normal button < / button >

1.2 basic style of button

The buttons above are ugly, so you can use the btn class directly after bootstrap 3 is introduced.

< button class = "BTN" > this is a basic style button < / button >

1.3 convert other elements to buttons

input element and a element can achieve the same effect as button by adding btn class.

<a class="btn btn-primary">a Tab button</a>
<input class="btn btn-primary" value="input Button">

2. Decorated button class

2.1 button size

The largest button BTN LG class
Smaller button BTN SM class
Very small button BTN XS class
The BTN block class, which is like a block element and has only one row

<button class="btn btn-primary">Normal size</button>
<button class="btn btn-primary btn-lg">Too large</button>
<button class="btn btn-primary btn-sm">Partial</button>
<button class="btn btn-primary btn-xs" >Very small</button>
<button class="btn btn-primary btn-block">block Button</button>

2.2 button color

Use btn color to represent various color styles of buttons

button class="btn btn-primary">primary</button>
<button class="btn btn-secondary">secondary</button>
<button class="btn btn-success">success</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-info">info</button>
<button class="btn btn-light">light</button>
<button class="btn btn-dark">dark</button>
<button class="btn btn-link">link</button>

2.3 button status

Add active attribute to indicate that the button is clicked, and add dialled attribute to indicate that it cannot be clicked

<button class="btn btn-primary">normal</button>
<button class="btn btn-primary" disabled>disabled</button>
<button class="btn btn-primary" active>active</button>

3. button group

To be supplemented

Topics: Attribute