Bootstrap 4

Bootstrap 4
PRÉSENTÉ PAR : DAGBOUJ Hatem
MAIL : dagboujhatem@gmail.com

Sommaire
Qu'est - ce que Bootstrap ?
Qu'est - ce que ResponsiveWeb Design?
Comments obtenir Bootstrap ?
Partie Pratique : Codage
2

Qu'est - ce que Bootstrap ?
3
• Bootstrap est un Framework HTML et CSS libre
(Open Source ) pour le développement web plus
rapide et plus facile.
• Bootstrap vous donne également la possibilité de
créer facilement des designs responsive.
• Bootstrap comporte des composants prêtes
à l’emploi directement : modals ,Bottons,
Alerts , …. Et pleins d’autres.
• Compatibilité du navigateur: Bootstrap est compatible avec tous les navigateurs
modernes (Chrome, Firefox, Internet Explorer, Safari et Opera)

Qu'est - ce que Responsive Web Design?
Responsive Web Design est la création des sites Web qui ajustent
automatiquement eux-mêmes pour bien apparaître sur tous les appareils
( des petits téléphones , tablette, grands postes de travail ).
4

Comments obtenir Bootstrap ?
Il existe deux façons de commencer à utiliser Bootstrap sur votre
propre site Web.
Vous pouvez:
• Télécharger Bootstrap de https://v4-alpha.getbootstrap.com
• Inclure Bootstrap à partir d' un CDN (Content Delivery Network)
(Si vous avez toujours accès à internet)
5

Remarques
1. Vous notez l’existence des fichiers bootsrap.css et bootstrap.min.css
également bootstrap.js et bootstrap.min.js Ils représentent le même
contenu à la différence que les .min sont compressés et par suite
peu lisibles on élimine les retours à la ligne !
2. Boostrap utilise certaines fonctions de la bibliothèque jQuery c’est
pourquoi on doit l’inclure !
6

Template de base : Hello world !
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-
A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-
DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-
vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html> 8

Responsive meta tag
• La width=device-width partie définit la largeur de la page pour suivre
l'écran-largeur du dispositif (qui varie en fonction de l'appareil).
• L' initial-scale=1 partie définit le niveau de zoom initial lorsque la page
est d' abord chargé par le navigateur.
9
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Les conteneurs (Bootstrap Container )
Les conteneurs vont être un support pour notre système de grille.
Deux classes CSS prédéfinies pour les conteneurs: .container / .container-fluid
10
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
.container : qui est un conteneur réactive de largeur fixe elle à une largeur fixe pour chaque type d’écran.
.container-fluid : conteneur réactive à largeur totale elle prend la largeur disponible !

Remarque
On ne peut pas emboiter les conteneurs !
11

Bootstrap Grid System
Bootstrap Grid System comporte 12 type colonnes pour chaque ligne ajouté.
Si vous ne souhaitez pas utiliser toutes les 12 colonnes individuellement , vous avez le
choix .Ou bien, vous pouvez grouper les colonnes ensemble pour créer des colonnes plus
larges .
Remarque: Bootstrap Grid System est sensible, et les colonnes se réarranger
automatiquement en fonction de la taille de l' écran.
12

13
Structure de base d'un Bootstrap Grid System
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>
<div class="row">
...
</div>
1. Premièrement créer une ligne ( <div class="row"> ).
2. Ensuite, ajoutez le nombre souhaité de colonnes (tags avec appropriée .col-*-* les
classes).
Notez que les chiffres dans .col-*-* doivent toujours ajouter jusqu'à 12 pour chaque ligne.

Classes de Grille : préfix devices
Le système de grille Bootstrap
a 4 classes de colonnes qui
correspond à
4 type d’appareils :
• -xs (pour les téléphones)
• -sm (pour les tablettes)
• -md (pour les ordinateurs de bureau)
• -lg (pour les grands postes de travail)
14

15
Exemple 1 :Trois colonnes de l'égalité
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
</div>
L'exemple précédent montre comment obtenir un trois colonnes de largeur égaux

16
Exemple 2 : Deux colonnes inégaux
<div class="row">
</div>
L'exemple précédent montre comment obtenir deux colonnes de largeurs différentes

18
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="SourceTitle">SourceTitle</cite></footer>
</blockquote>
Composant : blockquote

Composant : User input
19
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>To edit settings, press
<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Composant : Images
20
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236">
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236">

Composant : Images Responsive
Images vient dans toutes les tailles. Donc, il est nécessaire d’adopter ces
images en des images responsives ajustent automatiquement à la taille de
l'écran.
Créer des images sensibles en ajoutant un classe .img-responsive à la
balise <img> . L'image sera alors responsive par rapport à l'élément parent.
21
<img src="cinqueterre.jpg" class=«img img-responsive img-circle" alt="Cinque
Terre" width="304" height="236">

Composant :Tables de base
22
<table class="table">
<thead>
<tr> <th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr> </thead>
<tbody>
<tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr>
<tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr>
<tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr>
</tbody> </table>
La classe .table ajoute le style de base d’un tableau:

Table : Classes contextuelles
28
Les classes contextuelles peuvent être utilisés pour des lignes ( <tr> ) ou des cellules ( <td> ) de tableau :

Jumbotron
29
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
content or information.</p> <hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead"> <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> </p>
</div>

Alerts
30
<div class="alert alert-success" role="alert"> <strong>Well done!</strong>You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert"> <strong>Heads up!</strong>This alert needs your attention, but it's not super
important. </div>
<div class="alert alert-warning" role="alert"> <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert"> <strong>Oh snap!</strong> Change a few things up and try submitting again. </div>
Bootstrap fournit un
moyen facile de créer
des messages
d'alerte prédéfinis:

Buttons
31

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>

Card
32
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

Couleurs duTextes :
33
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>

Couleur de
L’arrière plan
34
<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
<div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
<div class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</div>

Progress Bar
35
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-
valuemax="100">25%</div>
</div>
<div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-
valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-
<div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-
<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-

Pagination
36
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>

Navbar
37
<nav class="navbar navbar-inverse bg-inverse">  </nav>
<nav class="navbar navbar-inverse bg-primary">  </nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">  </nav>
Ajouter la classe .fixed-top pour fixer auTop de page

Forms
40
<form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-
control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp"
class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label
for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password"> </div> <div class="form-group"> <label for="exampleSelect1">Example select</label> <select
class="form-control" id="exampleSelect1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option>
<option>5</option> </select> </div> <div class="form-group"> <label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2"> <option>1</option> <option>2</option> <option>3</option>
<option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label for="exampleTextarea">Example
textarea</label> <textarea class="form-control" id="exampleTextarea" rows="3"></textarea> </div> <div class="form-group">
<label for="exampleInputFile">File input</label> <input type="file" class="form-control-file" id="exampleInputFile" aria-
describedby="fileHelp"> <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for
the above input. It's a bit lighter and easily wraps to a new line.</small> </div> <fieldset class="form-group"> <legend>Radio
buttons</legend> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input"
name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include
why it's great </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-
input" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will
deselect option one </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="radio"
class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled
</label> </div> </fieldset> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-
check-input"> Check me out </label> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>

Input Group
43
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div> <br>
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div> <br>
<label for="basic-url">Your vanity URL</label>
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div><br>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div><br>
<span class="input-group-addon">$</span>
<span class="input-group-addon">0.00</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>

46
Modal

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal </button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>

Le plugin Scrollpy
47
Le plugin Scrollspy est utilisé pour mettre à jour automatiquement
les liens dans une liste de navigation basé sur la position de défilement.
Exemple :
http://www.w3im.com/fr/bootstrap/tryit.php?filename=trybs_scrollspy&stacked=h

48
Le Plugin Scrollpy

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>

<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>

Bootstrap 4

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Bootstrap 4

Similaire à Bootstrap 4 (20)

Dernier

Dernier (15)

Bootstrap 4