Scribd
Upload
22 views

Bootstrap

The document provides a comprehensive introduction to Bootstrap, detailing installation, usage, and customization of its CSS and JavaScript components. It explains the grid system, responsive design principles, and how to effectively override Bootstrap's default styles. Additionally, it includes information on Bootstrap 4 updates and licensing details for the material presented.

Uploaded by

sitkar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Bootstrap

The document provides a comprehensive introduction to Bootstrap, detailing installation, usage, and customization of its CSS and JavaScript components. It explains the grid system, responsive design principles, and how to effectively override Bootstrap's default styles. Additionally, it includes information on Bootstrap 4 updates and licensing details for the material presented.

Uploaded by

sitkar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 152

Bootstrap

A Quick Introduction

R. Scott Granneman r Jans Carton

© 2014 R. Scott Granneman


Last updated 2016-04-27
You are free to use this work, with certain restrictions.
2.4 For full licensing information, please see the last slide/page.
Notes & URLs for this presentation can be found…

» underneath the link to this slide on granneman.com


» at files.granneman.com/presentations/webdev/
Bootstrap.txt
Installation
getbootstrap.com

Click on Download Bootstrap

getbootstrap.com/getting-started#download

Click on Download Boostrap

You will download a file named something like


bootstrap-3.1.1-dist.zip
Unzip the file & extract the contents to its own folder
Mac users, just double-click on the zip file & you will
have a folder named something like bootstrap-3.1.1-
dist
Windows users, right-click on the zip file & select
Extract Here
Remove unnecessary files
Using
Bootstrap
Bootstrap is really just a collection of pre-made CSS &
JavaScript for you to use with your site

Link to the default CSS & in your <head> JavaScript &


use the CSS classes that Bootstrap provides in your
HTML
How do you know which Bootstrap classes to use, &
which classes do what?

bootstrap.css is ~7000 lines—do not read it!

Read the documentation at getbootstrap.com


Or, use your browser’s Inspector to find the exact
selector that Bootstrap uses & then find that selector in
bootstrap.css
Do not edit the default CSS & JavaScript!

Create your own CSS & link to it after you link to


bootstrap.css

<link href="css/bootstrap.css"
rel="stylesheet">
<link href="css/me.css" rel="stylesheet">

Override Bootstrap’s CSS as needed in your CSS


An easy example, with an easy selector
I decide to add rounded
corners to an image, so
I check out what class to
use at getbootstrap.com
I add it to my code
It looks OK, but I’d
like the corners to be
more rounded than
Bootstrap’s default
I open the browser’s
Inspector, select the
image, & see the rule
that Bootstrap has
defined
I edit my code, using the
same class name as
Bootstrap does, & change
the value of the border-
radius property
Now the corners are
more rounded than
Bootstrap’s default!
A more complex example
This page needs a
breadcrumb trail to
indicate hierarchy &
wayfinding
Bootstrap says to use this
HTML structure & CSS
classes to create a
breadcrumb
I add it to my code
I really don’t like the /
that Bootstrap uses as a
default separator, since
it’s confusing & ugly
I open the browser’s
Inspector, select the
breadcrumb, & see the
rule that Bootstrap uses
My CSS comes after
Bootstrap’s so that mine
has more weight
according to the Cascade
I edit my CSS, using the same
selector Bootstrap does, &
change only the value of the
content property (the ➤ is a
Unicode symbol)
Much better!—& notice that
the browser’s Inspector
shows that my CSS weighs
more than Bootstrap’s
Template
<meta name="viewport" content="width=device-
width, initial-scale=1">
By default, mobile browsers zoom websites so that the
websites fill the device screen
If they didn’t do that, you’d get bad results & unhappy
users
<meta name="viewport" content="width=device-
width, initial-scale=1">

Essentially, putting this in your <head> tells the


browser that it should not zoom, & that you will handle
how it looks in the browser yourself (by using
Responsive Web Design)
<meta name="viewport" content="width=device-
width, initial-scale=1">

width=device-width
Tells browser that the website adapts to the browser’s
width, so the width of the viewport should be equal to
the width of the device

initial-scale=1
Sets the initial zoom level: 1 CSS pixel is equal to 1
viewport pixel, ergo, do not zoom
<link href="css/bootstrap.min.css"
rel="stylesheet">
bootstrap.min.css

The .min stands for minified

What’s minification?
We don’t need the minified version, so change it to:

<link href="css/bootstrap.css"
rel="stylesheet">
<!-- 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/libs/
html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/
respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
If you need to support IE before version 9, keep

Otherwise, toss it
<!-- jQuery (necessary for Bootstrap's
JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or
include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
Remove the comments, but leave the JavaScript, or
things will break

You can leave the JavaScript just before </body> if you


want, or you can move it just before </head>

Just make sure any JavaScript you use that requires


jQuery comes after it
<!-- jQuery (necessary for Bootstrap's JavaScript
plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include
individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
So, your <head> should now look like this…
<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>

<link href="css/bootstrap.css"
rel="stylesheet">
<link href="css/scott.css" rel="stylesheet">
</head>
And your <body> like this…
<body>
<h1>Hello, world!</h1>

<script src="https://ajax.googleapis.com/
ajax/libs/jquery/1.11.2/jquery.min.js"></
script>
<script src=“js/bootstrap.js"></script>
</body>
Grid System
Content (e.g., text & images) goes inside elements with
CSS classes (e.g., col-md-8) that turn those elements
into columns & define…

» how many column widths they span, between 1–12


(e.g., -8)
» the size of the breakpoint at which changes to column
widths happen (e.g., -md)

Columns go inside elements with a CSS class of row

Rows go inside elements with a CSS class of container


<main class="container">
<div class="row">
<article class="col-sm-8">
…
</article>
<aside class="col-sm-4">
…
</aside>
</div>
</main>
<main class="container">
<div class="row">
<article class="col-sm-8">
…
</article> Column
<aside class="col-sm-4">
…
</aside> Column
</div>
</main>
<main class="container">
<div class="row">
<article class="col-sm-8">
…
</article> Column
<aside class="col-sm-4">
…
</aside> Column
</div> Row
</main>
<main class="container">
<div class="row">
<article class="col-sm-8">
…
</article> Column
<aside class="col-sm-4">
…
</aside> Column
</div> Row
</main> Container
Containers
The grid system requires an element with a class of
container on it to create a responsive container for
rows

<div class="container">
...
</div>

Containers are not nestable


Size Name Device Container Width
Extra Small (xs) Phones Fluid
Small (sm) Tablets 750px
Medium (md) Tablets in landscape 970px
& desktops
Large (lg) Desktops 1170px
Rows
Any element that is going to have horizontal groups of
columns in it must…

» be a child of the container element


» have a class of row on it

<div class="container">
<article class="row">
…
</article>
<aside class="row">
…
</aside>
</div>
The container element can have other children
besides row elements

Anything that you always want to span the full width


of the container element does not need to be inside
the row element(s)

» Headings (e.g., <h1>)


» <header>
» <footer>
» Horizontal navigation bar
The only immediate children allowed inside rows?

Columns
Columns
Remember those 12 columns that Bootstrap uses?

Content that is responsive (e.g., text & images) goes


inside elements with CSS classes (e.g., col-md-8) that
turn those elements into columns & define…

» how many column widths they span, between 1–12


(e.g., -8)
» the size of the breakpoint at which changes to column
widths happen (e.g., -md)
HTML CSS

Written by you In bootstrap.css


class="col-lg-6" .col-lg-6 {}

class="col-md-6" .col-md-6 {}

class="col-sm-6" .col-sm-6 {}

class="col-xs-6" .col-xs-6 {}
Bootstrap is mobile-first

Therefore, the default width is always…

» 12 columns
which is the same as…
» 100% width
which is the same as…
» full width
lg The lg column inherits the size of the md column

md The md column inherits the size of the sm column

sm The sm column inherits the size of the xs column

xs A size is set for an xs column (e.g., col-xs-6)

Bootstrap is mobile-first
Because the default width of a column is 12 (unless
overridden) & because column sizes are inherited from
xs up to lg, this would be unnecessary:

<div class="col-xs-12 col-sm-12 col-md-8 col-


lg-8">

What should it be?


Because the default width of a column is 12 (unless
overridden) & because column sizes are inherited from
xs up to lg, this would be unnecessary:

<div class="col-xs-12 col-sm-12 col-md-8 col-


lg-8">

What should it be?

<div class="col-md-8">
Size Name Device Column Width
Extra Small (xs) Phones Fluid
Small (sm) Tablets 60px
Medium (md) Tablets in portrait 78px
& desktops
Large (lg) Desktops 95px

15px gutter around each column


Tools
Themes
Free
Official
Browser Tools
Viewport Resizer
Click & drag
to your
Bookmarks/
Favorites Bar
The default Viewport Resizer bookmarklet isn’t
specifically geared towards Bootstrap’s breakpoints

So I made one

Scroll down the page to the Build Your Own


Bookmarklet Here section
Go to http://chnsa.ws/wj & copy the text there, or use
this:

<a data-viewport="640×960" data-


icon="mobile">xs (640)</a><a data-
viewport="800×1280" data-icon="tablet">sm
(800)</a><a data-viewport="1024x768" data-
icon="notebook">md (1024)</a><a data-
viewport="1280x800" data-icon="tv">lg (1280)</
a>
Testing
BrowserStack
Cross-browser testing live via the Web

Excellent service

www.browserstack.com
Bootstrap 4
Sass instead of Less

Cards instead of wells, thumbnails, & panels


5 breakpoints instead of 4

Opt-in flexbox-based grid system instead of floats


Font icons will be removed

Link to Font Awesome (or something else) yourself

Better yet, use SVG


No more IE 8 support
Pixels have been swapped for rems & ems (where
appropriate)
Rewrote all JavaScript plugins
Thank you!

[email protected]
www.granneman.com
ChainsawOnATireSwing.com
@scottgranneman

[email protected]
websanity.com
Bootstrap
A Quick Introduction

R. Scott Granneman r Jans Carton

© 2014 R. Scott Granneman


Last updated 2016-04-27
You are free to use this work, with certain restrictions.
2.4 For full licensing information, please see the last slide/page.
Changelog

2016-04-27 2.4: Changed instructions to move


<script> to <head>; added minification explanation;
Bootstrap-specific bookmarklet; more info re:
Bootstrap themes; cleaned up small errors
2016-02-16 2.3: Added Bootstrap 4 section
2015-06-11 2.2: Fixed a bunch of errors in layout in
Grid System; small fixes
2015-05-24 2.1: Completely re-ordered Grid System
& added lots more detail, examples, & clarification;
added Tools section with Viewport Resizer &
BrowserStack
Changelog

2015-05-20 2.0: Updated image showing Bootstrap contents;


showed contents after culling; added examples of Bootstrap
documentation for classes; added recommendation to use
browser Inspector; simplified explanation of <meta> for disabling
zooming; explained why you should move JS into <head>; added
better clarification of Grid System; showed how to override
Bootstrap’s CSS with your own; added more about <head>
2015-01-14 1.1: Removed “inherit” & clarified relationship
between Bootstrap’s CSS & yours
2014-05-18 1.0.1: Replaced image showing default Bootstrap
files
Licensing of this work
This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.

To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.

You are free to:

» Share — copy and redistribute the material in any medium or format


» Adapt — remix, transform, and build upon the material for any purpose, even commercially

Under the following terms:

Attribution. You must give appropriate credit, provide a link to the license, and indicate if changes were made.
You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your
use. Give credit to:

Scott Granneman • www.granneman.com • [email protected]

Share Alike. If you remix, transform, or build upon the material, you must distribute your contributions under
the same license as the original.

No additional restrictions. You may not apply legal terms or technological measures that legally restrict others
from doing anything the license permits.

Questions? Email [email protected]

You might also like