{"id":122,"date":"2021-03-12T10:35:19","date_gmt":"2021-03-12T10:35:19","guid":{"rendered":"https:\/\/kaay-coder.2sweb.sn\/kc\/?page_id=122"},"modified":"2022-04-03T01:18:06","modified_gmt":"2022-04-03T01:18:06","slug":"bootstrap","status":"publish","type":"page","link":"https:\/\/kaay-coder.2sweb.sn\/kc\/frameworks\/bootstrap\/","title":{"rendered":"Bootstrap"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"122\" class=\"elementor elementor-122\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ad0b886 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ad0b886\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b984d41\" data-id=\"b984d41\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4231053 elementor-widget elementor-widget-image\" data-id=\"4231053\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/bootstrap-illustration.png\" class=\"attachment-large size-large wp-image-489\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/bootstrap-illustration.png 800w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/bootstrap-illustration-300x113.png 300w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/bootstrap-illustration-768x288.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f764f3a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f764f3a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-32532eb\" data-id=\"32532eb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-426c040 elementor-widget elementor-widget-accordion\" data-id=\"426c040\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-accordion\">\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-6961\" class=\"elementor-tab-title\" data-tab=\"1\" role=\"button\" aria-controls=\"elementor-tab-content-6961\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Qu'est ce que Bootstrap ?<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-6961\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"region\" aria-labelledby=\"elementor-tab-title-6961\"><p>Bootstrap est une collection d\u2019outils utiles \u00e0 la cr\u00e9ation du design de sites et d\u2019applications web. C\u2019est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres \u00e9l\u00e9ments interactifs, ainsi que des extensions JavaScript en option.<\/p><p>Le framework Bootstrap est donc un ensemble de fichiers CSS et JavaScript qui contiennent des r\u00e8gles pr\u00e9d\u00e9finies et qui d\u00e9finissent des composants. Ces ensembles de r\u00e8gles sont enferm\u00e9s dans des classes et nous n\u2019aurons donc qu\u2019\u00e0 utiliser les classes qui nous int\u00e9ressent afin d\u2019appliquer un ensemble de styles \u00e0 tel ou tel \u00e9l\u00e9ment HTML.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-6962\" class=\"elementor-tab-title\" data-tab=\"2\" role=\"button\" aria-controls=\"elementor-tab-content-6962\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Le contenu de bootstrap<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-6962\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"region\" aria-labelledby=\"elementor-tab-title-6962\"><h5>I.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Le contenu de Bootstrap<\/h5><p>Le framework est \u00e0 r\u00e9cup\u00e9rer ici : <a href=\"http:\/\/getbootstrap.com\/getting-started#download\">http:\/\/getbootstrap.com\/getting-started#download<\/a> il contient diff\u00e9rents fichiers fichiers ventil\u00e9s dans des r\u00e9pertoires :<\/p><ul><li>des fichiers CSS (qui d\u00e9crivent tous les blocs de r\u00e8gles)<\/li><li>des fichiers d\u2019ic\u00f4nes dans divers formats (pour compatibilit\u00e9)<\/li><li>des fichiers JavaScript (pour g\u00e9rer la compatibilit\u00e9 avec tous les navigateurs et pour ajouter des fonctionnalit\u00e9s). Ces fichiers utilisent la biblioth\u00e8que JavaScript jQuery qu\u2019il faut t\u00e9l\u00e9charger aussi : <a href=\"http:\/\/code.jquery.com\/jquery-2.1.1.min.js\">http:\/\/code.jquery.com\/jquery-2.1.1.min.js <\/a>Certains fichiers contient \u00ab min \u00bb dans leur nom, et d\u2019autres non :<\/li><li>Les fichiers sans \u00ab min \u00bb sont fichiers lisibles et contiennent des commentaires aidant \u00e0 leur compr\u00e9hension. Ils sont destin\u00e9s au d\u00e9veloppement<\/li><li>Les fichiers avec \u00ab min \u00bb sont des fichiers \u00ab minifi\u00e9s \u00bb, c\u2019est \u00e0 dire compress\u00e9s (sans commentaires, ni espaces, etc.) qui sont utilis\u00e9s pour le site en production (pour diminuer la bande passante n\u00e9cessaire)<\/li><\/ul><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-6963\" class=\"elementor-tab-title\" data-tab=\"3\" role=\"button\" aria-controls=\"elementor-tab-content-6963\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Les bases de Bootstrap<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-6963\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"3\" role=\"region\" aria-labelledby=\"elementor-tab-title-6963\"><h5>I.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 La base HTML(5) de Bootstrap<\/h5><p>Bootstrap propose un DOM de base pour les fichiers HTML. Il faut l\u2019utiliser pour profiter des avantages du framework.<\/p><p>Voici cette base :<\/p><table style=\"height: 846px;\" width=\"502\"><tbody><tr><td width=\"642\"><pre><strong>&lt;!DOCTYPE <\/strong>html<strong>&gt;<\/strong><br \/>&lt; html &gt;<br \/>\u00a0 <strong>&lt; head &gt;<\/strong><br \/>\u00a0\u00a0\u00a0 <strong>&lt;title&gt;<\/strong>Base de bootstrap<strong>&lt; \/title &gt;<\/strong><br \/>\u00a0\u00a0\u00a0 <strong>&lt;meta<\/strong> name=\"viewport\" content=\"width=device-width,<br \/>                      initial-scale=1.0\"<strong>&gt;<\/strong><br \/>\u00a0\u00a0\u00a0 <strong>&lt;link<\/strong> href=\"bootstrap\/css\/bootstrap.min.css\" rel=\"stylesheet\"<strong>&gt;<\/strong><br \/><br \/>\u00a0\u00a0\u00a0 &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;<\/pre><pre> \u00a0\u00a0\u00a0\u00a0&lt;!-- <strong>WARNING :<\/strong> Respond.js doesn't work if you view the page via ile:\/\/ --&gt;<br \/><br \/>\u00a0\u00a0\u00a0 &lt;!--[ if lt IE\u00a0 9]&gt;<br \/><br \/> \u00a0\u00a0\u00a0\u00a0 &lt;script src=\"https:\/\/oss.maxcdn.com\/libs\/html5shiv\/3.7.0\/html5shiv.js\"&gt;&lt;\/script&gt;<br \/> \u00a0\u00a0\u00a0\u00a0 &lt;script src=\"https:\/\/oss.maxcdn.com\/libs\/respond.js\/1.3.0\/respond.min.js\"&gt;&lt;\/script&gt; <br \/>\u00a0\u00a0\u00a0&lt;![endif]--&gt;<br \/><br \/>\u00a0 <strong>&lt; \/head &gt;<\/strong><br \/><br \/>\u00a0 <strong>&lt; body &gt;<\/strong><br \/><br \/>\u00a0\u00a0\u00a0 <strong>&lt;h1&gt;<\/strong>Titre du contenu<strong>&lt; \/h 1&gt;<\/strong><br \/><br \/><strong>\u00a0<\/strong>... contenu...<br \/><br \/>\u00a0\u00a0\u00a0 <strong>&lt;script<\/strong> src=\"jquery\/jquery-2.1.1.min.js\"<strong>&gt;&lt; \/script &gt;<\/strong><br \/><br \/>\u00a0\u00a0\u00a0 <strong>&lt;script<\/strong> src=\"bootstrap\/js\/bootstrap.min.js\"<strong>&gt;&lt; \/script &gt;<\/strong><br \/><br \/>\u00a0 <strong>&lt; \/body &gt;<\/strong><br \/><br \/>&lt; \/html &gt;<\/pre><\/td><\/tr><\/tbody><\/table><p>On y reconna\u00eet le doctype du HTML5 (obligatoire pour Bootstrap), et des \u00e9l\u00e9ments particuliers dans le <strong>head <\/strong>:<\/p><ul><li>La balise <strong>meta<\/strong> permet de d\u00e9finir quelle est le type d\u2019\u00e9cran par d\u00e9faut<\/li><li>La balise <strong>link<\/strong> renvoie vers les CSS de Bootstrap<\/li><li>Les balises <strong>script<\/strong> renvoient vers les programmes en JavaScript de Bootstrap qui rendent certains navigateurs compatibles HTML5<\/li><\/ul><p>On retrouve aussi des balises <strong>script<\/strong> dans le <strong>body<\/strong> qui permettent d\u2019activer d\u2019autres programmes en JavaScript de Bootstrap.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-6964\" class=\"elementor-tab-title\" data-tab=\"4\" role=\"button\" aria-controls=\"elementor-tab-content-6964\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">\tPositionnement CSS, et d\u00e9coration avec un  Framework<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-6964\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"4\" role=\"region\" aria-labelledby=\"elementor-tab-title-6964\"><h4>\u00a0 \u00a0Qu\u2019est-ce qu\u2019une grille ?<\/h4><p>En conception web, comme en typographie et en publication assist\u00e9e par ordinateur, une grille est un quadrillage invisible sur lequel sont cal\u00e9s les contenus. Elle contient donc des colonnes (col) et parfois des lignes (row).<\/p><h4>Pourquoi utiliser une grille ?<\/h4><ul><li>Elles facilitent l\u2019organisation des contenus<\/li><li>Elles permettent de respecter des proportions \u00e9quilibr\u00e9es entre les contenus<\/li><li>Elles permettent de respecter les marges qui conviennent \u00e0 la lecture (rythme des blancs) voir aussi : <a href=\"http:\/\/www.alsacreations.com\/article\/lire\/1196-grilles-framework-css-webdesign.html\">http:\/\/www.alsacreations.com\/article\/lire\/1196-grilles-framework-css-webdesign.html <\/a>( avec des exemples concrets de types de grilles ).<\/li><\/ul><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-6965\" class=\"elementor-tab-title\" data-tab=\"5\" role=\"button\" aria-controls=\"elementor-tab-content-6965\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Des classes pour positionner sur la grille<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-6965\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"5\" role=\"region\" aria-labelledby=\"elementor-tab-title-6965\"><p>Voici quelques exemples avec \u00ab * \u00bb correspondant \u00e0 un nombre de colonnes.<\/p><ul><li>col-md-* permet de choisir la largeur d\u2019un contenu en nombre de colonnes<\/li><li>row d\u00e9signe une ligne de la grille : les lignes se superposent dans une colonne<\/li><li>col-md-offset-* permet de choisir \u00e0 partir de quelle colonne commence un contenu<\/li><li>col-md-pull-* permet de d\u00e9caler un contenu de \u00ab * \u00bb colonnes \u00e0 gauche de sa position normale<\/li><li>col-md-push-* permet de d\u00e9caler un contenu de \u00ab * \u00bb colonnes \u00e0 droite de sa position normale<\/li><\/ul><p>Les deux derni\u00e8res classes (col-md-pull-* et col-md-push-*)\u00a0 permettent donc de choisir l\u2019ordre des colonnes.<\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-6966\" class=\"elementor-tab-title\" data-tab=\"6\" role=\"button\" aria-controls=\"elementor-tab-content-6966\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Des classes typographiques et d\u00e9coratives<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-6966\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"6\" role=\"region\" aria-labelledby=\"elementor-tab-title-6966\"><p>D\u2019autres classes propos\u00e9es par Bootstrap permettent de s\u2019int\u00e9resser \u00e0 l\u2019aspect des contenus et \u00e0 la typographie. Voici quelques exemples :<\/p><ul><li>h* o\u00f9 \u00ab * \u00bb est compris entre 1 \u00e0 6 permet de donner le m\u00eame style qu\u2019un \u00e9l\u00e9ment titre (<strong>&lt;h*&gt;<\/strong>) \u00e0 n\u2019importe quel contenu<\/li><li>lead permet de mettre en \u00e9vidence un contenu (il sera notamment en plus gros)<\/li><li>text-uppercase, text-lowercase, text-capitalize permettent de choisir la casse du texte ( majuscules ou non ).<\/li><li>img-rounded, img-circle, img-thumbnail permettent d\u2019encadrer les images de diff\u00e9rentes fa\u00e7ons (cette classe se r\u00e9serve donc \u00e0 des contenus de ce type) : \u00e0 bords arrondis, dans un cercle, dans une vignette.<\/li><li>jumbotron doit contenir un \u00e9l\u00e9ment container et permet de cr\u00e9er un bandeau avec du texte bien mis en \u00e9vidence<\/li><li>Des ic\u00f4nes, obtenues en donnant une classe glyphicon accompagn\u00e9e d\u2019une classe sp\u00e9cifique de l\u2019ic\u00f4ne (liste ici : <a href=\"http:\/\/getbootstrap.com\/components\/#glyphicons\">http:\/\/getbootstrap.com\/components\/#glyphicons<\/a><a href=\"http:\/\/getbootstrap.com\/components\/#glyphicons\">)<\/a> \u00e0 un \u00e9l\u00e9ment, par exemple : <strong>&lt;span<\/strong> class=&#8221;glyphicon glyphicon-info-sign&#8221;<strong>&gt;&lt;\/span&gt;<\/strong> (\u00e0 tester dans jsfiddle)<\/li><\/ul><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-6967\" class=\"elementor-tab-title\" data-tab=\"7\" role=\"button\" aria-controls=\"elementor-tab-content-6967\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Une barre de menu avec Bootstrap<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-6967\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"7\" role=\"region\" aria-labelledby=\"elementor-tab-title-6967\"><p>\u00a0Bootstrap, comme la plupart des frameworks CSS, propose des m\u00e9caniques pour aider \u00e0 faire un tel menu.<\/p><p>L\u2019\u00e9l\u00e9ment qui contient le menu (ex. <strong>&lt;nav&gt;<\/strong>)\u00a0 devra comporter au moins deux classes\u00a0 :<\/p><ul><li>navbar qui identifie le contenu de cet \u00e9l\u00e9ment comme une barre de navigation<\/li><li>navbar-fixed-* ou navbar-static-* o\u00f9 \u00ab * \u00bb peut \u00eatre top ou bottom. Indique si la barre de menu doit d\u00e9filer avec la page (\u00ab static \u00bb) ou rester au m\u00eame endroit de la fen\u00eatre quand la page d\u00e9file (\u00ab fixed \u00bb), ainsi que l\u2019endroit o\u00f9 placer la barre (haut ou bas de la page)<\/li><li><p>Il faut noter que l\u2019\u00e9l\u00e9ment qui porte ces deux classes doit contenir une liste portant elle aussi deux classes particuli\u00e8res : nav et navbar-nav :<\/p><table width=\"0\"><tbody><tr><td width=\"642\"><p><strong>&lt;ul<\/strong> class=&#8221;nav navbar-nav&#8221;<strong>&gt;<\/strong><\/p><p>\u00a0 <strong>&lt;li&gt;&lt;a<\/strong> href=&#8221;lien1&#8243;<strong>&gt;<\/strong>Premier \u00e9l\u00e9ment du menu<strong>&lt; \/a&gt;&lt;\/li &gt;<\/strong><\/p><p>\u00a0 <strong>&lt;li&gt;&lt;a<\/strong> href=&#8221;lien2&#8243;<strong>&gt;<\/strong>Second<strong>&lt; \/a&gt;&lt;\/li &gt;<\/strong><\/p><p>\u00a0 <strong>&lt;li&gt;&lt;a<\/strong> href=&#8221;lien3&#8243;<strong>&gt;<\/strong>Troisi\u00e8me<strong>&lt; \/a&gt;&lt;\/li &gt; &lt; \/ul &gt;<\/strong><\/p><\/td><\/tr><\/tbody><\/table><p>Quelques autres classes :<\/p><ul><li>navbar-brand permet de titrer la barre de menu (et souvent, permet en fait de titrer le site luim\u00eame, d\u2019o\u00f9 l\u2019appellation \u00ab brand \u00bb)<\/li><li>active d\u00e9signe l\u2019item de la liste des \u00e9l\u00e9ments du menu qui est visit\u00e9 actuellement Voir :<\/li><li><a href=\"http:\/\/getbootstrap.com\/components\/#navbar\">http:\/\/getbootstrap.com\/components\/#navbar<\/a><\/li><li><a href=\"http:\/\/fr.openclassrooms.com\/informatique\/cours\/prenez-en-main-bootstrap\/les-composants-integres\">http:\/\/fr.openclassrooms.com\/informatique\/cours\/prenez-en-main-bootstrap\/les-composants<\/a><a href=\"http:\/\/fr.openclassrooms.com\/informatique\/cours\/prenez-en-main-bootstrap\/les-composants-integres\">integres<\/a><\/li><\/ul><a href=\"http:\/\/bootstrapbay.com\/blog\/bootstrap-tutorial-navbar\/\">http:\/\/bootstrapbay.com\/blog\/bootstrap-tutorial-navbar\/<\/a><\/li><\/ul><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-6968\" class=\"elementor-tab-title\" data-tab=\"8\" role=\"button\" aria-controls=\"elementor-tab-content-6968\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Conception adaptative (Responsive design)<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-6968\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"8\" role=\"region\" aria-labelledby=\"elementor-tab-title-6968\"><p>Le principe du \u00ab responsive design \u00bb est de faire des sites capables de s\u2019afficher correctement et lisiblement sur tous les types d\u2019\u00e9crans (grands et petits, portrait ou paysage, etc.).<\/p><p>C\u2019est inclus par d\u00e9faut dans les frameworks CSS r\u00e9cents comme Bootstrap. C\u2019est facilement v\u00e9rifiable gr\u00e2ce \u00e0 la fonction d\u00e9di\u00e9e de Firefox qui permet de tester un site avec diff\u00e9rents types d\u2019\u00e9crans. On acc\u00e8de \u00e0 cette fonction par le raccourci \u00a6\u00a7M.<\/p><p>N\u00e9anmoins, il est possible de contr\u00f4ler plus finement cet automatisme pour avoir un affichage choisi pour chaque type d\u2019\u00e9cran.<\/p><h5>\u00a0 \u00a0 \u00a0Largeur des \u00e9l\u00e9ments<\/h5><p>Nous avons vu que les classes d\u00e9finissant la largeur des contenus sont de la forme col-md-* (avec \u00ab * \u00bb pour la largeur en colonnes, c\u2019est-\u00e0-dire de 1 \u00e0 12). Il s\u2019agit en fait de la classe qui d\u00e9termine cela pour les \u00e9crans moyens (entre 992 et 1200 pixels de large), mais, il en existe d\u2019autres pour les autres types d\u2019\u00e9crans. Il y a :<\/p><ul><li>col-xs-* pour les \u00e9crans plus petits que 768 pixels de large<\/li><li>col-sm-* pour les \u00e9crans entre 768 et 992 pixels de large<\/li><li>col-md-* pour les \u00e9crans entre 992 et 1200 pixels de large<\/li><li>col-lg-* pour les \u00e9crans de plus de 1200 pixels de large<\/li><\/ul><p>Gr\u00e2ce \u00e0 ces classes, on peut choisir pour chaque contenu de la page la fa\u00e7on dont ils vont s\u2019afficher les uns par rapport aux autres en fonction du p\u00e9riph\u00e9rique de consultation. Ex. : sur grand \u00e9cran, on \u00e9vitera les textes trop larges (illisibles) et donc on privil\u00e9giera les contenus rang\u00e9s les uns \u00e0 c\u00f4t\u00e9 des autres. Au contraire, sur un appareil mobile \u00e0 l\u2019\u00e9cran peu large, on favorisera les contenus plac\u00e9s les uns au-dessus des autres.<\/p><p>Note : on appelle \u00ab xs \u00bb, \u00ab sm \u00bb, \u00ab md \u00bb, et \u00ab lg \u00bb des \u00ab breakpoints \u00bb car ils d\u00e9terminent pour quelle taille d\u2019\u00e9cran un changement de comportement a lieu. Nous verrons plus loin que d\u2019autres classes les utilisent.<\/p><p>Voir en d\u00e9tail les 4 types de classes : <a href=\"http:\/\/getbootstrap.com\/css\/#grid-options\">http:\/\/getbootstrap.com\/css\/#grid-options<\/a> pour les diff\u00e9rentes tailles d\u2019\u00e9crans<\/p><h5>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Montrer\/cacher des \u00e9l\u00e9ments<\/h5><p>D\u2019autres classes permettent d\u2019aller plus loin en donnant la possibilit\u00e9 de montrer ou de cacher certains contenus en fonction de la taille de l\u2019\u00e9cran. Les classes les plus simples \u00e0 utiliser sont les classes pour cacher : hidden-* avec \u00ab * \u00bb \u00e0 remplacer par les breakpoints de Bootstrap (\u00ab xs \u00bb, \u00ab sm \u00bb, \u00ab md \u00bb et \u00ab lg \u00bb) pour choisir sur quel type d\u2019\u00e9cran le contenu sera cach\u00e9.<\/p><p>Les classes visible-x-y jouent le r\u00f4le inverse en permettant de montrer des contenus en fonction de la taille de l\u2019\u00e9cran. Elles prennent deux param\u00e8tres. \u00ab x \u00bb correspond au breakpoint utilis\u00e9 et permet donc de choisir pour quelle taille d\u2019\u00e9cran montrer quelque chose. \u00ab y \u00bb correspond au type d\u2019affichage \u00e0 produire parmi trois possibilit\u00e9s : \u00ab block \u00bb, \u00ab inline \u00bb et \u00ab inline-block \u00bb (voir le cours sur les CSS).<\/p><p>Voir : <a href=\"http:\/\/getbootstrap.com\/css\/#responsive-utilities-classes\">http:\/\/getbootstrap.com\/css\/#responsive-utilities-classes<\/a><\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-accordion-item\">\n\t\t\t\t\t<h4 id=\"elementor-tab-title-6969\" class=\"elementor-tab-title\" data-tab=\"9\" role=\"button\" aria-controls=\"elementor-tab-content-6969\" aria-expanded=\"false\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon elementor-accordion-icon-left\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-closed\"><i class=\"fas fa-plus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<span class=\"elementor-accordion-icon-opened\"><i class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-accordion-title\" tabindex=\"0\">Le menu responsive de Bootstrap<\/a>\n\t\t\t\t\t<\/h4>\n\t\t\t\t\t<div id=\"elementor-tab-content-6969\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"9\" role=\"region\" aria-labelledby=\"elementor-tab-title-6969\"><p>Bootstrap propose aussi des fondations pour rendre les barres de menu plus agr\u00e9ables \u00e0 utiliser sur les petits \u00e9crans : sur les grands \u00e9crans, le menu est affich\u00e9 tel que nous l\u2019avons d\u00e9fini pr\u00e9c\u00e9demment, alors que sur les petits \u00e9crans il est remplac\u00e9 par une ic\u00f4ne, et le menu se d\u00e9plie lorsque l\u2019on clique (ou appuie avec son doigt) dessus.<\/p><p>Ce m\u00e9canisme dans Bootstrap met en jeu un programme JavaScript fourni et qui surveille dans le DOM la pr\u00e9sence de contenus portant les deux classes navbar-collapse et collapse. Si ces classes sont pr\u00e9sentes et que la taille d\u2019\u00e9cran atteint moins de 994px (\u00e9crans petits selon les breakpoints de Bootstrap), alors le contenu qu\u2019elles d\u00e9signent est cach\u00e9 au profit du contenu portant les classes navbar-toggle et collapsed ainsi que des attributs particuliers data-toggle=&#8221;collapse&#8221; et datatarget=&#8221;#bs-example-navbar-collapse-1&#8243;. Voici un exemple concret :<\/p><pre><strong>&lt;nav<\/strong> class=\"navbar navbar-default\" role=\"navigation\"<strong>&gt;<\/strong><br \/>\u00a0 <strong>&lt;div <\/strong>class=\"container-luid\"<strong>&gt;<\/strong><br \/>\u00a0\u00a0\u00a0 <strong>&lt;div <\/strong>class=\"navbar-header\"<strong>&gt;<\/strong><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>&lt;button<\/strong> type=\"button\" class=\"navbar-toggle collapsed\" <br \/>   data-toggle=\"collapse\" datatarget=\"#bs-example-navbar-collapse-1\"<strong>&gt;<\/strong><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>&lt;span<\/strong> class=\"sr-only\"<strong>&gt;<\/strong>Toggle navigation<strong>&lt; \/span &gt;<\/strong><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>&lt;span<\/strong> class=\"icon-bar\"<strong>&gt;&lt; \/span &gt;<\/strong><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>&lt;span<\/strong> class=\"icon-bar\"<strong>&gt;&lt; \/span &gt;<\/strong><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>&lt;span<\/strong> class=\"icon-bar\"<strong>&gt;&lt; \/span &gt;<\/strong><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>&lt; \/button &gt;<\/strong><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>&lt;a<\/strong> class=\"navbar-brand\" href=\"#\"<strong>&gt;<\/strong>Brand<strong>&lt; \/a &gt;<\/strong><br \/>\u00a0\u00a0\u00a0 <strong>&lt; \/div &gt;<\/strong><br \/>\u00a0\u00a0\u00a0 <strong>&lt;div <\/strong>class=\"collapse navbar-collapse\" <br \/>         id=\"bs-example-navbar-collapse-1\"<strong>&gt;<\/strong><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>&lt;ul<\/strong> class=\"nav navbar-nav\"<strong>&gt;<\/strong><br \/>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <strong>&lt;li<\/strong> class=\"active\"<strong>&gt;&lt;a<\/strong> href=\"#\"<strong>&gt;<\/strong>Link<strong>&lt; \/a&gt;&lt;\/li &gt;<\/strong><br \/> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;a href=\"#\"<strong>&gt;<\/strong>Link<strong>&lt; \/a&gt;&lt;\/li &gt;<br \/><\/strong>    <strong>&lt;li<\/strong> class=\"dropdown\"<strong>&gt;<\/strong><br \/> \u00a0\u00a0\u00a0 <strong>&lt;a<\/strong> href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"<strong>&gt;<br \/><\/strong>       Dropdown <strong>&lt;span<\/strong> class=\"caret\"<strong>&gt;&lt; \/span&gt;&lt;\/a &gt;<\/strong><br \/>  <strong>&lt;ul<\/strong> class=\"dropdown-menu\" role=\"menu\"<strong>&gt;<\/strong>&lt;a href=\"#\"<strong>&gt;<\/strong>Action<strong>&lt; \/a&gt;&lt;\/li &gt;<br \/><\/strong>      &lt;a href=\"#\"<strong>&gt;<\/strong>Another action<strong>&lt; \/a&gt;&lt;\/li &gt;<br \/><\/strong>      &lt;a href=\"#\"<strong>&gt;<\/strong>Something else here<strong>&lt; \/a&gt;&lt;\/li &gt;<br \/><\/strong><strong>     &lt;li<\/strong> class=\"divider\"<strong>&gt;&lt; \/li &gt;<br \/><\/strong>       &lt;a href=\"#\"<strong style=\"font-family: Consolas, Monaco, monospace;\">&gt;<\/strong><span style=\"font-family: Consolas, Monaco, monospace;\">Separated link<\/span><strong style=\"font-family: Consolas, Monaco, monospace;\">&lt; \/a&gt;&lt;\/li &gt;<br \/><\/strong><strong>     &lt;li<\/strong> class=\"divider\"<strong>&gt;&lt; \/li&gt;<br \/><\/strong>      &lt;a href=\"#\"<strong>&gt;<\/strong>One more separated link<strong>&lt; \/a&gt;&lt;\/li &gt;<br \/><\/strong><strong>   &lt; \/ul &gt;<br \/><\/strong><strong>  &lt; \/li &gt;<br \/><\/strong>\u00a0 <strong>&lt; \/ul &gt;<br \/><\/strong>&lt; \/nav &gt;<br \/><strong>&lt;\/div&gt;<br \/><\/strong><strong>&lt;\/div&gt;<\/strong><\/pre><p><!--\u00a0 \/.navbar-collapse\u00a0 --><\/p><p><!--\u00a0 \/.container-luid\u00a0 --><\/p><p>Vous pouvez tester cette barre de menu dans jsfiddle. Vous constaterez qu\u2019elle contient un menu d\u00e9pliant qui est \u00e9galement rendu possible gr\u00e2ce \u00e0 un programme en JavaScript fourni avec Bootstrap.<\/p><p>Plus de d\u00e9tails :<\/p><ul><li><a href=\"http:\/\/bootstrapbay.com\/blog\/bootstrap-tutorial-navbar\/\">http:\/\/bootstrapbay.com\/blog\/bootstrap-tutorial-navbar\/<\/a><\/li><\/ul><p><a href=\"http:\/\/getbootstrap.com\/components\/#navbar\">http:\/\/getbootstrap.com\/components\/#navba<\/a><\/p><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-7714b76\" data-id=\"7714b76\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7794665 elementor-widget elementor-widget-sidebar\" data-id=\"7794665\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"sidebar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"search-2\" class=\"widget widget_search\">\n<form role=\"search\" method=\"get\" class=\"searchform\" action=\"https:\/\/kaay-coder.2sweb.sn\/kc\/\">\n\n\t<label>\n\n\t\t<span class=\"screen-reader-text\">Recherche pour\u00a0:<\/span>\n\t\t<input type=\"search\" id=\"searchform-1\" name=\"s\" value=\"\" placeholder=\"Rechercher &hellip;\" title=\"Appuyez sur Entrer pour rechercher\" \/>\n\n\t\t\n\t\t\t<button value=\"Search\" class=\"wpbff wpbff-search\"><\/button>\n\n\t\t\n\t<\/label>\n\n<\/form>\n<\/div><div id=\"calendar-2\" class=\"widget widget_calendar\"><div id=\"calendar_wrap\" class=\"calendar_wrap\"><table id=\"wp-calendar\" class=\"wp-calendar-table\">\n\t<caption>juin 2026<\/caption>\n\t<thead>\n\t<tr>\n\t\t<th scope=\"col\" aria-label=\"lundi\">L<\/th>\n\t\t<th scope=\"col\" aria-label=\"mardi\">M<\/th>\n\t\t<th scope=\"col\" aria-label=\"mercredi\">M<\/th>\n\t\t<th scope=\"col\" aria-label=\"jeudi\">J<\/th>\n\t\t<th scope=\"col\" aria-label=\"vendredi\">V<\/th>\n\t\t<th scope=\"col\" aria-label=\"samedi\">S<\/th>\n\t\t<th scope=\"col\" aria-label=\"dimanche\">D<\/th>\n\t<\/tr>\n\t<\/thead>\n\t<tbody>\n\t<tr><td>1<\/td><td>2<\/td><td>3<\/td><td>4<\/td><td id=\"today\">5<\/td><td>6<\/td><td>7<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>8<\/td><td>9<\/td><td>10<\/td><td>11<\/td><td>12<\/td><td>13<\/td><td>14<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>15<\/td><td>16<\/td><td>17<\/td><td>18<\/td><td>19<\/td><td>20<\/td><td>21<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>22<\/td><td>23<\/td><td>24<\/td><td>25<\/td><td>26<\/td><td>27<\/td><td>28<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>29<\/td><td>30<\/td>\n\t\t<td class=\"pad\" colspan=\"5\">&nbsp;<\/td>\n\t<\/tr>\n\t<\/tbody>\n\t<\/table><nav aria-label=\"Mois pr\u00e9c\u00e9dents et suivants\" class=\"wp-calendar-nav\">\n\t\t<span class=\"wp-calendar-nav-prev\"><a href=\"https:\/\/kaay-coder.2sweb.sn\/kc\/2021\/03\/\">&laquo; Mar<\/a><\/span>\n\t\t<span class=\"pad\">&nbsp;<\/span>\n\t\t<span class=\"wp-calendar-nav-next\">&nbsp;<\/span>\n\t<\/nav><\/div><\/div>\n\t\t<div id=\"recent-posts-2\" class=\"widget widget_recent_entries\">\n\t\t<h4 class=\"wpbf-widgettitle\">Articles r\u00e9cents<\/h4>\n\t\t<ul>\n\t\t\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t<a href=\"https:\/\/kaay-coder.2sweb.sn\/kc\/hello-world\/\">Kaay-Coder !<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t<\/ul>\n\n\t\t<\/div><div id=\"archives-2\" class=\"widget widget_archive\"><h4 class=\"wpbf-widgettitle\">Archives<\/h4>\n\t\t\t<ul>\n\t\t\t\t\t<li><a href='https:\/\/kaay-coder.2sweb.sn\/kc\/2021\/03\/'>mars 2021<\/a><\/li>\n\t\t\t<\/ul>\n\n\t\t\t<\/div><div id=\"media_gallery-2\" class=\"widget widget_media_gallery\"><div id='gallery-1' class='gallery galleryid-122 gallery-columns-2 gallery-size-thumbnail'><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/accueil\/html\/'><img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html-150x150.png 150w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html-300x300.png 300w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/html.png 421w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/dmxbe\/'><img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/dMXbE-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2-150x150.png 150w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/angular_hub642029a576c43637a3db16b5fc361ac_2385_700x450_fit_box_2.png 250w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure><figure class='gallery-item'>\n\t\t\t<div class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/kaay-coder.2sweb.sn\/kc\/wordpress_logo_8-1-1024x1015\/'><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" srcset=\"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-150x150.png 150w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-300x297.png 300w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1-768x761.png 768w, https:\/\/kaay-coder.2sweb.sn\/kc\/wp-content\/uploads\/2021\/03\/Wordpress_logo_8-1-1024x1015-1.png 1024w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/div><\/figure>\n\t\t<\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Qu&#8217;est ce que Bootstrap ? Bootstrap est une collection d\u2019outils utiles \u00e0 la cr\u00e9ation du design de sites et d\u2019applications web. C\u2019est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres \u00e9l\u00e9ments interactifs, ainsi que des extensions JavaScript en option. Le framework Bootstrap est donc un ensemble [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":90,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-122","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":26,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/122\/revisions"}],"predecessor-version":[{"id":878,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/122\/revisions\/878"}],"up":[{"embeddable":true,"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/pages\/90"}],"wp:attachment":[{"href":"https:\/\/kaay-coder.2sweb.sn\/kc\/wp-json\/wp\/v2\/media?parent=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}