This document provides an introduction to Bootstrap, an open-source front-end framework for building responsive mobile-first websites and web applications. It discusses the basics of web development using HTML, CSS, and JavaScript. It then explains what Bootstrap is, how to add it to a website, and how to use its grid system, forms, buttons, and other common elements. Resources for using, customizing and finding additional components for Bootstrap are also provided.
3. Web development 101
â HTML
â Defines the data and structure of the page using elements
â CSS
â Defines how the data and the elements actually look, and how they
behave when interacting with them
â JavaScript
â The programming language of the web
4. How to start
You should remember this boilerplate code:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- page content goes here -->
</body>
</html>
5. Basic HTML elements
â Titles - <h1>...</h1> from h1 to h6
â Paragraph - <p>...</p>
â Simple block element - <div></div>
â Simple inline element - <span></span>
â Images - <img src=â...â/>
6. How to use CSS
â Inline CSS
â <div style=âcolor: redâ>This text is red</div>
â Style CSS tag
â <div class=âred-colorâ>This text is red</div>
â <style>
.red-color { color: red; }
</style>
â External CSS file (put in <head>)
â <link rel=âstylesheetâ href=âstyle.cssâ/>
7. Twitter Bootstrap
Twitter Bootstrap is a popular UI framework
http://getbootstrap.com/getting-started/
As of June 28, 2013, 1% of all websites are powered by
Twitter Bootstrap
8. Features
â CSS resetting for cross browser compatibility
â Grid scaffolding for design
â Multi-screen support (responsive design)
â âMobile firstâ, like jQuery Mobile
â And a really good looking UI framework
10. Customization
1. You can customize the CSS yourself (not
recommended)
2. You can use LESS to compile a Bootstrap
CSS version on your own
3. You can just download a customized version
http://bootswatch.com/
11. How to add Twitter Bootstrap
You should use a CDN (content delivery network) for
loading resources.
http://www.bootstrapcdn.com/
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-
scalable=no">
</head>
<body>
<!-- page content goes here -->
</body>
</html>
12. What are those lines?
We use a shared CDN because chances are that common
files are most likely already cached in the userâs computer.
1. The <link> tag loads the CSS - the actual bootstrap
styling. This is obviously the most important
2. The <script> tag loads additional JavaScript capabilities
of the Bootstrap framework
3. The <meta> tag is for smaller devices which have a
viewport, and it disables zooming so that the responsive
features of Bootstrap will kick in
14. The grid (cont.)
How to write pages using a grid:
<!-- every row must have 12 columns -->
<div class=ârowâ>
<div class=âcol-md-4â>
<!-- content -->
</div>
<!-- need to complete 8 more columns -->
</div>
15. The grid (cont.)
Bootstrap 3 features an always-responsive grid with a
maximum size:
1. col-xs-[num] grids have no maximum size (fluid)
2. col-sm-[num] grids resize up to 750px
3. col-md-[num] grids resize up to 970px
4. col-lg-[num] grids resize up to 1170px
You should choose col-md or col-lg for desktop sites.
16. The grid (cont.)
You can also use two grid sizes for different
screen sizes:
<div class=ârowâ>
<div class=âcol-md-4 col-xs-6â>
<!-- content -->
</div>
<div class=âcol-md-8 col-xs-6â>
<!-- content -->
</div>
</div>
19. Buttons can either be button elements, links or
input elements. They will all look like buttons.
â For simple links, use the <a> element and
add button styling if needed.
â For forms or dynamic buttons, use the button
element.
<button class="btn btn-primary">Primary</button>
<a href=âbtn btn-primaryâ>Primary</a>
<input type=âsubmit class=âbtn btn-primaryâ/>
Buttons
20. Bootstrap elements
â Dropdowns
â Tabs
â Pills
â Navbars
â Alerts
â Lists
Check out the Bootstrap reference for more:
http://getbootstrap.com/components/
21. Font icons
To insert a user icon to a button, use the
following syntax inline with any text:
<span class="glyphicon glyphicon-user"></span>
For example, for a button with a star:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
22. Icon resources
â Glyphicons - Comes with bootstrap
â Font Awesome - Recommended
â http://fortawesome.github.io/Font-Awesome/
â Fontello - Customize your font package
â http://fontello.com/
â Free icons - many of them over the internet
â http://www.pixeden.com/media-icons/flat-design-
icons-set-vol1
â Commercial icons - Shutterstock,
istockphoto, etc.
31. Exercise
â Design a page with the following layout
Navigation bar
Big heading
Feature Icon Feature Icon Feature Icon
Feature text Feature text Feature text
Footer