|
|
| 第4行： |
第4行： |
| | <div class="carousel-inner"> | | <div class="carousel-inner"> |
| | <div class="item"> | | <div class="item"> |
| − | <div class="">http://www.9tripod.com/uploadfiles/20161103_153359.jpg</div> | + | <div class="">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_7.jpg</div> |
| | <div class="carousel-caption"> | | <div class="carousel-caption"> |
| | <h4>First Thumbnail label</h4> | | <h4>First Thumbnail label</h4> |
| − | <p></p> | + | <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 class="item active"> | | <div class="item active"> |
| − | <div class="">http://www.9tripod.com/uploadfiles/20161115_110853.jpg</div> | + | <div class="">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_6.jpg</div> |
| | <div class="carousel-caption"> | | <div class="carousel-caption"> |
| | <h4>Second Thumbnail label</h4> | | <h4>Second Thumbnail label</h4> |
| − | <p></p> | + | <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 class="item"> | | <div class="item"> |
| − | <div class="">http://www.9tripod.com/uploadfiles/20161104_140218.jpg</div> | + | <div class="">https://res.cloudinary.com/anthom/image/upload/v1461970405/anthom_home_5.jpg</div> |
| | <div class="carousel-caption"> | | <div class="carousel-caption"> |
| | <h4>Third Thumbnail label</h4> | | <h4>Third Thumbnail label</h4> |
| − | <p></p> | + | <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> |
| 第27行： |
第30行： |
| | </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>
| |
