Website training


Bootstrap  |  Video embed |  Bouton rouge


 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:


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

</div>


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 large elle 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="/design-elements/training-new-webdesign/amelie.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="/design-elements/training-new-webdesign/amelie.jpg" />
    </div>
</div>

Exemple 2

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 3
<div class="row">
    <div class="col-xs-12 col-sm-4">
        <img src="/design-elements/training-new-webdesign/amelie.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

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.

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.


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"

<div class="embed-container">
    <iframe src="//www.youtube.com/embed/A4pqDYOvLqM" frameborder="0">
    </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

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.


Comment faire un bouton rouge

Lorsque vous mettez un lien sur un texte comme par exemple.

Book here.

Vous pouvez lui ajouter la classe     red-button    pour que celui-ci se transforme en bouton rouge bien visible:


Book here 


Il suffit cliquer sur "link" dans le menu

mettre un lien et cliquer sur advanced:

puis ajouter la classe red-button:



Copyright © 2017 Alliance Française of Calgary.  Design by Monsieur Graphic. Terms and Conditions.