Comment créer un site Web simple et élégant avec Bootstrap 4: 7 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:06

Le but de ce Instructable est de donner à ceux qui sont familiarisés avec la programmation - HTML ou autre - une introduction simple à la création d'un portfolio en ligne avec Bootstrap 4. Je vais vous expliquer la configuration initiale du site Web, comment créer quelques blocs de contenu différents, et quelques problèmes que vous pourriez rencontrer.

Le portfolio est divisé en plusieurs étapes plus petites pour essayer de le rendre plus gérable: cadre HTML, cadre CSS, cadre Javascript, barre de navigation et page d'accueil (avec blocs de contenu).

Si mes explications sur quelque chose vous laissent encore perplexe, n'hésitez pas à laisser un commentaire avec vos questions, suggestions ou sur Google l'élément qui vous perturbe. Il existe de nombreuses ressources disponibles pour la programmation de sites Web et Bootstrap.

Remarque: ce guide n'est pas exhaustif et ne doit pas être utilisé comme substitut pour apprendre à programmer en HTML, CSS ou Javascript.

Ressources requises

• Bootstrap 4
• jQuery 3.3.1

Ressources facultatives

• PoliceSuper
• Polices Google
• point culminant.js

Si vous souhaitez passer à l'exemple complet ou jeter un œil au référentiel:

• Exemple complet
• Dépôt

Remarque: j'utiliserai Sublime dans les images pour mes exemples si vous souhaitez suivre avec le même éditeur de texte.

Étape 1: Configuration

Configuration du dossier

1. Créez un dossier quelque part où vous pouvez stocker tout ce que nous allons télécharger. Ce sera votre répertoire racine pour le portefeuille.
2. Créez un dossier à l'intérieur de celui-ci nommé "bootstrap"
3. Créez un autre dossier dans votre dossier racine de portefeuille nommé "jquery"

Dossier de portefeuille

|----- bootstrap |----- jquery

Bootstrap 4

1. Visitez leur site Web et cliquez sur le bouton « Télécharger » sous la section « CSS et JS compilés ».
2. Enregistrez le fichier.zip dans votre dossier « Téléchargements » ou dans un autre emplacement pratique.
3. Ouvrez le fichier.zip et extrayez les dossiers "css" et "js" dans le dossier "bootstrap" que vous avez créé précédemment.

jQuery

1. Visitez leur site Web et téléchargez le « jQuery 3.3.1 de développement non compressé »
2. Enregistrez ce fichier dans le dossier "jquery" que vous avez créé précédemment.

Tous les cadres sont maintenant prêts pour le moment où nous commençons à travailler sur le portefeuille réel.

Étape 2: cadre HTML (index.html)

votre nom

Ce cadre n'est pas trop complexe, mais je veux expliquer les objectifs généraux de la configuration.

Bootstrap JS après jQuery

Il semble y avoir une sorte de chevauchement entre le fichier Javascript de Bootstrap et celui de jQuery. Je n'ai pas testé pour voir à quel point ce chevauchement est étendu, mais un exemple est la fonctionnalité de liste déroulante que j'utilise dans la barre de navigation. Si vous chargez d'abord dans Bootstrap, le bouton déroulant ne fonctionne pas.

PoliceSuper

Si vous avez fait du développement Web, il y a de fortes chances que vous sachiez ce qu'est FontAwesome. Cependant, si ce n'est pas le cas, il s'agit d'un ensemble d'icônes qui comprend une boîte à outils pour une personnalisation supplémentaire. C'est incroyablement utile si vous êtes comme moi et que vous n'avez absolument aucun talent artistique.

point culminant.js

Ce cadre permet la mise en évidence dynamique du code sur les pages Web. Vous pouvez l'importer comme le reste des frameworks que j'utilise si vous n'utilisez que des langages de programmation courants, mais il existe également une option pour télécharger un ensemble personnalisé de langages. J'ai choisi cette dernière option à cause de quelques langages de macro et ini, mais c'est entièrement à vous de décider.

Remarque: Soyez conscient des endroits où j'utilise des liens codés en dur vers des fichiers tels que les deux icônes et Highlight.js. De plus, étant donné que seuls Bootstrap et jQuery sont requis, n'hésitez pas à ajouter ou à supprimer tout autre framework. Si vous en supprimez, n'oubliez pas de supprimer les lignes de code qui correspondent plus tard.

Étape 3: cadre CSS (style.css)

/* * Avec un peu de chance, réduire la couleur bg en gris et changer le style de police rend le site Web plus facile à utiliser */ body { background: gray; font-family: 'Open Sans', sans-serif; }

/*

* Cela garantit que la barre de navigation est au-dessus de tout */ nav { z-index: 9999; }

/*

* Cela devrait rendre le texte du paragraphe plus lisible */ p { font-size: 18px; marge supérieure: 5px; marge inférieure: 5px; }

/*

* Cela garantit que tous mes blocs de code sont correctement formatés */ code { text-align: left; }

/*

* Je ne veux pas que les listes aient les puces */ li { list-style-type: none; }

/*

* Les liens sont bleus par défaut, et je veux qu'ils s'alignent sur le style de Bootstrap */ li a, a{ color: white; }

/*

* Je lie une balise de classe à un div qui contient la barre de navigation pour m'assurer que le contenu ne se chevauche pas */.navFix { padding-bottom: 70px; }

/*

* La taille augmentée étend la barre de navigation */.social-media { font-size: 1.3em; }

/*

* La couleur de surbrillance par défaut pour les liens déroulants est le blanc */.dropdown-menu a:hover { background-color: #212529; }

/*

* Forcer les divs affichant les PDF à une certaine hauteur */.pdfFill { height: 45rem; }

/*

* Ajoutez un peu d'espacement entre les boutons et les blocs de code */.codeStyle { padding-top: 30px; }

J'ai inclus les éléments CSS basés sur le contenu dans ce cadre pour essayer de vous faire gagner du temps plus tard. Ils sont tous très simples et sont principalement des changements de qualité de vie qui facilitent l'interaction avec le portefeuille pour les lecteurs.

z-index de navigation

J'ai une expérience très limitée en développement Web, donc je ne sais pas s'il s'agit d'un problème courant lors de l'implémentation de la barre de navigation de Bootstrap, mais sans aucune spécification d'orientation d'avant en arrière, la barre de navigation apparaîtra en fait sous un autre contenu comme Cartes de Bootstrap. Ceci est particulièrement visible avec la barre de navigation pliable, mais j'ai quand même inclus le changement d'index pour des raisons de sécurité.

alignement de code

Étant donné que j'utilise généralement les classes "justify-content-center" et "text-center" de Bootstrap pour aligner les éléments, je ne veux pas que mon code hérite de cette nature alignée au centre. Ceci est facilement résolu en écrasant tout changement d'alignement et en alignant les balises de code à gauche: cela préserve l'espacement des tabulations dans le code.

rembourrage navFix

Lorsque la barre de navigation de Bootstrap est collée en haut de la page, le contenu se chargera en dessous. Je crois que cela se produit parce que la barre de navigation est en fait collée en haut de la fenêtre au lieu de la page elle-même. Quoi qu'il en soit, cela est corrigé en augmentant l'espace entre la barre de navigation et le reste du contenu.

hauteur du pdf

La hauteur par défaut des fichiers pdf est incroyablement petite. C'est essentiellement illisible, j'ai donc changé la hauteur pour essayer de donner assez de place pour environ une page à la fois.

Étape 4: Cadre Javascript (javascript.js)

/* * Ceci recherche n'importe quel élément avec la classe 'toggle' et le masque ou l'affiche */ function toggleSection(id, toggleID) { if (document.getElementById(id)) { var divID = document.getElementById(id); var divArray = document.getElementsByClassName(toggleID);

for (var i = 0; i < divArray.length; i++) { divArray.style.display = "aucun"; }

divID.style.display = "bloc";

}

renvoie faux;

}

/*

* Code qui doit être exécuté dans un certain ordre */ $(document).ready(function() { /* * Charger du contenu à partir de fichiers */

/*

* Force un petit délai pour charger les données */ setTimeout(function() { /* * Mettez en surbrillance tout le code qui a été chargé dans */ $('pre code').each(function(i, block) { hljs.highlightBlock(bloc); }); }, 1000); });

Pour rendre ce portfolio facile à modifier et à gérer, j'ai décidé d'utiliser un format d'une page. Il garde tout en local pour la plupart et accélère le chargement du contenu.

toggleSection

J'ai utilisé des valeurs de classe pour gérer le contenu qui doit être affiché ou masqué, car la plupart du temps, j'utilise des div pour séparer et regrouper plusieurs éléments. Vous pouvez également l'utiliser pour regrouper des boutons individuels, mais cela nécessite une vérification supplémentaire avant de définir l'affichage "bloquer" pour permettre qu'aucun contenu ne soit affiché.

chargement de documents

J'ai inclus ceci parce qu'il est généralement compliqué d'inclure un tas de code de programmation indépendant dans des fichiers HTML normaux. Nous pouvons utiliser cette méthode de surbrillance dynamique pour forcer le processus à se dérouler après le chargement du contenu à partir d'autres fichiers.

$('#mq2-intro').load("files/tutorials/mq2/mq2-intro/content.html");

Ceci est un exemple de la façon dont nous allons charger le contenu.

Étape 5: Barre de navigation

Initiales

• Accueil
• À propos de moi
• Projets Tutoriels
• Contactez moi

• La barre de navigation est l'élément le plus complexe de tout le portefeuille. La simple combinaison de classes en fait un peu comme un puzzle qui vous oblige à consulter en permanence le livre de règles.

  Fonctionnalité d'amorçage

  Bootstrap fonctionne essentiellement à travers différentes valeurs de classe. En regardant l'élément "nav" lui-même, il n'est pas trop difficile de déterminer le but de chaque classe:

  Notre "barre de navigation" est l'option "md" (moyen), "expand" et "sombre". Et nous l'avons "fixé" au "top". Cela semble déroutant parce que c'est un fouillis d'identifiants, mais si vous les considérez comme des adjectifs pour l'élément, il devient beaucoup plus facile de comprendre ce qui se passe.

  Marque

  La marque est le logo et le nom typiques que vous voyez sur chaque site Web en haut à gauche. C'est un élément de conception éprouvé auquel chaque utilisateur s'attend à ce stade.

  Remarque: les balises "i" sont en fait les icônes FontAwesome, et vous obtenez ces balises à partir de la page de n'importe quelle icône.

  Bouton bascule/rétractable (mobile)

  Ce bouton n'apparaît que sur les appareils mobiles. Mais puisque nous avons inclus dans la déclaration "nav" que la barre de navigation doit être extensible, ces éléments se connectent les uns aux autres via leurs identifiants et leurs identifiants "data-toggle".

  Liens de la barre de navigation (côté gauche)

  Ces liens dépendent entièrement des catégories dont vous avez besoin pour votre portefeuille. J'ai inclus quelques exemples typiques comme point de départ, mais aucun n'est le même. Vous n'aurez peut-être pas besoin d'une section "Tutoriels" car vous vous concentrez sur la création de sculptures d'art. Chaque élément "li" peut être copié et collé, donc une fois que vous avez compris ce dont vous avez besoin, il est facile de configurer la navigation.

  Remarque: Vous pouvez techniquement créer des menus déroulants dans d'autres menus déroulants, mais je ne le recommanderais pas à moins que vous ne souhaitiez ajouter plus de CSS et de Javascript pour que l'interface ait l'air propre.

  Liens de la barre de navigation (côté droit)

  En donnant la bonne liste de liens à la classe "ml-auto", Bootstrap sépare les deux listes de manière égale. Cela crée une division nette à gauche et à droite. J'ai décidé d'utiliser cet espace pour les liens vers les réseaux sociaux car c'est une méthode très courante et populaire pour augmenter votre présence. Si ce n'est pas pertinent, vous pouvez supprimer ces liens pour une barre de recherche, des informations de connexion, etc. Mais n'oubliez pas que c'est un espace important à utiliser. Et comme pour les liens de la barre de navigation sur le côté gauche, vous pouvez également les copier et les coller.

  Remarque: Si vous prévoyez d'utiliser les liens que j'ai déjà configurés, modifiez le « nom d'utilisateur » dans les liens « href » eux-mêmes.

  Étape 6: page d'accueil

  

  

  

  votre nom

  Programmeur Écrivain Gamer

  Cette section et vos pages de contenu suivantes dépendront de ce que vous souhaitez mettre dans votre portfolio. Je ne peux évidemment pas aborder chaque type de contenu, mais j'ai essayé d'inclure des images, des fichiers PDF, des vidéos, des blocs de code, certaines des inclusions typiques.

  Format de tableau

  La page d'accueil est configurée pour agir comme un tableau. Je ne me fierais pas à mes incroyables compétences en conception pour créer votre produit final, mais j'ai ajouté les différentes variantes de combinaisons de lignes et de colonnes pour montrer qu'il est très dynamique et flexible. Vous pouvez créer 3 lignes et 2 colonnes pour avoir des boutons à gauche et du contenu à droite, ou vous pouvez faire quelque chose de complètement différent. Il suffit d'un peu d'expérimentation.

  Boutons

  Ceux-ci fonctionnent essentiellement comme les boutons ordinaires. La seule véritable intégration de Bootstrap ici provient du style qui correspond au reste du thème. Sinon, créez autant ou aussi peu de boutons que nécessaire pour présenter votre contenu, puis assurez-vous de faire correspondre les liens href avec les identifiants des divs.

  Contenu du code de programmation

  Les balises "code" sont les balises par défaut que Highlight.js utilise pour gérer l'ensemble de la mise en évidence. Si vous vous souvenez du fichier javascript.js, il y a une section pour charger le contenu d'autres fichiers.

  $('#home-programmer-macro').load("files/home/watchLoot.mac");

  • La première partie recherche l'"id" de l'élément dans lequel vous souhaitez insérer le contenu.
  • La deuxième partie est l'emplacement du fichier que vous souhaitez charger.

  Remarque: Le contenu ne se chargera pas complètement, car il y a de fortes chances que vous éditiez cette page Web localement plutôt que sur un serveur. Cela peut être résolu par un certain nombre de façons différentes que je vais aborder à la fin de l'Instructable.

  Vidéo Youtube

  Le "iframe" intégré vient en fait de YouTube lui-même. Je n'expliquerai pas en détail comment les obtenir, mais lorsque vous accédez à "Partager" une vidéo, il existe une option "Intégrer" qui vous aidera à générer le code nécessaire pour afficher votre vidéo sur la page Web.

  Étape 7: Regarder vers l'avenir

  Il y a de fortes chances que je n'aie pas couvert un élément ou un type de contenu que vous souhaitez inclure dans votre site Web. Heureusement, il existe de nombreuses bonnes options pour vous permettre de franchir vous-même les prochaines étapes.

  Documentation de Bootstrap

  La documentation de Bootstrap est un excellent point de départ si vous recherchez des éléments préprogrammés et des exemples que vous pouvez copier et coller dans votre portfolio pour expérimenter. Je n'ai pas abordé les cartes, les carrousels ou les formulaires. Je vous recommande fortement de parcourir la section « Composants » pour voir les options.

  W3Écoles

  W3Schools est un site Web merveilleux où vous pouvez apprendre à peu près tout ce qui concerne la programmation et le développement Web. Ils sont beaucoup plus intelligents que moi et couvrent à peu près toutes les fonctionnalités HTML, CSS et Javascript auxquelles vous pouvez penser.

  Hébergement de votre portefeuille

  Ce Instructable vous apprend à héberger votre site Web sur quelques plates-formes différentes. Ce sont les étapes que vous devez suivre si vous voulez pouvoir montrer aux gens, aux recruteurs, etc. votre portfolio.

  Expérimentez et amusez-vous

  La seule façon de créer un excellent portfolio est d'expérimenter et d'essayer tout ce qui semble intéressant. De nombreux portfolios et sites Web de conception sophistiqués utilisent d'excellents effets de transition ou des arrière-plans dynamiques, mais aucun d'entre eux n'est préfabriqué.