|
<!-- Image Carousel --> |
|
|
|
<div id="myCarousel" class="carousel-slide"> |
|
<div class="carousel-inner"> |
|
<div class="item-active"><img src"images/.jpg"> |
|
<div class="container-active"> |
|
<div class="carousel-caption"> |
|
<p><a href="#" class="btn-color-size"></a></p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
JQuery: [HTML] <script src="js/jQuery.js"></script> |
|
|
|
[JS] |
|
<script> |
|
$ (function(){ |
|
$('carousel').carousel({ |
|
interval: XXXX |
|
}); |
|
}) |
|
</script> |
|
|
|
<!-- Carousel Navigation --> |
|
|
|
NOTE: Glyphicons -> After Image Carousel |
|
|
|
<a class="left carousel-control" href="myCarousel" data-slide="prev"> |
|
<span class="glyphicon glyphicon-chervon-left"></span> |
|
</a> |
|
|
|
<a class="right carousel-control" href="myCarousel" data-slide="next"> |
|
<span class="glyphicon glyphicon-chervon-right"></span> |
|
</a> |
|
|
|
Elements: after <div id="myCarousel" class="carousel slide"></div> |
|
|
|
<ol class="carousel-indicators"> |
|
<li data-target="myCarousel" data-slide-to="0" class="active"></li> |
|
<li data-target="myCarousel" data-slide-to="1"></li> |
|
</ol> |
|
|
|
<!-- Four Column Grid --> |
|
<div class="container"> |
|
<div class="row"> |
|
<div class="container-padded"> |
|
<div class="row"> |
|
<div class="col-lg-12">HEADING</div> |
|
</div> |
|
<!--Can Repeat x2--> |
|
<div class="row"> |
|
<div class="col-sm-6 col-md-3"> |
|
<img class="img-circle img-responsive" src="link.jpeg"> |
|
HEADING |
|
<p><a href="#" class="btn btn-default">BUTTON</a></p> |
|
</div> |
|
</div> |
|
|
|
<!--Can Repeat x3--> |
|
<div class="clearfix hidden-md hidden-lg"> |
|
<div class="row"> |
|
<div class="col-sm-6 col-md-3"> |
|
<img class="img-circle img-responsive" src="link.jpeg"> |
|
HEADING |
|
<p><a href="#" class="btn btn-default">BUTTON</a></p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!--Blog Page--> |
|
|
|
Blog Grid Structure: |
|
<li class="active"> |
|
<a href="blog.html">BLOG</a> |
|
</li> |
|
|
|
After End Intro Text: |
|
<div class="container"> |
|
<div class="row"> |
|
<div class="col-sm-8 blog"> |
|
<div class="col-sm-4 sidebar"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
Adding Blog Entries: |
|
<section> |
|
<h1><a href="#">HEADING</a></h1> |
|
<p class="lead"><a href="index.html">ABC</a></p> |
|
<hr> |
|
<p><span class="X">DATE-TIME</span></p> |
|
<hr> <img src="Y" class="img-responsive"> |
|
<hr> <p>deploy.....</p> |
|
<a href="#" class="btn btn-color">READ »</a> |
|
<hr> |
|
</section> |
|
|
|
Pagination Component: |
|
<ul class="pagination"> |
|
<li><a href="#">«</a></li> |
|
<li class="active"><a href="#">ZYX</a></li> |
|
<li><a href="#">P1</a></li> |
|
<li><a href="#">P2</a></li> |
|
<li><a href="#">P3</a></li> |
|
<li><a href="#">P4</a></li> |
|
<li><a href="#">P5</a></li> |
|
<li><a href="#">»</a></li> |
|
</ul> |
|
|
|
Search Box InLine Form: <div class="col-sm-4 sidebar"></div> |
|
<section> |
|
<h3 class="tpad">SEARCH</h3> |
|
<div class="input-group input group-lg tpad"> |
|
<span class="input-group-addon glyphicon glyphicon-search"></span> |
|
<input type="text" class="form-control input-lg" placeholder="search"> |
|
<span class="input-group-btn"> |
|
<button class="btn-btn-default" type="button">GO!</button> |
|
</span> |
|
</div> |
|
</section> |
|
|
|
Using List Groups: |
|
<section> |
|
<h3 class="tpad">TAGS</h3> |
|
<div class="list-group tpad"> |
|
<a href="#" class="list-group item active"> |
|
<span class="badge">BADGE#1</span>TAG#1</a> |
|
</div> |
|
<div class="list-group tpad"> |
|
<a href="#" class="list-group item active"> |
|
<span class="badge">BADGE#2</span>TAG#2</a> |
|
</div> |
|
</section> |
|
|
|
Media Components: |
|
<section> |
|
<h3 class="tpad">Latest from Twitter</h3> |
|
<div class="media-tpad"> |
|
<a class="pull=left" href="#"> |
|
<img class="media object" src="X" alt="user"></a> |
|
</div> |
|
<div class="media body"> |
|
<h4 class="media-heading">@UserAcc</h4> |
|
<p class="bpad">COMMENT</p> |
|
</div> |
|
</section> |
|
|
|
<!--Client Page--> |
|
|
|
Client Grid Structure: |
|
<div class="container"> |
|
<div class="row"> |
|
<div class="col-lg-12"> |
|
<h2>HEADING</h2> |
|
<hr> |
|
<p>TEXT</p> |
|
</div> |
|
<div class="row tpad mytooltip"> |
|
</div> |
|
<div class="row"> |
|
<div class="col-lg-12"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
ThumbNails: <div class="row tpad myTooltip"></div> |
|
|
|
<div class="col-sm6 col-md-3 bpad"> |
|
<a href="#" data-toggle="tooltip" title-data-original-title="client-X" class="thumbnail"> |
|
<img src="images" alt="logo"></a> |
|
</div> |
|
|
|
<div class="col-sm6 col-md-3 bpad"> |
|
<a href="#" data-toggle="tooltip" title-data-original-title="client-Y" class="thumbnail"> |
|
<img src="images" alt="logo"></a> |
|
</div> |
|
|
|
Tooltips: |
|
|
|
[JS] |
|
<script> |
|
$ (function(){ |
|
$('.myTooltip').tooltip({ |
|
selector:"[data-toggle=tooltip]", |
|
container: "body" |
|
}) |
|
}) |
|
</script> |
|
|
|
Collapse Panels: |
|
<div class="container"> |
|
<div class="row"> |
|
<div class="col-lg-12"> |
|
<div class="panel-group" id="accordian"> |
|
<div class="panel panel-default"> |
|
<div class="panel-heading"><h4 class="panel-title"> |
|
<a href="#collapseX" class="accordian-toggle" data-toggle="collapse" data-parent="#accordian"> |
|
<span class="glyphicon glyphicon-X"></span>TEXT</a></h4> |
|
</div> |
|
<div id="collapse-X" class="panel-collapse collpase"> |
|
<div class="panel body">TEXT</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!--Contact Page--> |
|
<div id="contact" class="map"> |
|
<iframe src="google-map-link" width="100%" height="100%" frameborder="0" style="border:0"></iframe> |
|
<div class="container"> |
|
<div class="row"> |
|
<div class="col-sm-n"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="container-padded"> |
|
<div class="row"> |
|
<div class="col-sm-8"> |
|
<form class="form-horizontal tpad" role="form"></form> |
|
</div> |
|
<div class="form-group"> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
HEADING