Cours Bootstrap

Twitter bootstrap documentation pdf [Eng]


Télécharger Twitter bootstrap documentation pdf [Eng]

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


twitter bootstrap documentation pdf [Eng]

...

À propos de DMXzone Bootstrap

Twitter Bootstrap est la solution idéale pour la conception de présentations Web réactives basées sur CSS. Désormais, avec l’aide de l’extension DMXzone Bootstrap, il est entièrement intégré à Dreamweaver! Directement dans sa vue de conception, vous pouvez désormais créer une mise en page fluide ou fixe de la grille, ainsi que suivre votre travail en cours pour les navigateurs mobiles et de bureau en sélectionnant la taille souhaitée pour les téléphones mobiles, les tablettes ou les ordinateurs de bureau. Grâce à la grille réactive et à la grande intégration de la vue de conception, il vous permet de créer visuellement même les dispositions de grille les plus complexes. L'extension est fournie avec 8 pages prédéfinies pour vous aider à démarrer immédiatement.

Caractéristiques en détail

Caractéristiques générales

  • Grille sensible à 12 colonnes de Twitter Bootstrap - Le système de grille réactif garantit des proportions de contenu appropriées pour différentes résolutions et périphériques.
  • Disposition entièrement réactive dans Dreamweaver: lors de la conception d'une disposition réactive, vous pouvez suivre votre travail en cours pour les navigateurs de bureau et mobiles directement dans Dreamweaver en sélectionnant la taille souhaitée pour les téléphones mobiles, les tablettes ou les ordinateurs de bureau.
  • Prise en charge des dispositions de grille avancées et des colonnes imbriquées - Vous pouvez ajouter autant de lignes que vous le souhaitez dans une colonne.
  • Prise en charge des dispositions de grille fluide ou fixe: définissez une disposition commune à largeur fixe ou une présentation fluide à deux colonnes.

o Grille fixe



………

Gestion de la grille bootstrap

Gestion des cellules de grille

  • Ajouter une cellule à gauche - ajoutera une nouvelle cellule de grille sur le côté gauche de la cellule sélectionnée
  • Ajouter une cellule à droite - ajoutera une nouvelle cellule de grille à droite de la cellule sélectionnée
  • Fusionner avec la cellule de gauche - fusionnera le contenu de la cellule de grille actuelle avec son voisin de droite
  • Fusionner avec la cellule de droite - fusionnera le contenu de la cellule de grille actuelle avec son voisin de gauche
  • Supprimer la cellule - supprimera la cellule sélectionnée

Gestion des lignes de grille

  • Ajouter une ligne au-dessus - ajoutera une ligne de la grille au-dessus de la ligne actuellement sélectionnée
  • Ajouter une ligne à l'intérieur - ajoutera une ligne de grille dans la cellule actuellement sélectionnée
  • Ajouter une ligne ci-dessous - ajoutera une ligne de grille sous la ligne actuellement sélectionnée

Options générales d'alignement et de sélection

  • Répartir les cellules - rendra toutes les cellules de la grille de la même ligne égales en taille
  • Sélectionner une cellule - sélectionne les cellules et ouvre l'inspecteur des propriétés.
  • Ajouter un conteneur - ajoute un conteneur fluide / fixe qui encapsule le contenu de la page.

Inspecteur immobilier

  • Augmenter l'offset - augmente le nombre de colonnes avant la cellule
  • Diminuer l'offset - diminue le nombre de colonnes avant la cellule
  • Développer à gauche - augmentera la largeur de la cellule de grille actuelle en obtenant la largeur requise de sa voisine de gauche
  • Contracter à partir de la gauche - réduira la largeur de la cellule de grille actuelle et augmentera la largeur de la cellule de gauche
  • Développer à droite - augmentera la largeur de la cellule de grille actuelle en obtenant la largeur requise de son voisin de droite
  • Contrat de droite - contracte la largeur de la cellule de grille actuelle et augmente celle de sa voisine de droite

Notions de base: Utilisation de base de DMXzone Bootstrap Dans ce didacticiel, nous vous montrerons les fonctionnalités de base fournies dans DMXzone Bootstrap et comment l’utiliser. * Vous pouvez également regarder la vidéo.

Comment faire

  1. Nous allons créer une mise en page simple. Ouvrez le menu déroulant du panneau d’insertion (1) et sélectionnez Échafaudage Bootstrap (2).
  2. Vous pouvez voir les actions disponibles dans le menu Bootstrap Scaffolding. Vous pouvez ajouter, fusionner et supprimer des cellules, ajouter des conteneurs et des lignes. Vous pouvez également égaler la taille de toutes les cellules de la grille d'une même ligne, sélectionner n'importe quelle cellule et ouvrir l'inspecteur de propriétés correspondant.
  3. Nous devons d’abord ajouter un conteneur. Par défaut, le conteneur comprend une ligne avec une cellule de 12 colonnes.
  4. Vous pouvez sélectionner l'étiquette du conteneur en cliquant dessus (1) et modifier le type du conteneur dans l'inspecteur des propriétés (2). Nous allons utiliser le type de conteneur fixe pour ce tutoriel.

Remarque: Il existe deux types de conteneurs:



- Le conteneur fixe s’adapte à une largeur de 724px, 940px ou 1170px en fonction de la taille de la fenêtre.

- Fluid Container s’adapte à 100% de votre fenêtre. Il possède les mêmes capacités réactives que le système de grille fixe, garantissant des proportions correctes pour les résolutions d’écran et les périphériques clés.

  1. Vous pouvez attribuer un ID (1) au conteneur sélectionné si vous en avez besoin et ajouter des classes CSS supplémentaires au conteneur sélectionné (2). Nous laissons ce champ vide car nous n’avons besoin d’aucune classe supplémentaire.

……

  1. Ajoutez quelques liens de texte simples à l’intérieur de la cellule (1). Vous pouvez sélectionner la cellule en cliquant sur son étiquette (2). Les propriétés de la cellule sélectionnée apparaissent dans l'inspecteur des propriétés. Ici, vous pouvez attribuer un ID (3) à la cellule, ajouter, augmenter ou réduire le décalage (4) de la cellule sélectionnée, modifier la largeur de la cellule (5) et également affecter des classes CSS supplémentaires (6) à la cellule sélectionnée. .
  2. Nous alignons le contenu de la cellule au centre (1). Nous allons maintenant ajouter une autre ligne ci-dessous. Sélectionnez Ajouter une ligne ci-dessous (2)
  3. Nous modifions le contenu par défaut avec le nôtre. Cliquez sur la cellule de sélection (1) et centrez le contenu à l'aide du bouton Inspecteur de propriétés (2).

……

Notions de base: introduction aux bases de la disposition de la grille CSS de Bootstrap

Dans ce tutoriel, nous présenterons les bases de la mise en page Bootstrap CSS Grid. Vous pouvez créer trois blocs identiques contenant des en-têtes, du texte et des boutons dans Dreamweaver en quelques clics à l'aide de DMXzone Bootstrap *. Vous pouvez également visionner la vidéo.

Comment faire

  1. Pour les présentations fluides, la grille s’adapte à la fenêtre. Au-dessous de 767 pixels, les colonnes deviennent fluides et s’empilent verticalement. Nous allons maintenant créer une disposition de grille simple. Cliquez sur le menu Insérer (1) et sélectionnez l'élément de menu Bootstrap Scaffolding (2).
  2. Nous devons d’abord ajouter un conteneur et, pour ce faire, cliquer sur le conteneur à ajouter. Par défaut, le conteneur contient une ligne avec une cellule de 12 colonnes. Vous pouvez avoir autant de lignes que vous avez besoin dans un conteneur.
  3. Sélectionnez le type de conteneur - fluide ou fixe. Pour notre tutoriel, nous utilisons le fluide.
  4. Cliquez à l'intérieur de la cellule (1), sélectionnez le menu Insertion (2) et vous pouvez ajouter une nouvelle ligne au-dessus, au-dessous ou à l'intérieur de la cellule sélectionnée. Vous pouvez également ajouter plus de cellules.

  1. Nous faisons la même chose pour la troisième cellule. Nous avons maintenant 3 cellules ajoutées dans cette ligne et nous voulons leur donner une taille égale. Pour ce faire, cliquez sur le bouton de cellule étendue et les cellules auront la même taille.
  2. Nous allons maintenant ajouter une autre ligne contenant un nombre différent de cellules. Cliquez sur le bouton Insérer (1) et sélectionnez Ajouter une ligne ci-dessous (2).
  3. Voici la deuxième ligne que nous venons d'ajouter à l'intérieur de notre conteneur principal. Vous pouvez styliser votre page et la prévisualiser dans votre navigateur. Voici comment créer votre mise en page en grille en quelques minutes seulement.



Avancé: Modification des pages de démarrage Bootstrap dans Dreamweaver Ce didacticiel explique comment utiliser et modifier les pages de démarrage DMXzone Bootstrap intégrées à Dreamweaver. * Vous pouvez également regarder la vidéo.

Comment faire

  1. Dans ce didacticiel, nous allons modifier l’une des pages de démarrage fournies avec DMXzone Bootstrap. Pour l'ouvrir dans Dreamweaver, accédez au fichier (1) et sélectionnez le nouvel élément de menu (2).
  2. Sélectionnez une page dans l'exemple (1), Bootstrap (2) et choisissez le motif (3). Lorsque vous le choisissez, cliquez sur le bouton Créer.
  3. Vous pouvez prévisualiser la page de démarrage en mode Création.
  4. Il y a deux cellules avec un contenu en bas de la page. Vous pouvez modifier leurs propriétés à l'aide des outils de l'inspecteur de propriétés.

  1. Ajoutez une image du menu Insérer (1) pour la bannière de la page et modifiez le titre de la page par défaut (2). Vous pouvez également modifier les éléments de menu par défaut (3).
  2. Nous allons maintenant ajouter deux images dans les cellules situées sous la bannière principale. Nous supprimons le contenu de la cellule par défaut et insérons les images comme nous l'avons fait pour la bannière.
  3. >



51