Well, Twitter’s Bootstrap is the most popular front-end framework and it works against just about any backend. WordPress, Ghost, whatever. So it’s a good time to figure out how to use it:
The most minimal form w3schools explains that it is entirely hosted on the web, so you just need to create a web page and include the basics. Bootply.com has amazing snippets and things to try and bootbundle.com had a terrific set of these.
The system is pretty intuitive and doesn’t require coding. Basically, the standard tags, h1, h2, etc are
And it has a twelve column grid, so basically all the content looks like a table and it usescss classes to tell it how to do layout and it handles layout with the with a series of virtual rows and columns. These are not the html tables, but the syntax is similar so this makes a row with columns that span 12 of bootstraps layout
<span class="highLT"><</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"container"</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"row"</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"col-md-3"</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">p</span><span class="highGT">></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.<span class="highLT"><</span><span class="highELE">/p</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">/div</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"col-md-3"</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">p</span><span class="highGT">></span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.<span class="highLT"><</span><span class="highELE">/p</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">/div</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"col-md-3"</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">p</span><span class="highGT">></span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam.<span class="highLT"><</span><span class="highELE">/p</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">/div</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"col-md-3"</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">p</span><span class="highGT">></span>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.<span class="highLT"><</span><span class="highELE">/p</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">/div</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">/div</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">/div</span><span class="highGT">></span>
Finally lots of sites have a huge thing at the top that is called the Jumbotron class (amazing, there isn’t a trade mark violation
<span class="highLT"><</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"container"</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">div</span> <span class="highATT">class=</span><span class="highVAL">"jumbotron"</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">h1</span><span class="highGT">></span>My first Bootstrap website!<span class="highLT"><</span><span class="highELE">/h1</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">p</span><span class="highGT">></span>This page will grow as we add more and more components from Bootstrap...<span class="highLT"><</span><span class="highELE">/p</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">a</span> <span class="highATT">href=</span><span class="highVAL">"#"</span> <span class="highATT">class=</span><span class="highVAL">"btn btn-info btn-lg"</span><span class="highGT">></span>Search<span class="highLT"><</span><span class="highELE">/a</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">/div</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">/div</span><span class="highGT">></span>
And it includes 200 glypicons for the cool button looks specifying the button class and then letting you search for an icon if you know it’s magical name so the code below gives you a print icon and sticks their search icon into a button.
<span class="highLT"><</span><span class="highELE">span</span> <span class="highATT">class=</span><span class="highVAL">"glyphicon glyphicon-print"</span><span class="highGT">></span><span class="highLT"><</span><span class="highELE">/span</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">a</span> <span class="highATT">href=</span><span class="highVAL">"#"</span> <span class="highATT">class=</span><span class="highVAL">"btn btn-info btn-lg"</span><span class="highGT">></span>
<span class="highLT"><</span><span class="highELE">span</span> <span class="highATT">class=</span><span class="highVAL">"glyphicon glyphicon-search"</span><span class="highGT">></span><span class="highLT"><</span><span class="highELE">/span</span><span class="highGT">></span> Search
<span class="highLT"><</span><span class="highELE">/a</span><span class="highGT">></span>
It also knows about menus as a series of tabs as a native type, so here is the way to put menus right after a jumbotron
“`
<div class=“container”>
<div class=“jumbotron”>
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap…</p>
<a href=“#” class=“btn btn-info btn-lg”>Search</a>
</div>
</div>
<div class=“container”>
<ul class=“nav nav-tabs”>
<li class=“active”><a href=“#”>Home</a></li>
<li><a href=“about”>About Us</a></li>
<li><a href=“contact”>Contact Us</a></li>
<li><a href=“products”>Products</a></li>
</ul>
</div>
