Html css bootstrap tutorial
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 :
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:
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 suivante à l'intérieur de l' élément
:
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):
Exemple de bootstrap class = " container " > Ma première page d'amorçage Voici du texte.
L'exemple suivant montre le code d'une page Bootstrap de base (avec un conteneur pleine largeur):
Exemple de bootstrap class = " container-fluid " > Ma première page d'amorçage Ceci est du texte.
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:
Bonjour tout le monde !
Redimensionnez la fenêtre du navigateur pour voir l'effet .
corps >