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