Twitter Bootstrap
Hmidi Hamdi Software Engineering @ ISSATSoJcertif Student Ambassador @JCertif Member & Founder @ ISSATSo Google Club
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
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>
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
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