Download - Bootstrap Introduction
![Page 1: Bootstrap Introduction](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7c6834a7959d1188b4570/html5/thumbnails/1.jpg)
Bootstrap IntroductionAndrea TarrTarr ConsultingJune 2012
![Page 2: Bootstrap Introduction](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7c6834a7959d1188b4570/html5/thumbnails/2.jpg)
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
![Page 3: Bootstrap Introduction](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7c6834a7959d1188b4570/html5/thumbnails/3.jpg)
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
![Page 4: Bootstrap Introduction](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7c6834a7959d1188b4570/html5/thumbnails/4.jpg)
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
![Page 5: Bootstrap Introduction](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7c6834a7959d1188b4570/html5/thumbnails/5.jpg)
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
![Page 6: Bootstrap Introduction](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7c6834a7959d1188b4570/html5/thumbnails/6.jpg)
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
![Page 7: Bootstrap Introduction](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7c6834a7959d1188b4570/html5/thumbnails/7.jpg)
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
![Page 8: Bootstrap Introduction](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c7c6834a7959d1188b4570/html5/thumbnails/8.jpg)
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