Twitter Bootstrap

http://www.bu.edu.eg/staff/mloey

Transcript

1. tWItter BootstrAp BootstrAp Mohamed Loey
2. AgeNdA Part I: Introduction Part II: Bootstrap Components Part II: Bootstrap Components
3. AgeNdA  Part I: Introduction  What is Bootstrap ?  Why Bootstrap ?  How to Install Bootstrap ?  HTML Form without Bootstrap on Browser  HTML Form with Bootstrap on Browser  Bootstrap Code
4. WHAt Is BootstrAp ?  Bootstrap is the most popular HTML, CSS, and Javascript framework for developing.  Bootstrap was developed by Mark Otto  Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework
5. WHy BootstrAp ?  Bootstrap is open source. It's hosted, developed, and maintained on GitHub.  One framework, every device.
6. WHy BootstrAp ?  Full of features o With Bootstrap, you get extensive and beautiful documentation for common HTML elements, and CSS components, HTML elements, and CSS components, and awesome jQuery plugins. o Easy for developer
7. HoW to INstALL BootstrAp ?  Download the Bootstrap framework from http://getbootstrap.com/  Extract Bootstrap.zip
8. HoW to INstALL BootstrAp ?  You will have two important folders CSS => bootstrap.css JS => bootstrap.js JS => bootstrap.js  Import two file bootstrap.css & bootstrap.js to your website like this:
9. HtmL Form WItHoUt BootstrAp oN BroWser
10. HtmL Form WItH BootstrAp oN BroWser
11. BootstrAp code Hint I used bootstrap 2.3.2
12. HtmL BUttoN WItH BootstrAp oN BroWser
13. BootstrAp code Hint I used bootstrap 2.3.2
14. AgeNdA  Part II: Bootstrap Components  Grid Layout  Buttons Labels  Labels  Badges  Icons  Progress bars  Tabs  Pills
15. BootstrAp compoNeNts  All This Things can do & More.
16. BootstrAp compoNeNts  Grid Layout
17. BootstrAp compoNeNts  Buttons  Example:
18. BootstrAp compoNeNts  Buttons Examples
19. BootstrAp compoNeNts  Labels
20. BootstrAp compoNeNts  Labels Examples
21. BootstrAp compoNeNts  Badges
22. BootstrAp compoNeNts  Glyphicons : Includes 200 glyphs in font format from the Glyphicon Halflings set
23. BootstrAp compoNeNts  Progress bars
24. BootstrAp compoNeNts  Tabs
25. BootstrAp compoNeNts  Pills
26. BootstrAp compoNeNts  Images  Image shapes
27. tHANK U tHANK U