Html css bootstrap tutorial

Participez au vote ☆☆☆☆☆★★★★★

Qu'est-ce que le Responsive Web Design?

La conception Web réactive consiste à créer des sites Web qui s'ajustent automatiquement pour bien paraître sur tous les appareils, des petits téléphones aux grands ordinateurs de bureau .

Historique Bootstrap

Bootstrap a été développé par Mark Otto et Jacob Thornton sur Twitter, et publié en tant que produit open source en août 2011 sur GitHub .

En juin 2014, Bootstrap était le projet n ° 1 sur GitHub !

Pourquoi utiliser Bootstrap?

Avantages de Bootstrap:

Facile à utiliser: toutepersonne ayant juste des connaissances de base en HTML et CSS peut commencer à utiliser Bootstrap
Fonctionnalitésréactives : le CSS réactif de Bootstrap s'adapte aux téléphones, tablettes et ordinateurs de bureau
Approche mobile d'abord:dans Bootstrap 3, les styles mobile first font partie du cadre de base
Compatibilité du navigateur:Bootstrap est compatible avec tous les navigateurs modernes (Chrome, Firefox, Internet Explorer, Safari et Opera)

Où obtenir Bootstrap?

Il existe deux façons de commencer à utiliser Bootstrap sur votre propre site Web.

Vous pouvez:

Téléchargez Bootstrap sur getbootstrap.com
Inclure Bootstrap à partir d'un CDN

Téléchargement de Bootstrap

Si vous souhaitez télécharger et héberger Bootstrap vous-même, accédez à getbootstrap et suivez les instructions.

CDN Bootstrap

Si vous ne souhaitez pas télécharger et héberger Bootstrap vous-même, vous pouvez l'inclure à partir d'un CDN (Content Delivery Network).

MaxCDN fournit un support CDN pour les CSS et JavaScript de Bootstrap. Incluez également jQuery :

<! - Dernier CSS compilé et minifié ->
< link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >

<! - bibliothèque jQuery -> < script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" > < / script >

<! - Dernier JavaScript compilé ->
< script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" > < / script >

Conseils :
Un avantage de l'utilisation du CDN Bootstrap:
De nombreux utilisateurs ont déjà téléchargé Bootstrap de MaxCDN lors de la visite d'un autre site. En conséquence, il sera chargé à partir du cache lorsqu'ils visitent votre site, ce qui accélère le temps de chargement. En outre, la plupart des CDN s'assurent qu'une fois qu'un utilisateur lui demande un fichier, il sera servi depuis le serveur le plus proche, ce qui accélère également le temps de chargement.

Créer la première page Web avec Bootstrap

Ajoutez ledoctypeHTML5

Bootstrap utilise des éléments HTML et des propriétés CSS qui nécessitent le doctype HTML5 .

Incluez toujours le doctype HTML5 au début de la page, ainsi que l' attribut lang et le jeu de caractères correct:

< ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf-8" > < / head > < / html >

2. Bootstrap 3 est d'abord mobile

Bootstrap 3 est conçu pour être réactif aux appareils mobiles. Les styles Mobile-first font partie du cadre de base.

Pour garantir un rendu et un zoom tactile corrects, ajoutez la balise < meta > suivante à l'intérieur de l' élément <head> :

< meta name = "viewport" content = "width = device-width, initial-scale = 1" >

La partie width = device-width définit la largeur de la page pour suivre la largeur de l'écran de l'appareil (qui varie en fonction de l'appareil).

La partie échelle initiale = 1 définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.

Conteneurs

Bootstrap nécessite également un élément conteneur pour envelopper le contenu du site. Vous avez le choix entre deux classes de conteneurs:

Laclasse .container fournit un conteneur réactif à largeur fixe
Laclasse .container-fluid fournit un conteneur pleine largeur , couvrant toute la largeur de la fenêtre

Remarque: les conteneurs ne sont pas emboîtables (vous ne pouvez pas placer un conteneur dans un autre conteneur).

Deux pages Bootstrap de base

L'exemple suivant montre le code d'une page Bootstrap de base (avec un conteneur réactif à largeur fixe):

< ! DOCTYPE html > < html lang = "en" > < head > < title > Exemple de bootstrap < / 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.2.0/css/bootstrap.min.css " > < script src = " https: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < / script > < script src = " http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/ js / bootstrap.min.js " > < / script > < / head > < body > < div class = " container " > < h1 > Ma première page d'amorçage < / h1 > < p > Voici du texte. < / p > < / div> < / body > < / html >

L'exemple suivant montre le code d'une page Bootstrap de base (avec un conteneur pleine largeur):

< ! DOCTYPE html > < html lang = "en" > < head > < title > Exemple de bootstrap < / 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.2.0/css/bootstrap.min.css " > < script src = " https: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < / script > < script src = " http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/ js / bootstrap.min.js " > < / script > < / head > < body > < div class = " container-fluid " > < h1 > Ma première page d'amorçage < / h1 > < p > Ceci est du texte. < / p > < / div> < / body > < / html > < / div >

Système de grille Bootstrap

Le système de grille de Bootstrap autorise jusqu'à 12 colonnes sur la page.

Si vous ne souhaitez pas utiliser les 12 colonnes individuellement, vous pouvez regrouper les colonnes pour créer

colonnes plus larges :

Le système de grille de Bootstrap est réactif et les colonnes se réorganiseront automatiquement en fonction de la taille de l'écran .

Classes de grille

Le système de grille Bootstrap comprend quatre classes:

xs(pour les téléphones)
sm(pour les tablettes)
md(pour les ordinateurs de bureau)
lg(pour les ordinateurs de bureau plus grands)

Les classes ci-dessus peuvent être combinées pour créer des mises en page plus dynamiques et flexibles.

Trois colonnes égales

L'exemple suivant montre comment obtenir trois colonnes de même largeur en commençant par les tablettes et en les mettant à l'échelle vers de grands bureaux. Sur les téléphones mobiles, les colonnes s'empileront automatiquement:

<! DOCTYPE html>

< html >

< tête >

< meta charset = "utf-8">

< script src = " js /jquery.js"> </script>

< script src = " js /script.js"> </script>

</head>

< corps >

<h1> Bonjour tout le monde ! < / h1>

<p> Redimensionnez la fenêtre du navigateur pour voir l'effet . < / p>

</div>

</ corps >

</html>

Deux colonnes inégales

</div>

Texte / typographie Bootstrap

Paramètres par défaut de Bootstrap :

La taille de police par défaut globale de Bootstrap est 14px, avec une hauteur de ligne de 1,428.

Ceci est appliqué au <body> et à tous les paragraphes.

De plus, tous les éléments <p> ont une marge inférieure égale à la moitié de leur hauteur de ligne calculée (10px par défaut).

Paramètres par défaut du bootstrap et du navigateur

Dans ce chapitre, nous examinerons certains éléments HTML dont le style sera un peu différent par Bootstrap que les paramètres par défaut du navigateur.

<h1> - <h6>

Par défaut, Bootstrap stylise les en-têtes HTML ( <h1> à <h6> ) de la manière suivante:

<! DOCTYPE html>

< html >

< tête >

< meta charset = "utf-8">

< script src = " js /jquery.js"> </script>

< script src = " js /script.js"> </script>

</head>

< corps >

<h1> En-tête Bootstrap h1 (36px ) < / h1>

<h2> En-tête Bootstrap h2 (30px ) < / h2>

<h3> En-tête Bootstrap h3 (24px ) < / h3>

<h4> En-tête Bootstrap h4 (18px ) < / h4>

<h5> En-tête Bootstrap h5 (14px ) < / h5>

<h6> En- tête Bootstrap h6 (12px ) < / h6>

</div>

</body>

</html>

<petit>

Dans Bootstrap, l' élément HTML <small> est utilisé pour créer un texte secondaire plus léger dans n'importe quel titre:

<h1> Plus clair, texte secondaire </h1>

<p> Le petit élément est utilisé pour créer un texte secondaire plus léger dans n'importe quel titre: </p>

<h1> titre h1 <small> texte secondaire </small> </h1>

<h2> titre h2 <small> texte secondaire </small> </h2>

<h3> titre h3 <small> texte secondaire </small> </h3>

<h4> titre h4 <small> texte secondaire </small> </h4>

<h5> titre h5 <small> texte secondaire </small> </h5>

<h6> titre h6 <small> texte secondaire </small> </h6>

</div>

< marque >

Bootstrap stylera l' élément HTML <mark> de la manière suivante:

<h1> Surligner le texte </h1>

<p> Utilisez l'élément mark pour <mark> mettre en surbrillance </mark> le texte . < / p>

</div>

< abbr >

Bootstrap stylera l' élément HTML < abbr > de la manière suivante:

<h1> Abréviations </h1>

<p> L' élément abbr est utilisé pour marquer une abréviation ou un acronyme: </p>

<p> L ' < abbr title = "Organisation mondiale de la Santé"> OMS </ abbr > a été fondée en 1948. < / p>

</div>

< blockquote >

Bootstrap stylera l' élément HTML < blockquote > de la manière suivante:

<h1> Blockquotes </h1>

<p> L' élément blockquote est utilisé pour présenter le contenu d'une autre source: </p>

< blockquote >

<p> Depuis 50 ans, le WWF protège l'avenir de la nature. Première organisation mondiale de conservation, le WWF travaille dans 100 pays et est soutenu par 1,2 million de membres aux États-Unis et près de 5 millions dans le monde . < / P>

< footer> Depuis le site Web du WWF </footer>

</ blockquote >

Pour afficher la citation à droite, utilisez le . blockquote -reverse classe:

<h1> Blockquotes </h1>

<p> Pour afficher la citation à droite, utilisez la classe .pull- right: </p>

< blockquote class = " blockquote -reverse" >

< footer> Depuis le site Web du WWF </footer>

</ blockquote >

</div>

< kbd >

Bootstrap stylera l' élément HTML < kbd > de la manière suivante:

<h1> Entrées clavier </h1>

<p> Pour indiquer une entrée généralement saisie via le clavier, utilisez l' élément kbd : </p>

<p> Utilisez < kbd > ctrl + p </ kbd > pour ouvrir la boîte de dialogue Imprimer . < / p>

</div>

< pré >

Bootstrap stylera l' élément HTML <pre> de la manière suivante:

<h1> Plusieurs lignes de code </h1>

<p> Pour plusieurs lignes de code, utilisez l' élément pre : </p>

< pré >

Texte dans un élément pré

est affiché dans une largeur fixe

police , et il préserve

les deux espaces et

sauts de ligne . </pre>

</div>

Télécharger Plus de Téléchargements