Bootstrap
Bootstrap
Bootstrap
What is Bootstrap?
- an HTML, CSS & JS framework
- built by developers at Twitter
- mobile-ready
- responsive
- saves lots of time
- Built with Bootstrap:
Let's Get Started
- http://getbootstrap.com/
- click "Getting Started"
- scroll down to Basic Template
- copy the Bootstrap template
- scroll up to "Bootstrap CDN" section
(CDN = Content Delivery Network) - replace Bootstrap css and js links
Simple Test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>Use the inspector
- hover over the "hello world"
- right click to "inspect element"
- notice the styles being applied
- click the "sources" tab
- notice the bootstrap folder
Bootstrap-ify
- http://getbootstrap.com/components/#jumbotron
- replace h1 with jumbotron awesomeness
- test responsiveness in browser
<div class="jumbotron">
<h1>Jaime's Awesome Site</h1>
<p>My name is Jaime Panaia.</p>
<a class="btn btn-primary btn-lg">Click this!</a>
</div>
Grid Talk
- http://getbootstrap.com/css/#grid
- responsive page layouts using rows & columns
- add a fixed container with hipster ipsum filler text
<div class="container">
<div class="row">
<div class="col-md-12">
<p>Scenester meggings gentrify lo-fi, narwhal ethical master cleanse put a bird on it mumblecore quinoa squid Neutra synth. Kogi Pinterest salvia single-origin coffee lomo typewriter. Typewriter whatever disrupt readymade, Cosby sweater squid trust fund Godard kale chips Williamsburg. Bespoke flannel whatever, hoodie cliche quinoa American Apparel single-origin coffee farm-to-table squid Tonx aesthetic pug. Church-key McSweeney's pop-up, forage tattooed Pitchfork hoodie craft beer viral locavore master cleanse cray. Cosby sweater paleo shabby chic, keytar hella Blue Bottle distillery skateboard flexitarian art party heirloom beard. Fingerstache forage bitters craft beer quinoa, Kickstarter gastropub.</p>
<p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo. Pinterest plaid squid, literally pop-up direct trade Neutra semiotics. Asymmetrical chillwave fap Neutra. Ethical butcher farm-to-table, fanny pack biodiesel pug McSweeney's sriracha. Quinoa roof party crucifix VHS typewriter, Shoreditch Kickstarter whatever asymmetrical sartorial tofu pork belly Blue Bottle viral chia.</p>
</div>
</div>
</div>Grid Challenge
- add a new row with 3 columns
- hint: use class="col-md-4"
Grid Solution
<div class="row">
<div class="col-md-4">
<p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo.</p>
</div>
<div class="col-md-4">
<p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mi</p>
</div>
<div class="col-md-4">
<p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mi</p>
</div>
</div>
Give your brain a rest.
Break!
Buttons!
<a href="#" class="btn btn-success">Sign Up Now!</a>Add a footer
<footer>
<div class="container">
<div class="row">
<div class="col-md-4">© 2014</div>
<div class="col-md-4">
<ul class="nav nav-pills">
<li><a href="#">Contact Us </a></li>
<li><a href="#">Get Support</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="col-md-4">
<p class="text-right"><a href="#">Follow Us</a></p>
</div>
</div>
</div>
</footer>- use a 3 column layout (again)
- Include copyright, navigation, follow me
Add a glyph (icon)
<li><a href="#">Contact Us <span class="glyphicon glyphicon-envelope"></span></a></li>
- http://getbootstrap.com/components/#glyphicons
- use a span to keep it inline
Throw in a navbar
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>- http://getbootstrap.com/components/#navbar
- take it right from the docs
- brand
- dropdowns
- active class
- inline form
- placeholder
- remove anything that's unwanted
Navbar Features
- http://getbootstrap.com/components/#panels
- Enclose the content in each column into a panel
- Add some colorful panel titles
- Holler "I LOVE BOOTSTRAP" when you're finished
- Share with class
Panel Challenge
Panel Solution
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading panel-primary">Heading 1</div>
<div class="panel-body">
<p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-success">
<div class="panel-heading">Heading 2</div>
<div class="panel-body">
<p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-warning">
<div class="panel-heading">Heading 3</div>
<div class="panel-body">
<p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo.</p>
</div>
</div>
</div>
</div>
</div>
- http://getbootstrap.com/components/#media
- add a media object into your second column panel
Add a media object
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://img.ehowcdn.com/other-people/ehow/images/a08/bg/d6/size-miniature-dachshund-800x800.jpg" alt="Doxie">
</a>
<div class="media-body">
<h4 class="media-heading">Mini Dachshunds are my favorite</h4>
<p>Authentic typewriter you probably haven't heard of them normcore, sustainable hoodie Thundercats heirloom squid craft beer Schlitz. Ugh biodiesel Pitchfork mixtape High Life. Put a bird on it selvage bicycle rights paleo.</p>
</div>
</div>- http://getbootstrap.com/components/#responsive-embed
- find a video on youtube and add it to the first column panel
Embed a video!
<div class="embed-responsive embed-responsive-16by9">
<iframe src="http://www.youtube.com/embed/jR4lLJu_-wE" class="embed-responsive-item"></iframe>
</div>- pagination
- badges
- alerts
- progress bar
- etc
Additional Features
Break (dance) time!
Bootstrap Themes
Try adding some themes and make your page look uber fancy!
Overriding
Bootstrap Styles
- Add an external style sheet called "bootstrap-styles.css" to the "assets/stylesheets" folder
- Link this stylesheet to bootstrap.html
- Use the inspector tool to determine the class you'd like to override
- Write more specific styles
- Add Bootstrap to your blog site
- Add a navbar, header and footer
- Flow each page of your content into a 2 or 3 column grid
- Add an external stylesheet and write a few styles
- If there's time add a theme!