Download to read offline
Uploaded bySindh Madresatul Islam University
bootstrap
Bootstrap is an open-source front-end framework that includes HTML, CSS, and JavaScript design templates for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. It uses CSS for responsive designs that work across desktop, tablet, and mobile devices. Some key features of Bootstrap include a responsive grid system, dozens of customizable components like buttons and alerts, and tools for customizing styles and JavaScript behaviors.
![Bootstrap [part 1]](https://cdn.slidesharecdn.com/ss_thumbnails/bootstrappart-11-170208154053-thumbnail.jpg?width=640&height=640&fit=bounds)
bootstrap
- 1. Introduction to Twitter’s Bootstrap By: Muhammad Bilal 11/23/2015iMycro.com
- 2. What is Bootstrap? UI framework (set of JavaScript, CSS, and images) Open Source project Supports HTML5 and CSS3 Supported by all major browsers (even IE7!!!) Released in August 2011 11/23/2015iMycro.com
- 3.
- 4. Bootstrap Features: GridSystem 960 Grid System http://960.gs/ Blue Print CSS http://www.blueprintcss.org/ Golden Grid System http://goldengridsystem.com/ 11/23/2015iMycro.com
- 5. Bootstrap Features: GridSystem Examples 11/23/2015iMycro.com
- 6. Bootstrap Features: Components(CSS) Buttons: Tabs: Breadcrumb: Pagination: Alerts: Progress bar: 11/23/2015iMycro.com
- 7.
- 8. Bootstrap Features: Customization CSS Components 11/23/2015iMycro.com
- 9. Bootstrap Features: Customization JavaScript (JQuery) JavaScript (Mootools) http://anutron.github.com/mootools-bootstrap 11/23/2015iMycro.com
- 10. Bootstrap Features: Customization CSS variables (Less) http://lesscss.org 11/23/2015iMycro.com
- 11.
- 12.
- 13.
- 14.
- 15. Why using Bootstrap?:Great Features Grid System Dozens of CSS components JavaScript plugins Web-based Customizer 11/23/2015iMycro.com
- 16. Why using Bootstrap?:Live mockups 11/23/2015iMycro.com
- 17. Why using Bootstrap?:Live mockups 11/23/2015iMycro.com
- 18. Why using Bootstrap?:Live mockups 11/23/2015iMycro.com
- 19. Why using Bootstrap?:Live mockups Easy creation of proof of concept Ability to gather alpha testers feedbacks early in the project without doing any code (Agile) HTML scaffolding ready to use by developers (copy – past) 11/23/2015iMycro.com
- 20. Why using Bootstrap?:Responsive Design What is it? 11/23/2015iMycro.com
- 21. Why using Bootstrap?:Responsive Design Multi platform support (Mobile phones, Tablets, laptops large screens) 100% CSS (using Media Types: @media) 11/23/2015iMycro.com
- 22. Why using Bootstrap?:Summary Great Features Responsive Design Live mockups Big community 11/23/2015iMycro.com
- 23.
- 24. Built with Bootstrap:Joomla 3.0 11/23/2015iMycro.com
- 25. Built with Bootstrap:Viadeo 11/23/2015iMycro.com
- 26. Built with Bootstrap:SlideShare http://www.slideshare.net/julienrenaux 11/23/2015iMycro.com
- 27. Thanks Questions? Bootstrap repository:http://github.com/twitter/bootstrap Bootstrap showcase: http://twitter.github.com/bootstrap 11/23/2015iMycro.com
Editor's Notes
- #3 Bootstrap is what we call a UI framework. It contains a set of JavaScript, CSS, and images that helps you create quick, clean and highly usable applications .
- #5 Bootstrap is using a grid system base on 12 columns. What is a grid system? A grid system is a way to create a solid foundation to build your project on. If you want your web application to have a left navigation you could design your HTML using row number 3 If you do not want any navigation and you want your content to be as wide as possible then you could use row number 5 This grid design was popularized by 960 grid system http://960.gs and BluePrint http://www.blueprintcss.org
- #6 If you want to implement you application with a left navigation here is the HTML required. You also can nest your columns within columns.
- #7 Here is a list of some of the CSS component available. There are dozens of them available with bootstrap.
- #8 Bootstrap gives life to its UI by using Jquery plugins. Here are some examples of great Elements. Once again you have access dozens of them for free.
- #9 Bootstrap provides a web-based customizer that allow you to generate a CSS file based on your specific needs.
- #10 Same for the JavaScript plugins. For Mootools fans you can find a Mootools version here: http://anutron.github.com/mootools-bootstrap
- #11 Bootstrap also provides a way to generate a completely unique version of the CSS using LESS. I will not be talking about Less, all you need to know for now is that it compiles a LESS version of your CSS where you can define variables and nest CSS selectors. If you want more information please check http://lesscss.org/ out.
- #12 Now that you know about LESS, it is easily understandable that we can create totally different visuals based on the same HTML. Here are some good example
- #13 http://bootswatch.com
- #14 http://bootswatch.com
- #15 Now I will explain why using Bootstrap is a good choice.
- #16 Bootstrap has great features. We have just reviewed some of them and I am sure you already feel the potential this project has. Let’s summarize it. Bootstrap: Has Grid System => Allow you to create you web application scaffolding Contains dozens of CSS components => Allow you to create great UI Is powered by JavaScript plugins => Gives life to the CSS UI Can be customized by using a web based customizer
- #17 Bootstrap is good to create live mockups (prototypes) Here is how mockups used to look like. I am sure some of you here are still using Balsamiq mockups, it a great tool but beside having a proof of concept you cannot do much with it. http://www.balsamiq.com/products/mockups
- #18 Here is what a mockup could look like when using Bootstrap.
- #20 Easy creation of proof of concept => To answer the question Is it doable? Gather early Feedbacks => To answer the questions: Is it good? Is it Viable? In your project you want to know as early as possible if a idea is not viable or not. If it is not good you want to fail fast (Agile kind of approach) One you have done all the research and the tests you can guide the execution of more sophisticated designs and larger engineering efforts.
- #21 It is the ability to resize the content of your web page to any device and screen size.
- #22 Bootstrap handle responsive design very well and it is a pretty neat feature to have nowadays with all the Mobile phones, Tablets, laptops and big screens we have available. Something also good to notice is that this responsive design is CSS driven. It used to be handle by JavaScript in some ancient time.
- #23 Great Features => Dozens of state of the art features Responsive Design => Feat all screens Live mockups => Go Agile! Big community => It is really important for a open source project. Bootstrap has bright future ahead.
- #25 Bootstrap is today widely used in the Web. It exists hundreds of templates for famous CMS like Joomla, WordPress and Drupal. One month ago Joomla surprised everybody by using Bootstrap for their latest version 3.0. For those who are interested in Joomla, you will also notice this change is a little revolution in itself. Joomla did not only switch to Bootstrap but also switch to Jquery… As Jquery is more popular and widely used across the web, I think as a Joomla fan that this change was necessary to attract a new community of developers that will give Joomla a brighter future.
- #26 Viadeo (the biggest LinkedIn competitor) they do not make it too obvious but they are based on Bootstrap.
- #28 I would like to thanks April for the invitation. Questions?