FreeCodeCamp - BootStrap Grid Span

Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element. Here's a diagram of how Bootstrap's 12-column grid layout works:

Note that in this illustration, the col-md-* class is being used. Here, md means medium, and * is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified. In the Cat Photo App that we're building, we'll use col-xs-*, where xs means extra small (like an extra-small mobile phone screen), and * is the number of columns specifying how many columns wide the element should be.

Put the Like, Info and Delete buttons side-by-side by nesting all three of them within one <div class="row"> element, then each of them within a <div class="col-xs-4"> element.

<div class="row">
    <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">Delete</button>
    </div>
  </div>

<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://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
        </a>
    </div>
</div>

You can use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row? This image illustrates the difference between inline elements and block-level elements:

By using the span element, you can put several elements together, and even style different parts of the same element differently.

<p>Things cats <span class="text-danger">love:</span></p>

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