Pour une expérience de navigation optimale sur mobile, utilisez des modèles de démarrage Bootstrap et faites glisser-déposer des composants Bootstrap dans Dreamweaver.

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.

Remarque :

Les versions de Bootstrap actuellement prises en charge sont la v4.0.0 et la v3.3.7.

Questions courantes

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 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.3.7 et 4.0.0 :

« Bootstrap 3.3.7 intègre un système responsive 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.0.0 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 responsives 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.

Si vous souhaitez créer un document Bootstrap de zéro, c’est tout à fait possible : suivez simplement la procédure décrite à la section Création de documents Bootstrap.

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.3.7.
  • 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.0.0.
  • 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.0.0.

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.

  1. Cliquez sur Fichier > Nouveau.

  2. Dans la boîte de dialogue Nouveau document qui s’affiche, cliquez sur Modèles de démarrage, puis sélectionnez l’élément souhaité dans la liste des modèles Bootstrap.

  3. Cliquez sur Créer

    Une page HTML basée sur le modèle choisi est alors créée. Vous pouvez ensuite adapter cette page à votre guise en ajoutant ou en supprimant des composants, en modifiant le texte ou en changeant les éléments inclus.

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.

  1. Cliquez sur Fichier > Nouveau.

  2. Dans la boîte de dialogue Nouveau document, cliquez sur Nouveau document > HTML, puis cliquez sur l’onglet Bootstrap.

  3. Pour créer un fichier bootstrap.css (ainsi que les autres fichiers Bootstrap), procédez comme suit :

    Indiquez si vous souhaitez créer un nouveau fichier CSS Bootstrap ou reprendre un CSS existant.

    Si vous optez pour la première solution, un dossier « css » est créé à la racine du site et le fichier bootstrap.css y est copié. Si vous choisissez d’utiliser un CSS existant, indiquez son chemin d’accès ou naviguez jusqu’à son emplacement.

    1. Cliquez sur Créer.

      Création d’un nouveau document Bootstrap
      Création d’un nouveau document Bootstrap
    2. (Facultatif) Si vous souhaitez associer un autre CSS à votre document, cliquez sur  dans la section Joindre un CSS. La boîte de dialogue Ajouter une feuille de style externe s’affiche. Définissez les paramètres, puis cliquez sur OK.

    3. L’option « Intégrer une mise en page prédéfinie » permet d’obtenir une structure de document Bootstrap de base.

      Si cette structure de base ne vous convient pas et que vous préférez partir d’un document vierge, désélectionnez l’option Intégrer une mise en page prédéfinie.

    4. (Facultatif) La mise en page par défaut contient 12 colonnes, avec une gouttière de 30 px. Les tailles d’écran par défaut sont 576 px, 768 px, 992 px et 1 200 px.

      Si vous souhaitez modifier ces paramètres, cliquez sur Personnaliser. Le fichier bootstrap.css est modifié en conséquence.

      Remarque :

      Pour Bootstrap v3.3.7, les tailles d’écran par défaut sont 768 px, 992 px et 1 200 px.

    5. Pour ouvrir le panneau Extract, sélectionnez l’option Utiliser Extract pour créer votre page à partir de compositions Photoshop. Ainsi, vous pouvez commencer directement à extraire les actifs de compositions Photoshop.

      Par défaut, le site est créé à l’aide de Bootstrap v4.0.0. Une fois le document créé, vous trouvez les dossiers css et js dans le dossier racine du site. Toutefois, si vous souhaitez créer le site à l’aide de Bootstrap version 3.3.7, sélectionnez Site > Gérer les sites. Sélectionnez le dossier racine du site. Cliquez sur Paramètres avancés > Bootstrap. Dans la liste déroulante Version Bootstrap, sélectionnez 3.3.7. Avec Bootstrap v3.3.7, vous pouvez voir les dossiers css, js et fonts dans le dossier racine du site.

      Sélection de Bootstrap version 3.3.7
      Sélection de Bootstrap version 3.3.7
  4. Pour utiliser des fichiers de framework Bootstrap existants, procédez comme suit :

    1. Cliquez sur Utiliser le fichier existant et indiquez le chemin d’accès du fichier bootstrap.css. Vous pouvez également naviguer jusqu’à l’emplacement où est enregistré le fichier CSS.

      Création de documents Bootstrap à partir de fichiers de framework existants
      Création de documents Bootstrap à partir de fichiers de framework existants

    2. (Facultatif) Si vous souhaitez associer un autre CSS à votre document, cliquez sur  dans la section Joindre un CSS. Dans la boîte de dialogue Ajouter une feuille de style externe, définissez les paramètres puis cliquez sur OK.

    3. L’option Intégrer une mise en page prédéfinie permet d’obtenir une structure de document Bootstrap de base. Si cette structure de base ne vous convient pas et que vous préférez partir d’un document vierge, désélectionnez l’option Intégrer une mise en page prédéfinie.

  5. Cliquez sur Créer.

Remarque :

Le fichier bootstrap.css ainsi créé est en lecture seule. Vous ne pouvez donc pas modifier ces styles dans CSS Designer ; le volet Propriétés de CSS Designer est désactivé dans les fichiers Bootstrap.

Si vous souhaitez personnaliser votre document Bootstrap, créez un autre fichier CSS dans lequel vous pourrez remplacer les styles existants, puis associez-le au document.

Ouverture de fichiers Bootstrap

Remarque :

Il est recommandé de n’ouvrir et de ne modifier que des documents créés dans Bootstrap version 3 et ultérieures sous Dreamweaver.

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">

Remarque :

Les feuilles de style Bootstrap dans les balises de liaison et d’importation sont prises en charge sous Dreamweaver. Toutefois, l’importation imbriquée (lien vers une feuille de style qui importe à son tour une autre feuille de style) n’est pas prise en charge.

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 vous vous trouvez dans une autre fenêtre, ou de masquer cet élément 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.

Masquage d’éléments Bootstrap dans Dreamweaver
Masquage d’éléments Bootstrap dans Dreamweaver

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.

Gérer les éléments Bootstrap masqués
Gérer les éléments Bootstrap masqués

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.

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.0.0.
  • 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.0.0.
Composants pris en charge dans Bootstrap 4.0.0
Composants pris en charge dans Bootstrap 4.0.0

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.

Remarque :

L’option Ajouter une ligne/Ajouter une colonne duplique la ligne ou la colonne concernée avec ses classes, mais sans 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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne