Click here to load reader
Upload
benha-university
View
1.680
Download
0
Embed Size (px)
Citation preview
Twitter BootStrapMohamed Loey
Agenda
Part I: Introduction
Part II: Bootstrap Components
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
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
Why Bootstrap ?
Bootstrap is open source. It's hosted, developed, and maintained on GitHub.
One framework, every device.
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
How to Install Bootstrap ?
Download the Bootstrap framework from http://getbootstrap.com/
Extract Bootstrap.zip
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:
HTML Form without Bootstrap on Browser
HTML Form with Bootstrap on Browser
Bootstrap Code
Hint I used bootstrap 2.3.2
HTML Button with Bootstrap on Browser
Bootstrap Code
Hint I used bootstrap 2.3.2
Agenda
Part II: Bootstrap Components Grid Layout Buttons Labels Badges Icons Progress bars Tabs Pills
Bootstrap components
All This Things can do & More.
Bootstrap components
Grid Layout
Bootstrap components
Buttons
Example:
Bootstrap components
Buttons Examples
Bootstrap components
Labels
Bootstrap components
Labels Examples
Bootstrap components
Badges
Bootstrap components
Glyphicons : Includes 200 glyphs in font format from the Glyphicon Halflings set
Bootstrap components
Progress bars
Bootstrap components
Tabs
Bootstrap components
Pills
Bootstrap components
Images Image shapes
THANK U