查看“Test”的源代码


<div class="col-md-6">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="item">
              <div class="">http://www.9tripod.com/uploadfiles/20161103_153359.jpg</div>
              <div class="carousel-caption">
                <h4>First Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                eget metus.</p>
              </div>
            </div>
            <div class="item active">
              <div class="">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_6.jpg</div>
              <div class="carousel-caption">
                <h4>Second Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                eget metus.</p>
              </div>
            </div>
            <div class="item">
              <div class="">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_5.jpg</div>
              <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                eget metus.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
<div class="col-md-6">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="item">
              <div class="">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_7.jpg</div>
              <div class="carousel-caption">
                <h4>First Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                eget metus.</p>
              </div>
            </div>
            <div class="item active">
              <div class="">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_6.jpg</div>
              <div class="carousel-caption">
                <h4>Second Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                eget metus.</p>
              </div>
            </div>
            <div class="item">
              <div class="">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_5.jpg</div>
              <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at
                eget metus.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
 <div class="col-md-12">
        <div class="navbar navbar-default" role="navigation">
          <ul class="nav navbar-nav">
            <li class="active">[[Home]]</li>
            <li>[[About]]</li>
            <li>[[Services]]</li>
            <li>[[Article 1]]</li>
            <li>[[Article 2]]</li>
            <li>[[Article 3]]</li>
            <li>[[Article 4]]</li>
          </ul>
        </div>
      </div>
 <div class="col-md-12">
        <div class="navbar navbar-default" role="navigation">
          <ul class="nav navbar-nav">
            <li class="active">[[Home]]</li>
            <li>[[About]]</li>
            <li>[[Services]]</li>
            <li>[[Article 1]]</li>
            <li>[[Article 2]]</li>
            <li>[[Article 3]]</li>
            <li>[[Article 4]]</li>
          </ul>
        </div>
      </div>
<div class="col-md-4"> 
<div class="alert alert-success fade in"> <p> <i class="fa fa-trophy"></i> <strong>success</strong> </p> 
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> <div class="btn btn-darker">Take this action</div> <div class="btn btn-dark">Or do this</div> </p> 
</div> 
</div> 
<div class="btn btn-success" data-toggle="modal" data-target="#myModal">Launch Modal</div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <div class="close" data-dismiss="modal" aria-hidden="true">×</div>
            <h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
          </div>
          <div class="modal-body">
            <h4>Paragraphs</h4>
            <p>Any of the other Bootstrap features listed on this demo site can be used inside this modal.</p>
            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
            leo risus, porta ac consectetur ac, vestibulum at eros.</p>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
            faucibus dolor auctor.</p>
            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
            leo risus, porta ac consectetur ac, vestibulum at eros.</p>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
            faucibus dolor auctor.</p>
            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
            leo risus, porta ac consectetur ac, vestibulum at eros.</p>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum
            faucibus dolor auctor.</p>
            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
            Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
          </div>
          <div class="modal-footer">
            <div class="btn btn-default" data-dismiss="modal">Close</div>
            <div class="btn btn-primary">Visit Page</div>
          </div>
        </div>
      </div>
    </div>
<span data-toggle="modal" data-target="#myModal">'''Launch Text Modal'''</span>
 <div class="" data-toggle="modal" data-target="#myModal">http://mediawikibootstrapskin.co.uk/images/carousel_1_thumb.jpg</div>

<div class="col-md-4"> 
<div class="alert alert-info fade in"> <p> <i class="fa fa-trophy"></i> <strong>info</strong> </p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> <div class="btn btn-primary">Take this action</div> <div class="btn btn-neutral">Or do this</div> </p> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="alert alert-danger fade in"> <p> <i class="fa fa-trophy"></i> <strong>danger</strong> </p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
<p> <div class="btn btn-info">Take this action</div> <div class="btn btn-default">Or do this</div> </p> 
</div> 
</div>
<div class="column clearfix"> 
<div class="col-md-4"> 
<div class="alert alert-default fade in"> <p> <i class="fa fa-trophy"></i> <strong>default</strong> </p> 
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> <div class="btn btn-darker">Take this action</div> <div class="btn btn-dark">Or do this</div> </p> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="alert alert-light fade in"> <p> <i class="fa fa-trophy"></i> <strong>light</strong> </p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> <div class="btn btn-primary">Take this action</div> <div class="btn btn-neutral">Or do this</div> </p> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="alert alert-lighter fade in"> <p> <i class="fa fa-trophy"></i> <strong>lighter</strong> </p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
<p> <div class="btn btn-info">Take this action</div> <div class="btn btn-default">Or do this</div> </p> 
</div> 
</div> 
</div>
 <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>
 <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>
 <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>

 <div class="col-md-12">
        <ul class="pagination darker">
          <li>[[1]]</li>
          <li class="active">[[2]]</li>
          <li>[[3]]</li>
          <li>[[4]]</li>
          <li>[[5]]</li>
          <li>[[6]]</li>
          <li>[[7]]</li>
          <li>[[8]]</li>
        </ul>
      </div>
   <div class="col-md-4">
      <div class="panel panel-cocktail-border">
        <div class="panel-heading">
          <h3 class="panel-title">BootStrap Panel</h3>
        </div>
        <div class="panel-body">
          <p class="bs">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu,
          sollicitudin turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla
          cursus lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
    </div>
  <div class="col-md-4">
      <div class="panel panel-cocktail-white">
        <div class="panel-heading">
          <h3 class="panel-title">Panel Title</h3>
        </div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin
          turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus
          lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
    </div>
  <div class="col-md-4">
      <div class="panel panel-cocktail-light-border">
        <div class="panel-heading">
          <h3 class="panel-title">Panel Title</h3>
        </div>
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis leo vehicula, fringilla nulla eu, sollicitudin
          turpis. Donec sed diam purus. Morbi sagittis urna sit amet egestas blandit. Maecenas at turpis quis nulla cursus
          lobortis. Curabitur nisl justo, mollis vel iaculis in, hendrerit rhoncus justo.</p>
        </div>
        <div class="panel-footer">Panel footer</div>
      </div>
    </div>
<div class="panel panel-cocktail-border"></div>
<div class="panel panel-cocktail-white">
<div class="panel panel-cocktail-light-border">
<div class="col-sm-12">
      <ul class="nav nav-pills nav-tabs-lighter">
        <li class="active">[[Home]]</li>
        <li>[[Another Title]]</li>
        <li>[[Another Title]]</li>
        <li>[[Another Title]]</li>
        <li>[[Another Title]]</li>
        <li>[[Another Title]]</li>
      </ul>
    </div>
<div class="column clearfix"> 
<div class="col-md-12 column sortable ui-sortable pull-right">
            <div class="portlet">
                <div class="panel panel-primary-light-border">
                    <div class="panel-heading clearfix">
                        <div class="panel-caption">
                            <h3 class="panel-title">Cavila Portlet Overview</h3>
                        </div>
                        <div class="panel-options dark">
                            <div class="panel-collapse">
                                <div class=""><i class="fa fa-chevron-up"></i></div>
                            </div>
                            <div class="panel-remove">
                                <div class=""><i class="fa fa-times"></i></div>
                            </div>
                        </div>
                    </div>
                    <div style="display: block;" class="panel-body">
                    <p class="justify">Note the functionality, while not the same as tabs, it allows for large blocks of content in a
    small space in the same way as tabs, but with additional functionality that would be difficult to accomplish with tabs.
    Personally I prefer porlets to tabs, we've not looked at tabs yet because there were issues with linking, but if you're
    insistent we can look at including them <i class="fa fa-smile-o"></i></p>
    <p style="text-align:justify">As to portlet functionality note how they can be dragged and dropped to different locations, if
    you select the it will remove a portlet and the chevrons open and close the panels. Panels can also be set to the
    desired potion, either open or closed on page load.</p>
                    </div>
                </div>
             </div>
            <div class="portlet">
                <div class="panel panel-primary-light-border">
                    <div class="panel-heading clearfix">
                        <div class="panel-caption">
                            <h3 class="panel-title">Bootstrap Portlet 2</h3>
                        </div>
                        <div class="panel-options dark">
                            <div class="panel-expand">
                                <div class=""><i class="fa fa-chevron-down"></i></div>
                            </div>
                            <div class="panel-remove">
                                <div class=""><i class="fa fa-times"></i></div>
                            </div>
                        </div>
                    </div>
                    <div style="display: none;" class="panel-body">
                            <p class="justify">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper
                                dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla
                                nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.
                                Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,
                                facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,
                                metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec
                                nibh. Maecenas non orci a metus sollicitudin sollicitudin. 
                            </p>
                        </div>
                    </div>
                </div>
<div class="portlet">
                <div class="panel panel-primary-light-border">
                    <div class="panel-heading clearfix">
                        <div class="panel-caption">
                            <h3 class="panel-title">Bootstrap Portlet 3</h3>
                        </div>
                        <div class="panel-options dark">
                            <div class="panel-expand">
                                <div class=""><i class="fa fa-chevron-down"></i></div>
                            </div>
                            <div class="panel-remove">
                                <div class=""><i class="fa fa-times"></i></div>
                            </div>
                        </div>
                    </div>
                    <div style="display: none;" class="panel-body">
                            <p class="justify">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper
                                dolor ut urna consectetur, id interdum purus pellentesque. Suspendisse fringilla
                                nunc erat, nec consectetur nisi tristique nec. Etiam dignissim hendrerit vehicula.
                                Cras eu dui vel nulla cursus feugiat. Suspendisse sem purus, molestie quis diam ac,
                                facilisis hendrerit elit. Morbi molestie ligula ut volutpat commodo. Donec ultrices,
                                metus a adipiscing ultrices, risus nibh rutrum nibh, vel interdum quam justo nec
                                nibh. Maecenas non orci a metus sollicitudin sollicitudin. 
                            </p>
                        </div>
                    </div>
                </div>
</div>
</div>
<div class="tooltip-demo">
          <div class="bs-example-tooltips">
            <div class="btn btn-default" data-toggle="tooltip" data-placement="left" title=""
            data-original-title="Tooltip on left">Tooltip on left</div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">
            Tooltip on top</div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title=""
            data-original-title="Tooltip on bottom">Tooltip on bottom</div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="right" title=""
            data-original-title="Tooltip on right">Tooltip on right</div>
          </div>
        </div>
  <p>This functionility can also be used in text, hovering over certain 
        <span class="pointer" data-toggle="tooltip" data-placement="top" title=""
        data-original-title="Tooltip on Top"><strong>words</strong></span> will produce the Tool Tip. You can also do
        the same 
        <span class="pointer" data-toggle="tooltip" data-placement="bottom" title=""
        data-original-title="Tooltip on Bottom"><strong>underneath</strong></span>. Tool Tips can be also be shown to
        the 
        <span class="pointer" data-toggle="tooltip" data-placement="left" title=""
        data-original-title="Tooltip on Left"><strong>left</strong></span>, or to the 
        <span class="pointer" data-toggle="tooltip" data-placement="right" title=""
        data-original-title="Tooltip on Right"><strong>right</strong></span>.</p>
<p><div class="text-primary">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-success">Nullam id dolor id nibh ultricies vehicula..</div></p>
<p><div class="text-info">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-warning">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-danger">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-cyanide">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-meadow">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-cocktail">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-hearts">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-party">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-hollow">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-mango">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-berry">Nullam id dolor id nibh ultricies vehicula.</div></p>
<p><div class="text-primary">Nullam id dolor id nibh ultricies vehicula.</div></p>