Download - Bootstrap Introduction
Bootstrap IntroductionAndrea TarrTarr ConsultingJune 2012
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
Outline• What problem is Joomla trying to solve with
Bootstrap?• What is Bootstrap?• How does it work?• How will it work with Joomla?
2
June 2
01
2
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
The Problem• The need for a style sheet for HTML markup• Core extension are the current de facto style
sheet• 3pd & custom extensions make up what they
need that isn't in core – and they all do it differently
• Templates have to code for specific extensions to maintain the look and feel of the web site
• Result is that many extensions look like iframes unrelated to the site
June 2
01
2
3
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
What is Bootstrap?• A style guide for HTML markup• Basic set of CSS for layout• CSS styles for UI elements such as menus &
buttons• CSS styles for responsive design• Integrated JavaScript widgets (jQuery) for UI
elements such as accordions, cara • A set of icons that can be used• Minified versions of the CSS & JS available
4
June 2
01
2
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
How does it work?<!DOCTYPE html><html lang="en"> <head> <title>My Web Site</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script> </head> <body> <h1>My Web Site</h1> <p>This is a paragraph</p> </body></html>
June 2
01
2
5
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
Demonstration• http://twitter.github.com/bootstrap/• Download Bootstrap• Save bootstrap.zip• Unzip and rename folder if you want• Add an index.html file• Add bootstrap CSS and JavaScript <link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/bootstrap.min.js"></script>
June 2
01
2
6
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
Exploring Bootstrap• To see examples online• http://twitter.github.com/bootstrap/
• To download to your computer• Download with docs –or-• https://github.com/twitter/bootstrap
June 2
01
2
7
Boots
trap Intr
oduct
ion •
JU
G N
ew
Engla
nd •
Andre
a T
arr
Resources• Download basic bootstrap• http://twitter.github.com/bootstrap/
• The full bootstrap source• https://github.com/twitter/bootstrap
• Tutorials• http://webdesign.tutsplus.com/series/twitter-
bootstrap-101/
• Tutorials on YouTube• http://www.youtube.com/watch?v=DgwtRpf60xI
• Joomla with Bootstrap• https://github.com/Joomla3-Admin-template/joomla-
cms/tree/template 8
June 2
01
2
