Bootstrap
-
Bootstrap 4 : la navigation
Un des composants les plus célèbres de Bootstrap est sans doute sa barre de navigation. J’en ai ajouté une à la page d’exemple : <!DOCTYPE HTML> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark bg-info"> <a class="navbar-brand" href="#">Les Tigres</a> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Accueil</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Liens</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Témoignages</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Références</a> </li> </ul> <form action="search" method="get" class="form-inline"> <div class="input-group"> <input type="text" name="search" class="form-control" placeholder="Je cherche..."> <span class="input-group-btn"> <button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Chercher</button> </span> </div> </form> </nav> <div class="container"> <header…
-
Bootstrap 4 : boutons, icônes et images
Dans cet article nous allons voir comment créer de beaux boutons colorés, utiliser des icônes pour animer nos pages et insérer des images en les rendant autant que possible « responsives ». La page d’exemple Voici la nouvelle version de la page d’exemple : <!DOCTYPE HTML> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <header class="row"> <div class="col-md-12 col-lg-7"> <h1 class="text-center text-uppercase m-4">Mon amour pour les tigres<small class="text-muted"> et tous les félins</small></h1> </div> <div class="col-md-12 col-lg-5 align-self-center mb-3"> <form action="search" method="get" class="form-inline"> <div class="input-group"> <input type="text" name="search" class="form-control" placeholder="Je cherche..."> <div class="input-group-btn"> <button type="submit" class="btn btn-info"><span class="fa fa-search"></span> Chercher </button>…
-
Bootstrap 4 : les formulaires 2/2
On a vu dans le précédent chapitre comment construire un formulaire. Nous allons voir à présent un aspect un peu plus dynamique parce qu’un formulaire est par définition censé être soumis et il peut y avoir des problèmes de validation. La validation du navigateur La validation côté client doit être considérée comme cosmétique parce qu’elle ne présente aucune sécurité. Mais elle permet d’éviter des va et vient avec le serveur en créant un premier filtre de saisie. Validation par défaut Depuis HTML5 les navigateurs offrent certaines capacités de validation des entrées de formulaire côté client : avec l’attribut required pour rendre une saisie obligatoire, en utilisant une expression régulière avec…
-
Bootstrap 4 : les formulaires 1/2
Les formulaires sont très souvent utilisés sur les pages web, voyons dans ce chapitre ce que Bootstrap nous propose comme mise en forme. La page d’exemple J’ai ajouté un formulaire de contact dans la partie inférieure de la page d’exemple : <section class="row justify-content-center"> <div class="col-md-8"> <p class="lead font-weight-bold">Si vous voulez me laisser un message</p> <form> <p class="lead">Comment m'avez-vous trouvé ?</p> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="origine" value="ami" checked> Par un ami </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="origine" value="web"> Sur le web </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="origine" value="hasard"> Par hasard </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio"…
-
Bootstrap 4 : les tableaux
Dans ce chapitre nous allons voir comment Bootstrap traite les tableaux. La page d’exemple Dans la page d’exemple vue au chapitre précédent on va remplacer la liste de définition par un tableau : <table class="table table-bordered table-striped table-sm"> <caption> <h4>Les menaces pour les tigres</h4> </caption> <thead> <tr> <th>Lieu</th> <th>Menace</th> </tr> </thead> <tbody> <tr> <td>Grand Mekong</td> <td>Demande croissante de certaines parties de l’animal pour la médecine chinoise traditionnelle et fragmentation des habitats du fait du développement non durable d’infrastructures</td> </tr> <tr> <td>Île de Sumatra</td> <td>Production d’huile de palme et de pâtes à papiers</td> </tr> <tr> <td>Indonésie et Malaisie</td> <td>Pâte à papier, l’huile de palme et le caoutchouc</td> </tr> <tr> <td>États-Unis</td> <td>Les…
-
Bootstrap 4 : le texte
Dans ce chapitre nous allons voir comment Bootstrap met en forme les éléments de base des pages : titres, texte, abréviations, citations, listes… Nous verrons aussi les utilitaires qui permettent de centrer, montrer ou cacher, créer des remplissages et des marges … En gros la base de ce qui constitue les pages. Une page d’exemple Comme rien ne vaut les exemples voici une page qui regroupe les principaux éléments que nous allons voir au cours de ce chapitre avec une utilisation concrète de la grille : <!DOCTYPE HTML> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <header class="row"> <div class="col"> <h1…
Vous devez être connecté pour poster un commentaire.