跳转至： 导航, 搜索

“BootStrap Image Boxes”的版本间的差异

小
 
第1行： 第1行：
 +
__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="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="thumbnail lighter-background">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_7.jpg
第7行： 第63行：
 
       </div></div>
 
       </div></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>

2016年12月7日 (三) 10:52的最新版本

anthom_home_7.jpg

lighter

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.

anthom_home_7.jpg

light

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.

anthom_home_7.jpg

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.

anthom_home_7.jpg

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.

anthom_home_7.jpg

neutral

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.

anthom_home_7.jpg

No colour

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.

Using Image Boxes

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.

          <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>

There are several options available; for the box colour you can use;

          <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">

And for text colours you can use;

          <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">
取自“http://x.9tripod.com/wiki/zh/index.php?title=BootStrap_Image_Boxes&oldid=205”