FreeCodeCamp - BootStrap img-responsive text-center btn

First, add a new image below the existing one. Set its src attribute to https://bit.ly/fcc-running-cats.

It would be great if this image could be exactly the width of our phone's screen.

Fortunately, with Bootstrap, all we need to do is add the img-responsive class to your image. Do this, and the image should perfectly fit the width of your page.

<img src="https://bit.ly/fcc-running-cats" class="img-responsive" />

img-response 会自适应屏幕的宽度，不需要传统的html5那样去设置它的大小

Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class text-center to our h2 element. the text-primary is the same as the btn-primary

<h2 class="text-primary  text-center">CatPhotoApp</h2>

Bootstrap has its own styles for button elements, which look much better than the plain HTML ones.

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

By making them block elements with the additional class of btn-block, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a "new line" below the block.

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

The btn-primary class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.

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

Bootstrap comes with several pre-defined colors for buttons. The btn-info class is used to call attention to optional actions that the user can take.

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

Bootstrap comes with several pre-defined colors for buttons. The btn-info class is used to call attention to optional actions that the user can take.

<button class="btn btn-block btn-danger">Delete</button>

转载于:https://my.oschina.net/u/1273644/blog/857166