{"id":162915,"date":"2022-05-13T11:00:17","date_gmt":"2022-05-13T10:00:17","guid":{"rendered":"https:\/\/datascientest.com\/?p=158581"},"modified":"2023-11-09T13:35:06","modified_gmt":"2023-11-09T13:35:06","slug":"bootstrap-creer-votre-page-web","status":"publish","type":"post","link":"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web","title":{"rendered":"Bootstrap: qu&rsquo;est-ce que c&rsquo;est ? Comment cr\u00e9er votre page web avec ?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"162915\" class=\"elementor elementor-162915\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-171ebdd e-flex e-con-boxed e-con\" data-id=\"171ebdd\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2d22582 elementor-widget elementor-widget-heading\" data-id=\"2d22582\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">D\u00e9velopper un site internet requiert des connaissances en HTML, CSS et JavaScript. Il faut avoir des comp\u00e9tences de programmation et d\u2019int\u00e9gration sur chacun de ces trois langages pour pouvoir ma\u00eetriser la cr\u00e9ation d\u2019applications web. Il existe des collections d\u2019outils contenant des codes HTML et CSS et des plugins JavaScript pour faciliter le d\u00e9veloppement et l\u2019int\u00e9gration d\u2019une application. Nous allons aujourd\u2019hui nous int\u00e9resser \u00e0 Bootstrap, la collection la plus pris\u00e9e et dont la derni\u00e8re version Bootstrap 5 est sortie il y a de cela un an.<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9300037 e-flex e-con-boxed e-con\" data-id=\"9300037\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-09396b9 elementor-widget elementor-widget-heading\" data-id=\"09396b9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Qu\u2019est-ce que Bootstrap ?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ccaab42 elementor-widget elementor-widget-text-editor\" data-id=\"ccaab42\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>Bootstrap fait partie de ces\u00a0 \u00ab\u00a0<a href=\"https:\/\/datascientest.com\/front-end-vs-back-end\">Front-End<\/a> Framework\u00a0\u00bb contenant une collection d\u2019outils utiles \u00e0 la cr\u00e9ation et au design de sites et d\u2019applications web en front end. <strong>Il contient des codes HTML et CSS ainsi que des extensions JavaScript en option, permettant la cr\u00e9ation de formulaires, de boutons, d\u2019outils de navigations et d\u2019autres \u00e9l\u00e9ments interactifs \u00e0 int\u00e9grer dans une application<\/strong>. Ce framework est pens\u00e9 pour d\u00e9velopper des designs interactifs adaptables \u00e0 tout type d\u2019\u00e9cran, en particulier pour les smartphones.\u00a0<\/p><p>Cette plateforme a \u00e9t\u00e9 cr\u00e9\u00e9e par deux d\u00e9veloppeurs qui gravitaient autour de l\u2019\u00e9cosyst\u00e8me Twitter, Mark Otto et Jacob Thornton, sous le premier nom de <strong>Twitter Blueprint<\/strong> en 2010. Elle a \u00e9t\u00e9 ouverte au grand public lors de la premi\u00e8re hackweek organis\u00e9e par Twitter, et en ao\u00fbt 2011, ces derniers placent Bootstrap sous licence <a href=\"https:\/\/datascientest.com\/open-source\">open source<\/a>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9710f97 e-flex e-con-boxed e-con\" data-id=\"9710f97\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ff1dde4 elementor-widget elementor-widget-heading\" data-id=\"ff1dde4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Pourquoi utiliser Bootstrap ?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e21daa7 elementor-widget elementor-widget-text-editor\" data-id=\"e21daa7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Bootstrap est facile \u00e0 utiliser, n\u2019importe qui ayant une connaissance basique des langages HTML et CSS peut le comprendre. De plus, ce framework correspond a <strong>une solution \u00ab\u00a0responsive\u00a0\u00bb<\/strong> qui s\u2019ajuste aux t\u00e9l\u00e9phones, aux tablettes et aux ordinateurs. Enfin, la derni\u00e8re version de Bootstrap est compatible avec tous les navigateurs modernes (Firefox, Chrome, Safari, Edge anciennement Internet Explorer et Opera).<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-527e1a1 e-flex e-con-boxed e-con\" data-id=\"527e1a1\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-294e3ce elementor-widget elementor-widget-heading\" data-id=\"294e3ce\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Comment t\u00e9l\u00e9charger Bootstrap ?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd218f2 elementor-widget elementor-widget-text-editor\" data-id=\"dd218f2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Il existe plusieurs mani\u00e8res de t\u00e9l\u00e9charger bootstrap, vous pouvez vous rendre sur le <a href=\"https:\/\/getbootstrap.com\/\">site officiel<\/a> et t\u00e9l\u00e9charger la derni\u00e8re version en ligne. Vous pouvez \u00e9galement installer Bootstrap via npm, Composer ou Meteor, en ex\u00e9cutant par exemple l\u2019une des lignes de commande suivantes dans une console :<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1975433 elementor-widget elementor-widget-shortcode\" data-id=\"1975433\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/gist.github.com\/zaxaheb-dst\/b13d930b26de0573a1bad99b040bb590.js\"><\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fad120d elementor-widget elementor-widget-text-editor\" data-id=\"fad120d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Si vous ne voulez pas t\u00e9l\u00e9charger Bootstrap vous-m\u00eame, vous pouvez l\u2019inclure depuis un <strong>CDN<\/strong> (Content Delivery Network). Vous pouvez utiliser <strong>jsDelivr<\/strong> pour ceci de la mani\u00e8re suivante :\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bf407dd elementor-widget elementor-widget-shortcode\" data-id=\"bf407dd\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/gist.github.com\/zaxaheb-dst\/38aea9fd6212002370e2d0b7e1fdd3be.js\"><\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a2d2f3 e-flex e-con-boxed e-con\" data-id=\"8a2d2f3\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-073d4ee elementor-widget elementor-widget-heading\" data-id=\"073d4ee\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Comment utiliser Bootstrap ?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e0751b9 elementor-widget elementor-widget-text-editor\" data-id=\"e0751b9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Nous allons maintenant voir comment cr\u00e9er un template basique d\u2019une application ou d\u2019une page web en utilisant <strong>Bootstrap<\/strong>. La premi\u00e8re \u00e9tape est de cr\u00e9er un fichier HTML basique sur lequel nous allons travailler, par exemple :\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-798e8a6 elementor-widget elementor-widget-shortcode\" data-id=\"798e8a6\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/gist.github.com\/zaxaheb-dst\/caf8a4d6f15fa9de744dddca64320abb.js\"><\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bb8f7c elementor-widget elementor-widget-text-editor\" data-id=\"0bb8f7c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<blockquote><p>Remarque : essayez de toujours inclure la balisedans lepour permettre le zoom tactile et assurer un rendement adapt\u00e9 aux smartphones.<\/p><\/blockquote><p>La prochaine \u00e9tape est de <strong>transformer notre fichier HTML en un template Bootstrap<\/strong>. Ici, nous pr\u00e9f\u00e9rons la m\u00e9thode utilisant les CDN car elle nous donne de meilleures performances en r\u00e9duisant les temps de chargement, \u00e9tant h\u00e9berg\u00e9e sur plusieurs serveurs \u00e0 travers la plan\u00e8te.\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-961ccf5 elementor-widget elementor-widget-shortcode\" data-id=\"961ccf5\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/gist.github.com\/zaxaheb-dst\/630b4a663f09e5358abfe7d3fde2219d.js\"><\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bacc8d1 elementor-widget elementor-widget-text-editor\" data-id=\"bacc8d1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Nous pouvons dor\u00e9navant <strong>cr\u00e9er nos premiers objets Bootstrap<\/strong> : des containers. Les containers sont les \u00e9l\u00e9ments de mise en page le plus basique de Bootstrap et sont n\u00e9cessaires pour utiliser <strong>le syst\u00e8me de grille<\/strong>. Ceux-ci sont essentiellement utilis\u00e9s pour envelopper le contenu avec un certain rembourrage. Ils sont \u00e9galement utilis\u00e9s pour aligner le contenu horizontalement au centre de la page dans le cas d&rsquo;une mise en page \u00e0 largeur fixe. Il y a <strong>trois types de containers<\/strong> :\u00a0<\/p><ul><li><strong>container<\/strong>, qui a une largeur maximale pour chaque breakpoint<\/li><li><strong>container-fluid<\/strong> qui a une largeur de 100% pour tous les breakpoints<\/li><li><strong>container-{breakpoint}<\/strong> qui a une largeur de 100% jusqu\u2019au breakpoint renseign\u00e9<\/li><\/ul><p>\u00a0<\/p><p>Voici un exemple de syntaxe pour l\u2019utilisation des containers :\u00a0<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fbcc15b elementor-widget elementor-widget-shortcode\" data-id=\"fbcc15b\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><script src=\"https:\/\/gist.github.com\/zaxaheb-dst\/4132d328d0b6bb66fa75a4437cc5dd1a.js\"><\/script><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2a53986 elementor-widget elementor-widget-text-editor\" data-id=\"2a53986\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Vous savez dor\u00e9navant comment cr\u00e9er votre premi\u00e8re page HTML en utilisant Bootstrap. Les possibilit\u00e9s sont nombreuses et vous pouvez trouver de nombreux templates sur le net, par exemple des creative commons sur <a href=\"https:\/\/www.bootstrapdash.com\/product-category\/free-bootstrap-admin-templates\/creative-commons-license\/\">bootstrapdash<\/a>.<\/p><p>\u00c0 vous de jouer !<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ebc8dae elementor-widget elementor-widget-html\" data-id=\"ebc8dae\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [{\n    \"@type\": \"Question\",\n    \"name\": \"Qu\u2019est-ce que Bootstrap ?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Bootstrap fait partie de ces  \u201cFront-End Framework\u201d contenant une collection d\u2019outils utiles \u00e0 la cr\u00e9ation et au design de sites et d\u2019applications web en front end. Il contient des codes HTML et CSS ainsi que des extensions JavaScript en option, permettant la cr\u00e9ation de formulaires, de boutons, d\u2019outils de navigations et d\u2019autres \u00e9l\u00e9ments interactifs \u00e0 int\u00e9grer dans une application. Ce framework est pens\u00e9 pour d\u00e9velopper des designs interactifs adaptables \u00e0 tout type d\u2019\u00e9cran, en particulier pour les smartphones.\"\n    }\n  },{\n    \"@type\": \"Question\",\n    \"name\": \"Pourquoi utiliser Bootstrap ?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Bootstrap est facile \u00e0 utiliser, n\u2019importe qui ayant une connaissance basique des langages HTML et CSS peut le comprendre. De plus, ce framework correspond a une solution \u201cresponsive\u201d qui s\u2019ajuste aux t\u00e9l\u00e9phones, aux tablettes et aux ordinateurs. Enfin, la derni\u00e8re version de Bootstrap est compatible avec tous les navigateurs modernes (Firefox, Chrome, Safari, Edge anciennement Internet Explorer et Opera).\"\n    }\n  },{\n    \"@type\": \"Question\",\n    \"name\": \"Comment t\u00e9l\u00e9charger Bootstrap ?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Il existe plusieurs mani\u00e8res de t\u00e9l\u00e9charger bootstrap, vous pouvez vous rendre sur le site officiel et t\u00e9l\u00e9charger la derni\u00e8re version en ligne. Vous pouvez \u00e9galement installer Bootstrap via npm, Composer ou Meteor, en ex\u00e9cutant par exemple l\u2019une des lignes de commande suivantes dans une console\"\n    }\n  }]\n}\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bf33797 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bf33797\" data-element_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-100 elementor-top-column elementor-element elementor-element-1f43021\" data-id=\"1f43021\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5372df1 elementor-widget elementor-widget-text-editor\" data-id=\"5372df1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-weight: 400; color: #000000;\">Vous savez dor\u00e9navant comment cr\u00e9er votre premi\u00e8re page HTML en utilisant Bootstrap. Les possibilit\u00e9s sont nombreuses et vous pouvez trouver de nombreux templates sur le net, par exemple des creative commons sur <\/span><strong><a href=\"https:\/\/www.bootstrapdash.com\/product-category\/free-bootstrap-admin-templates\/creative-commons-license\/\"><span style=\"color: #5e36f3;\">bootstrapdash<\/span><\/a><\/strong><span style=\"font-weight: 400;\">.<\/span><\/p><p><span style=\"font-weight: 400; color: #000000;\">A vous de jouer !<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-598a851 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"598a851\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formations-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Gagner en comp\u00e9tences avec nos formations<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3e3208 elementor-widget elementor-widget-html\" data-id=\"a3e3208\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [{\n    \"@type\": \"Question\",\n    \"name\": \"Qu\u2019est-ce que Bootstrap ?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Bootstrap fait partie de ces  \u201cFront-End Framework\u201d contenant une collection d\u2019outils utiles \u00e0 la cr\u00e9ation et au design de sites et d\u2019applications web en front end. Il contient des codes HTML et CSS ainsi que des extensions JavaScript en option, permettant la cr\u00e9ation de formulaires, de boutons, d\u2019outils de navigations et d\u2019autres \u00e9l\u00e9ments interactifs \u00e0 int\u00e9grer dans une application. Ce framework est pens\u00e9 pour d\u00e9velopper des designs interactifs adaptables \u00e0 tout type d\u2019\u00e9cran, en particulier pour les smartphones.\"\n    }\n  },{\n    \"@type\": \"Question\",\n    \"name\": \"Pourquoi utiliser Bootstrap ?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Bootstrap est facile \u00e0 utiliser, n\u2019importe qui ayant une connaissance basique des langages HTML et CSS peut le comprendre. De plus, ce framework correspond a une solution \u201cresponsive\u201d qui s\u2019ajuste aux t\u00e9l\u00e9phones, aux tablettes et aux ordinateurs. Enfin, la derni\u00e8re version de Bootstrap est compatible avec tous les navigateurs modernes (Firefox, Chrome, Safari, Edge anciennement Internet Explorer et Opera).\"\n    }\n  },{\n    \"@type\": \"Question\",\n    \"name\": \"Comment t\u00e9l\u00e9charger Bootstrap ?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Il existe plusieurs mani\u00e8res de t\u00e9l\u00e9charger bootstrap, vous pouvez vous rendre sur le site officiel et t\u00e9l\u00e9charger la derni\u00e8re version en ligne. Vous pouvez \u00e9galement installer Bootstrap via npm, Composer ou Meteor, en ex\u00e9cutant par exemple l\u2019une des lignes de commande suivantes dans une console\"\n    }\n  }]\n}\n<\/script>\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>D\u00e9velopper un site internet requiert des connaissances en HTML, CSS et JavaScript. Il faut avoir des comp\u00e9tences de programmation et d\u2019int\u00e9gration sur chacun de ces trois langages pour pouvoir ma\u00eetriser la cr\u00e9ation d\u2019applications web. Il existe des collections d\u2019outils contenant des codes HTML et CSS et des plugins JavaScript pour faciliter le d\u00e9veloppement et l\u2019int\u00e9gration [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":162882,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"content-type":"","inline_featured_image":false},"categories":[2494],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v21.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap: qu&#039;est-ce que c&#039;est ? Comment cr\u00e9er votre page web avec ?<\/title>\n<meta name=\"description\" content=\"Dans cet article, nous allons voir ce qu&#039;est Bootstrap, les bonnes pratiques pour son utilisation, et comment l&#039;utiliser pour cr\u00e9er votre propre site web\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap: qu&#039;est-ce que c&#039;est ? Comment cr\u00e9er votre page web avec ?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web\" \/>\n<meta property=\"og:site_name\" content=\"Formation Data Science | DataScientest.com\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-13T10:00:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-09T13:35:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/datascientest.com\/wp-content\/uploads\/2022\/05\/image_bootstrap-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"562\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Margalith Mamou\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Margalith Mamou\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web\",\"url\":\"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web\",\"name\":\"Bootstrap: qu'est-ce que c'est ? Comment cr\u00e9er votre page web avec ?\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/#website\"},\"datePublished\":\"2022-05-13T10:00:17+00:00\",\"dateModified\":\"2023-11-09T13:35:06+00:00\",\"author\":{\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00\"},\"description\":\"Dans cet article, nous allons voir ce qu'est Bootstrap, les bonnes pratiques pour son utilisation, et comment l'utiliser pour cr\u00e9er votre propre site web\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/datascientest.com\/#website\",\"url\":\"https:\/\/datascientest.com\/\",\"name\":\"Formation Data Science | DataScientest.com\",\"description\":\"Leader de la formation en Data Science\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/datascientest.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00\",\"name\":\"Margalith Mamou\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg\",\"contentUrl\":\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg\",\"caption\":\"Margalith Mamou\"},\"description\":\"Margalith Mamou est Product Manager chez DataScientest, apr\u00e8s avoir occup\u00e9 le poste de Chef de projet Web pendant plus d'un an au sein de la m\u00eame entreprise. Auparavant, elle a \u00e9t\u00e9 D\u00e9veloppeur web pendant pr\u00e8s de 3 ans. Margalith est dipl\u00f4m\u00e9e du Digital College et de l'Institut F2I, avec une sp\u00e9cialisation en gestion du Web et design digital marketing.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/margalith-mamou-a2869919b\/\",\"user\"],\"url\":\"https:\/\/datascientest.com\/author\/margalith\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Bootstrap: qu'est-ce que c'est ? Comment cr\u00e9er votre page web avec ?","description":"Dans cet article, nous allons voir ce qu'est Bootstrap, les bonnes pratiques pour son utilisation, et comment l'utiliser pour cr\u00e9er votre propre site web","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web","og_locale":"fr_FR","og_type":"article","og_title":"Bootstrap: qu'est-ce que c'est ? Comment cr\u00e9er votre page web avec ?","og_url":"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web","og_site_name":"Formation Data Science | DataScientest.com","article_published_time":"2022-05-13T10:00:17+00:00","article_modified_time":"2023-11-09T13:35:06+00:00","og_image":[{"width":1024,"height":562,"url":"https:\/\/datascientest.com\/wp-content\/uploads\/2022\/05\/image_bootstrap-1.png","type":"image\/png"}],"author":"Margalith Mamou","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Margalith Mamou","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web","url":"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web","name":"Bootstrap: qu'est-ce que c'est ? Comment cr\u00e9er votre page web avec ?","isPartOf":{"@id":"https:\/\/datascientest.com\/#website"},"datePublished":"2022-05-13T10:00:17+00:00","dateModified":"2023-11-09T13:35:06+00:00","author":{"@id":"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00"},"description":"Dans cet article, nous allons voir ce qu'est Bootstrap, les bonnes pratiques pour son utilisation, et comment l'utiliser pour cr\u00e9er votre propre site web","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/datascientest.com\/bootstrap-creer-votre-page-web"]}]},{"@type":"WebSite","@id":"https:\/\/datascientest.com\/#website","url":"https:\/\/datascientest.com\/","name":"Formation Data Science | DataScientest.com","description":"Leader de la formation en Data Science","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/datascientest.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00","name":"Margalith Mamou","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/datascientest.com\/#\/schema\/person\/image\/","url":"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg","contentUrl":"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg","caption":"Margalith Mamou"},"description":"Margalith Mamou est Product Manager chez DataScientest, apr\u00e8s avoir occup\u00e9 le poste de Chef de projet Web pendant plus d'un an au sein de la m\u00eame entreprise. Auparavant, elle a \u00e9t\u00e9 D\u00e9veloppeur web pendant pr\u00e8s de 3 ans. Margalith est dipl\u00f4m\u00e9e du Digital College et de l'Institut F2I, avec une sp\u00e9cialisation en gestion du Web et design digital marketing.","sameAs":["https:\/\/www.linkedin.com\/in\/margalith-mamou-a2869919b\/","user"],"url":"https:\/\/datascientest.com\/author\/margalith"}]}},"_links":{"self":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts\/162915"}],"collection":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/comments?post=162915"}],"version-history":[{"count":0,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts\/162915\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/media\/162882"}],"wp:attachment":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/media?parent=162915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/categories?post=162915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/tags?post=162915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}