查看“BootStrap Image Boxes”的源代码

__NOTOC__
          <div class="col-md-4 mwbs-color-darker">
<div class="thumbnail lighter-background">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_7.jpg
                <div class="caption">
                    <h3>lighter</h3>
                    <p class="text-justify">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                </div>
                </div>
            <div class="col-md-4 mwbs-color-darker">
<div class="thumbnail light-background">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_7.jpg
                <div class="caption">
                    <h3>light</h3>
                    <p class="text-justify">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                </div>
                </div>
            <div class="col-md-4">
<div class="thumbnail dark-background">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_7.jpg
                <div class="caption">
                    <h3 class="mwbs-color-white">dark</h3>
                    <p class="text-justify mwbs-color-white">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                </div>
                </div>
            <div class="col-md-4">
<div class="thumbnail darker-background">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_7.jpg
                <div class="caption">
                    <h3 class="mwbs-color-white">darker</h3>
                    <p class="text-justify mwbs-color-white">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                </div>
                </div>
            <div class="col-md-4">
<div class="thumbnail neutral-background">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_7.jpg
                <div class="caption">
                    <h3 class="mwbs-color-darker">neutral</h3>
                    <p class="text-justify mwbs-color-darker">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                </div>
                </div>
            <div class="col-md-4">
<div class="thumbnail">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_7.jpg
                <div class="caption">
                    <h3 class="mwbs-color-dark">No colour</h3>
                    <p class="text-justify mwbs-color-dark">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
                </div>
                </div>
<hr>
<div class="tab-pane" id="application">
      <div class="bs-example">
<h4 class="subtitle-black">Using Image Boxes</h4>
      <p>There are three css classes to take note of, the first, "col-md-4" sets the box width, "mwbs-color-darker" sets the text colour and  "lighter-background" sets the box colour.</p>
      <p></p>
      <pre>
          <div class="col-md-4 mwbs-color-darker">
      <div class="thumbnail lighter-background">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_7.jpg
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p class="text-justify">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
        eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      </div></div>
    </div>
</pre>
<p>There are several options available; for the box colour you can use;</p>
      <pre>
          <div class="thumbnail lighter-background">
          <div class="thumbnail light-background">
          <div class="thumbnail dark-background">
          <div class="thumbnail darker-background">
          <div class="thumbnail neutral-background">
          <div class="thumbnail">
</pre>
<p>And for text colours you can use;</p>
      <pre>
          <div class="col-md-4 mwbs-color-lighter">
          <div class="col-md-4 mwbs-color-light">
          <div class="col-md-4 mwbs-color-dark">
          <div class="col-md-4 mwbs-color-darker">
          <div class="col-md-4 mwbs-color-white">
</pre>
        </div>
        </div>