{"id":817016,"date":"2022-09-28T12:00:00","date_gmt":"2022-09-28T12:00:00","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-use-bootstrap-in-wordpress-a-beginners-guide\/"},"modified":"2022-12-10T12:44:44","modified_gmt":"2022-12-10T12:44:44","slug":"how-to-use-bootstrap-in-wordpress-a-beginners-guide","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/comment-utiliser-bootstrap-dans-wordpress-guide-du-debutant\/","title":{"rendered":"Comment utiliser Bootstrap dans WordPress : Guide du d\u00e9butant"},"content":{"rendered":"
\n

WordPress et Bootstrap sont deux plateformes populaires de conception de sites Web qui ne sont pas souvent consid\u00e9r\u00e9es comme compatibles. Bootstrap est devenu la plateforme CSS pr\u00e9f\u00e9r\u00e9e des d\u00e9veloppeurs, car il permet de cr\u00e9er facilement des sites Web r\u00e9actifs. En fait, plus de 70 % des sites Web sur Internet sont con\u00e7us avec cette plateforme. Vous pouvez coder tout ce que vous voulez dans son cadre r\u00e9actif pour cr\u00e9er un site Web unique et adapt\u00e9 aux mobiles, d\u00e8s sa sortie de la bo\u00eete. Plus de la moiti\u00e9 des utilisateurs acc\u00e9dant \u00e0 l’internet via un appareil mobile, il est essentiel de disposer d’un site r\u00e9actif.<\/p>\n

Et si nous vous disions que vous pouvez utiliser Bootstrap et WordPress ensemble ? Eh bien, c’est possible. Il existe plusieurs fa\u00e7ons d’utiliser Bootstrap dans WordPress, notamment les plugins WordPress Bootstrap qui peuvent ajouter des blocs Bootstrap \u00e0 l’\u00e9diteur WordPress. Nous allons couvrir toutes les fa\u00e7ons d’utiliser Bootstrap dans WordPress et vous montrer comment.<\/p>\n

Qu’est-ce que Bootstrap ?<\/h2>\n

Bootstrap<\/a> a \u00e9t\u00e9 cr\u00e9\u00e9 par deux experts de Twitter, Marc Otto et Jacob Thornton. \u00c9tant donn\u00e9 que de nombreuses personnes acc\u00e8dent \u00e0 l’Internet par t\u00e9l\u00e9phone, ils ont voulu concevoir un cadre qui donnerait la priorit\u00e9 aux utilisateurs mobiles. C’est pourquoi Bootstrap est tr\u00e8s populaire aupr\u00e8s des d\u00e9veloppeurs Web. Pour r\u00e9aliser une conception mobile, Bootstrap utilise un syst\u00e8me de grille, ou structure en colonnes, qui adapte la conception des pages \u00e0 certains points de rupture ou \u00e0 certaines r\u00e9solutions d’\u00e9cran.
\n\"WordPress<\/p>\n

Bootstrap est compos\u00e9 de HTML, CSS et Javascript. Il s’agit d’un cadre gratuit et open source, qui permet aux utilisateurs d’ajouter tout composant HTML ou Javascript qu’ils souhaitent. En fait, il existe de nombreux d\u00e9veloppeurs Bootstrap qui cr\u00e9ent des composants et les vendent sur plusieurs places de march\u00e9 pour aider les d\u00e9butants \u00e0 d\u00e9velopper leurs propres sites Web. \u00c0 l’instar de WordPress, Bootstrap est tr\u00e8s populaire et permet de r\u00e9aliser de magnifiques designs.<\/p>\n

Les avantages de Bootstrap<\/h2>\n

En plus d’\u00eatre orient\u00e9 vers les appareils mobiles, Bootstrap est rapide. Il s’agit d’un cadre CSS, ce qui est diff\u00e9rent d’un CMS. Il n’y a donc pas d’\u00e9l\u00e9ments superflus comme ceux que l’on trouve dans certains CMS et qui ralentissent votre site. Un autre avantage est la compatibilit\u00e9 avec les navigateurs. Il fonctionne d\u00e8s le d\u00e9part avec Chrome, Safari, Firefox et d’autres. Il n’est pas n\u00e9cessaire d’utiliser les r\u00e8gles CSS de webkit pour que Bootstrap fonctionne, ce qui en fait un excellent choix pour la compatibilit\u00e9 entre navigateurs. En outre, le cadre est facile \u00e0 utiliser. Toute personne ayant des connaissances en CSS et en HTML peut travailler avec Bootstrap. Enfin, Bootstrap est entour\u00e9 d’une grande communaut\u00e9. Les utilisateurs sont prompts \u00e0 partager leurs connaissances sur les fonctionnalit\u00e9s, le codage ou tout autre probl\u00e8me connexe pour lequel un nouveau d\u00e9veloppeur pourrait avoir besoin d’aide.<\/p>\n

Fa\u00e7ons d’utiliser Bootstrap dans WordPress<\/h2>\n

Il existe quelques options si vous souhaitez utiliser Bootstrap sur votre site WordPress. Vous pouvez installer le script manuellement, mais vous devrez effectuer la majeure partie du codage par vous-m\u00eame pour lui donner vie. Deuxi\u00e8mement, vous pouvez utiliser un th\u00e8me Bootstrap pr\u00e9\u00e9tabli pour WordPress. Il en existe plusieurs, mais en choisissant cette option, votre site devra ressembler exactement au th\u00e8me. Il n’y aura pas beaucoup d’options pour le rendre moins \u00ab\u00a0cookie-cutter\u00a0\u00bb, \u00e0 moins que vous ne codiez vos propres mod\u00e8les de page pour changer les choses. Enfin, vous pouvez utiliser un plugin WordPress pour cr\u00e9er votre site \u00e0 l’aide de Boostrap.<\/p>\n

Ces derni\u00e8res ann\u00e9es, les d\u00e9veloppeurs de WordPress ont commenc\u00e9 \u00e0 publier des plugins Bootstrap qui peuvent \u00eatre utilis\u00e9s dans WordPress. Ces plugins commencent \u00e0 s’imposer, notamment depuis la sortie des blocs Gutenberg. En utilisant un plugin WordPress Bootstrap, vous pouvez apporter le meilleur des deux plateformes ensemble. Avant de nous plonger plus profond\u00e9ment dans ce que vous pouvez faire avec ces plugins, d\u00e9veloppons un peu l’autre option qui s’offre \u00e0 vous pour donner vie \u00e0 votre projet Bootstrap dans WordPress.<\/p>\n

Installation manuelle de Bootstrap<\/h3>\n

Si vous ne voulez pas utiliser de plugin, vous pouvez toujours construire votre site avec Boostrap manuellement. Pour ce faire, vous devrez ajouter un lien de r\u00e9f\u00e9rence \u00e0 Bootstrap dans l’en-t\u00eate de votre site WordPress. Vous devrez peut-\u00eatre ajouter un plugin de code snippets pour le faire, selon le th\u00e8me que vous utilisez.<\/p>\n

Un lien CDN vers la feuille de style externe de Bootstrap dans l’en-t\u00eate de votre site ressemblera \u00e0 quelque chose comme ceci <\/strong><\/p>\n

<\/pre>\n
Veillez \u00e0 consulter le site Web de Bootstrap<\/a> pour vous assurer que vous utilisez le dernier script afin de b\u00e9n\u00e9ficier de la derni\u00e8re version disponible. Gardez \u00e0 l’esprit que vous pouvez cr\u00e9er votre propre th\u00e8me WordPress qui int\u00e8gre Bootstrap, mais cela demandera un certain travail de votre part. Cela impliquerait de modifier les pages principales – index.php, wp-admin.php, et autres. Pour ce tutoriel, nous allons utiliser un plugin Bootstrap car il s’agit d’une approche beaucoup plus facile pour la plupart des gens.<\/p>\n
Utiliser un th\u00e8me WordPress Bootstrap<\/h3>\n
Il existe un grand nombre de th\u00e8mes WordPress Bootstrap gratuits disponibles dans le d\u00e9p\u00f4t de WordPress. Chacun d’entre eux est enti\u00e8rement responsive, et construit enti\u00e8rement en utilisant Bootstrap. Jetons un coup d’\u0153il \u00e0 quelques-uns des choix les plus populaires.<\/p>\n
Shapely<\/h4>\n
\"Shapely<\/p>\n
Shapely<\/a> est le th\u00e8me WordPress Boostrap le plus populaire disponible. C’est un design \u00e0 une page qui est livr\u00e9 avec Bootsrap enti\u00e8rement int\u00e9gr\u00e9. Il y a plusieurs widgets de page d’accueil, et le support des principaux plugins WordPress tels que WooCommerce, Jetpack, Gravity Forms, Yoast SEO, et bien d’autres. Gr\u00e2ce \u00e0 l’int\u00e9gration de Boostrap, Shapely est 100% responsive.<\/p>\n
Illdy<\/h4>\n
\"Illdy<\/p>\n
Illdy<\/a> est un th\u00e8me WordPress Bootstrap polyvalent qui utilise un \u00e9diteur visuel frontal. Comme tous les th\u00e8mes bas\u00e9s sur Bootstrap, Illdy est enti\u00e8rement responsive. Il est adapt\u00e9 aux entreprises cr\u00e9atives en raison de sa fonctionnalit\u00e9 de portefeuille int\u00e9gr\u00e9e.<\/p>\n
Activello<\/h4>\n
\"Activello<\/p>\n
Activello<\/a> dispose d’un slider plein \u00e9cran sur la page d’accueil, ce qui donne un aspect \u00e9tonnant lorsque vous cliquez sur la page pour la premi\u00e8re fois. Il est bien adapt\u00e9 aux blogueurs et prend en charge les plugins WordPress les plus populaires. En outre, Activello est compatible avec Schema, ce qui rend ce th\u00e8me tr\u00e8s convivial pour le r\u00e9f\u00e9rencement.<\/p>\n
Utilisation d’un plugin WordPress Bootstrap<\/h3>\n
Dans le cadre de ce tutoriel, nous utiliserons un plugin pour cr\u00e9er notre page Bootstrap sur WordPress. Les deux plugins dont nous allons parler permettent d’utiliser Bootstrap avec les blocs Gutenberg, mais l’un d’eux offre un chemin plus facile que l’autre.<\/p>\n
Blocs Bootstrap<\/h4>\n
\"bootstrap<\/p>\n
Bootstrap Blocks<\/a> est un plugin WordPress qui ajoute des blocs Boostrap Gutenberg \u00e0 l’\u00e9diteur WordPress. Le plugin n\u00e9cessite un certain nombre de personnalisations pour s’int\u00e9grer pleinement \u00e0 WordPress. Il n’inclut pas la biblioth\u00e8que Bootstrap dans le plugin. Si vous voulez avoir cette fonctionnalit\u00e9, vous devrez ajouter manuellement du code \u00e0 votre fichier functions.php. Ce plugin est plus adapt\u00e9 au d\u00e9veloppeur WordPress avec une bonne quantit\u00e9 de connaissances en programmation. Si vous \u00eates d\u00e9j\u00e0 familier avec le fonctionnement des fichiers de base de WordPress, et que vous avez une bonne notion de Bootstrap, cela pourrait \u00eatre la voie \u00e0 suivre. Cependant, il y a une chose que vous devez garder \u00e0 l’esprit \u00e0 propos de ce plugin. Vous n’aurez acc\u00e8s qu’\u00e0 quelques composants – conteneurs, lignes, colonnes et boutons. Si vous voulez une option plus robuste sans beaucoup de tracas, vous voudrez probablement envisager une approche diff\u00e9rente.<\/p>\n
Tous les blocs Bootstrap<\/h4>\n
\"all<\/p>\n
Le plugin All Bootstrap Blocks<\/a> pr\u00e9sente des caract\u00e9ristiques tr\u00e8s int\u00e9ressantes. Non seulement il int\u00e8gre le cadre Bootstrap dans WordPress pour vous, mais il vous donne 37 blocs tr\u00e8s cool \u00e0 utiliser aux c\u00f4t\u00e9s des blocs Gutenberg. Vous obtiendrez des fonctionnalit\u00e9s comme les colonnes et les lignes – qui sont les blocs de base de Bootstrap. En outre, il y a des modales, des accord\u00e9ons, des cartes de contenu, des ic\u00f4nes, et tellement plus. C’est presque comme avoir un th\u00e8me enti\u00e8rement fonctionnel juste en installant un plugin. Il y a un peu de courbe d’apprentissage pour que les choses aient l’air parfaites, surtout si vous \u00eates habitu\u00e9 \u00e0 un constructeur visuel de type glisser-d\u00e9poser. Cependant, si vous avez cod\u00e9 \u00e0 la main avec des divs et des colonnes, ce sera une bouff\u00e9e d’air frais.<\/p>\n
Comment utiliser Bootstrap dans WordPress pour concevoir une page (\u00e9tape par \u00e9tape)<\/h2>\n
Dans ce tutoriel, nous allons cr\u00e9er une page dans WordPress en utilisant le th\u00e8me Twenty Seventeen et tous les blocs Boostrap. Nous allons modeler notre page sur la page de produit de l’appareil photo disponible avec un abonnement \u00e0 Elegant Themes.<\/p>\n
1. Modifier le CSS du th\u00e8me Twenty Seventeen pour Bootstrap<\/h3>\n
Si vous connaissez un peu le th\u00e8me Twenty Seventeen, vous verrez que par d\u00e9faut, il y a une grande image d’en-t\u00eate, suivie d’une disposition en deux colonnes. Pour notre mise en page, cela ne suffira pas. Nous allons devoir apporter quelques modifications pour que notre page ressemble \u00e0 la page produit de l’appareil photo.
\n\"Twenty<\/p>\n
La premi\u00e8re chose \u00e0 faire est de supprimer l’image d’en-t\u00eate fournie en standard avec le th\u00e8me. Pour ce faire, naviguez vers Customizer<\/strong> dans la barre d’administration noire.
\n\"Customize<\/p>\n
Lorsque l’\u00e9cran se rafra\u00eechit, cliquez sur la section additional css<\/strong>.
\n\"boostrap<\/p>\n
Enfin, ajoutez le css suivant :<\/strong><\/p>\n
\/*Mettre la page en pleine largeur *\/\n@media screen and (min-width : 1200px) {\n    .wrap {\n        max-width:100%!important ;\n        padding:0 ;\n    }\n}\n\n@media screen and (min-width : 1200px) {\n#primary .entry-content {\n  width : 100% !important ;\n\t\t}\n}\n\n.site-content {\n\tmargin:0!important ;\n\tpadding:0!important ;\n}\n\n\/* Masquer la barre de menu *\/\n\n.site-branding {\n    display:none ;\n}\n\n\/* Masquer le titre de la page *\/\n.page .panel-content .entry-title, .page-title, body.page .entry-title {\n    display:none ;\n}\n\n\/*Masquer le pied de page du site *\/\n    .site-footer {\n        display : none ;\n    }\n}\n\n<\/pre>\n
Cette op\u00e9ration a plusieurs effets. Premi\u00e8rement, la largeur du contenu occupera toute la largeur de la page. Deuxi\u00e8mement, elle supprime toute marge et tout remplissage de la page. Ne vous inqui\u00e9tez pas, Bootstrap les contr\u00f4lera. En outre, il supprimera l’en-t\u00eate et le pied de page de votre site. Enfin, il supprimera le nom de la page de notre futur chef-d’\u0153uvre.<\/p>\n
Remarque : si vous souhaitez cr\u00e9er un pied de page pour votre page, vous pouvez omettre la r\u00e8gle css site-footer ci-dessus.<\/em><\/p>\n
Une fois que vous aurez cliqu\u00e9 sur \u00ab\u00a0Publier\u00a0\u00bb<\/strong>, votre page devrait ressembler \u00e0 ceci :
\n\"Blank<\/p>\n
2. Installation et configuration du plugin<\/h3>\n
Maintenant que la page de notre th\u00e8me est pr\u00eate \u00e0 \u00eatre utilis\u00e9e, vous devez installer le plugin All Bootstrap Blocks<\/a>. Une fois install\u00e9 et activ\u00e9, vous disposez d’un grand nombre d’options de personnalisation. Vous pouvez ajuster les couleurs, la typographie, les liens, et bien plus encore. Pour commencer, allez dans Boostrap > Customize<\/strong>. Vous trouverez des onglets pour personnaliser la mise en page, le contenu, la cr\u00e9ation de formulaires et les composants.
\n\"Customizing<\/p>\n
3. Cr\u00e9er une mise en page avec tous les blocs Bootstrap<\/h3>\n
Pour commencer, cr\u00e9ez une nouvelle page. Une fois votre page cr\u00e9\u00e9e, commencez par un bloc strip<\/strong> pour le premier bloc de la page. Cela cr\u00e9era une section qui ajoute un conteneur, une ligne et une colonne.<\/p>\n
Cliquez sur le +<\/strong> et cliquez sur Parcourir tout<\/strong>. Cela fera appara\u00eetre une barre lat\u00e9rale avec les modules disponibles.
\nSous la rubrique \u00ab\u00a0bootstrap layout\u00a0\u00bb, choisissez \u00a0\u00bb strip\u00a0\u00bb<\/strong>.
\n\"Add<\/p>\n
Lorsque le contenu est ajout\u00e9, vous verrez qu’un conteneur, une ligne et une colonne sont visibles \u00e0 l’int\u00e9rieur de la bande. Ensuite, vous allez choisir un titre<\/strong> et le d\u00e9finir sur H4.
\n\"Add<\/p>\n
Cliquez sur le signe +<\/strong> pour ajouter un autre titre sous la balise h4. D\u00e9finissez-le sur H1, puis d\u00e9finissez la taille<\/strong> sur 7em.
\n\"Set<\/p>\n
Ensuite, ajoutez un bouton Bootstrap en cliquant sur le +<\/strong>. Tapez le bouton dans la barre de recherche. D\u00e9finissez le texte du bouton. Ensuite, d\u00e9finissez le style<\/strong> sur fonc\u00e9, la taille<\/strong> sur moyen et laissez l’habillage du texte<\/strong> par d\u00e9faut.
\n\"Add<\/p>\n
Pour le dernier \u00e9l\u00e9ment de la section, choisissez une image en cliquant sur +<\/strong>. Ajoutez l’image de votre choix, mais vous pouvez \u00e9galement cliquer avec le bouton droit de la souris sur l’exemple de mise en page Divi et enregistrer la grande image de la cam\u00e9ra pour l’utiliser dans votre mise en page. Cliquez sur t\u00e9l\u00e9charger<\/strong> pour ins\u00e9rer l’image.
\n\"Add<\/p>\n
Vous verrez que l’image se trouve directement sous le bouton, mais qu’il n’y a pas assez d’espace entre les deux. Pour r\u00e9soudre ce probl\u00e8me, ajoutez un espaceur. Cliquez dans la colonne situ\u00e9e sous l’image pour faire appara\u00eetre le signe +<\/strong>. Recherchez l’espaceur<\/strong>. Ajoutez l’espaceur et donnez-lui une hauteur de 30px<\/strong>. Ensuite, cliquez sur la fl\u00e8che vers le haut<\/strong> pour le d\u00e9placer au-dessus de l’image.
\n\"Add<\/p>\n
4. Ajustement du conteneur<\/h3>\n
Apr\u00e8s avoir enregistr\u00e9 la page, ouvrez-la dans un nouvel onglet. Vous remarquerez que nous devons encore d\u00e9finir la couleur d’arri\u00e8re-plan de la section et lui donner un peu de rembourrage pour la faire descendre du haut de la page.<\/p>\n
Retournez \u00e0 l’arri\u00e8re de la page et cliquez \u00e0 l’int\u00e9rieur du conteneur. Vous pouvez le faire soit en s\u00e9lectionnant le menu<\/strong> situ\u00e9 en haut de la page, soit en cliquant \u00e0 l’int\u00e9rieur du conteneur lui-m\u00eame dans le constructeur de pages. Ensuite, activez le bouton d’<\/strong>affichage de l’arri\u00e8re-plan. R\u00e9glez l’alignement horizontal sur le centre<\/strong>, puis r\u00e9glez la couleur sur #c6e8ff<\/em>.
\n\"Set<\/p>\n
Ensuite, r\u00e9glez le conteneur sur container-fluid<\/strong>. Ainsi, le conteneur s’\u00e9tendra sur toute la largeur de la page.
\n\"WordPress<\/p>\n
Enfin, nous devons ajouter du remplissage \u00e0 la ligne. Cliquez sur l’affichage du<\/strong> menu d\u00e9roulant. D\u00e9finissez le rembourrage \u00e0 50px en haut et en bas<\/strong>.
\n\"Add<\/p>\n
5. Cr\u00e9ez la section suivante<\/h3>\n
Ensuite, nous allons cr\u00e9er une section avec des ic\u00f4nes et du texte. Pour commencer, ajoutez une autre bande<\/strong> sous la premi\u00e8re en cliquant sur le +<\/strong>. L’\u00e9tape suivante consiste \u00e0 ins\u00e9rer une ic\u00f4ne dans la mise en page. Cliquez sur le +<\/strong>, puis tapez ic\u00f4ne<\/strong> dans la barre de recherche.
\n\"Insert<\/p>\n
S\u00e9lectionnez le module d’ic\u00f4ne. Cliquez sur le menu d\u00e9roulant des param\u00e8tres<\/strong> pour afficher les choix d’ic\u00f4nes. Choisissez le style sombre<\/strong>, puis r\u00e9glez la taille sur moyenne<\/strong>. Laissez la bi-activit\u00e9<\/strong> par d\u00e9faut comme s\u00e9lection d’ic\u00f4nes.
\n\"WordPress<\/p>\n
Dans les param\u00e8tres de l’ic\u00f4ne, d\u00e9finissez l’alignement horizontal<\/strong> sur le d\u00e9but. L’ic\u00f4ne sera ainsi align\u00e9e sur la gauche pour correspondre au reste de la colonne.
\n\"Icon<\/p>\n
Ajoutez un H4 et tapez votre titre. Ensuite, r\u00e9glez l’alignement du texte<\/strong> sur la gauche, la couleur<\/strong> sur sombre et laissez la taille par d\u00e9faut. Enfin, choisissez le format moyen<\/strong> pour l’apparence.
\n\"Icon<\/p>\n
Cliquez sur +<\/strong> pour ajouter un texte de paragraphe. R\u00e9glez l’alignement<\/strong> sur la gauche, la couleur<\/strong> sur sombre et laissez la taille<\/strong> par d\u00e9faut. Utilisez le texte de votre choix.
\n\"Set<\/p>\n
Enregistrez la page et affichez-la dans un nouvel onglet. Vous remarquerez qu’il n’y a pas d’espacement au-dessus de l’ic\u00f4ne. Pour rem\u00e9dier \u00e0 cela, cliquez sur les param\u00e8tres de la ligne<\/strong> pour ajouter 50px de remplissage<\/strong> en haut et en bas.
\n\"WordPress<\/p>\n
Enfin, dans les param\u00e8tres XXL<\/strong>, r\u00e9glez l’alignement horizontal<\/strong> sur le centre. Le contenu sera ainsi centr\u00e9 au milieu de la page, quelle que soit la taille de l’\u00e9cran.
\n\"Center<\/p>\n
L’\u00e9tape suivante consiste \u00e0 dupliquer les colonnes. C’est un gain de temps consid\u00e9rable. Vous n’aurez qu’\u00e0 \u00e9changer l’ic\u00f4ne et le texte. Pour ce faire, cliquez sur les param\u00e8tres des colonnes, puis sur dupliquer<\/strong>. R\u00e9p\u00e9tez cette \u00e9tape une fois de plus pour obtenir un total de trois colonnes.
\n\"Duplicate<\/p>\n
Vous disposez maintenant de trois colonnes centr\u00e9es sur la page, avec un alignement \u00e0 gauche pour l’ic\u00f4ne et le texte. Ensuite, modifiez l’ic\u00f4ne de la colonne du milieu. Cliquez sur l’ic\u00f4ne et choisissez bi-lightbulb-fill<\/strong>. Pour l’ic\u00f4ne de la troisi\u00e8me ligne, choisissez bi-zoom-in<\/strong>.
\n\"Choosing<\/p>\n
Ensuite, modifiez les titres des deuxi\u00e8me et troisi\u00e8me colonnes.
\n\"Change<\/p>\n
Dupliquez la premi\u00e8re rang\u00e9e<\/h4>\n
Maintenant que la premi\u00e8re rang\u00e9e d’ic\u00f4nes est termin\u00e9e, dupliquez-la pour cr\u00e9er la deuxi\u00e8me rang\u00e9e de bo\u00eetes \u00e0 ic\u00f4nes.
\n\"Duplicate<\/p>\n
R\u00e9p\u00e9tez les \u00e9tapes ci-dessus pour modifier les titres des trois colonnes, ainsi que les ic\u00f4nes. Pour l’ic\u00f4ne de la premi\u00e8re colonne, utilisez bi-wind<\/strong>. L’ic\u00f4ne de la deuxi\u00e8me colonne est bi-brightness-lo-fill<\/strong>, et la troisi\u00e8me ic\u00f4ne bi-person-fill<\/strong>. La derni\u00e8re \u00e9tape de cette ligne consiste \u00e0 modifier les titres.
\n\"Second<\/p>\n
6. Cr\u00e9er la derni\u00e8re section<\/h3>\n
Commencez par ajouter une nouvelle bande. Sous les param\u00e8tres, changez la couleur de fond en #f0f0f0<\/em>.
\n\"Add<\/p>\n
Dans les param\u00e8tres du conteneur, d\u00e9finissez la largeur sur conteneur-fluide<\/strong>. Ajoutez \u00e9galement 50px de<\/strong> rembourrage en haut et en bas de la rang\u00e9e.
\n\"Container<\/p>\n
Dupliquez la colonne unique pour en cr\u00e9er une autre. Ensuite, ajustez la largeur de chaque colonne pour r\u00e9pondre aux exigences de taille de la mise en page. Pour la premi\u00e8re colonne, donnez-lui une largeur de 5.
\n\"Adjusting<\/p>\n
Pour la deuxi\u00e8me colonne, laissez la largeur de la colonne telle quelle. Ensuite, ajoutez un titre H2, suivi d’un titre H4. Alignez-les \u00e0 gauche.
\n\"Add<\/p>\n
Ajoutez une image dans la colonne de droite. Reportez-vous \u00e0 notre mise en page Divi pour trouver l’image \u00e0 importer. R\u00e9glez l’image pour qu’elle soit align\u00e9e au centre.
\n\"Add<\/p>\n
Pour l’\u00e9tape suivante, ins\u00e9rez deux colonnes sous les titres de la colonne de gauche. Ajoutez le module de ligne.
\n\"Add<\/p>\n
Dupliquez la colonne dans la ligne nouvellement cr\u00e9\u00e9e.
\n\"Duplicate<\/p>\n
Cliquez dans la premi\u00e8re colonne de gauche et d\u00e9finissez la taille sur 3<\/strong>.
\n\"Set<\/p>\n
Maintenant que notre structure de colonnes est en place, nous pouvons ajouter une ic\u00f4ne. Choisissez l’ic\u00f4ne \u00e0 deux fl\u00e8ches et<\/strong> d\u00e9finissez la taille sur large. D\u00e9finissez le style<\/strong> sur fonc\u00e9. Veillez \u00e0 aligner l’ic\u00f4ne sur la gauche en d\u00e9finissant l’alignement horizontal sur le d\u00e9but<\/strong>.
\n\"Large<\/p>\n
Pour la colonne de droite, nous allons ajouter un titre H4, suivi d’un paragraphe. Veillez \u00e0 d\u00e9finir la couleur<\/strong> sur sombre, puis alignez-les \u00e0 gauche. Ajoutez un espaceur sous le titre H4 et donnez-lui une hauteur de 30px<\/strong>.
\n\"Add<\/p>\n
Ensuite, nous allons dupliquer deux fois la rang\u00e9e int\u00e9rieure que nous avons cr\u00e9\u00e9e.
\n\"Duplicate<\/p>\n
La derni\u00e8re \u00e9tape consiste \u00e0 modifier les ic\u00f4nes des deuxi\u00e8me et troisi\u00e8me rang\u00e9es. Pour la premi\u00e8re, choisissez l’ic\u00f4ne bi-carte-image<\/strong>. La deuxi\u00e8me ic\u00f4ne sera bi-cam\u00e9ra-fill<\/strong>.<\/p>\n
7. Optimiser la page pour les appareils mobiles<\/h3>\n
L’une des meilleures choses \u00e0 propos de Bootstrap est la possibilit\u00e9 de rendre votre conception r\u00e9active avec facilit\u00e9. La page est termin\u00e9e, mais il reste quelques \u00e9tapes \u00e0 franchir pour qu’elle soit pr\u00eate pour les appareils mobiles. Tout d’abord, nous devons indiquer \u00e0 Bootstrap combien de colonnes nos sections doivent occuper sur les petits \u00e9crans.<\/p>\n
La premi\u00e8re bande est d\u00e9j\u00e0 d\u00e9finie sur une colonne, nous n’avons donc pas \u00e0 nous en pr\u00e9occuper. Pour la deuxi\u00e8me bande, il y a un petit ajustement \u00e0 faire.
\n\"WordPress<\/p>\n
Faites d\u00e9filer la page jusqu’\u00e0 la section des param\u00e8tres (XS)<\/strong> et r\u00e9glez les colonnes sur 1.
\n\"XS<\/p>\n
Ensuite, passez \u00e0 la section XXL et d\u00e9finissez les colonnes sur 3, ce qui indique \u00e0 Bootstrap de placer tout le contenu de la rang\u00e9e en une seule colonne sur les mobiles et en trois colonnes sur les \u00e9crans plus grands.
\n\"XXL<\/p>\n
Vous pouvez modifier les autres tailles d’\u00e9cran \u00e0 votre guise, mais ces param\u00e8tres permettront \u00e0 votre mise en page de s’afficher correctement sur les \u00e9crans plus grands et plus petits.<\/p>\n
R\u00e9sultat final<\/h2>\n
\"Bootstrap<\/p>\n
Qu’en est-il de l’utilisation de Bootstrap avec Divi ?<\/h2>\n
\"Divi<\/p>\n
Bien que Bootstrap soit une bonne option lorsque vous travaillez avec des th\u00e8mes WordPress g\u00e9n\u00e9riques, ce n’est g\u00e9n\u00e9ralement pas la meilleure option si vous pr\u00e9voyez d’utiliser Divi. Avec Divi, vous avez la possibilit\u00e9 de concevoir des sites Web enti\u00e8rement r\u00e9actifs et magnifiques sans avoir besoin d’int\u00e9grer Bootstrap. Divi est livr\u00e9 en standard avec plus de 40 modules, ce qui permet des possibilit\u00e9s de conception infinies. En outre, Divi comprend plus de 200 packs de sites Web complets avec plus de 2 000 mises en page de sites Web pr\u00e9\u00e9tablies \u00e0 votre disposition.<\/p>\n
Si vous envisagez de cr\u00e9er votre propre look, le Visual Builder int\u00e9gr\u00e9 de Divi vous facilite la t\u00e2che. Vous pouvez voir les modifications en temps r\u00e9el pendant que vous concevez votre site sur le front-end. Vous pouvez cr\u00e9er et personnaliser vos pages sans effort \u00e0 l’aide de modules, puis modifier les couleurs, le texte, ajouter des effets d’arri\u00e8re-plan, etc. Divi vous permet d’enregistrer et de g\u00e9rer vos conceptions, ainsi que de d\u00e9finir des \u00e9l\u00e9ments et des styles globaux.<\/p>\n
Les plugins WordPress Bootstrap facilitent l’utilisation de Bootstrap<\/h2>\n
Bien que WordPress ne soit pas con\u00e7u pour fonctionner nativement avec Bootstrap, ils fonctionnent bien ensemble avec un peu d’aide. Si vous \u00eates du genre bricoleur, vous pouvez int\u00e9grer Bootstrap \u00e0 votre site WordPress en cr\u00e9ant des mod\u00e8les de page personnalis\u00e9s, mais vous devrez coder beaucoup. Cela dit, avec les plugins disponibles dans le r\u00e9f\u00e9rentiel WordPress, l’int\u00e9gration des deux est une t\u00e2che moins intimidante. Avec le plugin All Bootstrap Blocks, vous pouvez prendre un th\u00e8me ordinaire ordinaire et cr\u00e9er un site WordPress sans tout le temps n\u00e9cessaire pour coder les choses manuellement. Si vous cherchez un moyen facile d’int\u00e9grer Bootstrap \u00e0 WordPress, vous devriez certainement envisager d’utiliser un plugin WordPress Bootstrap.<\/p>\n
Avez-vous int\u00e9gr\u00e9 Bootstrap dans vos constructions WordPress ? Si oui, dites-le dans la section des commentaires ci-dessous.<\/strong><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
WordPress et Bootstrap sont deux plateformes populaires de conception de sites Web qui ne sont pas souvent consid\u00e9r\u00e9es comme compatibles. Bootstrap est devenu la plateforme CSS pr\u00e9f\u00e9r\u00e9e des d\u00e9veloppeurs, car il permet de cr\u00e9er facilement des sites Web r\u00e9actifs. En fait, plus de 70 % des sites Web sur Internet sont con\u00e7us avec cette plateforme. […]<\/p>\n","protected":false},"author":1,"featured_media":816963,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1551],"tags":[],"class_list":["post-817016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks-2"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/817016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=817016"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/817016\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/816963"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=817016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=817016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=817016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}