0byt3m1n1
Path:
/
data
/
17
/
1
/
18
/
11
/
1670011
/
user
/
1801231
/
htdocs
/
wholebodylightpod_dot_com
/
assets
/
[
Home
]
File: portfolio.html
<!DOCTYPE html> <html lang="en"> <head> <!-- Meta, title, CSS, favicons, etc. --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <title>Portfolio</title> <!-- Bootstrap core CSS --> <link href="dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Optional Bootstrap Theme --> <link href="data:text/css;charset=utf-8," data-href="dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet"> <!-- Documentation extras --> <link href="assets/css/src/docs.css" rel="stylesheet"> <link href="tm/css/prettify.css" rel="stylesheet"> <link href="tm/css/tm_docs.css" rel="stylesheet"> <!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="assets/js/ie10-viewport-bug-workaround.js"></script> <script src="assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Favicons --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png"> <link rel="shortcut icon" href="favicon.ico"> <!-- Place anything custom after this. --> </head> <body> <a class="sr-only" href="#content">Skip navigation</a> <!-- Docs master nav --> <header class="navbar navbar-static-top bs-docs-nav" role="banner"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> <ul class="nav navbar-nav"> <li class="home"><a href="../index.html" class="glyphicon glyphicon-home"></a></li><li class="divider-vertical"></li> <li> <a href="getting-started.html">Getting started</a> </li> <li> <a href="css.html">CSS</a> </li> <li> <a href="components.html">Components</a> </li> <li> <a href="javascript.html">JavaScript</a> </li><li class="divider-vertical"></li> <li class="active dropdown -tm-dropdown"> <a data-toggle="dropdown" href="#">TM add-ons<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a role="menuitem" tabindex="-1" href="../404.html">Pages</a> <ul class="pages"> <li><a href="../404.html" role="menuitem" tabindex="-1">404 page</a></li> <li><a href="under-construction.html" role="menuitem" tabindex="-1">Under Construction</a></li> </ul> </li> <li role="presentation"><a role="menuitem" tabindex="-1" href="portfolio.html" class="active">Porfolio</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="slider.html">Slider</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="social_media.html">Social and media</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="http://expo.getbootstrap.com" >Expo</a></li> <li><a href="http://blog.getbootstrap.com" >Blog</a></li> </ul> </nav> </div> </header> <!-- Docs page layout --> <div class="bs-docs-header" id="content"> <div class="container"> <h1>Portfolio</h1> </div> </div> <div class="container bs-docs-container"> <section id="columns"> <div class="row"> <div class="col-md-12"> <div class="page-header"> <h1>Portfolio Layouts</h1> </div> <div> <ul class="nav nav-tabs nav_portfolio"> <li class="tm_portfolio3_capt active"><a href="#tab1" data-toggle="tab"><span></span><small>Three Columns with label</small></a></li> <li class="tm_portfolio3"><a href="#tab2" data-toggle="tab"><span></span><small>Three Columns</small></a></li> <li class="tm_portfolio4_capt"><a href="#tab3" data-toggle="tab"><span></span><small>Four Columns with label</small></a></li> <li class="tm_portfolio4"><a href="#tab4" data-toggle="tab"><span></span><small>Four Columns</small></a></li> <li class="tm_portfolio2_capt"><a href="#tab5" data-toggle="tab"><span></span><small>Two Columns with label</small></a></li> <li class="tm_portfolio2"><a href="#tab6" data-toggle="tab"><span></span><small>Two Columns</small></a></li> <li class="tm_portfolio1"><a href="#tab7" data-toggle="tab"><span></span><small>One column with label</small></a></li> </ul> </div> </div> </div> <div class="tab-content"> <!-- Three with Caption Columns Begin --> <div class="tab-pane active" id="tab1"> <div> <div class="row"> <div class="col-md-4"> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_2.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_3.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_4.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_5.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_6.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_7.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_8.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <pre class="prettyprint"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumb-pad"> <div class="thumbnail"> <img src="image_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Text.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="col-md-4"> <div class="thumb-pad"> <div class="thumbnail"> <img src="image_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Text.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="col-md-4"> <div class="thumb-pad"> <div class="thumbnail"> <img src="image_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Text.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> </div> </pre> </div> </div> </div> </div> <!-- Three with Caption Columns End --> <!-- Three Columns Begin --> <div class="tab-pane" id="tab2"> <div class=""> <div class="row"> <div class="col-md-4"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_2.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_5.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_8.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_3.jpg" alt=""></a> </div> </div> <div class="col-md-4"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_3.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_6.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_1.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_4.jpg" alt=""></a> </div> </div> <div class="col-md-4"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_4.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_7.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_2.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_5.jpg" alt=""></a> </div> </div> </div> <div class="row"> <div class="col-md-12"> <pre class="prettyprint "> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="image_2.jpg" alt=""></a> </div> </div> <div class="col-md-4"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="image_2.jpg" alt=""></a> </div> </div> <div class="col-md-4"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="image_2.jpg" alt=""></a> </div> </div> </div> </div></pre> </div> </div> </div> </div> <!-- Three Columns End --> <!-- Four with Caption Columns Begin --> <div class="tab-pane" id="tab3"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_5.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_8.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_4.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_2.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_6.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_5.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_2.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_3.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_7.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_7.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_4.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_8.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_4.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_5.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <pre class="prettyprint "> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="thumb-pad"> <div class="thumbnail"> <img src="image_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Text.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <div class="thumbnail"> <img src="image_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Text.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <div class="thumbnail"> <img src="image_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Text.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <div class="thumbnail"> <img src="image_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Text.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> </div></pre> </div> </div> </div> </div> <!-- Four with Caption Columns End --> <!-- Four Columns Begin --> <div class="tab-pane" id="tab4"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_1.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_5.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_8.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_4.jpg" alt=""></a> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_2.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_3.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_6.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_7.jpg" alt=""></a> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_5.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_8.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_1.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_2.jpg" alt=""></a> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_2.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_6.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_3.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_7.jpg" alt=""></a> </div> </div> </div> <div class="row"> <div class="col-md-12"> <pre class="prettyprint "><div class="container"> <div class="row"> <div class="col-md-3"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="image_1.jpg" alt=""></a> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="image_1.jpg" alt=""></a> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="image_1.jpg" alt=""></a> </div> </div> <div class="col-md-3"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="image_1.jpg" alt=""></a> </div> </div> </div> </div></pre> </div> </div> </div> </div> <!-- Four Columns End --> <!-- Two Columns with Caption Begin --> <div class="tab-pane" id="tab5"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_2.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_3.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_4.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> <div class="col-md-6"> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_5.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="thumb-pad"> <div class="thumbnail"> <img src="tm/img/stock_images/700x430_6.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <pre class="prettyprint "><div class="container"> <div class="row"> <div class="col-md-6"> <div class="thumb-pad"> <div class="thumbnail"> <img src="image_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Text.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> <div class="col-md-6"> <div class="thumb-pad"> <div class="thumbnail"> <img src="image_1.jpg" alt=""> <div class="caption"> <h5>Thumbnail label</h5> <p>Text.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> </div></pre> </div> </div> </div> </div> <!-- Two Columns with Caption End --> <!-- Two Columns Begin --> <div class="tab-pane" id="tab6"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_1.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_2.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_3.jpg" alt=""></a> </div> </div> <div class="col-md-6"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_4.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_5.jpg" alt=""></a> </div> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_6.jpg" alt=""></a> </div> </div> </div> <div class="row"> <div class="col-md-12"> <pre class="prettyprint "><div class="container"> <div class="row"> <div class="col-md-6"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="image_2.jpg" alt=""></a> </div> </div> <div class="col-md-6"> <div class="thumb-pad"> <a href="#" class="thumbnail"><img src="image_2.jpg" alt=""></a> </div> </div> </div> </div></pre> </div> </div> </div> </div> <!-- Two Columns End --> <!-- Full-width Begin --> <div class="tab-pane" id="tab7"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="row thumb-pad"> <div class="col-md-4"><a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_1.jpg" alt=""></a></div> <div class="col-md-8"> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p> <p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> <div class="row thumb-pad"> <div class="col-md-4"><a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_2.jpg" alt=""></a></div> <div class="col-md-8"> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p> <p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> <div class="row thumb-pad"> <div class="col-md-8"> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p> <p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p> <div class=" alignright"><a href="#" class="btn btn-default">Read More</a></div> </div> <div class="col-md-4"><a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_3.jpg" alt=""></a></div> </div> <div class="row thumb-pad"> <div class="col-md-8"> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque. Vivamus eget nibh. Etiam cursus leo vel metus. Nulla facilisi. Aenean augue. Nam elit magna, hendrerit sit amet, tincidunt ac, viverra sed, nulla. Donec porta diam eu massa. Quisque diam lorem, interdum vitae, dapibus ac, scelerisque vitae, pede.</p> <p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac lorem. Vestibulum sed ante. Donec sagittis euismod purus voluptatem accusantium doloremque. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p> <div class=" alignright"><a href="#" class="btn btn-default">Read More</a></div> </div> <div class="col-md-4"><a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_4.jpg" alt=""></a></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <pre class="prettyprint "><div class="container"> <div class="row"> <div class="col-md-12"> <div class="row thumb-pad"> <div class="col-md-4"><a href="#" class="thumbnail"><img src="image_1.jpg" alt=""></a></div> <div class="col-md-8"> <p>Quisque nulla. Vestibulum libero nisl, porta vel, scelerisque eget, malesuada at, neque.</p> <p>Mauris accumsan nulla vel diam. Sed lacus ut enim adipiscing aliquet. Nulla venenatis.</p> <a href="#" class="btn btn-default">Read More</a> </div> </div> </div> </div> </div></pre> </div> </div> </div> </div> <!-- Full-width End --></div> </section> <section id="isotope"> <div class="row"> <div class="col-md-12"> <div class="page-header"> <h1>Isotope Plugin <small>An exquisite jQuery plugin for magical layouts</small></h1> </div> <div id="options" class="clearfix"> <ul id="filters" class="pagination option-set clearfix" data-option-key="filter"> <li><a href="#filter" data-option-value="*" class="selected">show all</a></li> <li><a href="#filter" data-option-value=".prod">products</a></li> <li><a href="#filter" data-option-value=".serv">services</a></li> </ul> </div> <!-- #options --> <div id="container" class="clearfix"> <div class="element transition prod" data-category="transition"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_1.jpg" alt=""></a> </div> <div class="element serv" data-category="metalloid"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_2.jpg" alt=""></a> </div> <div class="element post-transition prod" data-category="post-transition"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_3.jpg" alt=""></a> </div> <div class="element transition serv" data-category="transition"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_4.jpg" alt=""></a> </div> <div class="element alkaline-earth prod" data-category="alkaline-earth"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_5.jpg" alt=""></a> </div> <div class="element transition serv" data-category="transition"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_6.jpg" alt=""></a> </div> <div class="element post-transition prod" data-category="post-transition"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_7.jpg" alt=""></a> </div> <div class="element serv" data-category="metalloid"> <a href="#" class="thumbnail"><img src="tm/img/stock_images/700x430_8.jpg" alt=""></a> </div> </div> </div> </div> <div style="clear:both;"></div> <div class="row"> <div class="col-md-12"> <h3>Basic structure</h3> <p>Isotope works on a container element with a group of similar child items.</p> <pre class="prettyprint "> <div id="container"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> ... </div></pre> <h3>Initialization</h3> <pre class="prettyprint ">$('#container').isotope({ // options itemSelector : '.item', layoutMode : 'fitRows' });</pre> <h3>Essential CSS</h3> <p>Add these styles to your CSS for filtering, animation with CSS transitions, and adding items.</p> <pre class="prettyprint lang-css">/**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }</pre> <p><a href="http://isotope.metafizzy.co">Isotope</a> by David DeSandro / Metafizzy</p> </div> </div> </section> </div> <!-- Footer ================================================== --> <footer class="bs-docs-footer" role="contentinfo"> <div class="container"> <div class="bs-docs-social"> <ul class="bs-docs-social-buttons"> <li> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" width="100" height="20" title="Star on GitHub"></iframe> </li> <li> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe> </li> <li class="follow-btn"> <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a> </li> <li class="tweet-btn"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Bootstrap">Tweet</a> </li> </ul> </div> <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p> <p>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <ul class="bs-docs-footer-links muted"> <li>Currently v3.2.0</li> <li>·</li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li>·</li> <li><a href="../getting-started/#examples">Examples</a></li> <li>·</li> <li><a href="../2.3.2/">v2.3.2 docs</a></li> <li>·</li> <li><a href="../about/">About</a></li> <li>·</li> <li><a href="http://expo.getbootstrap.com">Expo</a></li> <li>·</li> <li><a href="http://blog.getbootstrap.com">Blog</a></li> <li>·</li> <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li> <li>·</li> <li><a href="https://github.com/twbs/bootstrap/releases">Releases</a></li> </ul> </div> </footer> <script src="tm/js/jquery.js"></script> <script src="tm/js/jquery-migrate-1.2.1.min.js"></script> <script src="dist/js/bootstrap.js"></script> <script src="tm/js/prettify.js"></script> <script src="assets/js/application.js"></script> <script src="tm/js/jquery.isotope.min.js"></script> <script> $(function(){ var $container = $('#container'); $container.isotope({ itemSelector : '.element' }); var $optionSets = $('#options .option-set'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // make option object dynamically, i.e. { filter: '.my-filter-class' } var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value'); // parse 'false' as false boolean value = value === 'false' ? false : value; options[ key ] = value; if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { // changes in layout modes need extra logic changeLayoutMode( $this, options ) } else { // otherwise, apply new options $container.isotope( options ); } return false; }); window.prettyPrint && prettyPrint() }); </script> <script> window.twttr = (function (d,s,id) { var t, js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1; js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } }); }(document, "script", "twitter-wjs")); </script> </body> </html>