Twitter Boot Strap Mohamed Loey Agenda q Part

Twitter Boot. Strap Mohamed Loey

Agenda q Part I: Introduction q Part II: Bootstrap Components

Agenda q 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 Git. Hub. One framework, every device.

Why Bootstrap ? Full of features o With Bootstrap, you get extensive and beautiful documentation for common HTML elements, and CSS components, and awesome j. Query 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 q 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