Twitter Bootstrap Comprehensive Overview

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 ?
BootstrapisthemostpopularHTML,CSS,
andJavascriptframeworkfordeveloping.
BootstrapwasdevelopedbyMarkOttoand
JacobThorntonatTwitterasaframework

5. Why Bootstrap ?
Bootstrapisopensource.It'shosted,
developed,andmaintainedonGitHub.
Oneframework,everydevice.

6. Why Bootstrap ?
Fulloffeatures
oWithBootstrap,yougetextensiveand
beautifuldocumentationforcommonHTML
elements,andCSScomponents,and
awesomejQueryplugins.
oEasyfordeveloper

7. How to Install Bootstrap ?
DownloadtheBootstrapframeworkfrom
http://getbootstrap.com/
ExtractBootstrap.zip

8. How to Install Bootstrap ?
Youwillhavetwoimportantfolders
CSS=>bootstrap.css
JS=>bootstrap.js
Importtwofilebootstrap.css&bootstrap.js
toyourwebsitelikethis:

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
AllThisThingscando&More.

16. Bootstrap components
GridLayout

17. Bootstrap components
Buttons
Example:

18. Bootstrap components
ButtonsExamples

19. Bootstrap components
Labels

20. Bootstrap components
LabelsExamples

21. Bootstrap components
Badges

22. Bootstrap components
Glyphicons:Includes200glyphsinfontformatfrom
theGlyphiconHalflingsset

23. Bootstrap components
Progressbars

24. Bootstrap components
Tabs

25. Bootstrap components
Pills

26. Bootstrap components
Images
Imageshapes

27. THANK U