#NICAR 2015: Twitter Bootstrap Responsive, mobile-first HTML, CSS, JS framework
One of the most supported, popular and feature-filled ways to get started building a website is to use Twitter Bootstrap. Bootstrap is a responsive, mobile-first HTML, CSS, & JS framework. Know what those three terms (responsive, mobile-first and framework) mean? If not, take a moment to look them up.
NICAR 2015 • March 7th • 2:10PM - 3:10PM
http://slides.com/ebigalee/nicar-2015-bootstrap
###What you will need today:
- Open a browser – Chrome or Firefox for today please.
- A text editor of your choice:
- Text Wrangler (free)
- SublimeText2 or SublimeText3 (free trial)
- Brackets (free)
##I. Get Started Gather Bootstrap 3 resources for a project.
####1. Include CDN links This means you're going to pull in the Bootstrap files to your website on load. If you aren't able to download Bootstrap today, use this option. It means you won't have the files as part of your website structure below. Do the following then skip to section II.
- Create a project folder called “Bootstrap_NICAR_2015”
- Inside your project folder, create a folder called "css"
- Optional for today, add folders called "images" and "js"
- Jump down to Section II.
####2. Bootstrap offers three download options:
- If you need a basic structure and you ARE NOT already using a compiler – choose the first option “Bootstrap”
- If terms like SASS, Grunt, Gulp, Bower, Yeoman, Compass, and so on, mean something to you, then the more customizable option is to use either “Source Code,” which uses LESS, or “Sass,” which is a port using SASS/SCSS.
Today we’re going to choose the first option “Bootstrap.”
If you have trouble downloading, please let me know. We can also use the CDN without much trouble.
- On http://getbootstrap.com/getting-started/, choose the “Bootstrap” download option.
- Unzip the downloaded file.
- Move the Bootstrap folder (ex. bootstrap-3.3.2-dist) outside of Downloads.
- Rename the folder “Bootstrap_NICAR_2015” or a name of your choice.
NOTE: You can also choose to drop the Bootstrap files and folders into a current project, but today we’re going to use Bootstrap as our starter folder for a project.
##II. Set up a Project Use Bootstrap to set up a basic website structure.
###Using Bootstrap as your project folder: We’ll need to add a few more pieces so we can start working on our new website:
- In the Finder, add an images folder
- Add a blank page called index.html
- Add a blank page called styles.css file into the css folder
- Open index.html and styles.css in your text editor
- Open index.html in your browser so we can see our site
###1. Paste in Bootstrap’s basic HTML template in index.html
Notice that Bootstrap’s styles (CSS & Components) are linked in to our new page within the <head> tag, and that Bootstrap’s jQuery plugins (JavaScript) are linked in at the very bottom of the <body> tag. We’re also given a CDN to connect to a recent version of jQuery, which is required for the JS (functional) portions to work.
###2. Link styles.css to index.html We will need our own stylesheet to add our own custom styles to the website.
index.html:
<head>
...
<link href="css/styles.css" rel="stylesheet">
</head>
Place this resource beneath the to our Bootstrap styles in the <head> — needs to underneath the link for Bootstrap’s CSS because we might want to override those styles.
If you're using the CDN today:
Replace CSS link with first two lines. Replace link to JS right before </body> with last two lines.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
###3. Paste in default Bootstrap media queries
styles.css:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Most of your styles will be underneath this comment but before ‘Small devices’ */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
We are using the vanilla version of Bootstrap with CSS. This means we need to take the variables in this example and set them to pixel widths. We also want to remove the dot-dot-dot, which indicates we should put our styles between the curly brackets.
styles.css:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
##III. Using Bootstrap’s predefined classes Use Bootstrap’s styles and components to build your site.
###1. Set up a grid system using a container with rows and columns
Nearly required is <div class="container">, but the rows and columns are optional. Only use them when you want to or need to. You CANNOT have columns if you have not set a row first.
####Basics
- Twelve columns in each row, even if it’s a row inside of a row.
- Choice of container type (responsive columns won’t work without this set):
- .container – wrapper that automatically sucks in content
- .container-fluid – wrapper that doesn’t suck in content
index.html
<body>
<div class="container">
<h1>NICAR 2015: Bootstrap</h1>
<p class="lead">Basic columns in Bootstrap</p>
<div class="row">
<div class="col-md-4">
<!-- content -->
</div>
<div class="col-md-8">
<!-- content -->
</div>
</div> <!-- .row -->
</div> <!-- .container -->
<script>…</script>
</body>
###Special classes
.lead
Example usage: <p class="lead"></p>
Common usage: for a tagline because it automatically makes the font-size larger or smaller as the page is resized
--> Let’s add some styling and content so we can see that our grid system is working.
- Add in text to fill up our columns for today - http://www.cupcakeipsum.com/)
- Mark up this content with HTML using some of the tags using Bootstrap’s typography styling: (http://getbootstrap.com/css/#type)
index.html:
…
<div class="col-md-4 hiro">
<!-- content -->
</div>
<div class="col-md-8 baymax">
<!-- content -->
</div>
…
styles.css:
.hiro {
background-color: #ccc;
}
.baymax {
background-color: #666;
}
###2. Start with pre-defined styles for basic elements
Bootstrap provides default styling for essential typography, tables, forms, buttons and images. Look through the documentation for examples.
--> Let’s add a button:
Use any of the predefined styles to change what your button looks like:
###3. Add navigation Navigation can be added on your own, or you can make use of the various ways Bootstrap provides, such as dropdowns, button dropdown, tabs, “pills” or a pre-styled navbar.
- http://getbootstrap.com/examples/starter-template/
An example of a basic fixed navigation can be found in the starter template. - http://getbootstrap.com/components/#navbar
More complex navbar and other nav options can be found in the documentation.
####Basic navbar options include:
.navbar-fixed-top
Fixes the navbar menu to the top of the screen.
.navbar-inverse
Styles the default navbar with dark colors.
.navbar-default
Styles the default navbar with light colors.
####Set a different page to be active: --> Let’s simplify our navigation so we get a feel for what the Bootstrap navbar includes:
- Inside the code, get rid of:
a.
<form>b.<ul class="nav navbar-nav navbar-right">c. and INSIDE<ul class="nav navbar-nav">, remove<li class="dropdown">. - Inside
<ul class="nav navbar-nav">, add in 3-4 new<li><a href="#">Link</a></li> - Change which link is active by added to your
<li class="active">then reload.
##4. Make an embedded object work in your responsive grid
If you’re embedding a video or other content, it will usually come in an <iframe>, ,