Création de sites web en responsive design avec Bootstrap

Essentiel pour le développement de sites web ou mobiles responsives, Bootstrap est le framework HTML, CSS et JavaScript gratuit le plus populaire. Ce framework comprend des modèles CSS et HTML responsives pour les boutons, les tableaux, la navigation, les carrousels d’image et d’autres éléments que vous pouvez utiliser sur votre page web. Quelques modules externes JavaScript facultatifs sont également disponibles. Ils permettent même à des développeurs disposant de connaissances de codage basiques de développer des sites web en responsive design attrayants.

Dreamweaver permet de créer des documents Bootstrap, mais aussi de modifier des pages web existantes créées avec Bootstrap. Vous avez la possibilité de modifier vos fichiers Bootstrap sous Dreamweaver, qu’ils soient déjà finalisés ou encore en cours de conception. Vous avez ainsi le choix entre modifier le code directement ou le peaufiner à l’aide de fonctions d’édition visuelles telles que l’affichage en mode En direct, le panneau visuel CSS Designer, les requêtes multimédias visuelles et la fonction Extract.

Depuis toujours, j’utilise des grilles fluides sous Dreamweaver. Comment m’initier à Bootstrap ?

Lorsque vous créez des documents à grille fluide, Dreamweaver rend vos pages web réactives en y appliquant automatiquement les classes appropriées. Vous n’avez qu’à vous occuper du contenu et décider de son repositionnement en fonction des différents formats utilisés.

De la même manière, dans les documents Bootstrap, vous ne vous occupez que du contenu et du design, tandis que Dreamweaver se charge de la réactivité de votre page web, grâce à une étroite intégration du framework Bootstrap.

Actuellement, Dreamweaver prend en charge les versions Bootstrap 3.4.1 et 4.4.1 :

« Bootstrap 3.4.1 intègre un système réactif de grilles fluides, principalement conçu pour les appareils mobiles, capable de redimensionner efficacement jusqu’à 12 colonnes à mesure que la taille de l’appareil ou de la fenêtre d’affichage augmente. Il comprend des classes prédéfinies pour faciliter la mise en page, ainsi que des options performantes pour la génération de mises en page plus axées sur la sémantique. » - Documentation de Bootstrap.

« Bootstrap 4.4.1 apporte des modifications importantes, dont une puissante grille flexbox axée sur les appareils mobiles pour créer des mises en page de toutes les formes et toutes les tailles grâce un système à douze colonnes, cinq niveaux réactifs par défaut, des variables et des mixins Sass, et des dizaines de classes prédéfinies. » - Documentation de Bootstrap.

Pour commencer à utiliser Bootstrap dans Dreamweaver, vous pouvez vous aider des modèles de démarrage Bootstrap. Dreamweaver comprend un lot de modèles destinés à différents types de sites web, par exemple pour créer une page d’e-commerce ou un portfolio.

Est-il possible de migrer des documents à grille fluide existants vers des documents Bootstrap sous Dreamweaver ?

Non, il n’existe pas de méthode directe permettant de convertir vos documents à grille fluide existants en documents Bootstrap. Néanmoins, le mode d’utilisation de Dreamweaver pour créer et concevoir des documents Bootstrap est semblable à celui relatif aux documents à grille fluide. Par exemple, vous pouvez commencer par créer un document Bootstrap directement depuis la boîte de dialogue Nouveau document. Lorsque vous créez des documents à grille fluide pour les trois principaux formats (mobile, tablette et ordinateur), pour Bootstrap, vous devez commencer par créer un document adapté aux dimensions d’écran de base : petit, moyen, grand ou très grand. Les options de mise en page affichées lorsque vous cliquez sur les éléments dans un document Bootstrap sont également similaires à celles des documents à grille fluide.

Est-il possible d’importer d’anciens sites dans la dernière version de Dreamweaver ?

Oui, vous pouvez importer d’anciens sites dans la dernière version de Dreamweaver. Dans ce cas, Dreamweaver recherche le fichier CSS Bootstrap dans le dossier site root/css/. 

• Si le site possède un fichier CSS Bootstrap v3, le paramètre de version Bootstrap indiqué sous Gérer le site > Paramètres avancés > Bootstrap est défini sur 3.4.1.
• Si le site possède un fichier CSS Bootstrap v4, le paramètre de version Bootstrap indiqué sous Gérer le site > Paramètres avancés > Bootstrap est défini sur 4.4.1.
• Si le site ne possède pas de fichier CSS Bootstrap dans le dossier site root/css, le paramètre de version Bootstrap indiqué sous Gérer le site > Paramètres avancés > Bootstrap est défini sur 4.4.1.

Création de documents Bootstrap

Pour commencer à créer votre site web Bootstrap, vous pouvez sélectionner l’une des options suivantes dans la boîte de dialogue Nouveau document :

• Modèles de démarrage Bootstrap (Modèles de démarrage > Modèles Bootstrap) : utilisez cette option pour obtenir rapidement un résultat fonctionnel, sans avoir à partir de zéro pour la mise en page. Il vous suffit de modifier le texte et, si nécessaire, de remplacer les éléments prédéfinis, pour disposer d’un site web responsive en quelques clics. Pour plus d’informations, consultez la section Utilisation des modèles de démarrage Bootstrap.
• Créer un document HTML à partir du framework Bootstrap (Nouveau document > HTML > Bootstrap) : utilisez cette option pour construire votre site pas à pas, à partir de composants Bootstrap et CSS intégrés à Dreamweaver. Pour en savoir plus, consultez la section Création de documents HTML à partir du framework Bootstrap.
  

Utilisation des modèles de démarrage Bootstrap

Les modèles de démarrage Bootstrap permettent de créer, en un clin d’œil, des pages web correspondant à des thèmes populaires. Tous les fichiers dépendants présents dans le framework sont automatiquement enregistrés.

Création de documents HTML à partir du framework Bootstrap

Pour mettre au point votre site web responsive, vous pouvez commencer par créer un document HTML basé sur le framework Bootstrap. Vous avez le choix entre créer un ensemble de fichiers de framework Bootstrap et réutiliser les fichiers existants. Une fois le document créé, vous pouvez y ajouter des composants Bootstrap, tels que des accordéons et des carrousels, à partir du panneau Insertion de Dreamweaver. Si vous disposez de compositions Photoshop, vous pouvez aussi utiliser Extract pour importer des images, polices, styles, textes et autres éléments dans votre document Bootstrap.

Ouverture de fichiers Bootstrap

Vous pouvez ouvrir les fichiers Bootstrap en procédant de l’une des manières suivantes :

• Cliquez sur Fichier > Ouvrir, puis naviguez jusqu’au fichier HTML Bootstrap.
• (Recommandé) Créez un site Dreamweaver et faites pointer le dossier de ce site vers le dossier qui contient tous vos fichiers Bootstrap.

Quand vous ouvrez un fichier HTML Bootstrap sous Dreamweaver :

• Les lignes sont signalées par des traits gris en pointillés, avec des angles arrondis
• Les colonnes sont signalées par des traits bleus en pointillés

Dreamweaver reconnaît les fichiers CSS associés à un fichier HTML Bootstrap si le nom du fichier CSS contient « bootstrap ». La référence au fichier CSS peut être tout ou partie des éléments suivants :

• Chemin d’accès local :

  Le fichier CSS, compressé ou non, est présent localement. Par exemple :

  <link href="css/bootstrap.css" rel="stylesheet"> ou
  <link href="css/bootstrap.min.css" rel="stylesheet">

• Chemin d’accès distant :

Un fichier CSS distant, compressé ou non. Par exemple :

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<numéro_version_bootstrap>/css/bootstrap.min.css" rel="stylesheet">

Masquage, affichage et gestion d’éléments Bootstrap masqués

Parfois, vous pouvez avoir besoin d’afficher un élément dans une fenêtre alors que dans une autre, vous devez le masquer pour des questions de design. 

Pour masquer un élément Bootstrap, cliquez avec le bouton droit et sélectionnez Masquer l’élément. L’élément est masqué temporairement dans la vue.

Pour afficher des éléments masqués, cliquez avec le bouton droit et sélectionnez Gérer les éléments masqués. Les éléments masqués apparaissent sur un arrière-plan gris hachuré. Cliquez sur l’œil pour afficher l’élément.

Ajout de composants Bootstrap

L’option Composants Bootstrap du panneau Insertion répertorie tous les composants Bootstrap que vous pouvez ajouter à votre page web dans Dreamweaver. Selon la version de Bootstrap utilisée dans le fichier bootstrap.css associé à la page HTML, les composants correspondants sont indiqués dans le panneau Insertion. Par exemple, dans Bootstrap v4.0.0, vous voyez des composants supplémentaires, tels que les cartes et les badges. De même, les composants Glyphicons, Panel, Wells et Thumbnails ne sont disponibles que dans Bootstrap v3.3.7. Selon la version de Bootstrap, les composants correspondants sont indiqués dans le panneau Insertion. En outre, le composant Spinners est disponible uniquement dans Bootstrap v4.4.1.

Les composants visibles dans le panneau Insertion sont indiqués en fonction des critères suivants :

• Document actif : les composants visibles dans le panneau Insertion dépendent de la version de Bootstrap indiquée dans le fichier Bootstrap associé à ce document. 
• Version sous Préférences du site : pour un document non-Bootstrap, Dreamweaver recherche le numéro de version sous Préférences du site > Avancé > Bootstrap. La version indiquée dans cette option détermine les composants utilisés. Par défaut, pour les nouveaux sites, la version est 4.4.1.
• Dossier d’enregistrement des fichiers : pour un document non-Bootstrap ne faisant partie d’aucun site, le panneau Insertion indique les composants de la version 4.4.1.

Pour ajouter un composant, faites-le glisser du panneau vers la page web. Avant de déposer le composant, notez les assistances visuelles, telles que les Guides en direct, l’insertion précise (à l’aide de DOM) et l’assistant de position. Utilisez ces assistances pour placer les composants rapidement et avec précision sur votre page. Pour plus d’informations sur l’insertion d’éléments dans votre page web, consultez la page Présentation du panneau Insertion.

Ajout de lignes

Cliquez sur la ligne après laquelle vous souhaitez ajouter la nouvelle ligne. Cliquez ensuite sur l’icône Ajouter une nouvelle ligne. Une ligne Bootstrap avec deux éléments de colonne enfant de six colonnes chacun est ajoutée.

Le code pour la ligne ajoutée se présente comme suit :

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

où * représente la taille de l’écran actuel sous Dreamweaver.

Ajout de colonnes

Sélectionnez la colonne requise, puis cliquez sur l’icône Ajouter une nouvelle colonne. La colonne sélectionnée est dupliquée sans ses enfants.

Toutes les colonnes vides ont une hauteur minimale de 20 pixels. Toutefois, cette hauteur n’est pas réellement ajoutée à la page ; elle s’affiche uniquement en mode En direct afin de faciliter l’insertion d’éléments dans les colonnes.

Duplication de lignes et de colonnes

Cliquez sur la ligne ou la colonne à dupliquer, puis sur l’icône Dupliquer, dans l’angle inférieur droit de la fenêtre. La ligne ou la colonne entière est dupliquée, avec son contenu.

Redimensionnement et décalage de colonnes

Le redimensionnement et le décalage de colonnes deviennent impératifs en particulier lorsque vous créez des designs responsives pour différentes fenêtres. 

Redimensionnement de colonnes

Cliquez sur la colonne requise et faites glisser la poignée de droite pour la redimensionner. Pour un document Bootstrap v4.0.0, lorsque vous redimensionnez une colonne, la classe col-*-n est ajoutée, où * représente la requête multimédia actuelle (sm, md, lg ou xl) et n, le nombre de colonnes qu’elle occupe. Dans le cas d’un écran Extra small, la classe col-n est ajoutée.

Pour un document Bootstrap v3.3.7, lorsque vous redimensionnez une colonne, la classe col-*-n est ajoutée, où * représente la requête multimédia actuelle (xs, sm, md ou lg) et n, le nombre de colonnes qu’elle occupe.

Dreamweaver détecte la taille d’écran actuelle et ajoute la classe appropriée. Pour redimensionner des colonnes afin qu’elles s’adaptent à des fenêtres spécifiques, modifiez la taille de la fenêtre à l’aide des options situées dans le coin inférieur droit ou du scrubber. Redimensionnez ensuite les colonnes comme vous le souhaitez.

Décalage de colonnes

Cliquez sur la colonne requise et faites glisser la poignée de gauche pour décaler la colonne. Le décalage est affiché sous la forme d’une zone hachurée. Pour un document Bootstrap v4.0.0, lorsque vous décalez la colonne, la classe offset-*-n est ajoutée, où * représente la requête multimédia actuelle (sm, md, lg ou xl) et n, le nombre de colonnes qu’elle occupe.

Pour un document v3.3.7, lorsque vous décalez la colonne, la classe col-*-offset-n est ajoutée, où * représente la requête multimédia actuelle (xs, sm, md ou lg) et n, le nombre de colonnes dont elle est décalée.

Dreamweaver détecte la taille d’écran actuelle et ajoute la classe appropriée. Pour décaler des colonnes afin qu’elles s’adaptent à des fenêtres spécifiques, modifiez la taille de la fenêtre à l’aide des options situées dans le coin inférieur droit ou du scrubber. Décalez ensuite les colonnes comme vous le souhaitez.