Slide 1

Slide 1 text

tWItter BootstrAp BootstrAp Mohamed Loey

Slide 2

Slide 2 text

AgeNdA Part I: Introduction Part II: Bootstrap Components Part II: Bootstrap Components

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

WHAt Is BootstrAp ?  Bootstrap is the most popular HTML, CSS, and Javascript framework for developing.  Bootstrap was developed by Mark Otto  Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework

Slide 5

Slide 5 text

WHy BootstrAp ?  Bootstrap is open source. It's hosted, developed, and maintained on GitHub.  One framework, every device.

Slide 6

Slide 6 text

WHy BootstrAp ?  Full of features o With Bootstrap, you get extensive and beautiful documentation for common HTML elements, and CSS components, HTML elements, and CSS components, and awesome jQuery plugins. o Easy for developer

Slide 7

Slide 7 text

HoW to INstALL BootstrAp ?  Download the Bootstrap framework from http://getbootstrap.com/  Extract Bootstrap.zip

Slide 8

Slide 8 text

HoW to INstALL BootstrAp ?  You will have two important folders CSS => bootstrap.css JS => bootstrap.js JS => bootstrap.js  Import two file bootstrap.css & bootstrap.js to your website like this:

Slide 9

Slide 9 text

HtmL Form WItHoUt BootstrAp oN BroWser

Slide 10

Slide 10 text

HtmL Form WItH BootstrAp oN BroWser

Slide 11

Slide 11 text

BootstrAp code Hint I used bootstrap 2.3.2

Slide 12

Slide 12 text

HtmL BUttoN WItH BootstrAp oN BroWser

Slide 13

Slide 13 text

BootstrAp code Hint I used bootstrap 2.3.2

Slide 14

Slide 14 text

AgeNdA  Part II: Bootstrap Components  Grid Layout  Buttons Labels  Labels  Badges  Icons  Progress bars  Tabs  Pills

Slide 15

Slide 15 text

BootstrAp compoNeNts  All This Things can do & More.

Slide 16

Slide 16 text

BootstrAp compoNeNts  Grid Layout

Slide 17

Slide 17 text

BootstrAp compoNeNts  Buttons  Example:

Slide 18

Slide 18 text

BootstrAp compoNeNts  Buttons Examples

Slide 19

Slide 19 text

BootstrAp compoNeNts  Labels

Slide 20

Slide 20 text

BootstrAp compoNeNts  Labels Examples

Slide 21

Slide 21 text

BootstrAp compoNeNts  Badges

Slide 22

Slide 22 text

BootstrAp compoNeNts  Glyphicons : Includes 200 glyphs in font format from the Glyphicon Halflings set

Slide 23

Slide 23 text

BootstrAp compoNeNts  Progress bars

Slide 24

Slide 24 text

BootstrAp compoNeNts  Tabs

Slide 25

Slide 25 text

BootstrAp compoNeNts  Pills

Slide 26

Slide 26 text

BootstrAp compoNeNts  Images  Image shapes

Slide 27

Slide 27 text

tHANK U tHANK U