Responsive design using Bootstrap page

Use Bootstrap is very simple, you just need to add the following link you need to use the Bootstrap application to the head of the layout:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css"/>

---

---

Bootstrap by phone displays the picture adaptation

 <img class="img-responsive" src="/statics/codecamp/images/running-cat.jpg">

By Bootstrap center the text

<H2 class = "Red-text text-Center "> your text </ H2> // spaces may be used to define a plurality of class labels

Add a button by Bootstrap

<button type="submit" class="btn btn-default">Like</button>

//btn-primary  /

 btn-success

 btn-info

btn-warning

btn-danger

 btn-link

Add a button block element Bootstrap

 btn-block

 text-danger

Do page layout using Bootstrap

<div class = "row"> // tag set up row after the class attribute, the button can be arranged in parallel.
<div class = "COL-XS-. 4">
<Button class = "BTN BTN-Block BTN-Primary"> Like </ Button>
</ div>
<div class = "COL-XS-. 4">
<Button class = "BTN BTN-Block BTN-info"> info </ Button>
</ div>
<div class = "COL-XS-. 4">
<Button class = "BTN BTN-Block BTN-Danger"> the Delete </ Button >
</ div>
</ div>

 

 

Reproduced in: https: //www.cnblogs.com/chendi618/p/11013521.html