Tutoriel Bootstrap


tutoriel bootstrap 4


Amorcer est un framework frontal qui vous aide à créer des sites Web adaptés aux mobiles plus rapidement et plus facilement. Développé à l’origine par Twitter, Bootstrap est désormais utilisé pour tout, du développement d’applications Web aux thèmes WordPress. Il est également entièrement gratuit, polyvalent et intuitif.

Avec Bootstrap, vous pouvez créer des pages Web complexes à partir de HTML standard et les personnaliser selon vos besoins. Bootstrap est également livré avec un certain nombre de plug-ins jQuery qui peuvent fournir des fonctionnalités supplémentaires telles que des carrousels, des boutons, des info-bulles, etc..

Enfin et surtout, il vous offre de nombreux raccourcis pour créer des pages Web qui vous feront économiser temps et énergie. Tout ce dont vous avez besoin est une compréhension de base du HTML et du CSS pour créer des produits réactifs, adaptés aux mobiles et compatibles avec tous les navigateurs modernes.

P.S. Bootstrap n’est pas une option parfaite pour les débutants complets. Certaines connaissances HTML et CSS seraient utiles. Alternativement, vous pouvez utiliser des constructeurs de sites Web ou WordPress pour créer un site Web.

Comment créer un site Web à l’aide de Bootstrap (table des matières):

  1. Étape 1: Configuration et aperçu
    1. Créer une page HTML
    2. Charger Bootstrap via CDN ou l’héberger localement
    3. Inclure jQuery
    4. Charger JavaScript Bootstrap
    5. Mets le tout ensemble
  2. Étape 2: Concevez votre page de destination
    1. Ajouter une barre de navigation
    2. Inclure du CSS personnalisé
    3. Créer un conteneur de contenu de page
    4. Ajouter une image d’arrière-plan et du JavaScript personnalisé
    5. Ajouter une superposition
    6. Inclure un titre de page et un corps de texte
    7. Créer un bouton CTA
    8. Configurer une section à trois colonnes
    9. Ajouter un formulaire de contact
    10. Créer un pied de page à deux colonnes
    11. Ajouter des requêtes multimédias
    12. Obtenez votre site Web en direct

Temps total pour créer un site Web à l’aide de Bootstrap: 3-4 heures.
Niveau de compétence: Débutant à intermédiaire

Étape 1: configuration et aperçu


Pour utiliser Bootstrap, vous devez d’abord l’intégrer dans votre environnement de développement, alias page Web. Pour cela, vous avez deux possibilités différentes: le charger à distance ou télécharger et utiliser Bootstrap localement. Cependant, pour les deux, vous avez d’abord besoin de quelque chose pour le charger dans.,

1. Créez une page HTML

Dans un premier temps, nous allons créer un modèle HTML simple comme base où nous utiliserons Bootstrap. Pour cela, la première chose que vous voulez faire est de créer un dossier sur votre ordinateur ou serveur pour les fichiers du projet. Dans ce cas, je l’appellerai simplement amorcer. Ici, créez un nouveau fichier texte et appelez-le index.html. Ouvrez-le avec un éditeur de texte de votre choix (par exemple. Bloc-notes++), puis collez-y le code ci-dessous.





Page d'exemple du didacticiel d'amorçage








N’oubliez pas de sauvegarder votre fichier avant de continuer!

2a. Charger Bootstrap via CDN

Comme déjà expliqué, Bootstrap se compose principalement de feuilles de style et de scripts. En tant que tels, ils peuvent être chargés dans l’en-tête et le pied de page de votre page Web comme d’autres éléments tels que les polices personnalisées. Le cadre offre un chemin d’accès CDN (Content Delivery Network) pour cela. Vous pouvez le trouver sur le Page de téléchargement de Bootstrap, plus bas.

Pour obtenir Bootstrap dans votre page, collez simplement le code ci-dessous dans le section de votre modèle.

Lorsque vous enregistrez maintenant le fichier, tout navigateur qui l’ouvre chargera automatiquement les ressources Bootstrap.

L’utilisation de la méthode distante est une bonne idée car de nombreux utilisateurs auront déjà le framework dans le cache de leur navigateur. Si tel est le cas, ils n’auront pas à le recharger lorsqu’ils viendront sur votre site, ce qui accélérera le chargement des pages. En conséquence, c’est la méthode recommandée pour les sites en direct.

Cependant, pour l’expérimentation et le développement, ou si vous souhaitez être indépendant d’une connexion Internet, vous pouvez également obtenir votre propre copie de Bootstrap. C’est ce que je fais pour ce tutoriel car cela entraîne également moins de code à publier.

2b. Héberger Bootstrap localement

Une autre façon de configurer Bootstrap est de le télécharger sur votre disque dur et d’utiliser les fichiers localement. Vous trouverez les options de téléchargement au même endroit que les liens vers la version distante. Ici, assurez-vous d’obtenir les fichiers CSS et JS compilés. Vous n’avez pas besoin des fichiers source.

Une fois cela fait, décompressez le fichier et copiez son contenu dans le même répertoire que index.html. Après cela, vous pouvez charger le CSS Bootstrap dans votre projet comme ceci:

Vous remarquerez que cela inclut le chemin d’accès au fichier où trouver le fichier Bootstrap. Dans votre cas, assurez-vous que votre chemin correspond à votre configuration réelle. Par exemple, les noms des répertoires peuvent différer si vous avez téléchargé une version différente de Bootstrap.

3. Inclure jQuery

Afin d’obtenir toutes les fonctionnalités de Bootstrap, vous devez également charger la bibliothèque jQuery. Ici aussi, vous avez la possibilité de le charger à distance ou de l’héberger localement.

Dans le premier cas, vous trouverez le lien vers la dernière version de jQuery ici. Vous pouvez l’utiliser pour charger la bibliothèque dans votre page en plaçant la ligne de code ci-dessous juste avant l’endroit où il est dit sur ta page.

Alternativement, télécharger jQuery (clic droit> Enregistrer le lien sous…), décompressez et placez-le dans le dossier du projet. Ensuite, incluez-le au même endroit que votre fichier de cette façon:

Encore une fois, assurez-vous que le chemin correspond à votre configuration.

4. Charger JavaScript Bootstrap

La dernière étape de la configuration de Bootstrap consiste à charger la bibliothèque JavaScript Bootstrap. Ceux-ci sont inclus dans la version téléchargée du framework et vous trouverez également des liens vers des sources distantes au même endroit qu’auparavant. Cependant, nous le chargerons dans un endroit différent de la feuille de style. Au lieu de l’en-tête, il va dans le pied de page, juste après l’appel à jQuery.

Vous pouvez l’appeler à distance comme ceci:

Ou localement comme ça:

5. Mettez tout cela ensemble

Si vous avez correctement suivi les étapes ci-dessus, vous devriez vous retrouver avec un fichier qui ressemble à ceci pour la solution distante:

   Page d'exemple du didacticiel d'amorçage         

Alternativement, si vous hébergez localement, votre modèle de page devrait ressembler au code ci-dessous:

   Page d'exemple du didacticiel d'amorçage         

Si c’est ce que vous avez et que vous avez enregistré votre travail, vous êtes maintenant prêt à passer à l’étape suivante.

Étape 2: Concevez votre page de destination


D’accord, c’était, certes, beaucoup de travail de préparation. Mais ça n’a pas été très difficile, non? De plus, le plaisir commence maintenant.

Pour le moment, lorsque vous accédez à votre exemple de site, vous devriez simplement voir une page vierge. Il est temps de changer cela.

1. Ajoutez une barre de navigation

La première chose que nous voulons faire est d’ajouter une barre de navigation en haut de la page. Cela permet à vos visiteurs de parcourir votre site et de découvrir le reste de vos pages.

Pour cela, nous utiliserons le navbar classe. C’est l’un des éléments par défaut de Bootstrap. Il crée un élément de navigation réactif par défaut et s’effondrera automatiquement sur des écrans plus petits. Il offre également un support intégré pour l’ajout de la marque, des jeux de couleurs, de l’espacement et d’autres composants.

Nous l’utiliserons comme ci-dessous et le publierons juste en dessous du étiquette:

 Logo   

Quelques explications sur le code:

  • navbar-expand-md – Cela indique à quel point la barre de navigation passe de l’icône verticale ou hamburger à une barre horizontale pleine taille. Dans ce cas, nous l’avons défini sur des écrans moyens, qui, dans Bootstrap, sont supérieurs à 768 pixels.
  • navbar-brand – Ceci est utilisé pour l’image de marque de votre site Web. Vous pouvez également inclure un fichier image de logo ici.
  • navbar-toggler – Indique le bouton bascule pour le menu réduit. La pièce data-toggle = "collapse" définit que cela se transformera en un menu hamburger, pas en une liste déroulante, qui est l’autre option. Il est important de définir un cible de données avec un identifiant CSS (défini par le #) et envelopper un div avec le même nom autour du réel navbar élément.
  • navbar-toggler-icon – Comme vous pouvez probablement le deviner, cela crée l’icône sur laquelle les utilisateurs cliquent pour ouvrir le menu sur des écrans plus petits.
  • navbar-nav – La classe pour le
      élément de liste contenant les éléments de menu. Ces derniers sont désignés par nav-item et nav-link.

    Pourquoi est-ce que j’explique cela autant?

    Parce que c’est le but de Bootstrap. Vous disposez de toutes ces normes qui vous permettent de créer rapidement des éléments avec certaines classes HTML et CSS. Vous n’avez pas besoin d’écrire de CSS pour fournir un style, tout est déjà configuré dans Bootstrap. De plus, tout est réactif mobile dès la sortie de la boîte! Commencez-vous à voir à quel point cela est utile?

    Ce qui précède suffit pour ajouter une barre de navigation à votre site. Cependant, pour le moment, il semble encore très peu.

    tutoriel bootstrap ajouter une barre de navigation

    C’est parce qu’il n’y a pas beaucoup de style attaché. Pendant que vous pouvez ajouter couleurs par défaut (par exemple, en donnant à la barre de navigation une classe comme bg-dark navbar-dark), nous voulons plutôt ajouter le nôtre.

    2. Inclure CSS personnalisé

    Heureusement, si vous souhaitez modifier le style par défaut, vous n’avez pas à parcourir une grande bibliothèque de feuilles de style et à effectuer les modifications à la main. Au lieu de cela, tout comme avec un thème enfant WordPress, vous pouvez ajouter vos propres fichiers CSS que vous pouvez utiliser pour remplacer le style existant.

    Pour cela, créez simplement un fichier vierge avec votre éditeur de texte et appelez-le main.css. Enregistrez-le, puis ajoutez-le à la section principale de votre site Bootstrap comme ceci:

    Il s’agit du code d’une feuille de style qui réside dans le répertoire principal. Si vous décidez de placer votre intérieur css dossier, assurez-vous d’inclure le chemin correct dans le lien.

    De là, vous pouvez ajouter du CSS personnalisé à votre site. Par exemple, pour styliser la barre de navigation et ses éléments, vous pouvez utiliser un balisage comme ceci:

    corps { rembourrage: 0; marge: 0; fond: # f2f6e9; } /*--- barre de navigation ---*/ .navbar { fond: # 6ab446; } .nav-link, .navbar-brand { couleur: #fff; curseur: pointeur; } .nav-link { marge droite: 1em! important; } .nav-link: hover { couleur: # 000; } .navbar-collapse { justifier-contenu: flex-end; }

    Et voici le résultat:

    barre de navigation de style didacticiel bootstrap

    Ça a l’air mieux qu’avant, n’est-ce pas?

    3. Créez un conteneur de contenu de page

    Après la barre de navigation, la prochaine chose que vous voulez est un conteneur pour le contenu de la page. C’est vraiment facile dans Bootstrap car tout ce dont vous avez besoin est sous le tag navbar:

    Remarquez le conteneur-fluide classe. C’est une autre de ces classes Bootstrap par défaut. En l’appliquant au div L’élément lui applique automatiquement un tas de CSS.

    le -fluide permet de s’assurer que le conteneur s’étend sur toute la largeur de l’écran. Il y a aussi juste un récipient, qui a des largeurs fixes qui lui sont appliquées, donc il y aura toujours de l’espace des deux côtés de l’écran.

    Cependant, si vous rechargez maintenant la page, vous ne verrez toujours rien (sauf si vous utilisez les outils de développement). C’est parce que vous avez uniquement créé un élément HTML vide. Cela va commencer à changer maintenant.

    4. Ajoutez une image d’arrière-plan et du JavaScript personnalisé

    Comme étape suivante de ce didacticiel Bootstrap, nous voulons inclure une image d’arrière-plan plein écran pour l’en-tête de notre page de destination. Pour cela, nous devrons utiliser un peu de jQuery pour faire s’étirer l’image tout au long de l’écran.

    Vous procédez de la même manière que vous incluez le CSS personnalisé. Créez d’abord un fichier texte du nom main.js et placez-le dans le dossier de votre site. Ensuite, appelez-le avant la fermeture étiquette à l’intérieur index.html.

    Après cela, vous pouvez copier et coller ce morceau de code pour rendre le

    l’élément s’étend sur tout l’écran:
    $ (document) .ready (fonction () { $ ('. header'). height ($ (window) .height ()); })

    Ensuite, la seule chose qui reste est de définir une image d’arrière-plan. Vous pouvez faire ça comme ça à l’intérieur main.css:

    .entête { background-image: url ('images / header-background.jpg'); taille du fond: couverture; position de fond: centre; position: relative; }

    Si vous placez une image de taille suffisante à l’emplacement spécifié par le chemin ci-dessus, vous obtiendrez un résultat similaire à celui-ci:

    le didacticiel de démarrage comprend l'image d'arrière-plan de l'en-tête

    5. Ajoutez une superposition

    Pour rendre l’image de fond plus élégante, nous ajouterons également une superposition. Pour cela, vous allez créer un autre élément div à l’intérieur de celui que vous venez d’inclure plus tôt.

    Ensuite, vous pouvez ajouter les éléments suivants dans votre fichier CSS personnalisé:

    .superposition { position: absolue; hauteur min: 100%; largeur min: 100%; gauche: 0; en haut: 0; fond: rgba (0, 0, 0, 0,6); }

    Cela créera cette belle superposition pour l’image que vous avez entrée plus tôt:

    didacticiel d'amorçage, ajouter une superposition

    6. Inclure un titre de page et un corps de texte

    Maintenant, vous voulez probablement ajouter un titre de page sous la forme d’un en-tête et du corps du texte. De cette façon, vos visiteurs sauront immédiatement sur quel site ils se trouvent et ce qu’ils peuvent en attendre..

    Pour les créer, ajoutez simplement cet extrait dans le conteneur que vous avez configuré à la dernière étape, sous la superposition:

    Bienvenue sur la page de destination!

    Lorem ipsum dolor sit amet, elect adipiscing consectetur. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, à pharetra sem ullamcorper.

    Après cela, ajoutez le balisage suivant à main.css.

    .la description { gauche: 50%; position: absolue; haut: 45%; transformer: traduire (-50%, -55%); alignement du texte: centre; } .description h1 { couleur: # 6ab446; } .description p { couleur: #fff; taille de police: 1,3rem; hauteur de ligne: 1,5; }

    Lorsque vous le faites, la page de destination ressemble maintenant à ceci:

    tutoriel bootstrap ajouter le titre et la description de la page

    Ça commence vraiment à se rassembler, n’est-ce pas?

    7. Créez un bouton CTA

    Aucune page de destination n’est complète sans un appel à l’action, le plus souvent sous la forme d’un bouton. Pour cette raison, nous serions mal à ne pas inclure comment en créer un dans ce tutoriel Bootstrap.

    Le cadre offre de nombreux outils pour créer des boutons rapidement et facilement. Vous pouvez trouver de nombreux exemples ici. Dans mon cas, j’ajoute le balisage suivant juste en dessous du contenu de la page à l’intérieur du récipient:

    En plus de cela, j’ajoute ce CSS à main.css:

    .bouton de description { bordure: 1px solide # 6ab446; fond: # 6ab446; border-radius: 0; couleur: #fff; } .bouton de description: survoler { bordure: 1px solid #fff; fond: #fff; couleur: # 000; }

    Après l’enregistrement et le rechargement, cela ressemble à ceci:

    didacticiel d'amorçage ajouter un bouton d'appel à l'action

    8. Mettre en place une section à trois colonnes

    Je suis déjà assez satisfait de l’évolution des choses. Cependant, nous n’avons pas encore fini avec la page. Ensuite, nous voulons créer trois colonnes sous le contenu principal pour des informations supplémentaires. C’est une spécialité de Bootstrap car elle joue à sa force: création d’une grille. Voici comment procéder dans ce cas:

    Lorem ipsum

    Lorem ipsum dolor sit amet, elect adipiscing consectetur. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum

    Lorem ipsum dolor sit amet, elect adipiscing consectetur. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    La première chose que vous remarquerez est la rangée élément. Vous en avez besoin chaque fois que vous créez des colonnes pour servir de conteneur à la grille.

    Quant aux colonnes, elles ont toutes plusieurs classes: col-lg-4, col-md-4 et col-sm-12. Ceux-ci indiquent que nous avons affaire à des colonnes et à la taille qu’elles auront sur différents écrans.

    Pour comprendre cela, vous devez savoir que dans une grille Bootstrap, toutes les colonnes d’une ligne totalisent toujours le nombre 12. Donc, leur donner les classes ci-dessus signifie qu’elles occuperont un tiers de l’écran sur les grandes et les moyennes. écrans (12 divisé par 3 soit 4) mais tout l’écran sur les petits appareils (12 colonnes sur 12).

    Cela a du sens, n’est-ce pas?

    Vous remarquerez également que j’ai inclus des images et ajouté le .image-fluide classe pour eux. C’est pour les rendre réactifs afin qu’ils évoluent avec un écran sur lequel la page est affichée.

    En plus de cela, vous avez le style suivant inclus à l’endroit habituel:

    .Caractéristiques { marge: 4em auto; rembourrage: 1em; position: relative; } .titre de fonction { couleur: # 333; taille de police: 1,3rem; poids de la police: 700; marge en bas: 20 px; transformation de texte: majuscule; } .fonctionnalités img { -webkit-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0,4); boîte-ombre: 1px 1px 4px rgba (0, 0, 0, 0.4); marge en bas: 16 pixels; }

    Une fois ajouté sous le contenu principal et enregistré, il ressemble à ceci:

    tutoriel bootstrap ajouter une section à trois colonnes

    9. Ajoutez un formulaire de contact

    Vous remarquerez que l’un des nouveaux champs est toujours vide. C’était exprès car nous voulons y ajouter un formulaire de contact. Il s’agit d’une pratique très normale pour les pages de destination afin de permettre aux visiteurs d’entrer en contact..

    La création d’un formulaire de contact dans Bootstrap est assez simple:

    Entrer en contact!

    À ce stade, je ne devrais plus avoir à expliquer le balisage pour créer des colonnes. Voici ce que signifie le reste du balisage:

    • groupe de formulaires – Utilisé pour envelopper les champs de formulaire pour le formatage.
    • contrôle de forme – Indique des champs de formulaire tels que des entrées, des zones de texte, etc..

    Vous pouvez faire beaucoup plus avec les formulaires, que vous pouvez découvrir dans le Documentation. Cependant, à des fins de démonstration, ce qui précède est suffisant. Placez-le dans la colonne vide restante, puis ajoutez ce style dans main.css:

    .caractéristiques .form-control, .fonctionnalités d'entrée { border-radius: 0; } .fonctionnalités .btn { couleur de fond: # 589b37; bordure: 1px solide # 589b37; couleur: #fff; margin-top: 20 pixels; } .fonctionnalités .btn: hover { couleur de fond: # 333; bordure: 1px solide # 333; }

    Lorsque vous le faites, vous obtenez un formulaire comme celui-ci:

    tutoriel bootstrap comprend un formulaire de contact

    10. Créez un pied de page à deux colonnes

    D’accord, nous arrivons maintenant à la fin du tutoriel Bootstrap. La dernière chose que vous souhaitez ajouter à votre page de destination est une section de pied de page avec deux colonnes. À ce jour, cela ne devrait plus vous poser de problème.

    Information additionnelle

    Lorem ipsum dolor sit amet, elect adipiscing consectetur. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Lorem ipsum dolor sit amet, elect adipiscing consectetur. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.

    Contact

    1640 Riverside Drive, Hill Valley, Californie
    [protégé par e-mail]
    + 01 234 567 88
    + 01 234 567 89

    Outre le balisage de grille habituel, cette section met en évidence quelques possibilités de modifier la typographie avec Bootstrap:

    • texte en majuscules
    • font-weight-bold
    • centre de texte

    Cela devrait être assez clair d’après les noms des classes qu’ils font. Vous pouvez trouver plus d’informations sur Bootstrap et la typographie ici.

    En plus de ce qui précède, vous pouvez utiliser un style comme celui-ci:

    .Pied de page {
    couleur de fond: # 222;
    couleur: #ccc;
    rembourrage: 60px 0 30px;
    }
    
    .footer-copyright {
    couleur: # 666;
    rembourrage: 40px 0;
    }

    Il en résulte un beau pied de page qui ressemble à ceci:

    didacticiel de démarrage comprenant le pied de page

    11. Ajouter des requêtes multimédias

    La page est pratiquement prête maintenant. Il est également pleinement responsable. Cependant, dans la vue mobile du navigateur, la section supérieure n’est pas encore tout à fait correcte.

    erreur de didacticiel de démarrage sur la conception mobile

    Cependant, pas de soucis, vous pouvez corriger cela assez facilement avec une simple requête média. À moins que vous n’utilisiez SASS pour compiler votre site Bootstrap, ceux-ci fonctionnent de la même manière que dans d’autres cas. Il vous suffit de garder à l’esprit points d’arrêt prédéfinis inclus dans Bootstrap.

    Par conséquent, pour corriger le problème ci-dessus, vous pouvez simplement inclure un morceau de code comme celui-ci:

    @media (largeur maximale: 575,98 pixels) {
    
    .la description {
    gauche: 0;
    rembourrage: 0 15px;
    position: absolue;
    Top 10%;
    transformer: aucun;
    alignement du texte: centre;
    }
    
    .description h1 {
    taille de police: 2em;
    }
    
    .description p {
    taille de police: 1.2rem;
    }
    
    .Caractéristiques {
    marge: 0;
    }
    
    }

    Après cela, tout est comme il se doit:

    didacticiel d'amorçage ajouter une requête multimédia

    12. Téléchargez votre site Web sur un hébergeur

    Si vous avez suivi, vous devriez maintenant avoir un site Web fini également sur mobile et entièrement réactif.

    Cependant, jusqu’à présent, personne d’autre que vous ne peut le voir. Pour changer cela, vous avez besoin d’un hôte Web et d’un domaine. De cette façon, les gens peuvent entrer l’adresse de votre site Web dans leur barre de navigateur, puis accéder à votre site Web Bootstrap nouvellement créé en ligne.

    Afin de leur permettre de le faire, vous devez télécharger le site sur votre serveur. Vous pouvez le faire avec un client FTP comme FileZilla. Récupérez votre adresse d’hôte FTP, votre nom d’utilisateur et votre mot de passe auprès de votre hébergeur pour vous connecter à distance à votre serveur. Lorsque vous le faites, vous devriez pouvoir voir les fichiers et répertoires qui s’y trouvent actuellement..

    télécharger le site Web d'amorçage sur le serveur via ftp

    Accédez au répertoire vers lequel votre domaine est pointé (généralement le répertoire racine). Une fois que vous avez fait cela, recherchez simplement le dossier avec vos fichiers Bootstrap sur votre disque dur, marquez tous les fichiers à l’intérieur, puis faites-les glisser sur le serveur pour démarrer le téléchargement. Le processus prendra un certain temps pour se terminer selon la vitesse de votre connexion ainsi que le nombre et la taille des fichiers.

    Cependant, une fois terminé, lorsque vous accédez à votre domaine, vous devriez pouvoir voir le site terminé dans la fenêtre de votre navigateur..

    page de destination du didacticiel de démarrage

    Pas mal pour quelques lignes de code, à droite?

    En parlant de cela, si vous voulez avoir le code complet de la page, y compris le CSS personnalisé et JavaScript, vous pouvez tous les télécharger ici. Avec cela, vous avez tout ce dont vous avez besoin pour créer une page de destination avec Bootstrap.

    Conclusion

    Bootstrap est un framework de développement frontal open source que n’importe qui peut utiliser gratuitement. Il vous permet de prototyper rapidement des conceptions, de créer des pages Web et de démarrer généralement.

    Comme vous l’avez vu dans ce tutoriel Bootstrap pour les débutants, il n’a besoin que de connaissances de base en HTML, CSS et quelques jQuery facultatifs. Bien qu’il ne soit pas aussi confortable que d’utiliser WordPress, Bootstrap est toujours une alternative valable pour créer un site Web.

    À présent, vous savez comment configurer et installer Bootstrap et ses composants, créer une page de destination simple, inclure du contenu de base et le styliser. Vous pouvez créer des menus de navigation, définir des images d’arrière-plan, inclure des boutons, des colonnes et des formulaires de contact.

    Bien sûr, il y a plus à apprendre.

    Grâce à ce didacticiel de base Bootstrap, vous en savez maintenant suffisamment pour continuer à avancer par vous-même. Si vous voulez approfondir le cadre, un bon point de départ est W3Schools. En plus de cela, nous espérons que vous avez aimé ce tutoriel pour débutant et que vous aimeriez entendre vos pensées et vos expériences à ce sujet.

    Mise à jour: Nous avons également créé une feuille de triche bootstrap pour les débutants dans les versions .pdf et .png.

    Avez-vous des réflexions sur le tutoriel Bootstrap ci-dessus? Questions, commentaires, demandes? Faites-nous savoir dans la section commentaires ci-dessous!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map