Downloaded 161 times
Uploaded byAndrea Tarr
Bootstrap Introduction
The document provides an introduction to Bootstrap, highlighting its purpose as a style guide for HTML markup that addresses the inconsistency in appearance of Joomla extensions. It outlines Bootstrap's features including CSS for layout and UI elements, responsive design, and integrated JavaScript widgets. The document also offers resources for downloading Bootstrap and accessing tutorials related to its implementation with Joomla.
More Related Content
![Bootstrap [part 1]](https://cdn.slidesharecdn.com/ss_thumbnails/bootstrappart-11-170208154053-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Bootstrap Introduction
- 1.
- 2. Outline • What problemis 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 • Theneed 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 itwork? <!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/ • DownloadBootstrap 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 • Tosee 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 basicbootstrap • 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