twitter-bootstrap Tutoriel
Démarrer avec twitter-bootstrap
Recherche…
Remarques
Bootstrap est un framework HTML, CSS et JavaScript utilisé pour créer des sites Web créés à l'aide d'un paradigme de premier mobile, ainsi que de la conception Web réactive (RWD). Il utilise une combinaison de classes CSS prédéfinies et de JavaScript pour créer diverses choses sur le Web. Il comprend des éléments tels qu’une grille personnalisée et réactive qui permet d’afficher les sites Web sur n’importe quel écran, une barre de navigation déroulante capable d’être réactive et même des éléments simples qui peuvent prendre beaucoup de temps, comme des boutons, des peu.
Bootstrap peut être utile pour les raisons suivantes:
Gain de temps : Bootstrap comporte de nombreux éléments pré-construits, qui doivent simplement être utilisés lors de l'écriture du code. Cela permet de gagner un temps considérable et de réduire considérablement le temps nécessaire pour coder un site Web.
Conçu en tenant compte de la conception Web réactive : Bootstrap permet aux développeurs Web de ne pas se soucier de créer des éléments qui évolueront avec la taille de leur écran, car Bootstrap utilise une conception réactive qui leur permet de créer des éléments qui fonctionneront sur n'importe quel écran. Taille.
Simplifie le processus de conception : Bootstrap est livré avec des éléments dotés de bonnes pratiques de conception. Cela peut être utile pour ceux dont les compétences en conception Web ne sont pas excellentes, ou pour ceux qui considèrent le design comme une tâche fastidieuse, car de nombreuses classes Bootstrap sont esthétiquement agréables et idéales à regarder.
Cette section devrait mentionner tous les grands sujets dans twitter-bootstrap et établir un lien avec les sujets connexes. La documentation de twitter-bootstrap étant nouvelle, vous devrez peut-être créer des versions initiales de ces rubriques connexes.
Versions
| Version | Date de sortie |
|---|---|
| 4.0 | 2999-01-01 |
| 3.3.7 | 2016-07-25 |
| 3.3.6 | 2015-11-24 |
| 3.3.5 | 2015-06-15 |
| 3.3.4 | 2015-03-16 |
| 3.3.1 | 2014-11-12 |
| 3.3.0 | 2014-10-29 |
| 3.2.0 | 2014-06-26 |
| 3.1.0 | 2014-01-30 |
| 3.0 | 2013-08-19 |
| 2.3 | 2013-02-07 |
| 2.2 | 2012-10-29 |
| 2.1 | 2012-08-20 |
| 2.0 | 2012-02-01 |
| 1.0 | 2011-08-18 |
Installation / configuration
Téléchargement:
- Télécharger Bootstrap directement ou cloner, etc. depuis le dépôt GitHub
- Téléchargez votre version personnalisée de Bootstrap à partir des documents officiels
- Installer avec bower:
bower install bootstrap - Installer avec npm:
npm install bootstrap - Installer avec compositeur:
composer require twbs/bootstrap
La structure de fichier 
Installation:
Dans votre page HTML, incluez les CSS, JS et la dépendance de jQuery de Bootstrap (avant la version 3, au moins depuis la dernière version de Bootstrap). Veuillez noter que si vous prévoyez d'utiliser les fonctionnalités JavaScript de Bootstrap, votre référence jQuery doit figurer avant votre référence bootstrap.js dans votre code HTML.
Vous pouvez utiliser vos fichiers Bootstrap installés à partir de la section ci-dessus ou référencer un CDN fourni par les créateurs de Bootstrap (liens tirés de Premiers pas avec Bootstrap ):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Une page Web Bootstrap très simple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Modèle de base
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title> <!-- The title of the Website -->
<!-- Reference to Bootstrap's CSS file -->
<!-- This is the line to reference the bootstrap's Stylesheet -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9] -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<!--[endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- Referencing jQuery (necessary for Bootstrap JavaScript plugins(bootstrap.min.js) to work) -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Referencing Javascript Bootstrap Plugin to Facilitate Bootstrap Animations and functionalities. -->
<!-- (Necessary to run Bootstrap) -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Quand utiliser Bootstrap
Bootstrap est un framework avisé pour HTML, CSS et Javascript. Il contient un style et des fonctionnalités de base pour ce qui est devenu des éléments [Interface utilisateur] acceptés, tels que des éléments de formulaire, des boutons, des fenêtres modales et des éléments de navigation.
Bootstrap est un framework Web réactif, ce qui signifie qu’il est conçu pour adapter la mise en page et la conception à des tailles d’écran grandes et petites, telles que les appareils mobiles, les tablettes et les ordinateurs de bureau, le tout dans une base de code unique.
L'un des concepts fondamentaux de Bootstrap est le cadre de la grille. En appliquant des classes à des éléments HTML, il est possible de créer des mises en page complexes en utilisant une grille de base de douze colonnes. Par exemple, une disposition à quatre colonnes peut être adaptée à deux colonnes sur les tablettes et à une colonne sur les périphériques mobiles. La grille utilise media queries , une méthode CSS pour cibler des tailles d'écran spécifiques, pour y parvenir.
Bootstrap fonctionne particulièrement bien si:
- La conception personnalisée n'est pas une priorité absolue
- Vous êtes plus à l'aise pour éditer du HTML et ajouter des classes que pour créer des CSS personnalisés
- Vous êtes à l'aise avec un framework qui aura de nombreuses similitudes visuelles avec de nombreux autres sites Web.
Bootstrap peut être utilisé par les nouveaux utilisateurs de HTML, CSS et Javascript, car la documentation est excellente. Cependant, il existe une courbe d'apprentissage pour ceux qui ne sont pas entièrement à l'aise avec les trois technologies de base utilisées par Bootstrap (HTML, CSS et Javascript).
Il est possible d'acheter ou de télécharger des thèmes Bootstrap afin de modifier le style ou la fonctionnalité de Bootstrap. Il est également possible d'utiliser Bootstrap comme point de départ, avec une personnalisation de CSS et de Javascript.
Page Web de base utilisant des composants bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>