Derniers tutoriels de développement web
 

Bootstrap Get Started

❮ Précédent Suivant Chapitre ❯

Qu'est - ce que Bootstrap ?

  • Bootstrap est un cadre frontal libre pour le développement web plus rapide et plus facile
  • Bootstrap comprend HTML et CSS modèles de conception à base de typographie, des formes, des boutons, tables, navigation, modaux, carrousels d'image et bien d' autres, ainsi que les plugins optionnels JavaScript
  • Bootstrap vous donne également la possibilité de créer facilement des conceptions sensibles

Quel est Responsive Web Design?

Responsive Web Design est sur la création de sites Web qui ajustent automatiquement eux-mêmes pour bien paraître sur tous les appareils, des petits téléphones aux grands postes de travail.

Bootstrap Histoire

Bootstrap a été développé par Mark Otto et Jacob Thornton sur Twitter, et libéré comme un produit open source en Août 2011 sur GitHub.

En Juin 2014 Bootstrap a été le projet n ° 1 sur GitHub!

Pourquoi utiliser Bootstrap ?

Avantages de Bootstrap :

  • Facile à utiliser: Toute personne ayant une connaissance juste de base de HTML et CSS peut commencer à utiliser Bootstrap
  • Fonctionnalités réactives: Bootstrap s 'réactif CSS ajuste aux téléphones, tablettes et ordinateurs de bureau
  • Mobile-première approche: Dans Bootstrap 3, les styles de mobiles-première 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écharger Bootstrap de getbootstrap.com
  • Inclure Bootstrap à partir d' un CDN

Téléchargement Bootstrap

Si vous voulez télécharger et l' hôte Bootstrap vous, aller à getbootstrap.com , et suivez les instructions.

Bootstrap CDN

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 fournir un soutien CDN pour Bootstrap CSS s 'et JavaScript. Inclure aussi jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Un avantage d'utiliser le Bootstrap CDN :
De nombreux utilisateurs ont déjà téléchargé Bootstrap de MaxCDN en visitant un autre site. En conséquence, il sera chargé à partir du cache quand ils visitent votre site, ce qui conduit à accélérer le temps de chargement. Aussi, la plupart CDN's fera en sorte que , une fois qu'un utilisateur demande un fichier à partir, il sera servi à partir du serveur le plus proche pour eux, ce qui conduit également à accélérer le temps de chargement.

Créer la première page Web avec Bootstrap

1. Ajouter le doctype HTML5

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

Toujours inclure le doctype HTML5 au début de la page, avec 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 mobile premier

Bootstrap 3 est conçu pour répondre aux appareils mobiles. Mobile-premiers styles font partie du cadre de base.

Afin d' assurer un rendu correct et toucher le zoom, ajouter ce qui suit <meta> tag dans le <head> élément:

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

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

L' initial-scale=1 partie définit le niveau de zoom initial lorsque la page est d' abord chargé par le navigateur.

3. Containers

Bootstrap exige également un élément contenant pour envelopper le contenu du site.

Il existe deux classes de conteneurs à choisir:

  1. La .container classe fournit un conteneur sensible à la largeur fixe
  2. Le .container-fluid classe fournit un conteneur de largeur, couvrant toute la largeur de la fenêtre

Remarque: Les conteneurs ne sont pas emboîtable (vous ne pouvez pas mettre un récipient dans un autre récipient).

Deux Basic Bootstrap Pages

L'exemple suivant montre le code pour une base Bootstrap la page (avec un récipient sensible à la largeur fixe):

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</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.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Essayez - le vous - même »

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

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</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.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Essayez - le vous - même »

❮ Précédent Suivant Chapitre ❯