Comment renvoyer le CSS depuis scss. Un guide du SASS pour les débutants absolus. Et maintenant tu peux faire ça
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ésLa 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 fichierDans 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. MarylandIl 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 inclusBootstrap 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 chargeStyles 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 CSSStyles pour éléments communs HTML : design, code, tableaux, formulaires et boutons. Comprend également des Glyphicons, un superbe jeu d'icônes.
ComposantsStyles de base pour les composants d'interface simples : onglets et boutons, barres de navigation, messages, en-têtes de page, etc.
Plugins JavascriptComme les composants, ces plugins Javascript sont des composants interactifs pour les info-bulles, les blocs d'informations, les composants modaux, etc.
Liste des composantsDans 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
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 :
Pour en faire un comme ça Modèle d'amorçage, attachez simplement le Fichiers CSS et JS :
Et tout est réglé !
En ajoutant ces deux fichiers, vous pouvez développer un site Web ou une application à l'aide de Bootstrap. La seconde moitié de l'article est déjà perçue plus simplement, là plus d'exemples
avec des captures d'écran. 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
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 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 russeLorsque 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çageQuoi 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 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. 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.
Par conséquent, 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 la même 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 même 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 :
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 petites, moyennes 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 ça.
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 BootstrapLe 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éactifsC'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 :
Eh bien, quelques exemples pour que ce soit clair :
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.
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 remplissage à gauche, 1/3 de largeur de bloc, ⅓ de remplissage à 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 utilisationJe 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 et d'y copier le code composant requis et, si nécessaire, modifiez-le à votre convenance. Mais je vais quand même donner ci-dessous quelques exemples d'utilisation des composants.
Flotteurs rapides et annulation de bouclageLes 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.
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é :
Équipement d'exercice
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 BootstrapDans 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 :
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 :
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 :