DIY Responsive Design Partie II: Conception avec Bootstrap

Dans la partie II de notre série DIY Responsive Design, nous allons vous montrer comment utiliser la grille CSS de Bootstrap pour créer des modèles de magasin réactifs. Bootstrap est un framework HTML, CSS et Javascript populaire pour le développement de sites réactifs, et est un endroit idéal pour commencer à créer vos pages pour plusieurs appareils.

Les modèles de magasin réactif ont tous Amorcer Grille CSS incluse dans leurs feuilles de style. Le Bootstrap site Internet contient des informations utiles sur le fonctionnement de la grille réactive de la bibliothèque et de nombreux exemples sur la façon de l’utiliser.

Pour simplifier, la grille Bootstrap divise les sites Web en une collection de douze lignes de colonnes. Les lignes Bootstrap définissent un groupe d’éléments de page qui apparaissent côte à côte sur la page. Les classes de colonnes Bootstrap décrivent le nombre de colonnes par ligne qu’un élément occupe sur des tailles d’écran spécifiques.

À partir de là, il devient une question de compréhension des noms de classe de colonne Bootstrap. Ceux-ci contiennent trois parties. Le premier «col» identifie le nom comme l’une des classes de colonne. Deuxièmement, les «xs», «sm», «md» et «lg» décrivent les tailles de fenêtre du navigateur auxquelles la classe répond.

  • xs = écrans de téléphone portable
  • sm = écrans de tablette
  • md = écrans de tablette plus grands et moniteurs d’ordinateur portable plus petits, généralement des écrans de 11 pouces à 13 pouces
  • lg = écrans de 15 pouces et plus.

Enfin, les nombres (1 à 12) représentent le nombre de colonnes dans une ligne qu’un élément doit occuper. Donc .col-sm-1 occupe une seule colonne sur une tablette où .col-md-6 prendra six colonnes sur un écran d’ordinateur portable.

Construire votre page

Il y a beaucoup de choses à faire pour créer une page bien structurée qui tient ensemble dans tous les navigateurs, et les conseils et astuces suivants sont destinés à vous aider à créer des mises en page réactives avec le moins de problèmes possible.

Utilisez l’éditeur de code

Pour de meilleurs résultats dans la création de pages responsives à l’aide de la plateforme Moyens I/O, nous vous encourageons à utiliser l’éditeur de code par opposition à l’éditeur visuel. L’utilisation de l’éditeur de code garantira qu’aucun style ou élément inutile ne sera ajouté à votre page pendant que vous y travaillez. Vous pouvez activer l’éditeur de code dans la plateforme Moyens I/O en cliquant sur le bouton dans la barre d’outils de la boîte d’édition.

En relation :  L'industrie de la musique a franchi une nouvelle étape vers un combat juridique avec Twitch

Ne copiez pas et ne collez pas le contenu d’un environnement de texte enrichi dans l’éditeur. Les environnements de texte enrichi, tels que Microsoft Word ou Adobe InDesign, sont des outils qui vous permettent de modifier la présentation du texte et des mises en page. La copie de texte à partir d’un environnement de texte enrichi tel que celui-ci peut inclure des informations de mise en forme susceptibles de provoquer des problèmes.

Il est recommandé d’utiliser un éditeur de texte tel que Atome ou Texte sublime pour écrire votre HTML et CSS lors de la création de pages. Ces éditeurs de texte proposent une coloration syntaxique et une collection de plugins pour vous aider à écrire votre code.

Utiliser les points d’arrêt Bootstrap

Comme indiqué précédemment, le contenu des modèles réactifs est inclus dans la grille réactive Bootstrap. Le contenu de votre modèle est encapsulé à l’aide de la classe de conteneur Bootstrap. La classe conteneur définit les largeurs en fonction du contenu de la page, garantissant que tout tient dans les écrans de divers appareils.

Nous vous recommandons d’utiliser CSS requête média règles qui correspondent à Bootstrap lors de la création de vos pages d’article. Aligner vos styles pour ajuster lorsque la grille Bootstrap s’ajuste aidera vos pages à mieux répondre à une variété de tailles d’écran.

Bootstrap définit quatre points de rupture qui représentent les tailles d’écran des téléphones, tablettes, ordinateurs portables et ordinateurs de bureau.

  • Téléphone (s: Tailles d’écran inférieures à 768 px de large
  • Comprimés: Tailles d’écran supérieures à 768 px de large mais inférieures à 992 px de large
  • Ordinateurs portables: Tailles d’écran supérieures à 992 pixels de large mais inférieures à 1 200 pixels de large
  • Moniteurs de bureau: Tailles d’écran supérieures à 1 200 px de large

Pour créer vos propres requêtes multimédias, décidez simplement de la taille d’écran que vous souhaitez cibler et créez une règle CSS pour cette taille d’écran. Par exemple, disons que vous vouliez cibler les téléphones:

@média uniquement écran et (max-width: 768px) {

/ * Vos règles CSS ici * /

.myArticleWrapper p {

taille de la police: 18px;

}

}

Conseil pro: Lorsque vous travaillez avec des requêtes multimédias, écrivez des règles CSS universelles pour les styles qui n’ont pas besoin de répondre à divers appareils et tailles d’écran, et n’utilisez que des règles d’interrogation multimédia pour modifier les styles qui doivent répondre aux appareils et aux tailles d’écran.

Séparez la structure de la présentation

Il est fortement recommandé d’utiliser la grille Bootstrap lors de la création de contenu pour votre modèle réactif. Cela dit, la grille Bootstrap fonctionne mieux si la largeur, les marges et les rembourrages définis sur les différents éléments de la grille ne sont pas modifiés. Cela signifie que vous devez créer des éléments qui s’enroulent autour des éléments de la grille Bootstrap ou se trouvent à l’intérieur des éléments de la grille qui ont leurs propres paramètres de largeur, de marge, de remplissage ou de bordure.

En relation :  Astuce rapide: authentification avec Twitter et Fabric

Une structure d’élément commune à suivre pourrait être:

Notez les classes div myArticleWrapper et myArticleContent. Utilisez ces éléments pour ajouter des bordures CSS, des arrière-plans, appliquer des marges et un remplissage supplémentaires ou d’autres styles structurels similaires. N’utilisez pas les éléments avec les classes Bootstrap (par exemple .row ou .col-sm-6.col-md-3). La raison derrière cela est due à la façon dont les navigateurs Web rendent les pages à l’aide du Modèle de boîte. La modification des marges, du remplissage ou de la largeur des éléments Bootstrap affectera la façon dont cette bibliothèque utilise le modèle de boîte pour créer une page réactive.

Cela conclut la partie Bootstrap de notre guide de conception réactive DIY. Dans le prochain et dernier article, nous partagerons les meilleures pratiques générales pour HTML et CSS.

Vous souhaitez que notre équipe conçoive un modèle ou une page responsive pour votre entreprise? Découvrez nos services de conception personnalisés et nos modèles premium!

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.