Website training

Bootstrap

Bootstrap sert à afficher les contenus de notre site web sur mobile, tablette et PCs.
Bootstrap se sont des feuilles de styles pré-écrites qui nous permettent de créer notre mise en page et le design plus facilement.

Truc important à savoir: Bootstrap utilise un découpage de la largeur en 12 unités.

Pour utiliser bootstrap, Il faut toujours commencer par mettre cette div:

<div class="row">

</div>

Dans cette div on va mettre d'autre divs, par exemple:

Bootstrap utilise un découpage de la largeur en 12 unités.

col-xs-12 veut dire que sur un un mobile (xs veut dire extra small), cette colonne prend 12 mesures donc tout l'espace disponible.
La div a aussi une autre classe qui est col-sm-6 (sm qui veut dire small et tout écran qui est au-delà), cette colonne prend 6 mesures de l'espace disponible.

Concrétement ça veut dire que sur un mobile ou un petit écran cette div prendra toute la largeur de l'espace mais sur un écran plus large ou une fenêtre plus parge elle se prendra la moitié de l'écran.

Tout ce qui sera placé dans la div

<div class="col-xs-12 col-sm-6">
</div>

se placera selon les mêmes rêgles.

Exemple 1

<div class="row">
   <div class="col-xs-12 col-sm-6">
<h5>Exemple 1</h5>
<p> Lorem ipsum dolor sit amet, .....</p>
   </div>
   <div class="col-xs-12 col-sm-6">
<img src="/media/website_pages/website-training/bootstrap/Insta-Fargues-darieussecq.jpg" />
   </div>
</div>

Ce qui donne: (redimensionnez la fenêtre pour voir sur un plus petit écran ce que ça donne)

Exemple 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non lorem eu lacus scelerisque scelerisque eu quis massa. Etiam molestie, nisi sed cursus posuere, dui turpis placerat risus, et maximus lectus tellus vehicula arcu. Nulla mollis tincidunt risus pellentesque ullamcorper. Nam cursus, risus at accumsan sagittis, enim justo consequat diam, id pharetra lacus arcu vel mi. Phasellus rutrum consectetur blandit. Pellentesque at finibus velit, iaculis semper orci. Etiam turpis tortor, fermentum vel elit nec, ullamcorper hendrerit dolor. Aenean fermentum dictum est vel facilisis. Nullam id nisi non tortor consequat fringilla. Quisque facilisis justo eget tortor accumsan dapibus. Aliquam convallis rhoncus lacus, ac iaculis neque suscipit vel. Integer vitae lacinia ex, ut dapibus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sed accumsan libero, id pulvinar tortor. Nulla facilisi. Sed imperdiet semper consectetur. Donec aliquet facilisis lorem et viverra.

Exemple 2:

<div class="row">
   <div class="col-xs-12 col-sm-8">
       <h5>Exemple 2</h5>
       <p>Lorem ipsum dolor sit amet, consectetur ...... </p>
   </div>
   <div class="col-xs-12 col-sm-4">
       <img src="/media/website_pages/website-training/bootstrap/Insta-Fargues-darieussecq.jpg" />
   </div>
</div>

Exemple 2

Exemple 3

<div class="row">
   <div class="col-xs-12 col-sm-4">
       <img src="/media/website_pages/website-training/bootstrap/Insta-Fargues-darieussecq.jpg" />
   </div>
   <div class="col-xs-12 col-sm-4">
       <h5>Exemple 3</h5>
       <p>
       Lorem ipsum dolor sit amet, consectetur....
       </p>
   </div>
   <div class="col-xs-12 col-sm-4">
       <p>
       Lorem ipsum dolor sit amet, consectetur .....
       </p>
   </div>
</div>

Exemple 3

Video embed

si vous avez besoin de mettre une video youtube sur notre site, il faut que cette video soit responsive pour qu'elle puisse être vue sur les tablettes, mobiles, etc...

Il faut mettre ce code dans le "source code"

</iframe>

</div>

et remplacer le code en jaune ci-dessus avec le code de youtube.

Donc sur la page youtube, cliquer sur share :

Et ensuite sur embed, vous aurez un code src="..." c'est ce code que vous devez copier et remplacer :

Au final ça donne cela, si vous redimensionnez votre fenêtre, la video s'adaptera et sera responsive.

Notez que ce code peut être usilisé avec bootstrap si vous voulez utiliser des colonnes. Par exemple :

<div class="row">
   <div class="col-xs-12 col-sm-6">
       <h5>Exemple 4</h5>
       <p>Lorem ipsum dolor sit amet, consectetur ...... </p>
   </div>
   <div class="col-xs-12 col-sm-6">
       <div class="embed-container">
            <iframe src="https://www.youtube.com/embed/goM0bKC2b4Q" frameborder="0">
            </iframe>
       </div>
   </div>
</div>

Exemple 4

Find Us

Alliance Française de Cairns
PO Box 80 - North Cairns QLD 4870

Call Us

Tel: 0421 475 768

Message Us

Please click here to send us an e-mail

Design by Monsieur Graphic