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 src="/images/cat.jpg" class="img-responsive">

2. Center Text with Bootstrap

Usage: Center the text.

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

<p class="text-center">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 class="btn">Like</button>

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).

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

<button class="btn btn-block">Like</button>

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 class="btn btn-block btn-primary">Like</button>

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

## *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!