<!-- Slide number: 1 -->
BootStrap
Présenté Par : Adem Kouki
Notes:
<!-- Slide number: 2 -->
1.
C’est Quoi BootStrap ?
Introduction
Notes:
<!-- Slide number: 3 -->
C’est quoi BootStrap ?
Front-End Framework (Html, Css et Js).
Le Framework le plus fameux et le plus utilisé dans le web.
Utilisé pour faciliter et accélérer le développement web.
La Version Stable est 3.3.7
La Dernière Version est 4.0.0
Notes:
<!-- Slide number: 4 -->
C’est quoi BootStrap ?
Ready-to-use Web Elements
Button, Form, Table, image, Navbar, Progress Bar, Alert etc.
Notes:
<!-- Slide number: 5 -->
2.
Pourquoi Adopter BootStrap ?
Notes:
<!-- Slide number: 6 -->
Pourquoi Adopter BootStrap ?
Publicité
Un Site Internet c’est comme une Voiture. Pour la créer, il faut de multiples matériaux que l’on imbrique pour former un véhicule prêt à rouler
Notes:
<!-- Slide number: 7 -->
Pourquoi Adopter BootStrap ?
Save +100 Hours of Coding
Easy To Use Web Elements
Responsive
Great Documentation
Notes:
<!-- Slide number: 8 -->
Let’s Get Started !
Notes:
<!-- Slide number: 9 -->
Installation de Bootstrap
L'installation est Simple
http://getbootstrap.com
Notes:
<!-- Slide number: 10 -->
BootStrap (CDN)
En utilisant Le CDN ‘‘Content Delivery Network’’
<!–- Bootstrap 3.3.7 -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Les librairies ne fonctionneront pas si vous développer en local sans connexion internet
Notes:
<!-- Slide number: 11 -->
3.
Publicité
Exemples
Notes:
<!-- Slide number: 12 -->
Notes:
<!-- Slide number: 13 -->
Notes:
<!-- Slide number: 14 -->
3.
La Grille de Bootstrap
Notes:
<!-- Slide number: 15 -->
La Grille de Bootstrap
Notes:
<!-- Slide number: 16 -->
La Grille de Bootstrap
Notes:
<!-- Slide number: 17 -->
La Grille de Bootstrap
La grille de Bootstrap comporte 12 colonnes
Notes:
<!-- Slide number: 18 -->
La Grille de Bootstrap
Notes:
<!-- Slide number: 19 -->
La Grille de Bootstrap
| Size Name | Screen Size | Css Class |
| --- | --- | --- |
Publicité
| Extra Small Devices(Phone) | 0 – 767px | .col-xs-1 ~ .col-xs-12 |
| Small Devices (Tablet) | 768 – 911 px | .col-sm-1 ~ .col-sm-12 |
| Meduim Devices (Desktop) | 922 – 1219 px | .col-md-1 ~ .col-md-12 |
| Large Devices (Large Screen) | 1200 px + | .col-lg-1 ~ .col-lg-12 |
Notes:
<!-- Slide number: 20 -->
La Grille Bootstrap
How Many Grids in each box ?
<!-- Slide number: 21 -->
La Grille Bootstrap
Col-md-4
Col-md-4
Col-md-4
<!-- Slide number: 22 -->
La Grille Bootstrap
Notes:
<!-- Slide number: 23 -->
Relation entre Container, Row & Column
Container
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
Publicité
Row
Column
Column
Column
Row
Column
Notes:
<!-- Slide number: 24 -->
Les Classes les plus utilisés
.container
.container-fluid
.row
.col-md-*
.btn
.btn-primary
.btn-success
.btn-info
.form-group
.form-control
.control-label
.img-responsive
.img-circle
.hidden-*
.text-center
.pull-right
.pull-left
.center-block
Notes:
<!-- Slide number: 25 -->
Merci Pour Votre Attention