Création de votre première page Web avec Bootstrap :
Jusqu'à présent, vous avez compris la structure et les objectifs des fichiers Bootstrap, il est maintenant temps de mettre Bootstrap en pratique. Dans cette section, nous allons créer un modèle Bootstrap de base qui inclut tout ce que nous avons mentionné dans la structure du fichier.
Traversons les étapes suivantes. Vous aurez créé un fichier HTML qui affiche le message "Bonjour tout le monde" dans votre navigateur Web.
Étape 1: Création d'un fichier HTML de base
Ouvrez votre éditeur de code préféré et créez un nouveau fichier HTML. Commencez par une fenêtre vide et tapez le code suivant et enregistrez-le sous "basic.html" sur votre bureau.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Fichier HTML de base </title>
</head>
<body>
<h1>Bonjour tout le monde !</h1>
</body>
</html>
Etape 2 : Faire de ce fichier HTML un modèle Bootstrap
Pour faire de ce fichier HTML un modèle Bootstrap, il suffit d'inclure les fichiers CSS et JS Bootstrap appropriés. Vous devriez inclure des fichiers JavaScript au bas de la page - avant la fermeture de la balise <body> (c'est-à-dire </ body>) pour améliorer les performances de vos pages Web.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Modèle Bootstrap de base </title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<h1>Bonjour, tout le monde !</h1>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Après avoir ajouté les fichiers CSS et JS de Bootstrap et la bibliothèque jQuery requise, nous pouvons commencer à développer n'importe quel site ou application avec le framework Bootstrap.
Étape 3: Enregistrement du fichier
Enregistrez maintenant le fichier sur votre bureau comme "bootstrap-template.html".
Remarque: Il est important que l'extension .html soit spécifiée - certains éditeurs de texte, comme le Bloc-notes, l'enregistrent automatiquement sous la forme .txt sinon.
Pour ouvrir le fichier dans un navigateur. Accédez à votre fichier puis double-cliquez dessus. Il s'ouvre dans votre navigateur Web par défaut. (Si ce n'est pas le cas, ouvrez votre navigateur et faites-le glisser).
<<<Précédent Debut Suivant>>>
<<<Précédent Debut Suivant>>>
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Aucun commentaire