Bootstrap Introduction
•Download as PPTX, PDF•
2 likes•3,038 views
Work is well underway for adding Bootstrap to Joomla for the series 3.x. This presentation gives an overview of the problems that Joomla is trying to solve by using Bootstrap and a brief introduction to what Bootstrap is and how it works. Given at the June 2012 monthly meeting of the Joomla User Group New England.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Bootstrap Introduction
Similar to Bootstrap Introduction (20)
More from Andrea Tarr
Recently uploaded
Recently uploaded (20)
Bootstrap Introduction
- 2. Outline • What problem is Joomla trying to solve with Bootstrap? June 2012 • What is Bootstrap? • How does it work? New England • Andrea Tarr Bootstrap Introduction • JUG • How will it work with Joomla? 2
- 3. The Problem • The need for a style sheet for HTML markup • Core extension are the current de facto style sheet June 2012 • 3pd & custom extensions make up what they need that isn't in core – and they all do it differently New England • Andrea Tarr Bootstrap Introduction • JUG • 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 3
- 4. What is Bootstrap? • A style guide for HTML markup • Basic set of CSS for layout June 2012 • CSS styles for UI elements such as menus & buttons • CSS styles for responsive design New England • Andrea Tarr Bootstrap Introduction • JUG • 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
- 5. How does it work? <!DOCTYPE html> <html lang="en"> June 2012 <head> <title>My Web Site</title> <!-- Bootstrap --> New England • Andrea Tarr Bootstrap Introduction • JUG <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> 5 </html>
- 6. Demonstration • http://twitter.github.com/bootstrap/ • Download Bootstrap June 2012 • Save bootstrap.zip • Unzip and rename folder if you want New England • Andrea Tarr Bootstrap Introduction • JUG • 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> 6
- 7. Exploring Bootstrap • To see examples online • http://twitter.github.com/bootstrap/ June 2012 • To download to your computer • Download with docs –or- New England • Andrea Tarr Bootstrap Introduction • JUG • https://github.com/twitter/bootstrap 7
- 8. Resources • Download basic bootstrap • http://twitter.github.com/bootstrap/ June 2012 • The full bootstrap source • https://github.com/twitter/bootstrap New England • Andrea Tarr Bootstrap Introduction • JUG • 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
Editor's Notes
- twitter.github.com/bootstrapSave to jz
- My Web SiteThis is a paragraph