twitter bootstrap comprehensive overview
TRANSCRIPT
![Page 1: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/1.jpg)
Twitter BootStrapMohamed Loey
![Page 2: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/2.jpg)
Agenda
Part I: Introduction
Part II: Bootstrap Components
![Page 3: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/3.jpg)
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
![Page 4: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/4.jpg)
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
![Page 5: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/5.jpg)
Why Bootstrap ?
Bootstrap is open source. It's hosted, developed, and maintained on GitHub.
One framework, every device.
![Page 6: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/6.jpg)
Why Bootstrap ?
Full of featureso With Bootstrap, you get extensive and
beautiful documentation for common HTML elements, and CSS components, and awesome jQuery plugins.
o Easy for developer
![Page 7: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/7.jpg)
How to Install Bootstrap ?
Download the Bootstrap framework from http://getbootstrap.com/
Extract Bootstrap.zip
![Page 8: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/8.jpg)
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:
![Page 9: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/9.jpg)
HTML Form without Bootstrap on Browser
![Page 10: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/10.jpg)
HTML Form with Bootstrap on Browser
![Page 11: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/11.jpg)
Bootstrap Code
Hint I used bootstrap 2.3.2
![Page 12: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/12.jpg)
HTML Button with Bootstrap on Browser
![Page 13: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/13.jpg)
Bootstrap Code
Hint I used bootstrap 2.3.2
![Page 14: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/14.jpg)
Agenda
Part II: Bootstrap Components Grid Layout Buttons Labels Badges Icons Progress bars Tabs Pills
![Page 15: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/15.jpg)
Bootstrap components
All This Things can do & More.
![Page 16: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/16.jpg)
Bootstrap components
Grid Layout
![Page 17: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/17.jpg)
Bootstrap components
Buttons
Example:
![Page 18: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/18.jpg)
Bootstrap components
Buttons Examples
![Page 19: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/19.jpg)
Bootstrap components
Labels
![Page 20: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/20.jpg)
Bootstrap components
Labels Examples
![Page 21: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/21.jpg)
Bootstrap components
Badges
![Page 22: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/22.jpg)
Bootstrap components
Glyphicons : Includes 200 glyphs in font format from the Glyphicon Halflings set
![Page 23: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/23.jpg)
Bootstrap components
Progress bars
![Page 24: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/24.jpg)
Bootstrap components
Tabs
![Page 25: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/25.jpg)
Bootstrap components
Pills
![Page 26: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/26.jpg)
Bootstrap components
Images Image shapes
![Page 27: Twitter Bootstrap Comprehensive Overview](https://reader038.vdocuments.mx/reader038/viewer/2022102322/540cc8867bef0a84278b63b7/html5/thumbnails/27.jpg)
THANK U