Twitter Bootstrap

Hmidi Hamdi Software Engineering @ ISSATSoJcertif Student Ambassador @JCertif Member & Founder @ ISSATSo Google Club

What is CSS

- Cascading style sheet.- Managing the look of formatting the page.

2

What is JavaScript

- Interpreted programming language.- Client side.- Can modify HTML and CSS at runtime.- Implemented in almost every web browser.

3

What is Bootstrap

- Free Collection of tools for website creation.- Front End Framework. - Devlopped by Twitter.- Open Source , Appache Licence.- Most popular project on Github.

4

Why Bootstrap is awesome ?

5

Already tried to make your own website?

6

Without bootstrap

7

With bootstrap

8

Bootstrap Css

9

Rows Concept

10

Simple Tables

11

Adding the table-stripped class

12

Other classesFor Tables:

.table-hover : enable a hover state on table rows.

.table-bordered : add borders on all sides of the table and cells.

For Rows : .active : Applies the hover color to a particular row or cell.

.success : Indicates a successful or positive action.

.info : Indicates a neutral informative change or action.

.warning : Indicates a warning that might need attention.

.danger : Indicates a dangerous or potentially negative action.

13

Contextuel colors

<p class="text-muted">...</p>

<p class="text-primary">...</p>

<p class="text-success">...</p>

<p class="text-info">...</p>

<p class="text-warning">...</p>

<p class="text-danger">...</p>

14

Contextuel backgrounds

<p class="bg-primary">...</p>

<p class="bg-success">...</p>

<p class="bg-info">...</p>

<p class="bg-warning">...</p>

<p class="bg-danger">...</p> 15

Beautiful Buttons

16

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

All Sizes.btn-lg, .btn-sm, or .btn-xs for additional sizes.

17

Bootstrap Components

18

Glyphicons

19

Drop Down Buttons

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown"

aria-expanded="true">Dropdown <span class="caret"></span></button>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">

<li><a tabindex="-1" href="#">Regular link</a></li>

<li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>

<li ><a tabindex="-1" href="#">Another link</a></li>

</ul>

20

Navs.nav-tabs

.nav-pills

21

Combination of everything

22

BreadCrumbs

23

Easy to use.

Large Pannel of possibilities.

Detailed Documentation.

No need to touch CSS code.

Advantages of using Bootstrap

24

Disadvantages

Doesn’t follow best practices.

It’s going to collide my existing set-up.

Heavy.

My new Website looks just like everyone else’s.

25

Questions ?

Thank You ! !

26