Apprentissage du bootstrap. Premiers pas avec Bootstrap. Sans utiliser MOINS

08.04.2019

2 voix

Bienvenue sur les pages du blog start-luck. La chance commence ici. Si vous essayez de créer un site Web de qualité et compétent aussi facilement que possible, mais que vous ne comprenez pas encore complètement les programmes, tous les termes et le code, alors cet article est pour vous.

Adaptatif Disposition d'amorçage– comment tout cela est-il interconnecté ? Pourquoi avez-vous besoin d’un framework, qu’est-ce que c’est, en quoi cela aide-t-il et facilite-t-il vraiment la vie ? Je vous expliquerai également comment utiliser le programme au maximum sans nuire au futur projet, et où le trouver bonnes leçons. Bon, on commence ?

Un peu sur Bootstrap

Je suppose que tous mes lecteurs ne comprennent pas bien ce qu'est un framework et ont déjà réussi à le télécharger et à le comprendre par eux-mêmes. Je vais commencer par des informations spécifiquement destinées à eux. Récemment, j'ai écrit sur la mise en page adaptative et j'ai appelé Bootstrap un programme. J'ai fait cela pour simplifier la perception, même si le cadre ne l'est pas du tout.

Il s'agit d'un ensemble d'applications, de scripts ou de plugins, pour ainsi dire, qui facilitent la création, formulaires spéciaux sur le site, carrousel d'images, affichage du site sur mobile ou non, etc.

Comme vous le savez probablement déjà, pour chacune de ces actions, le programmeur doit proposer et écrire du code. Si vous utilisez Bootstrap, vous n'êtes pas obligé de le faire. tu viens de prendre modèle prêt à l'emploi et changez-le comme vous le souhaitez. En conséquence, le temps de travail est considérablement réduit.

En plus d'accélérer, les priorités de ce framework incluent également la réduction des exigences pour le webmaster. Idéalement, le site est créé par une personne qui maîtrise très bien JavaScript et peut tout écrire elle-même. Si vous travaillez avec Bootstrap, vos connaissances ne seront peut-être pas aussi approfondies. Niveau de base sera largement suffisant.

Possibilités

Vous pouvez voir de quoi Bootstrap 3 est capable sur le site Web avec la documentation russe dans les sections CSS, JavaScript et composants. Après avoir cliqué sur l'onglet souhaité apparaît à droite menu pratique, ce qui permet d'accéder à bon endroit document.

Sur exemples spécifiques Cela montre à quoi ressemble la partie du code responsable d'une action particulière, ainsi que le résultat. Vous pouvez définir la visibilité du contenu pour tous les appareils mobiles. Les autorisations et autres paramètres ont déjà été complétés.

Le cours lui-même Pratique de A à Z"dure environ 17 heures. Pendant ce temps, vous acquérez des connaissances théoriques importantes, puis vous pratiquez comment utiliser correctement certains éléments : quels éléments supprimer du code, ce qui est nécessaire pour que le site fonctionne plus rapidement, de quoi il s'agit et bien plus encore.

Eh bien, encore un cours bonus, TOP 4 des modules complémentaires pour Bootstrap qui aideront le framework à fonctionner plus efficacement.

Eh bien, cela semble être tout. Abonnez-vous à la newsletter et apprenez-en davantage sur des solutions simples des tâches complexes et la bonne approche lorsque l'on travaille avec des produits qui ne sont pas tout à fait adaptés.

La seconde moitié de l'article est déjà perçue plus simplement, là plus d'exemples avec des captures d'écran.

Bootstrap - qu'est-ce que c'est ?

Commençons donc par une question importante. Bootstrap est un framework CSS et JS, essentiellement un ensemble de fichiers avec du code écrit prêt à l'emploi. L'objectif des développeurs de presque tous les frameworks est de simplifier le développement de sites Web pour eux-mêmes et pour les autres personnes qui auront accès à l'outil. Dans le cas de Bootstrap, il est totalement gratuit, vous pouvez donc l'utiliser de n'importe quelle manière, éditez code source et refaites le cadre à votre guise. C'est super.

Installation de Bootstrap

Si vous avez simplement besoin de connecter les fichiers du framework à un document HTML (par exemple, pour vous entraîner), téléchargez simplement le framework depuis le site officiel getbootstrap.com, copiez ses fichiers dans le projet et connectez ceux dont vous avez besoin. je vais le faire bref aperçu ces fichiers :

bootstrap.css et bootstrap.min.css - versions non compressées et compressées du code CSS du framework. Il est recommandé de se connecter au projet de travail fichier compressé, de cette façon, vous améliorerez légèrement votre vitesse de téléchargement. Mais si vous envisagez de visualiser le code dans un fichier, connectez la version non compressée.

bootstrap.js et bootstrap.min.js - fichier avec des scripts

le dossier des polices et les fichiers glyphicons qu'il contient sont la police d'icône Bootstrap. Il contient environ 200 icônes. Dans la plupart des cas, vous en aurez suffisamment, il faudra parfois en connecter d’autres. Nous parlerons de la police des icônes plus tard.

Ce ensemble standard cadre. En fait, vous pouvez facilement le personnaliser et le modifier à votre convenance. Par exemple, n'utilisez pas de scripts du tout ou ne connectez qu'une seule grille. En général, nous en parlerons aussi.

Documentation Bootstrap russe

Lorsque vous visitez getbootstrap, vous avez probablement remarqué que tout ici est en anglais. Nous pourrions utiliser l’aide russe sur le cadre. C'est facile à trouver. Pour ce faire, partez de page d'accueilà la section Mise en route. Faites défiler vers le bas, il y aura un lien vers les traductions. Recherchez le russe là-bas et cliquez dessus. C'est tout, maintenant c'est parti version russe site. Certes, tout n’a pas été traduit ici, mais environ 70 à 80 % de la traduction est exacte, vous comprendrez donc tout.

Grille d'amorçage

Quoi qu'on en dise, l'élément principal de Bootstrap est maillage adaptatif. En général, sans cela, le framework perdrait presque toute sa valeur, car grâce à la grille vous pouvez créer rapidement des modèles adaptatifs. En même temps, vous n’êtes peut-être pas du tout familier avec les requêtes multimédias ; vous n’en avez pas besoin, car le framework s’occupe de la mise en œuvre de l’adaptabilité, il vous suffit d’attribuer les classes appropriées aux blocs ;

Quels sont ces cours ? Passons à la documentation, cela nous aidera beaucoup. Accédez à la section CSS - Système de grille. Règles générales Travailler avec une grille est simple, je vais les lister maintenant.

Comment travailler avec une grille ?

Considérez-le comme un tableau HTML. Si vous avez déjà écrit du code HTML pour des tableaux, vous savez que tout le contenu est placé dans la balise table, une ligne est placée dans la balise tr, puis les cellules y sont placées - td .

Donc, tout est pareil dans la grille. La classe conteneur sert de conteneur général pour la grille. Il existe 2 options pour la grille d'amorçage : entièrement en caoutchouc et ayant toujours une valeur finie. largeur maximale. Alors, lorsqu'on lui confie la tâche bloc général conteneur de classe, le site aura une largeur maximale de 1170 pixels. Il ne s’étendra pas davantage. Naturellement, le contenu sera centré.

Si vous définissez la classe conteneur-fluide, le maillage sera entièrement en caoutchouc, c'est-à-dire qu'il n'y aura aucune restriction de taille. Par exemple, si une personne ouvre un site Web sur un écran de 1 920 pixels de large, elle le verra en pleine largeur.

En conséquence, la première chose lors du développement d'un site Web est de décider à quoi ressemblera le modèle - entièrement en caoutchouc, ou sa largeur doit encore être limitée.

Génial, le bloc conteneur doit contenir une rangée de grille. Vous devez y placer tous les blocs qui se trouvent sur une seule ligne. Autrement dit, si nous prenons le modèle le plus typique : en-tête, partie principale, colonne de droite et pied de page, alors il y a 3 colonnes. Le premier n’aura que l’en-tête, le second aura le contenu et la barre latérale et le dernier aura le pied de page. Le balisage d'un tel site ressemblerait à ceci :

Capuchon
Contenu... et barre latérale
Pied de page

Mais pour l'instant ceci balisage incorrect, parce qu'il n'y en a pas assez... quoi ? C'est vrai, les cellules ! Dans le cas de Bootstrap, elles sont également appelées colonnes. La grille bootstrap se compose de 12 colonnes. Il peut être intégré dans n'importe quel bloc de n'importe quelle largeur, au moins 1 200 pixels, au moins 100. Tout cela est dû au fait que la largeur des colonnes n'est pas spécifiée en pixels, mais en pourcentages.

Comment fonctionne ce système à 12 colonnes ?

Nous arrivons donc au point même question importante associés au cadre. Croyez-moi, si vous comprenez cela, tout le reste n’a aucun sens. L'essentiel est de comprendre comment fonctionne le réseau et comment y parvenir rapidement. mise en page adaptative sera ouvert pour vous.

Pour cela, faites défiler la documentation juste en dessous, vous y trouverez un tableau qui contient propriétés importantes grilles

À propos, les colonnes elles-mêmes sont marquées dans Bootstrap avec la classe col-, mais il s'agit d'une classe composite, donc elles n'écrivent jamais simplement col-. Bootstrap en a 4 classe spéciale, qui sont conçus pour contrôler la taille des blocs de différentes largeurs, les voici :

ld - pour les grands écrans, d'une largeur supérieure à 1 200 pixels (ordinateurs de bureau) ;

md - pour les écrans moyens, largeur de 992 à 1199 (ordinateurs, netbooks) ;

sm - pour les petits écrans, largeur de 768 à 991 pixels (tablettes) ;

xs : écrans extra-petits, largeur inférieure à 768 px.

Ce sont les 4 classes, mais pour contrôler la taille des éléments, des nombres de 1 à 12 sont utilisés, car, comme vous vous en souvenez, il y a exactement 12 colonnes dans la grille.

Capuchon

Contenu
Colonne latérale

Pied de page

C'est assez facile à comprendre. Tout d’abord, nous créons un en-tête ; il n’est pas du tout nécessaire de le placer dans la grille, puisqu’il occupera de toute façon 100 % de la largeur (généralement). Mais nous le mettrons quand même. Quelle est cette classe col-md-12 ? Comme je vous l'ai déjà dit, personne n'écrit simplement col-, avec cette classe nous disons essentiellement au navigateur :
C'est une cellule | colonne
Sur les appareils moyens (classe md), sa largeur doit être de 12 colonnes sur 12, soit 100 % de la largeur des lignes.
Mais qu’en est-il de la largeur sur les autres appareils ? Sur les grands écrans (LG), ce sera également 100%, car les valeurs des grands écrans sont héritées, mais pas celles des plus petits. C'est simple : si vous écriviez col-xs-4 , alors la largeur de colonne serait de 33 % sur tous les appareils, et si col-lg-4 , alors uniquement sur les plus grands. C'est la fonctionnalité, rappelez-vous-en.

Eh bien, si la valeur de largeur n’est pas enregistrée sur les écrans plus petits, que se passe-t-il ? Il est réinitialisé. Voici comment cela se passe :
col-sm-4 - sur les petits écrans le bloc occupera 33% de la largeur, ce sera la même chose sur les écrans md et lg, mais sur les xs, c'est-à-dire les plus petits, la largeur sera réinitialisée à 100%. Alors, rappelez-vous une autre règle simple : si rien n'est spécifié pour les écrans plus petits, le bloc sera affiché sur ceux-ci avec une largeur de 100 %.

Contenu
Colonne latérale

Essentiellement, nous disons au navigateur :
Laissez le bloc de contenu avoir une largeur de 8 colonnes sur 12 et cette situation sera sur les petits, moyens et grands écrans(il suffit de préciser pour les petits écrans ; pour les grands écrans, comme vous vous en souvenez, la valeur est héritée). Mais sur les plus petits écrans le bloc sera occupé à 100 %. C'est correct, généralement appareils mobiles les sites vont exactement dans 1 colonne.
Laissez la colonne latérale faire un tiers de la largeur de la ligne sur les mêmes écrans petit, moyen et grand. Eh bien, sur les plus petits, comme vous l'avez déjà compris, sa largeur est également réinitialisée à 100 %. C'est aussi simple que cela.

Eh bien, il n’y a rien à voir avec le pied de page. Bien, principes de base Nous avons réglé le fonctionnement de la grille, mais il reste encore à voir comment elle fonctionne...

Grille imbriquée Bootstrap

Le fait est que nous avons maintenant divisé le modèle uniquement en blocs principaux, mais à l'intérieur, ils peuvent également être divisés en colonnes. Par exemple, le contenu peut afficher les produits dans plusieurs colonnes. Que dois-je faire? C'est très simple : nous créons exactement la même grille à l'intérieur. Il sera imbriqué, mais contiendra également 12 colonnes. Si nous résumons tout cela, alors nous arrivons à cette conclusion :
Il peut y avoir un nombre illimité de grilles à l'intérieur d'un bloc. Par exemple, dans un bloc avec des produits, il y a une grille pour séparer les produits ; dans le bloc avec un produit lui-même, vous pouvez créer une autre grille, par exemple pour séparer les prix, les informations de disponibilité et les informations supplémentaires. information.

Nous allons maintenant essayer de créer une autre grille à l'intérieur du bloc de contenu pour organiser les produits en 3 colonnes. Prenons donc le bloc dans lequel nous avons du contenu :

Contenu

Et nous y écrivons :

Catalogue de produits :

Nom du produit

Description du produit

Comme vous pouvez le voir, nous avons créé une nouvelle grille à l'intérieur du contenu - nous mettons une ligne à l'intérieur, et dans la ligne il y aura déjà 3 blocs avec des produits. Copiez simplement le bloc col-sm-4 avec la fiche produit et collez-le encore 2 fois, voici ce que vous obtenez (vous pouvez prendre n'importe quelle photo du produit, j'en ai pris une grande) :

J'en ai raté un autre point important Pour que les images s'adaptent aux blocs dans lesquels elles se trouvent, chacune d'entre elles doit recevoir la classe img-responsive. Si, comme moi, vous pensez que cela n'est pas pratique, écrivez simplement dans votre propre style.css comme ceci :

Img (largeur maximale : 100 % ; hauteur : auto ; affichage : bloc ; )

Voilà, enregistrez ce code et connectez votre fichier CSS au projet. Désormais, les images seront adaptatives par défaut.

Eh bien, est-ce que ça s'est passé sans problème ? Oui, mais sans bootstrap, vous auriez à souffrir plus longtemps. La seule chose est que lors de la création d'une grille à l'intérieur d'un bloc, vous n'avez plus besoin de créer un bloc contenant la classe conteneur. Pourquoi n’est-ce pas nécessaire ? Oui, car le bloc dans lequel la grille est créée sert de conteneur.

Ainsi, vous pouvez créer autant de colonnes que vous le souhaitez dans n'importe quel bloc et créer un modèle de n'importe quelle complexité. Et tout cela est beaucoup plus rapide que sans Bootstrap, car vous devez écrire tous les CSS à partir de zéro.

Utilitaires réactifs

C'est une autre fonctionnalité intéressante du bootstrap. Cela consiste dans le fait que vous pouvez masquer ou rendre visibles n'importe quel bloc à la largeur dont vous avez besoin. Par exemple, masquez complètement la colonne latérale sur les écrans étroits, ajoutez de nouveaux éléments sur les appareils mobiles, ajoutez une colonne sur écrans larges etc.

Il existe de nombreuses options d'application, mais je ne vous ai pas parlé du plus important : comment utiliser ces utilitaires ? Pour ce faire, ajoutez simplement des classes le bloc souhaité. Si vous devez le masquer, spécifiez simplement la classe suivante :

Pied de page

Qu'y a-t-il dedans dans ce cas fera la classe Hidden-Xs ? Cela masquera le pied de page sur les très petits appareils. Sur tous les autres, le bloc sera visible.

Si, au contraire, vous devez l'afficher uniquement sur les plus petits écrans, vous devez utiliser la classe visible-xs-block. Dans ce cas, le bloc sera masqué sur tous les écrans, sauf les plus étroits. Ainsi, les classes d'utilitaires adaptatifs sont écrites comme ceci :

Le mot caché ou visible, selon ce dont vous avez besoin

Une abréviation de xs, sm, md ou lg indiquant sur quels écrans masquer ou afficher le bloc.

Pour visible, vous devez également ajouter l'une des trois valeurs suivantes : block - afficher l'élément en tant qu'élément de bloc, inline-block - en tant qu'élément de bloc en ligne, inline - en ligne.

Eh bien, quelques exemples pour que ce soit clair :

Hidden-xs Hidden-Lg - masquera l'élément sur les écrans les plus petits et les plus grands. Comme vous pouvez le constater, vous pouvez spécifier plusieurs classes séparées par un espace.

visible-xs-inline visible-md-block - sur les petits et grands écrans, l'élément ne sera pas affiché du tout. Sur les très petits, ce sera en minuscules, et sur les moyens, ce sera un bloc.

visible-lg-block - l'élément ne sera visible que sur les plus grands écrans, sur tous les autres il sera masqué

C'est ainsi que tout fonctionne. C'est exactement ça et pas d'autre moyen. J'espère que vous comprenez cela. Mettons-le en pratique. Nous avons un modèle de test, bien que très primitif.

Tâche : faire disparaître la colonne latérale sur les petits écrans, ainsi qu'un produit sur les plus petits écrans. Et pour que sur les appareils xs les produits soient déjà sur 2 colonnes, et non 3.

Essayez de le faire vous-même, en modifiant uniquement le code HTML. Que faut-il faire ? Tout d'abord, regardons la colonne, pour la masquer sur les écrans sm, il vous suffit d'y ajouter la classe Hidden-sm.

Génial, maintenant le troisième produit doit ajouter la classe Hidden-XS et elle disparaîtra sur les plus petits écrans. Eh bien, les classes des deux produits restants seront les suivantes :

Autrement dit, sur les appareils moyens, le bloc occupera 4 colonnes sur 12, ce qui peut être traduit en 33,33 % de la largeur, et sur les appareils très petits, 50 %. Et comme un bloc avec un produit disparaîtra à cette largeur, les deux blocs avec des produits seront soigneusement disposés sur 1 rangée, comme ceci :

Super! Ayant compris cela, vous pouvez déjà manipuler les blocs sur la page Web presque comme bon vous semble. Essayez de vous proposer des tâches et de les mettre en œuvre.

Déplace-moi jusqu'au bout

Ensuite, j'en montrerai 1 de plus très bon accueil— la possibilité de déplacer le bloc vers la droite ou la gauche. Disons que nous n'avons pas 3 produits d'affilée, mais 1. Et cela n'occupe pas toute la largeur. Et votre tâche est de l'aligner au centre. C'est facile à faire si vous gardez à l'esprit que vous travaillez avec un système à 12 colonnes.

Laissons un bloc avec le produit :

Il suffit de faire des calculs simples pour comprendre de combien il faut déplacer le bloc pour le centrer. Il doit être déplacé de 4 colonnes vers la gauche sur les écrans moyens et grands, et de 3 colonnes sur les petits. Voici à quoi cela ressemble :

La classe col-md-offset-4 dit : sur les écrans moyens et grands, décalez le bloc vers la gauche de 33% de la largeur du conteneur parent (1/3 de décalage à gauche, 1/3 de largeur de bloc, ⅓ de décalage à droite, entraînant un centrage).
Classe col-xs-offset-6 : sur les écrans très petits et petits, décalez vers la gauche de 25 % (¼ de remplissage à gauche, ½ largeur de bloc, ¼ de remplissage à droite).

J'espère que vous comprenez l'essentiel et que vous utiliserez ces cours si nécessaire.

Composants Bootstrap et exemples de leur utilisation

Je vous félicite. Nous venons d'aborder le sujet le plus important lié au framework. C'est la grille et son utilisation qui sont importantes. Travailler avec des composants signifie déjà qu'il suffit d'aller dans la documentation, d'y copier le code du composant souhaité et, si nécessaire, de le modifier en fonction de vos besoins. Mais je vais quand même donner ci-dessous quelques exemples d'utilisation des composants.

Flotteurs rapides et annulation de bouclage

Les classes pull-left et pull-right vous permettent de faire flotter rapidement n'importe quel bloc en l'envoyant vers la gauche ou la droite. N'oubliez pas d'annuler le flux. Vous pouvez utiliser la classe clearfix pour cela.

Bootstrap : menu horizontal réactif (mobile)

Nous ajouterons les composants suivants directement au modèle, donc si vous souhaitez travailler avec le code et pas seulement le lire, suivez toutes les étapes après moi.

En fait, avec Bootstrap, il est très facile de ne pas simplement menu réactif, et le soi-disant mobile, qui est complètement minimisé sur les petits écrans et se cache sous un seul bouton. Cette technique peut être vue dans de nombreux modèles adaptatifs et c'est en fait très facile à mettre en œuvre. Exemple de code menu mobile est dans la documentation, je vais le reprendre à partir de là et le refaire un peu.

Donc, la première chose que je ferai est de supprimer le bloc avec l'en-tête, car notre menu, en fait, sera l'en-tête dans le cas de mon modèle. Le code du menu doit être placé avant tout le contenu du site, même avant le bloc conteneur. Pourquoi? Oui, vous constaterez désormais par vous-même que la grille est déjà intégrée à la barre de navigation. Voici donc le code :

Bouton de commutation

Logo/nom

Recherche

Ne vous inquiétez pas du fait qu'il y a beaucoup de code. Voici à quoi ressemble le site maintenant :

Mais si votre menu n’occupe pas toute la largeur de l’écran, il est logique de le centrer. Pour ce faire, vous devez ensuite créer un bloc wrapper supplémentaire pour le menu, qui doit être placé après le bloc avec la classe conteneur-fluide. N'oubliez pas de fermer ce bloc. Je lui ai donné la classe navbar-wrap. Voici les styles correspondants :

Autrement dit, vous pouvez simplement limiter la largeur et la centrer. Ou remplacez initialement conteneur-fluide par conteneur .

Comme vous pouvez le voir, nous avons ajouté un logo, deux éléments simples, un élément déroulant et un formulaire de recherche au menu. Autrement dit, il y avait de nombreux éléments. Vous pouvez facilement personnaliser le menu vous-même en y ajoutant vos propres cours. Mais pour l'instant mon objectif est simplement de vous montrer ce composant.

Voici à quoi ressemblera le menu sur les appareils dont la largeur d'écran est inférieure à 768 pixels :

Comme vous pouvez le constater, le menu s'est réduit. Il s'ouvre lorsque vous cliquez sur le bouton à droite coin supérieur. Seul le logo est resté à l'écran.

Menu déroulant

En même temps, à partir de l'exemple ci-dessus, vous pouvez comprendre comment un élément de menu déroulant est créé dans Bootstrap ; extrayons ce code pour un aperçu plus détaillé :

Ainsi, le conteneur d'un élément déroulant est un élément de liste standard avec la classe déroulante. À l'intérieur se trouve le lien principal, en cliquant sur celui-ci, un menu déroulant s'ouvre. Il est très important de lui attribuer un attribut data, que vous voyez dans le code ; sans lui, rien ne fonctionnera. Vous devez également vous assurer que le fichier bootstrap.js est connecté aux pages Web.

Un span avec la classe caret n'est rien de plus qu'une flèche, grâce à laquelle vous pouvez comprendre que l'élément est un élément déroulant, et en dessous le menu lui-même est formé à l'aide de la norme liste à puces. Ça y est, tout est assez simple, vous pouvez utiliser ce code pour implémenter des éléments déroulants.

Ajout de fil d'Ariane (fil d'Ariane) à l'aide de Bootstrap

Dans de nombreux magasins, vous pouvez trouver ce qu'on appelle le bloc chapelure, qui contient chemin completà la page actuelle. C'est également facile à faire en utilisant le framework, voir le code :

Maison

Catalogue

Marchandises

En fait, il suffit de spécifier la classe du fil d'Ariane pour une liste numérotée et d'y entrer les éléments habituels de la liste. Au fait, je vais centrer les titres de deuxième niveau dans le modèle (cela doit être écrit en CSS) :

H2( alignement du texte : centre ; )

Si tu veux changer quelque chose apparence chapelure, utilisez simplement le sélecteur .breadcrumb en CSS. Par exemple, vous pouvez ainsi supprimer couleur de fond:

Fil d'Ariane (arrière-plan : transparent ; )

Voici à quoi ressemble le site maintenant :

Tableaux d'amorçage

Par défaut, le tableau s'étendra sur toute la fenêtre, alors enveloppez-le dans une boîte de largeur limitée pour limiter les dimensions. Par défaut, cela a l'air terrible, mais si vous ajoutez la classe table à la balise table, tout sera bien plus joli :

Notez que dans cette version, les cellules ont des bordures claires uniquement en bas ; si vous voulez des bordures sur les quatre côtés, vous devez ajouter une autre classe :

Si vous souhaitez rendre le tableau rayé, c'est-à-dire afin que les lignes aient une couleur d'arrière-plan alternée, ajoutez la classe table-striped. Pour mettre en évidence une couleur différente lorsque vous survolez une ligne du tableau, utilisez la classe table-hover.

En principe, ce sont toutes les possibilités des tableaux. J'ai déjà écrit un article séparé sur la façon de créer un tableau adaptatif, je ne le répéterai donc pas. La seule chose est que vous pouvez également ajouter des classes telles que info, succès, avertissement et autres aux lignes et cellules du tableau pour les peindre dans la couleur souhaitée.

Naturellement, vous pouvez facilement écrire vos propres classes dans style.css et les utiliser. C'est là que nous terminons avec les tableaux.

P.S. L'article sera ajouté et complété...

Conclusion

J'espère que l'article a été utile et que vous avez pu comprendre les choses les plus importantes. Vous pouvez poser toutes vos questions en utilisant les commentaires.

Les concepteurs de mise en page et les développeurs front-end disposent de blocs de code qu'ils utilisent dans chaque projet et pensent donc souvent à créer leur propre framework. Mais généralement, ils commencent à utiliser ceux qui existent déjà, par exemple le bootstrap.

Qu'est-ce que le bootstrap

Il s'agit d'un framework de trois langages HTML/CSS/JS. Grâce à l'excellente fonctionnalité, la mise en page d'un site Web devient facile et rapide, bien sûr, si vous comprenez tout.

Apparu dans les murs Gazouillement et s'appelait "Twitter Bootstrap". Mais comme ils voulaient se faire connaître dans le monde entier, ils ont dû abandonner le mot Twitter dans le nom. À mon avis expérience personnelle Le bootstrap présente de nombreux avantages :

Vitesse de mise en page — grand nombre les composants prêts à l'emploi permettent de ne pas s'attarder sur l'ordinaire.

Adaptabilité— la possibilité de personnaliser la taille des blocs du site Web en fonction de la largeur de l'appareil, aussi bien pour un ordinateur que pour un téléphone.

Popularité- c'est pourquoi il existe un grand nombre d'articles et de leçons, ainsi que des forums. Par conséquent, pour toute bagatelle dont vous doutez, vous pouvez trouver la réponse sur Internet ou poser une question sur le forum.

Bootstrap peut être utilisé pour créer des sites Web avec divers CMS— WordPress, Joomla, Opencart.

Comment installer le bootstrap

Il existe deux manières de le connecter :

Grâce au téléchargement de fichiers.

Formulaires

Nous avons également des styles pour le design :

boutons
boutons radio
champs de texte
cases à cocher

Dans le même temps, vous pouvez également spécifier la position horizontale ou verticale des éléments et des noms, ainsi que modifier la couleur du formulaire, avertissant ainsi l'utilisateur lorsqu'une erreur ou un avertissement se produit.

Tableaux

Pour créer un tableau aussi simple, vous devez y ajouter class = "table".

Lorsque nous examinerons de plus près comment concevoir des tables, vous pourrez :

Couleurs de colonnes alternatives

Mettre en surbrillance les colonnes au survol

Et aussi réaliser des tableaux personnalisés en fonction de l'extension

Boutons

Pour créer beaux boutons il vous suffit d'ajouter deux classes. À propos, le second est responsable de la couleur du bouton, vous pouvez donc créer une classe avec votre couleur et la connecter à la place de la classe standard.

Et voici leur conception.

Bouton Normal Excellent Info Remarque Alarme Lien

Éléments JavaScript

Bootstrap possède de nombreuses fonctionnalités liées à l'animation :

Réduire et maximiser les fenêtres
Apparition des fenêtres modales
Info-bulles
Création d'onglets
Curseur

Tout cela sera entre vos mains lorsque vous connecterez un fichier bootstrap.js

Conclusion

Et si vous en êtes arrivé à ce point, alors vous vous posez peut-être une question : « Avez-vous besoin de tout savoir ? composants d'amorçage?. Tout dépend de vos envies, généralement ils n'utilisent que la grille, mais chaque maquettiste devrait pouvoir tout utiliser. Personnellement, j'aime ça, simple, rapide, pratique.

Passez à la leçon suivante si vous êtes prêt à créer rapidement des sites Web.

La seconde moitié de l'article est déjà perçue plus simplement, il y a plus d'exemples avec des captures d'écran.

Bootstrap - qu'est-ce que c'est ?

Commençons donc par une question importante. Bootstrap est un framework CSS et JS, essentiellement un ensemble de fichiers avec du code écrit prêt à l'emploi. L'objectif des développeurs de presque tous les frameworks est de simplifier le développement de sites Web pour eux-mêmes et pour les autres personnes qui auront accès à l'outil. Dans le cas de Bootstrap, il est entièrement gratuit, vous pouvez donc l'utiliser comme vous le souhaitez, modifier le code source et personnaliser le framework comme bon vous semble. C'est super.

Installation de Bootstrap

bootstrap.css et bootstrap.min.css - versions non compressées et compressées du code CSS du framework. Il est recommandé d'inclure un fichier compressé avec votre projet de travail, de cette façon vous améliorerez légèrement la vitesse de chargement. Mais si vous envisagez de visualiser le code dans un fichier, connectez la version non compressée.

bootstrap.js et bootstrap.min.js - fichier avec des scripts

Il s’agit de l’ensemble standard du framework. En fait, vous pouvez facilement le personnaliser et le modifier à votre convenance. Par exemple, n'utilisez pas de scripts du tout ou ne connectez qu'une seule grille. En général, nous en parlerons aussi.

Documentation Bootstrap russe

Lorsque vous visitez getbootstrap, vous avez probablement remarqué que tout ici est en anglais. Nous pourrions utiliser l’aide russe sur le cadre. C'est facile à trouver. Pour ce faire, passez de la page principale à la section Mise en route. Faites défiler vers le bas, il y aura un lien vers les traductions. Recherchez le russe là-bas et cliquez dessus. Ça y est, vous êtes désormais sur la version russe du site. Certes, tout n’a pas été traduit ici, mais environ 70 à 80 % de la traduction est exacte, vous comprendrez donc tout.

Grille d'amorçage

Quoi qu'on en dise, l'élément principal de Bootstrap est la grille réactive. En général, sans cela, le framework perdrait presque toute sa valeur, car grâce à la grille vous pouvez créer rapidement des modèles adaptatifs. En même temps, vous n’êtes peut-être pas du tout familier avec les requêtes multimédias ; vous n’en avez pas besoin, car le framework se charge de mettre en œuvre l’adaptabilité ; il vous suffit d’attribuer les classes appropriées aux blocs.

Quels sont ces cours ? Passons à la documentation, cela nous aidera beaucoup. Accédez à la section CSS - Système de grille. Les règles générales pour travailler avec une grille sont simples ; je vais les énumérer maintenant.

Comment travailler avec une grille ?

Donc, tout est pareil dans la grille. La classe conteneur sert de conteneur général pour la grille. Il existe 2 options pour la grille bootstrap : entièrement en caoutchouc et ayant toujours une largeur maximale finie. Ainsi, lorsque le bloc général reçoit la classe conteneur, le site aura une largeur maximale de 1170 pixels. Il ne s’étendra pas davantage. Naturellement, le contenu sera centré.

En conséquence, la première chose lors du développement d'un site Web est de décider à quoi ressemblera le modèle - entièrement en caoutchouc, ou sa largeur doit encore être limitée.

Capuchon
Contenu... et barre latérale
Pied de page

Mais pour l'instant, ce n'est pas le bon balisage, car il manque... quoi ? C'est vrai, les cellules ! Dans le cas de Bootstrap, elles sont également appelées colonnes. La grille bootstrap se compose de 12 colonnes. Il peut être intégré dans n'importe quel bloc de n'importe quelle largeur, au moins 1 200 pixels, au moins 100. Tout cela est dû au fait que la largeur des colonnes n'est pas spécifiée en pixels, mais en pourcentages.

Comment fonctionne ce système à 12 colonnes ?

Nous arrivons donc à la question la plus importante liée au cadre. Croyez-moi, si vous comprenez cela, tout le reste n’a aucun sens. L'essentiel est de comprendre comment fonctionne la grille, et la voie vers une mise en page adaptative rapide vous sera ouverte.

Pour ce faire, faites défiler la documentation juste en dessous, vous y trouverez un tableau qui contient les propriétés importantes de la grille.

À propos, les colonnes elles-mêmes sont marquées dans Bootstrap avec la classe col-, mais il s'agit d'une classe composite, donc elles n'écrivent jamais simplement col-. Bootstrap dispose de 4 classes spéciales conçues pour contrôler la taille des blocs de différentes largeurs, les voici :

ld - pour les grands écrans, d'une largeur supérieure à 1 200 pixels (ordinateurs de bureau) ;

md - pour les écrans moyens, largeur de 992 à 1199 (ordinateurs, netbooks) ;

sm - pour les petits écrans, largeur de 768 à 991 pixels (tablettes) ;

xs : écrans extra-petits, largeur inférieure à 768 px.

Ce sont les 4 classes, mais pour contrôler la taille des éléments, des nombres de 1 à 12 sont utilisés, car, comme vous vous en souvenez, il y a exactement 12 colonnes dans la grille.

Capuchon

Contenu
Colonne latérale

Pied de page

Contenu
Colonne latérale

Essentiellement, nous disons au navigateur :
Laissez le bloc de contenu avoir une largeur de 8 colonnes sur 12 et cette situation sera sur les petits, moyens et grands écrans (il suffit de préciser pour les petits, pour les grands écrans, comme vous vous en souvenez, la valeur est héritée). Mais sur les plus petits écrans le bloc sera occupé à 100 %. C'est correct ; généralement, sur les appareils mobiles, les sites apparaissent dans 1 colonne.
Laissez la colonne latérale faire un tiers de la largeur de la ligne sur les mêmes écrans petit, moyen et grand. Eh bien, sur les plus petits, comme vous l'avez déjà compris, sa largeur est également réinitialisée à 100 %. C'est aussi simple que cela.

Eh bien, il n’y a rien à voir avec le pied de page. Eh bien, nous avons couvert les principes de base du fonctionnement de la grille, mais nous devons encore voir comment elle fonctionne...

Grille imbriquée Bootstrap

Nous allons maintenant essayer de créer une autre grille à l'intérieur du bloc de contenu pour organiser les produits en 3 colonnes. Prenons donc le bloc dans lequel nous avons du contenu :

Contenu

Et nous y écrivons :

Catalogue de produits :

Nom du produit

Description du produit

Comme vous pouvez le voir, nous avons créé une nouvelle grille à l'intérieur du contenu - nous mettons une ligne à l'intérieur, et dans la ligne il y aura déjà 3 blocs avec des produits. Copiez simplement le bloc col-sm-4 avec la fiche produit et collez-le encore 2 fois, voici ce que vous obtenez (vous pouvez prendre n'importe quelle photo du produit, j'en ai pris une grande) :

J'ai raté un autre point important : pour que les images s'adaptent aux blocs dans lesquels elles se trouvent, il faut attribuer à chacune d'elles la classe img-responsive. Si, comme moi, vous pensez que cela n'est pas pratique, écrivez simplement dans votre propre style.css comme ceci :

Img (largeur maximale : 100 % ; hauteur : auto ; affichage : bloc ; )

Voilà, enregistrez ce code et connectez votre fichier CSS au projet. Désormais, les images seront adaptatives par défaut.

Utilitaires réactifs

Il existe de nombreuses options d'application, mais je ne vous ai pas parlé du plus important : comment utiliser ces utilitaires ? Pour ce faire, ajoutez simplement des classes au bloc souhaité. Si vous devez le masquer, spécifiez simplement la classe suivante :

Pied de page

Que fera la classe Hidden-Xs dans ce cas ? Cela masquera le pied de page sur les très petits appareils. Sur tous les autres, le bloc sera visible.

Le mot caché ou visible, selon ce dont vous avez besoin

Une abréviation de xs, sm, md ou lg indiquant sur quels écrans masquer ou afficher le bloc.

Eh bien, quelques exemples pour que ce soit clair :

Hidden-xs Hidden-Lg - masquera l'élément sur les écrans les plus petits et les plus grands. Comme vous pouvez le constater, vous pouvez spécifier plusieurs classes séparées par un espace.

visible-xs-inline visible-md-block - sur les petits et grands écrans, l'élément ne sera pas affiché du tout. Sur les très petits, ce sera en minuscules, et sur les moyens, ce sera un bloc.

visible-lg-block - l'élément ne sera visible que sur les plus grands écrans, sur tous les autres il sera masqué

C'est ainsi que tout fonctionne. C'est exactement ça et pas d'autre moyen. J'espère que vous comprenez cela. Mettons-le en pratique. Nous avons un modèle de test, bien que très primitif.

Génial, maintenant le troisième produit doit ajouter la classe Hidden-XS et elle disparaîtra sur les plus petits écrans. Eh bien, les classes des deux produits restants seront les suivantes :

Déplace-moi jusqu'au bout

Ensuite, je vais vous montrer une autre très bonne astuce : la possibilité de déplacer un bloc vers la droite ou la gauche. Disons que nous n'avons pas 3 produits d'affilée, mais 1. Et cela n'occupe pas toute la largeur. Et votre tâche est de l'aligner au centre. C'est facile à faire si vous gardez à l'esprit que vous travaillez avec un système à 12 colonnes.

Laissons un bloc avec le produit :

J'espère que vous comprenez l'essentiel et que vous utiliserez ces cours si nécessaire.

Composants Bootstrap et exemples de leur utilisation

Flotteurs rapides et annulation de bouclage

Bootstrap : menu horizontal réactif (mobile)

Nous ajouterons les composants suivants directement au modèle, donc si vous souhaitez travailler avec le code et pas seulement le lire, suivez toutes les étapes après moi.

En fait, avec Bootstrap, vous pouvez très facilement créer non seulement un menu adaptatif, mais aussi un menu dit mobile, qui est complètement réduit sur les petits écrans et caché sous un seul bouton. Cette technique est visible dans de nombreux modèles réactifs et est en fait très simple à mettre en œuvre. L'exemple de code de menu mobile est dans la documentation, je vais le reprendre à partir de là et le refaire un peu.

Bouton de commutation

Logo/nom

Recherche

Voici à quoi ressemblera le menu sur les appareils dont la largeur d'écran est inférieure à 768 pixels :

Comme vous pouvez le constater, le menu s'est réduit. Il s'ouvre lorsque vous cliquez sur le bouton dans le coin supérieur droit. Seul le logo est resté à l'écran.

Menu déroulant

En même temps, à partir de l'exemple ci-dessus, vous pouvez comprendre comment un élément de menu déroulant est créé dans Bootstrap ; extrayons ce code pour un aperçu plus détaillé :

Un span avec la classe caret n'est rien de plus qu'une flèche, grâce à laquelle vous pouvez comprendre que l'élément est un élément déroulant, et en dessous le menu lui-même est formé à l'aide d'une liste à puces standard. Ça y est, tout est assez simple, vous pouvez utiliser ce code pour implémenter des éléments déroulants.

Ajout de fil d'Ariane (fil d'Ariane) à l'aide de Bootstrap

Dans de nombreux magasins, vous pouvez trouver ce qu'on appelle un bloc de chapelure, qui contient le chemin complet vers la page actuelle. C'est également facile à faire en utilisant le framework, voir le code :

Maison

Catalogue

Marchandises

H2( alignement du texte : centre ; )

Si vous souhaitez modifier d'une manière ou d'une autre l'apparence du fil d'Ariane, utilisez simplement le sélecteur .breadcrumb en CSS. Par exemple, voici comment supprimer la couleur d’arrière-plan :

Fil d'Ariane (arrière-plan : transparent ; )

Voici à quoi ressemble le site maintenant :

Tableaux d'amorçage

Notez que dans cette version, les cellules ont des bordures claires uniquement en bas ; si vous voulez des bordures sur les quatre côtés, vous devez ajouter une autre classe :

Naturellement, vous pouvez facilement écrire vos propres classes dans style.css et les utiliser. C'est là que nous terminons avec les tableaux.

P.S. L'article sera ajouté et complété...

Conclusion

J'espère que l'article a été utile et que vous avez pu comprendre les choses les plus importantes. Vous pouvez poser toutes vos questions en utilisant les commentaires.

Avant de télécharger, assurez-vous de disposer d'un éditeur de code (nous recommandons Sublime Text 3) et de quelques connaissances en HTML et CSS. Nous n'aborderons pas ici fichiers sources, mais vous pouvez toujours les télécharger et les étudier vous-même. Nous concentrerons notre attention sur la prise en main des fichiers Bootstrap compilés.

Chargement des fichiers compilés

La plupart moyen rapide Commencez : obtenez des versions compilées et minifiées de nos CSS, JS et images. Aucun document ni fichier source.

2. Structure du fichier

Dans les fichiers téléchargés, vous trouverez structure suivante et contenus regroupés logiquement par propriétés générales et contenant les deux versions : minifiée et compilée.

Après le téléchargement, décompressez dossier compressé pour voir la structure de Bootstrap (compilé). Cela devrait ressembler à ceci :

bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min. css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min. js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halfelins - blanc . png L-- LISEZMOI. Maryland

Il s'agit de la forme de base de Bootstrap : des fichiers compilés pour un traitement rapide et efficace. facile à utiliser dans presque tous les projets Web. Nous vous fournissons du CSS et du JS compilés (bootstrap.*), ainsi que du CSS et du JS compilés et minifiés (bootstrap.min.*). Les fichiers image sont compressés à l'aide d'ImageOptim, Applications Mac pour compresser des images en PNG.

Veuillez noter que tous les plugins JavaScript nécessitent jQuery.

3. Ce qui est inclus

Bootstrap est équipé de HTML, CSS et JS pour toutes sortes de travaux, ils sont tous répertoriés dans des catégories que vous pouvez retrouver en haut de la page.

Sections du document Éléments pris en charge

Styles de corps généraux pour réinitialiser le type et l'arrière-plan, les styles de liens, la grille de modèles et deux éléments simples marquages.

Styles CSS

Styles pour éléments communs HTML : design, code, tableaux, formulaires et boutons. Comprend également des Glyphicons, un superbe jeu d'icônes.

Composants

Styles de base pour les composants d'interface simples : onglets et boutons, barres de navigation, messages, en-têtes de page, etc.

Plugins Javascript

Comme les composants, ces plugins Javascript sont des composants interactifs pour les info-bulles, les blocs d'informations, les composants modaux, etc.

Liste des composants

Dans l'ensemble, les composants et plugins Javascript contiennent les éléments suivants interface:

Groupes de boutons
Listes de boutons déroulants
Onglets, boutons et listes de navigation
Barre de navigation
Raccourcis
Insignes
En-têtes de page et élément héros
Miniatures
Messages
Indicateurs de processus
Éléments modaux
Listes déroulantes
Info-bulles
Blocs d'informations
Élément "Accordéon"
Élément de carrousel
Saisie au clavier en avance

4. De base Modèle HTML

Après une brève introduction, nous nous concentrerons sur en utilisant Bootstrap. Pour ce faire, nous utiliserons un modèle HTML de base qui inclut tous les éléments répertoriés dans .

Voilà à quoi ça ressemble fichier typique HTML :

Modèle d'amorçage 101

Bonjour le monde!

Pour en faire un comme ça Modèle d'amorçage, attachez simplement le Fichiers CSS et JS :

Modèle d'amorçage 101

Bonjour le monde!

Et tout est réglé !

Des questions ?

Nom

E-mail *

Message *

Signaler une faute de frappe

Texte qui sera envoyé à nos rédacteurs :

Votre commentaire (facultatif) :

Envoyer