Spécifie autonome le contenu
Le framework HTML, CSS et JavaScript boostrap 3 pour créer vos pages web responsives qui s'adaptent automatiquement avec les différentes largeurs des écrans
Bootstrap 3 est le framework HTML, CSS et JavaScript le plus populaire pour le développement de projets réactifs sur le web mobiles en premiers.
Bootstrap 3 est un framework libre facile et rapide pour le développement Web.
Bootstrap 3 inclut du HTML et CSS selon des modèles de conception pour le développement Web, formulaires, boutons, tableaux, navigation, carrousels image et beaucoup d'autres, comme optionnel plugins JavaScript.
Bootstrap 3 vous permet également de créer facilement des modèles Responsive.
Responsive web design est la création de sites web qui s'ajustent automatiquement eux-mêmes à la surface de l’écran de tous les appareils, des petits téléphones aux grands ordinateurs de bureau.
Facile à utiliser : Toute personne connaissant des notions de HTML et CSS peut commencer à utiliser Bootstrap 3
Sensibilité : Responsive CSS de Bootstrap 3 s'adapte aux téléphones, tablettes et ordinateurs de bureau
Première approche Mobile: Dans Bootstrap 3 le style pour mobile en premier fait partie du cadre de base
Compatibilité avec les navigateurs : Bootstrap 3 est compatible avec tous les navigateurs modernes (Chrome, Firefox, Internet Explorer, Safari et Opera)
Vous pouvez utiliser Bootstrap 3 sur votre propre site web de deux manières:
· Si vous souhaitez télécharger et héberger Bootstrap 3 vous-même, allez à getBootstrap 3.com et suivez les instructions.
· Si vous ne voulez pas télécharger et héberger Bootstrap 3 vous-même, vous pouvez inclure Bootstrap 3 à partir d'un CDN (Content Delivery Network)
Pour inclure Bootstrap 3 depuis un CDN nous allons utiliser MaxCND.
MaxCDN prend en charge CDN de Bootstrap 3 CSS et JavaScript.
Code : HTML
<!-- Dernière mise à jour minimisé de CSS Bootstrap 3 --> <link rel="stylesheet"href="http://maxcdn.Bootstrap3cdn.com/Bootstrap 3/3.3.5/css/Bootstrap3.min.css"> <!-- Dernière mise à jour minimisé de JavaScript Bootstrap 3 --> <script src="http://maxcdn.Bootstrap3cdn.com/Bootstrap 3/3.3.5/js/Bootstrap3.min.js"></script> <!-- librairie jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Il faut Également inclure jQuery :
Bootstrap 3 utilise des éléments HTML et des propriétés CSS qui nécessitent la Doctype HTML 5
Code : HTML
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> </head> <body> </body> </html>
Donc il faut toujours inclure la balise Doctype du HTML5 au début de la page, ainsi que l'attribut lang et la <meta> du jeu de caractères correct :
Bootstrap 3 est surtout conçu pour s adapter aux appareils mobiles. Le styles Mobile en premier fait partie du cadre de base.
Alors pour garantir le bon rendu et touche zoom, on doit ajouter la balise <meta> suivante à l'intérieur de l'élément <head> :
<meta name="viewport" content="width=device-width,initial-scale=1">
L’attribut width=device-width est la partie qui définit la largeur de la page pour suivre la largeur de l'écran de l'appareil (qui varie suivant l'appareil).
L’attribut initial-scale=1 est la partie qui définit le niveau de zoom initial lorsque la page est chargée par le navigateur.
Bootstrap 3 nécessite également un élément conteneur pour encapsuler le contenu de la page.
Il y a deux classes de conteneur au choix :
Remarque : Les conteneurs ne sont pas emboîtables (vous ne pouvez pas mettre un conteneur à l'intérieur d'un autre conteneur).
Ce qui nous donne deux pages possible:
L'exemple qui suit montre le code pour une page de base Bootstrap 3 avec un conteneur responsive à largeur fixe:
Code : HTML
<!DOCTYPE html> <html lang="fr"> <head> <title> Exemple de page web avec Bootstrap 3 </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"href="http://maxcdn.Bootstrap 3cdn.com/Bootstrap 3/3.3.5/css/Bootstrap 3.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.Bootstrap 3cdn.com/Bootstrap 3/3.3.5/js/Bootstrap 3.min.js"></script> </head> <body> <div class="container"> <h1>Ma première Page Bootstrap 3 </h1> <p>Ceci est un paragraphe.</p> </div> </body> </html>
L'exemple qui suit montre le code pour une page de base Bootstrap 3 (avec un conteneur pleine largeur) :
Code : HTML
<!DOCTYPE html> <html lang="fr"> <head> <title> Exemple de page web avec Bootstrap 3 </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"href="http://maxcdn.Bootstrapcdn.com/Bootstrap/3.3.5/css/Bootstrap3.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.Bootstrapcdn.com/Bootstrap/3.3.5/js/Bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Ma première Page Bootstrap 3 </h1> <p>Ceci est un paragraphe.</p> </div> </body> </html>
chapitre précédent chapitre suivant
Par carabde 25 decembre 2015