Maison / Technologie / Bootstrap 4 peut-il cloner des sites Web entiers?

Bootstrap 4 peut-il cloner des sites Web entiers?

Je suis un développeur web junior récemment initié à Bootstrap 4 et j’essaie d’explorer les possibilités du framework dans un projet front-world réel.

Avant de commencer…

Pour dire la possibilité, J’ai décidé de faire un projet réel avec Bootstrap 4 pour obtenir les expériences.

J’ai choisi de cloner le site Web d’une école de codage en ligne (Microverse.org) Je participe à ce projet car:

  • C’est un Application d’une seule page qui est courant sur le marché du travail actuel.
  • Il a environ 7 ~ 8 sections pour présenter ses fonctionnalités et services, ce qui le rend assez compliqué par rapport à d’autres projets du monde réel.
  • Il utilise # Bootstrap4 et CSS personnalisé pour sa décoration en façade, ce qui est exactement ce que je recherche.
  • Je n’ai pas créé le site Web à partir de rien, mais j’ai essayé de ne demander aucune aide à l’école ou à d’autres personnes s’assurer que c’est ainsi que je vais travailler dans le projet du monde réel.

J’ai terminé ce projet en environ un mois, mais j’ai fait quelques autres projets et étudié pendant la période, donc le nombre total d’heures que j’ai consacrées à ce projet correspond à environ 30 ~ 40 heures.

Le projet final n’est pas complètement identique à l’original (et je n’ai pas l’intention de le faire), vous peut le voir de cette lien.

Vous trouverez ci-dessous comment j’ai réalisé ce projet et quelle conclusion j’en ai tirée.

Commençons => Première partie – Configuration du projet

Au début, je vais à GetBootstrap.com télécharger la dernière version de Fichiers source d’amorçage. (C’est la V.4.2.1), décompressez-le et j’ai vu les fichiers suivants à l’intérieur du dossier. (Il y a beaucoup de sous-dossiers et de fichiers que j’ai omis).

bootstrap-4.2.1 tree -L 2
.
├── CNAME
├── CODE_OF_CONDUCT.md
├── ...
├── build
│ ├── banner.js
│ ├── ...
│ └── vnu-jar.js
├── composer.json
├── dist
│ ├── css
│ └── js
├── js
│ ├── dist
│ ├── src
│ └── tests
├── nuget
├── package-lock.json
├── package.js
├── package.json
├── scss
│ ├── _alert.scss
│ ├── _badge.scss
│ ├── _breadcrumb.scss
│ ├── _button-group.scss
│ ├── ...
└── site
├── _data
├── ...
└── sw.js
    17 directories, 67 files

Pour ce faire, je ne me concentre que sur un dossier principal – ./scss, car je vais compiler ma propre version de CSS via Toupet. J’ai copié l’intégralité du dossier ./scss dans mon dossier de projet. Ci-dessous, la structure de mon dossier de projet.

➜  clone-microverse git:(development) tree
.
├── (1.0K) LICENSE
├── ( 736) README.md
├── ( 224) assets
│ ├── ( 128) bootstrap
│ │ └── (1.4K) scss
│ │ ├── (1.1K) _alert.scss
│ │ ├── (1.0K) _badge.scss
│ │ ├── (1.2K) ...
│ │ ├── ( 920) bootstrap.scss
│ │ ├── (1.0K) mixins
│ │ └── ( 576) utilities
│ ├── ( 128) css
│ │ ├── (438K) custom.css
│ │ └── (452K) custom.map
│ ├── (2.0K) images
│ │ ├── (9.8K) 1-r-kn-gdqsl-5-lie-3-l-r-7-j-n-0-a-zq-2-x.png
│ │ ├── (9.5K) 2000-px-stack-overflow-logo-svg.png
│ │ ├── ...
│ └── ( 128) scss
│ ├── ( 27K) _style.scss
│ └── (1.2K) custom.scss
└── ( 48K) index.html
7 directories, 47 files

Il y a 2 dossiers / scss dans ce projet, l’un est ./asset/bootstrap/scss (à partir des fichiers source Bootstrap) et l’autre, ./asset/scss (pour que je puisse écrire du code personnalisé à l’intérieur), et le dossier de sortie est. / asset / css (Où mon HTML fera référence à un lien).

Pour le compilateur Sass, j’utilise Scout-App pour aider, c’est une interface graphique Sass, donc c’est très simple et facile à configurer.

Une fois la configuration du projet terminée, je commence à coder les fichiers HTML et Sass.

Deuxième partie => Codage… (la partie la plus difficile)

Base sur le bootstrap officiel Documentation, J’ai créé un custom.scss fichier pour ajouter mes éléments personnalisés et le fichier de base d’amorçage ensemble.

// Custom.scss
// Option A: Include all of Bootstrap
/* -------begin customization-------- */
$theme-colors: (primary: #6f23ff,
secondary: #ffd540);
:root {
--dusk: #3e396b;
--very-light-blue: #f8faff;
--purplish-blue: rgb(111, 35, 255);
--tealish: rgb(65, 211, 189);
--light-tan: #f9f1ae;
  --padding-sm: calc((100vw - 540px) / 2);
--padding-md: calc((100vw - 720px) / 2);
--padding-lg: calc((100vw - 960px) / 2);
--padding-xl: calc((100vw - 1140px) / 2);
  --oPadding: calc(0.16 * 100vw);
--oHeight: calc(0.16 * (100vw - var(--padding-xl)));
--oHalfHeight: calc(0.16 * (50vw -var(--padding-xl)));
}
/* -------end customization-------- */
/* import Bootstrap to set the changes! */
@import "../bootstrap/scss/bootstrap.scss";
/* ----------- custom font import  ------------ */
@import url("https://fonts.googleapis.com/css?family=Domine:400,700|Maven+Pro:400,500,700,900|Montserrat:400,500,600,700,900&display=swap");
/* ------------ Self-styling -------------- */
@import "./style";

J’ai utilisé “Option A” – pour inclure tous les composants d’amorçage dans ce projet, mettre toute la personnalisation de l’auto-style dans un fichier séparé ./style.scss, Sass compilera tous les fichiers Sass dans une grande sortie CSS géante vers ./asset/ css / custom.css, que je renvoie dans mon fichier index.html.








Bootstrap 4 peut-il cloner des sites Web entiers? | Un site d'actualité internationale

Jusqu’à présent, toutes les étapes ci-dessus sont très claires et faciles à suivre (je les termine en une heure environ), mais la prochaine étape est hors de mon calcul.

J’ai passé les premières heures à essayer de recréer moi-même la barre de navigation et la page de destination. Plus j’ai essayé, plus j’ai trouvé que c’était difficile et complexe. J’ai essayé d’utiliser davantage de classes bootstrap 4 et de moins personnaliser CSS, mais cela semblait impossible.

Le site Web original a l’air plutôt élégant et stylé, n’est-ce pas? Oui, mais le prix est très spécifique et complexe code frontal.

J’y ai finalement renoncé et j’ai essayé d’examiner le code du site d’origine pour voir comment ils se combinaient. Le résultat est choquant: il y a plus de piles ou de couches pour constituer un composant que ce que je pensais à l’origine, il y a plus de CSS personnalisés que d’utilisation Bootstrap 4 classe directement, ils ont l’intention d’utiliser plus de #id que de classe pour la spécificité du style CSS. Voici un aperçu du code –

# Index.html



\ _style.scss
#homepage-header {
margin-top: 163px;
position: relative;
z-index: 105;
    .head-line {
font-family: "Domine", serif;
font-size: 3rem;
font-weight: bold;
line-height: 1.27;
}
    .head-text {
font-size: 1.25rem;
line-height: 1.65;
margin-top: 15px;
margin-right: 30px;
color: #fff;
}

À cause de ces complexités, j’ai passé presque un mois à terminer tout le codage, il y a quelques temps de passage et je ne fais ce projet que pendant mon temps libre, mais cela reste trop difficile que la plupart des projets frontaux que j’ai faits auparavant. Le fichier final.index final a 1204 lignes, le fichier _style.scss a 1512 lignes,

├── (1.0K)  LICENSE
├── ( 736) README.md
├── ( 224) assets
│ ├── ( 128) bootstrap
│ │ └── (1.4K) scss
│ ├── ( 128) css
│ │ ├── (437K) custom.css
│ │ └── (451K) custom.map
│ └── ( 128) scss
│ ├── ( 27K) _style.scss
│ └── (1.1K) custom.scss
└── ( 48K) index.html

Enfin, vous pouvez vérifier tout le code dans ici. J’ai clone environ 95% du code du site Web d’origine, mais il m’a fallu encore plusieurs heures pour le réaliser. Je ne peux pas imaginer combien d’heures je dois passer si je dois faire ce projet à partir de zéro.

Leçon Apprendre & Conclusion…

Au début, une fois ce projet terminé, je pense pouvoir répondre à la question que je soulève au début –Combien de Bootstrap 4 peut aider pour un projet du monde réel?

  • Une réponse courte est – "Pas beaucoup"
  • Une réponse plus longue est: «Cela aide sur son système de grille et certains utilitaires d’espacement, mais le projet nécessite encore beaucoup de personnalisation de CSS pour aider à rendre le site Web unique et exceptionnel."
  • Une réponse encore plus longue est la suivante: «Le cadre Bootstrap aide à fournir une base solide pour le projet. Il a contribué pour environ 20 à 30% de la base de code, mais un projet réel a besoin d’une conception et d’une différenciation plus uniques, mais aussi de l’imagination et de la créativité. Développeur frontal!"

Deuxièmement, voici quelques leçons apprises de ce projet –

  • Un projet FrontEnd du monde réel est généralement complexe et complexe. (Ce sera beaucoup plus complexe que les projets du projet Odin ou de toute autre plateforme d’apprentissage en ligne).
  • Un framework Frontend tel que Bootstrap 4 pourrait aider, mais la diligence et la créativité sont toujours les principaux contributeurs.
  • Le développement frontend implique principalement du codage répétitif et il est demandé de mettre à jour fréquemment, assurez-vous que j’aime ce genre de style de travail avant de me lancer.
  • Il reste encore beaucoup à apprendre sur SASS, CSS et HTML.

Enfin, en raison de la limitation de mes connaissances et de mes ressources, je pourrais faire ce projet de manière totalement fausse ou immature, d’où une réponse totalement fausse. Mais alors quoi? Je l’ai fait et j’en ai écrit quand même, j’en ai certainement beaucoup appris.

Il existe des ressources gratuites qui peuvent également aider à personnaliser le thème Bootstrap 4, mais elles ne semblent pas convenir à ce projet. Je pourrais donc les essayer dans le prochain projet.

  • themestr.app
  • Haut-de-forme

Je le referai s’il y a une question que je ne peux pas obtenir de réponse de Google ou de toute autre source. Je pense que c’est ainsi qu’un programmeur autodidacte apprend à évoluer dans l’environnement actuel.

PS: Je suis ouvert à vos critiques et suggestions pour ce projet, merci encore d’avoir lu toute cette histoire.


Bootstrap 4 peut-il cloner des sites Web entiers? a été publié à l’origine dans HackerNoon.com sur Medium, où les gens poursuivent la conversation en soulignant et en répondant à cette histoire.

Source

A propos newstrotteur-fr

Découvrez également

Super Lucky’s Tale dev Playful met à pied une grande partie du personnel

Playful Corp. a annoncé aujourd’hui qu’il mettrait à pied une partie importante de son personnel …

Laisser un commentaire

Do NOT follow this link or you will be banned from the site!