Share a detailed knowledge of Bootstrap

1. Make Images Mobile Responsive

Use: Make images fit the width of your page.

Operation: Add .img-responsive class attribute to the image.

<img  class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="/images/cat.jpg" alt="Share a detailed knowledge of Bootstrap" >

2. Center Text with Bootstrap

Usage: Center the text.

Operation: Add center-text class attribute to the text.

<p>Hi, I'm Yamei.</p>

Supplement: .text-right, .text-left, .text-primary (the text content has a primary class) , .text-success, .text-muted (weakened), .text-info, .text-warning, .text-danger

##3, Create a Bootstrap Button

Use: Create a Bootstrap-style button.

Operation: Add btn class attribute to the text.

<button>Like</button>

The effect is as follows:

4. Create a Block Element Bootstrap Button

Use: Block-level button (stretched to 100% of the width of the parent element). Create a block-level button. The button will stretch to fill the page, and any elements after the block will automatically float to the next line (wrap).

The principle is as shown below (picture from fcc):

Operation: Keep .btn class attribute, Join.btn-block.

<button>Like</button>

The effect is as follows:

5、Taste the Bootstrap Button Color Rainbow

Use: Add a original (blue) button with class .btn-primary.

Operation: Reserve .btn .btn-block class attribute, add .btn-primary.

<button>Like</button>

The effect is as follows:

Supplement: .btn-danger, .btn-warning (button to operate with caution), .btn-info (button to pop up information), .btn-default, .btn-link (make the button look like a link, but Still maintaining the button's behavior), .btn-success

.btn-lg, .btn-sm, .btn-xs, respectively large, small, and ultra-small

.disabled Disabled button

.Ctive presentation button is clicked

## (Effect of .Active)

## *The above are the notes I compiled during my FCC study. I am a novice. If there are any mistakes, please leave a message to point them out~

[Related video recommendations:

Bootstrap Tutorial 】

The above is the detailed content of Share a detailed knowledge of Bootstrap. For more information, please follow other related articles on the PHP Chinese website!