Navigate Space
La liste d'utilisateurs n'est pas rendue car vous ne possédez pas les droits d'accès nécessaires pour afficher les profils utilisateur.
Historique de la page
...
Imaginons un site avec une structure comme ci-dessous
| Bloc de code | ||
|---|---|---|
| ||
<div id="header" class="wrapper" |
...
></div> |
...
<div class="wrapper"> |
...
<div class="content"></div> |
...
<div class="menu"></div> |
...
</div> |
...
<div class="footer" class="wrapper" |
...
></div> |
Le code CSS associé :
| Bloc de code | ||
|---|---|---|
| ||
.wrapper { |
...
width: 1200px; |
...
} |
...
.content { |
...
width: 900px; |
...
} |
...
.menu { |
...
width: 300px; |
...
} |
Dans le cadre d'un développement de site responsive, il n'est pas possible d'utilisateur des unités figées tel que le pixels, il faudra donc se tourner vers d'autres unités, comme %, vh, em, ... et dans ce cas le code associé deviendra ceci :
| Bloc de code | ||
|---|---|---|
| ||
.wrapper { |
...
max-width: 1200px; /* le site peut prendre n'importe quelle taille entre 0 et 1200px */ |
...
} |
...
.content { |
...
width : 75%; /* 900/1200 = 75% */ |
...
} |
...
.menu { |
...
width: 25%; /* 300/1200 = 25% */ } |
}
Grâce au modification apportées avec le petit bout de code CSS ci-dessus nous avons maintenant un site dit "fluide" quand on le redimensionne en largeur
...
La syntaxe est très simple :
| Bloc de code | ||
|---|---|---|
| ||
@media screen and (max-width : 1000px) {
p {
color: red;
}
}
p {
color: blue;
} |
...
Pour reprendre notre example précédent, on remarque que la page fait moins de 600px, le menu de droite n'est pas assez large, on va donc appliquer un CSS conditionnel pour lui permettre de prendre toute la largeur de la page quand la page fait moins de 600px
| Bloc de code | ||
|---|---|---|
| ||
@media screen and (max-width: 600px) {
.menu,
.content {
width: auto;
}
} |
Dans ce cas, le auto permet de dire que ma div doit reprendre son comportement initial par rapport à la propriété width, et comme cette div est un élément HTML de type bloc alors il prendra 100% de la largeur de la page. pour plus d'information sur le pourquoi du comment cet élément HTML prend toute la largeur de la page un article intéressant sur le contexte de formatage block.
...
On considère donc que notre site va être découpé en 12 colonnes sur sa largeur. Si l'on veut afficher 4 blocs côtes à côtes on devra leur donner une largeur de 3 colonnes chacun.
| Bloc de code | ||
|---|---|---|
| ||
<div class="row"> |
...
<div class="col-xs-12 col-md-3"></div> |
...
<div class="col-xs-12 col-md-3"></div> |
...
<div class="col-xs-12 col-md-3"></div> |
...
<div class="col-xs-12 col-md-3"></div> |
...
</div> |
Dans l'exemple ci-dessous chacune des divs prendra toute la largeur de la page dans les modes Extra-Small et Small et les quatres blocs seront sur la même ligne dans les modes Medium et Large
...
Il existe beaucoup de class CSS qui aident au développement de l'interface, on retrouve toutes ces class dans l'onglet CSS de la documentation, cela permet de mettre rapidement en forme des boutons, tableaux, formulaire en y ajoutant des class CSS
| Bloc de code | ||
|---|---|---|
| ||
<div class="table-responsive"> |
...
<table class="table"> |
...
... |
...
</table> |
...
</div> |
| Bloc de code | ||
|---|---|---|
| ||
<button type="button" class="btn btn-warning">Warning</button> |
Les composants
Une des grandes forces de Twitter Bootstrap réside dans la richesse des composants qu'il propose. Un composant peut être considéré comme un module dans une page, comme par exemple un menu déroulant, ou un caroussel.
...
Vue d'ensemble
Gestion des contenus