Skip to content

Instantly share code, notes, and snippets.

@krutz27

krutz27/bootable bootstrap theme

Created October 4, 2013 13:57
Show Gist options
  • Save krutz27/6826322 to your computer and use it in GitHub Desktop.
Save krutz27/6826322 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootable bootstrap theme
<div class="col-md-2"></div><!-- Begin Navbar -->
<div class="navbar navbar-static">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.bootply.com" target="ext"><b>Bootply</b></a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Channels</a>
<ul class="dropdown-menu">
<li><a href="#">Sub-link</a></li>
<li><a href="#">Sub-link</a></li>
<li><a href="#">Sub-link</a></li>
<li><a href="#">Sub-link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-search"></i></a>
<ul class="dropdown-menu" style="padding:12px;">
<form class="form-inline">
<button type="submit" class="btn btn-default pull-right"><i class="glyphicon glyphicon-search"></i></button><input class="form-control pull-left" placeholder="Search" type="text">
</form>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Login</a></li>
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">About</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /.navbar -->
<header class="masthead">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1><a href="#" title="Scroll down for your viewing pleasure">Bootable Template</a>
<p class="lead">3-column Theme + Layout for Bootstrap 3.</p></h1>
</div>
<div class="col-md-6">
<div class="well pull-right">
<img src="//placehold.it/280x100/E7E7E7">
</div>
</div>
</div>
</div>
</header>
<!-- Begin Body -->
<div class="container">
<div class="no-gutter row">
<!-- left side column -->
<div class="col-md-2">
<div class="panel panel-default" id="sidebar">
<div class="panel-heading" style="background-color:#888;color:#fff;">Sidebar</div>
<div class="panel-body">
<ul class="nav nav-stacked">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Accordion
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Content here for links, ads, etc..
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Accordion
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Another collapse panel. Content here for links, ads, etc..
</div>
</div>
</div>
</div><!--/acc-->
<hr>
<div class="col col-span-12">
<i class="icon-2x icon-facebook"></i>&nbsp;
<i class="icon-2x icon-twitter"></i>&nbsp;
<i class="icon-2x icon-linkedin"></i>&nbsp;
<i class="icon-2x icon-pinterest"></i>
</div>
</div><!--/panel body-->
</div><!--/panel-->
</div><!--/end left column-->
<!--mid column-->
<div class="col-md-3">
<div class="panel" id="midCol">
<div class="panel-heading" style="background-color:#555;color:#eee;">New Stories</div>
<div class="panel-body">
<img class="img-responsive" src="//placehold.it/300/77CCDD/66BBCC">
<div class="well">
<img src="/assets/example/bg1.jpg" class="img-responsive">
<h3><a href="http://getbootstrap.com">Bootstrap 3 is Here.</a></h3>
<p>
In simple terms, a responsive web design figures out what resolution of
device it's being served on. Flexible grids then size correctly to fit
the screen.
</p>
<p><a href="http://www.bootply.com/bootstrap-3-migration-guide" target="ext">Read our migration guide for help with upgrading to Bootstrap 3.</a></p>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/80/444444">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#" class="pull-right"><i class="glyphicon glyphicon-share"></i></a><strong>Front End</strong></h5>
Bootstrap is considered a "front-end" framework.<br>
<span class="badge">54</span>
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/80/CCC">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#" class="pull-right"><i class="glyphicon glyphicon-share"></i></a><strong>CSS3</strong></h5>
The CSS3 spec has helped to accelerate RWD.<br>
<span class="badge">239</span>
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/80/339933/FFF">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#" title="social share" class="pull-right"><i class="glyphicon glyphicon-share"></i></a><strong>HTML5</strong></h5>
A key driver of mobile web development.<br>
<span class="badge">53</span>
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/80/DDDDDD">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#" class="pull-right"><i class="glyphicon glyphicon-share"></i></a><strong>Patterns</strong></h5>
Patterns apply to UI and backend architecture.<br>
<span class="badge">29</span>
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/80/333333/FFF">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#" class="pull-right"><i class="glyphicon glyphicon-share"></i></a><strong>Micro JS</strong></h5>
Small micro-libraries are all the rage.<br>
<span class="badge">51</span>
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/80/339933/FFF">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="#" class="pull-right"><i class="glyphicon glyphicon-share"></i></a><strong>NodeJS</strong></h5>
NodeJS facilitates server-side JavaScript.<br>
<span class="badge">88</span>
</div>
</div>
<hr>
<h3>Top Members</h3>
<h5><a href="#"><i class="glyphicon glyphicon-user"></i> John Chapman</a></h5>
<h5><a href="#"><i class="glyphicon glyphicon-user"></i> Max Axleton</a></h5>
<h5><a href="#"><i class="glyphicon glyphicon-user"></i> Devin Skelly</a></h5>
<h5><a href="#"><i class="glyphicon glyphicon-user"></i> Katie Kowalski</a></h5>
<h5><a href="#"><i class="glyphicon glyphicon-user"></i> Amet Deberge</a></h5>
<hr>
<img class="img-responsive" src="//placehold.it/300x200/FFF">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/80/F0F0F0">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="/tagged/modal" target="ext" class="pull-right"><i class="glyphicon glyphicon-share"></i></a> <a href="#"><strong>Modal</strong></a></h5>
Examples using the Bootstrap modal.<br>
<span class="badge">87</span>
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/80/F0F0F0">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="/tagged/slider" target="ext" class="pull-right"><i class="glyphicon glyphicon-share"></i></a> <a href="#"><strong>Carousel</strong></a></h5>
How to use the Bootstrap slider.<br>
<span class="badge">322</span>
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/80/F0F0F0">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="/tagged/typography" target="ext" class="pull-right"><i class="glyphicon glyphicon-share"></i></a> <a href="#"><strong>Typography</strong></a></h5>
See the various textual elements and options.<br>
<span class="badge">44</span>
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/80/F0F0F0">
</a>
<div class="media-body">
<h5 class="media-heading"><a href="/tagged/media" target="ext" class="pull-right"><i class="glyphicon glyphicon-share"></i></a> <a href="#"><strong>@Media</strong></a></h5>
Use @media queries to get the layout you want.<br>
<span class="badge">119</span>
</div>
</div>
</div>
</div><!--/panel-->
</div><!--/end mid column-->
<!-- right content column-->
<div class="col-md-7" id="content">
<div class="panel">
<div class="panel-heading" style="background-color:#111;color:#fff;">Top Stories</div>
<div class="panel-body">
<div class="row">
<div class="col-md-8">
<!--<img src="/assets/example/bg1.jpg" class="img-responsive">-->
<h2>2013. The Year of Responsive Design.</h2>
2013 is marked as the year of Responsive Web Design (RWD). The Web is filled with big brands, galleries and magical examples that media queries demonstrate the glory of responsive design.
<br><br>
<button class="btn btn-default">More</button>
</div>
<div class="col col-sm-4">
<a href="#"><img src="/assets/example/bg_dogcat.jpg" class="img-responsive"></a>
<div class="text-muted"><small>Aug 15 / John Pierce</small></div>
<p>
Web design has come a long way since 1999.
</p>
<hr>
<img src="/assets/example/bg_blueplane.jpg" class="img-responsive">
<div class="text-muted"><small>Aug 15 / Wilson Traiker</small></div>
<p>
The "flat" look was a big trend this year.
</p>
</div>
</div>
<hr>
"Mobile first" and "unobtrusive JavaScript" (AKA: "progressive enhancement") are strategies for when a new site design is being considered. These are related concepts that predated RWD: browsers of basic mobile phones do not understand JavaScript or media queries, so the recommended practice is to create a basic web site then enhance it for smart phones and PCs—rather than try "graceful degradation" to make a complex, image-heavy site work on the most basic mobile phones.
<br><br>
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012.[1] and is a cornerstone technology of Responsive Web Design.
<hr>
<div class="well text-center">
<h1>Centered Text</h1>
This was a 2.x challenge that seems a little easier in 3. Just think of all the camera icons you could center.
<br><br>
<div style="font-size:70pt">
<i class="glyphicon glyphicon-4x glyphicon-camera"></i>
<i class="glyphicon glyphicon-4x glyphicon-camera"></i>
<i class="glyphicon glyphicon-4x glyphicon-camera"></i>
</div>
</div>
<hr>
<h2>CSS3</h2>
<img src="//placehold.it/150x100/EEEEEE" class="img-responsive pull-right">
To understand the RWD approach, you must first understand CSS - the basis of responsive design. CSS enables the developer to use percentage-based (AKA fluid or proportion-based) grids, CSS3 media queries. The web site then adapts to multiple devices (desktop, laptop, tablet, smartphone) and display conditions such as browser size and screen resolution.
<br><br>
<button class="btn btn-default">More</button>
<hr>
<div class="row">
<div class="col-md-6">
<img src="/assets/example/bg_smartphones.jpg" class="img-responsive">
</div>
<div class="col-md-6">
<h1>There is still a lot to be said about the Responsive Web.</h1>
</div>
</div>
<hr>
<h2>Responsive Text</h2>
Have you ever seen large text blocks overflow their container, or get cut-off? One way to handle this is to ensure
the text content wraps inside the container. But the more "responsive" way is to scale font-sizes accordingly as the size of the viewing area
(viewport) changes. Creators of <a href="http://fittextjs.com/">FitText</a> have mastered this in the form of a plugin.
<hr>
<div class="well">
<h1>Well..</h1>
Does anyone know why <a href="#">@mdo</a> or <a href="#">@fat</a> would name this element a "well"?
</div>
<hr>
<h2>Responsive Images</h2>
The sizing "grid" is not the only aspect of responsive design. Making images and media object scale correctly is another consideration for responsive developers.
<span class="hidden-sm">Go ahead and shrink your browser's width to see how the HTML elements and images respond as the width of the viewport changes.</span>
<h1><a href="#"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a></h1>
<hr>
Bootstrap 3 is the latest "Mobile-first" release of the Bootstrap framework that offers a starter foundation for Web designers and developers.
Bootstrap consists of a CSS and JavaScript library. To use Bootstrap, you simply include (reference) in the HTML of your Web page. There is also a CDN for
Bootstrap that serves pages faster.
<hr>
This theme was made at Bootply. Bootply is a HTML, JavaScript and CSS editor app built just for Bootstrap. Bootply enables developers to easily apply the Bootstrap Framework to their projects using a beautiful hand-coding interface. The browser-based Bootply editor lets developers select and paste Bootstrap friendly code snippets. Bootply can be used to test, manage and share any Bootstrap code, from small snippets to entire Bootstrap-ready themes. Find it at http://bootply.com
<hr>
<div class="row">
<div class="col-md-3 col-sm-6 col-6">
<a href="#"><img src="//placehold.it/200/EDEDED" class="img-responsive"></a>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#"><img src="//placehold.it/200/DDDDDD" class="img-responsive"></a>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#"><img src="//placehold.it/200/555555/EEE" class="img-responsive"></a>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#"><img src="//placehold.it/200/F3F3F3" class="img-responsive"></a>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3 col-sm-6 col-6">
<a href="#"><img src="//placehold.it/200/999999/DDD" class="img-responsive"></a>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#"><img src="//placehold.it/200/CCCCCC" class="img-responsive"></a>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#"><img src="//placehold.it/200/EDEDED" class="img-responsive"></a>
</div>
<div class="col-md-3 col-sm-6 col-6">
<a href="#"><img src="//placehold.it/200/E0E0E0" class="img-responsive"></a>
</div>
</div>
<hr>
<h4><a href="http://bootply.com/69913">Edit on Bootply</a></h4>
<hr>
</div><!--/panel-body-->
</div><!--/panel-->
<!--/end right column-->
</div>
</div>
</div>
$('#sidebar').affix({
offset: {
top: 230,
bottom: 100
}
});
$('#midCol').affix({
offset: {
top: 230,
bottom: 100
}
});
$('#sidebar').affix({
offset: {
top: 230,
bottom: 100
}
});
$('#midCol').affix({
offset: {
top: 230,
bottom: 100
}
});
<footer>
<div class="container">
<div class="row">
<div class="col-md-6">©Company 2013</div>
</div>
</div>
</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment