Bootstrap learning notes 01 and bootstrap learning notes

Bootstrap learning notes 01 and bootstrap learning notes

1. Make Images Mobile Responsive

Usage: make the image fit your page width.

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

2. Center Text with Bootstrap

Usage: center the text.

Operation: add the 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 contains a primary class ),. text-success ,. text-muted (weakened ),. text-info ,. text-warning ,. text-danger

3. Create a Bootstrap Button

Usage: Create a button in the Bootstrap button style.

Operation: add the btn class attribute to the text.

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

The effect is as follows:

4. Create a Block Element Bootstrap Button

Use: block-level button (stretched to the width of 100% of the parent element ). When you create a block-level button, the button will stretch and fill the page, and any elements after the block will automatically move to the next line (line feed ).

Principles such as (image from fcc ):

Operation: Keep the. btn class Attribute and Add. btn-block.

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

The effect is as follows:

5. Taste the Bootstrap Button Color Rainbow

Usage: add an original (blue) button with class As. btn-primary.

Operation: Keep the. btn. btn-block class Attribute and Add. btn-primary.

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

The effect is as follows:

Supplement :. btn-danger ,. btn-warning (button operated with caution ),. btn-info (the button used to bring up information ),. btn-default ,. btn-link (make the button look like a link, but still keep the action of the button ),. btn-success

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

. Disabled button

. Active Display button is clicked

(. Active)

 

* The above are my personal notes for FCC study. I am a little white. If you have any mistakes, please leave a message and point out ~