http://www.bu.edu.eg/staff/mloey Twitter Bootstrap Comprehensive Overview

1. Twitter BootStrap
Mohamed Loey

2. Agenda
Part I: Introduction
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 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, 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
 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
 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