Skip to content

Utilisation de Bootstrap (Page 2)

AntoineVADES edited this page Oct 26, 2019 · 3 revisions

Utilisation de Bootstrap

C'est bien d'avoir installé mais faut s'en servir après.

La base

Directement sur le site de bootstrap vous pouvez identifier une colonne sur la gauche (si vous êtes sur mobile c'est peut être ailleurs mais niquez vous)

hihi c rigolo

Dans chacune de ces options vous pourrez trouver des "classes" bootstrap vous permettant de mettre en place ce que vous voulez sur votre site juste en ajoutant du HTML (vous pouvez copier-coller), certaines de ces options vont peut-être nécessiter du js.

Exemples:

  • Vous voulez ajouter un bouton:

on apprend en s'amusant ^^

Vous pouvez lire tout le délire sur la page c'est bien expliqué et vous avez plein d'options de personnalisation.

  • Vous voulez ajouter un questionnaire/formulaire:

plus d'idée

Quelle chance bootstrap en propose un (dans components/forms vous pouvez utiliser la fonction search du site si vous trouvez pas). Vous lisez le délire et hop un formulaire.

Pourquoi allier Bootstrap et une autre feuille de style CSS ?

Comme vous l'avez vu sur le bouton par exemple, il n'y a que certaines couleurs proposées par bootstrap. C'est là que vous pouvez utiliser votre propre feuille de style pour modifier la couleur de celui-ci ainsi que tout ce que vous voulez.

Exemple:

1. On prend le "button-primary" proposé par bootstrap:

en niké

2. On change dans notre feuille de style la couleur de la classe btn-primary

en chelou

Les avantages de Bootstrap

1. Le système de grille

Je vous invite clairement à regarder les 10 premières minutes du tuto (celui que j'avais mis au début du wiki) qui explique assez bien ce que vous pouvez faire avec la classe container de bootstrap. Sinon vous pouvez directement check la documentation sur le site de Bootstrap.

2. Le Responsive

Le responsive, c'est à dire sur quel support l'on va voir le site est très bien géré par bootstrap. Je ne suis pas totalement au point dessus donc je vais pas tout vous expliquer mais gardez le en tête pour le moment. Si jamais vous avez envie de le prendre en compte dès le début pensez à gérer les tailles en relatif.

Bref vous avez compris comment ça marche au moins à peu près (sinon dites le moi). Maintenant comment on va fonctionner.