1. Through Bootstrap, we only need to add the IMG responsive class attribute to the picture, and the width of the picture can automatically adapt to the width of your mobile screen.

2. In addition to making the image adaptive, Bootstrap can also easily center the text of the header title to make the title look more beautiful. We just need to add the class attribute of text center to h2 tag, and the title text can be centered.

Friendly reminder: you can use spaces to define multiple class es for labels, as follows:

<h2 class="red-text text-center">your text</h2>

3. In general, the width of a button label is the same as the length of the text contained in the label

If you want the width of your button tag to fill the whole screen, you can use the BTN block class button to upgrade to a block level element, so that the width of the button tag fills the whole screen, and all elements behind the element will float to the next line.

Friendly reminder: btn class is still required for these buttons.

Add the Bootstrap BTN block class to your button.

The BTN primary class is the main color class of the application. The color of this class is very useful for operations that you want to highlight and prompt the user.

Add the BTN primaryclass attribute to the button.

Friendly reminder: this button still needs btn and btn block attributes!

btn-info It is usually used for operations that users are more likely to click.
btn-danger The color of this button is used to tell the user,This operation is dangerous, such as deleting
row Indicates juxtaposition
text-primary Highlight 
img-responsive

4. Page layout

Bootstrap uses a responsive grid system that makes it easy to put elements into rows and specify the relative width of each element. Most bootstrap classes can be applied to div elements.

The following is a diagram of how the Bootstrap's 12 column grid layout works:

It is worth noting that in the above figure, we use the class col md - * where md means medium and * is a number that specifies the column width of the element. From the figure, we can see that the setting is a medium-sized layout, such as the layout on the laptop screen.
xs is different from md. xs refers to a device with a small screen width, such as a mobile phone screen

Picture and cat on the same line

 <div class="row">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    
  <div class="col-xs-4">
<a href="#"><img class="img-responsive thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a>
    </div>
  </div>

5. Font Awesome is a convenient icon library.

These icons are vector graphics in order to svg file format storage. These icons can be processed like fonts. You can specify the size of these icons by setting the font size in pixels, and these icons can inherit the font size of the parent HTML tag.

You can add Font Awesome to any application. Just add the following link to the top of your HTML:

<link rel ="stylesheet"href ="// maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

The i tag was originally used to italicize other elements, but is now commonly used for icons. You can add the Font Awesome class to the i element to convert it to an icon, for example:

<i class="fa fa-info-circle"></i> 

Use Font Awesome to add an info circle icon to your info button and a trash icon to your delete button.

You can add a thumbs up icon to your like button through the Font Awesome library by adding the class attribute fa and fa thumbs up to the i element.

Code:

<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
</div>
</div>

6. You can also use the col xs-* of Bootstrap on the form form! In this way, our radio buttons will be evenly distributed on the page no matter how wide the screen resolution is.

Embed all radio buttons in the <div class= "row" > element. They are then embedded in the <div class= "col-xs-6" > tag.

7. You can add the Font Awesome icon of FA paper plane to the button by adding <i class= "Fa paper plane" > </i> to the button label.

 <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>

8. Bootstrap has a well attribute, which can make the columns you create have a sense of visual depth.

<div class="well">
  ss
</div>

It can only be said that these are the most basic things. To really learn bootstrap, you need to carefully look at the tutorials and videos.