Bonjour et bienvenue le premier jour de 14 jours Bootstrap 4 Série 🙂 Aujourd’hui, nous faisons le premier pas vers Bootstrap 4!

Pour afficher et utiliser les fonctionnalités de Bootstrap 4, vous devez importer les fichiers CSS et JS de Bootstrap 4 dans votre fichier HTML. Cet article vous expliquera comment utiliser le CDN Bootstrap 4 ou comment télécharger vos fichiers localement. Vous avez peut-être déjà entendu l’expression « comment installer Bootstrap 4 », mais il n’y a vraiment rien à installer. Lorsque vous démarrez avec Bootstrap 4, il vous suffit d’ajouter des liens vers votre page.

L’article est divisé en les parties suivantes:

Commençons la fête!

Bootstrap 4 fête

Crédit photo à YaroFlasherau son coup.

Bootstrap 4 CDN

Pour utiliser les composants Bootstrap 4, vous devrez importer les fichiers CSS et JS dans votre application. Le moyen le plus rapide est d’utiliser le CDN Bootstrap 4. CDN est un court « Content Delivery Network ». Vous pouvez en savoir plus sur les CDN et leur fonctionnement Ici.

Vous devez ajouter le fichier CSS entre le <head></head> Mots clés:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Et vous devez ajouter les bibliothèques JavaScript <script></script>Balises à la fin du document. Le Javascript Bootstrap 4 est basé sur jQuery et PopperJs, vous devez donc les importer d’abord.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

En tenant compte de tout ce qui précède, nous obtenons le modèle suivant. Vous pouvez l’utiliser comme modèle de lanceur Bootstrap 4 les jours suivants (vous configurez d’abord cette structure, puis vous ajoutez des composants).

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Téléchargez les fichiers Bootstrap 4 localement

Si vous ne voulez pas dépendre des CDN, vous pouvez télécharger et inclure les fichiers nécessaires (en utilisant votre chemin local). Vous pouvez obtenir les fichiers source d’amorçage à partir de Ici. Une fois que vous avez CSS et JS, vous devez les importer comme dans le cas du CDN. Vous seul utilisez votre chemin local:

<!-- for css -->
<link rel="stylesheet" href="https://bootstrapbay.com/blog/day-1-bootstrap-4-cdn-and-starter-template/path/to/file/bootstrap.min.css">

<!-- for javascript -->
<script type="text/javascript" src="path/to/file/bootstrap.min.js"></script>

Utilisez un gestionnaire de packages

Si vous connaissez les gestionnaires de packages, vous pouvez essayer l’une des options suivantes. Si vous n’en avez jamais utilisé auparavant, passez à la section suivante pour le moment.

Vous devez vous assurer que votre page contient les balises suivantes (déjà incluses dans le modèle de démarrage):

  • HTML5 Doctype – Si vous ne l’avez pas, un comportement imprévisible peut se produire.
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Cela garantira que la page s’affiche correctement sur le téléphone et que vous pouvez zoomer dessus.

Ok maintenant quoi?

Le démarrage d’un projet avec Bootstrap 4 est-il différent de la création d’un fichier HTML normal? Oui, car vous pouvez ajouter plusieurs composants prédéfinis lors de la création de votre page. Mais aussi parce que Bootstrap 4 remplace le style de navigateur standard affiché dans un simple fichier HTML. Cela signifie que vous n’avez pas besoin d’ajouter des classes ou des composants spéciaux pour voir les changements.

Redémarrage de Bootstrap 4

Commençons par un exemple très simple. Je vais écrire quelques éléments HTML simples: en-têtes, paragraphes, liens, tableaux et liens. Le code est le même pour les deux fichiers (avec et sans Bootstrap 4):

<h4>Heading</h4>
<h1>Hello, World!</h1>

<h4>Paragraph</h4>
<p>This is a paragraph.</p>

<h4>Link</h4>
<a href="https://bootstrapbay.com/blog/day-1-bootstrap-4-cdn-and-starter-template/#a">This is a link!</a>

<h4>Table</h4>
<table>
    <caption>
      This is an example table, and this is its caption to describe the contents.
    </caption>
    <thead>
      <tr>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody> 
</table>

<h4>List</h4>
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li
</ul>

Et les résultats seront différents:

Voir le stylo Modèle de démarrage HTML par cristina (@ Cristinaconacel) au CodePen.foncé

Voici à quoi ressemble la simple page HTML.

Voir le stylo Modèle de démarrage Bootstrap 4 par cristina (@ Cristinaconacel) au CodePen.foncé

Et voici à quoi ressemble la page Bootstrap 4.

Si vous regardez attentivement les deux exemples, vous remarquerez quelques différences:

  • Les polices sont différentes.
  • L’espacement standard varie.
  • Le style du lien est différent.

Bien sûr, ces différences ne changent pas la donne et vous pouvez facilement les écrire vous-même dans un fichier CSS. Cependant, une fois que vous commencez à créer des pages complexes, l’écriture du CSS lui-même devient une tâche beaucoup plus difficile.

Vous devrez tester votre code sur tous les navigateurs et appareils et vous assurer qu’il répond. Vous devrez également concevoir vos composants avec une hiérarchie qui ne rend pas les classes obsolètes. Il est possible que vous finissiez par essayer de reconstruire ce que Bootstrap 4 est déjà en train de faire. Il est donc beaucoup plus facile de travailler avec votre bibliothèque qui a déjà été implémentée et testée.

Dans les prochains jours, nous examinerons les parties les plus importantes de Bootstrap 4. Nous verrons pourquoi ils sont utiles et comment les utiliser pour que vous n’ayez pas à réinventer la roue.

lecture supplémentaire

S’il vous reste du temps, nous vous recommandons de lire également le guide officiel pour démarrer avec Bootstrap 4:

Vous pouvez voir le code de ce jour sur Codepen. Vous pouvez partager et modifier le code et voir à quoi ressemblent les éléments dans Bootstrap 4. Si vous avez des questions, faites-le moi savoir dans les commentaires ci-dessous!

Partager c’est aimer!



Source link

Recent Posts