ce que vous pouvez l'utiliser de quelque manière que ce soit, modifiez le code source et comment redonner le cadre pour vous-même. C'est parfaitement.
Installation de bootstrap
Je ne cesserai pas en détail sur ce sujet, car j'ai déjà écrit un article distinct sur l'installation --. L'installation sur WordPress est décrite. Si vous devez simplement connecter les fichiers-cadres au document HTML (par exemple, pour la pratique), téléchargez simplement le cadre à partir du site officiel GetBootstrap.com, copiez ses fichiers sur le projet et connectez ceux dont vous avez besoin. Faire bref examen Ces fichiers:
- bootstrap.css et bootstrap.min.css - Version non compressée et compressée du code CSS du cadre. Au projet de travail, il est recommandé de se connecter fichier compresséVous pouvez donc améliorer la vitesse de téléchargement. Mais si vous envisagez de regarder le code dans le fichier, connectez la version non compressée.
- bootstrap.js and bootstrap.min.js - fichier avec scripts
- les fichiers de polices de polices et de glyphicons en informatique sont la police bootstrap. Il a environ 200 icônes. Pour la plupart des cas, vous serez assez pour eux, parfois, la connexion d'autres est requise. Nous parlons toujours de la police d'iconing.
Ceci est un ensemble de cadre standard. En fait, vous pouvez facilement le personnaliser et le changer. Par exemple, n'utilisez pas de scripts du tout ou n'utilisez pas un maillage seul. En général, nous en parlerons également.
Documentation russe Bootstrap
Continuer getbootstrap Vous avez probablement remarqué que tout est en anglais. Nous utiliserions également la référence russe sur le cadre. Facile à trouver. Pour faire cela, aller avec page d'accueil Dans la section Commencer.. À travers le fond, il y aura un lien avec les transferts. Recherchez le russe et cliquez dessus. Tout, vous êtes maintenant sur la version russe de la langue du site. Vrai, tous traduits ici, mais quelque part 70-80% exactement, alors tout le monde va le comprendre.
Bootstrap de maille
Peu importe la fraîcheur et l'élément principal de Bootstrap est une grille adaptative. En général, sans cela, le cadre aurait perdu presque toute sa valeur, car il est grâce à la grille que vous pouvez rapidement créer des motifs adaptatifs. Dans le même temps, vous ne pouvez pas le familier avec des demandes de média, ils n'en ont pas besoin, car le cadre prend la mise en œuvre de l'adaptabilité, il vous suffit de définir les bonnes classes à bloquer.
Quelles sont ces cours? Nous allons à la documentation, cela nous aidera grandement. Aller à la section CSS - Système de grille. Règles générales Travailler avec la grille est simple, maintenant les énumérer.
Comment travailler avec une grille?
Imaginez-le comme une table HTML. Si vous avez déjà écrit un code HTML pour les tables, vous savez que tous les contenus sont placés dans la balise de table, une ligne est placée dans la balise TR et les cellules sont déjà placées dessus - TD.
Donc, dans la grille de la même manière. La classe de conteneurs sert de conteneur de grille commun. Il existe 2 variantes de la grille de bootstrap - complètement en caoutchouc et ayant une largeur maximale finie. Ainsi, lors de la spécification d'un bloc commun de conteneur de classe, le site aura une largeur maximale de 1170 pixels. Cela n'élargra plus. Naturellement, le contenu sera centré.
Si vous définissez la classe de fluide conteneur, la grille sera complètement caoutchouc, c'est-à-dire que la taille ne sera pas de restriction. Par exemple, si une personne opère un site Web sur un moniteur de largeur de pixel de 1920, il le verra sur toute la largeur.
En conséquence, la première chose dans le développement du site, vous devez déterminer ce que le gabarit sera complètement caoutchouc, ou sa largeur doit encore être limitée.
Excellente, une série de grilles doit être placée dans le bloc de conteneurs. Il doit être placé sur tous les blocs qui se tiennent d'une rangée. C'est-à-dire que si nous prenons le modèle le plus typique: CAP, la partie principale, la colonne à droite et le pied de page, il y a 3 colonnes. Dans la première, il n'y aura qu'un chapeau, dans la deuxième teneur et la colonne latérale, et dans la dernière - le pied de page. Le marquage pour un tel site sera approximativement comme suit:
Mais alors que c'est faux marge, car il n'y a pas assez ... Quoi? Droite, cellules! Dans le cas de Bootstrap, ils sont également appelés haut-parleurs. La grille de bootstrap se compose de 12 colonnes. Il peut être introduit dans n'importe quel bloc de toute largeur, au moins 1200 pixels, au moins 100. Tout cela est que la largeur des colonnes n'est pas définie en pixels, mais en pourcentage.
Comment fonctionne ce système de 12 colonnes?
Nous avons donc abordé la question la plus importante associée au cadre. Croyez-moi si vous le comprenez, tout le reste est déjà absurde. La principale chose est de comprendre comment fonctionne la grille et le chemin d'une disposition adaptative rapide sera ouvert pour vous.
Pour ce faire, faites défiler la documentation juste ci-dessous, vous trouverez une table dans laquelle les propriétés importantes de la grille sont contenues.
Au fait, les colonnes elles-mêmes sont marquées dans la classe de bootstrap, mais il s'agit d'une classe intégrale, donc simplement coller sans écrire. Bootstrap possède 4 classes spéciales conçues pour contrôler les tailles de blocs sur différentes largeurs, ce sont ici:
- lD - pour les grands écrans, largeur de plus de 1 200 pixels (ordinateurs de bureau);
- mD - pour les écrans intermédiaires, largeur de 992 à 1199 (ordinateurs, netbooks);
- sM - pour petits écrans, largeur de 768 à 991 pixels (comprimés);
- xS - Écrans extra-petits, largeur inférieure à 768px.
Voici 4 classes, eh bien et pour contrôler la taille des éléments, les numéros sont utilisés de 1 à 12, car, comme souvenez-vous, les colonnes de la grille sont de 12.
Il est facile de le comprendre. Tout d'abord, nous créons une casquette, il ne peut pas être placé dans la grille, car il faudra une largeur de 100% dans tous les cas (généralement). Mais nous mettons encore. Quelle est cette classe COL-MD-12? Comme je vous l'ai déjà dit, tout simplement chat - personne n'écrit, nous en informons en fait que nous informons le navigateur:
Ceci est une cellule | colonne
Sur des périphériques moyens (classe MD), sa largeur doit être de 12 colonnes de 12, soit 100% de la largeur de la rangée (rangée).
Eh bien, quoi avec une largeur sur d'autres appareils? Sur de grands écrans (LG), il sera également à 100%, car les valeurs des grands écrans sont héritées, mais pas pour de plus petites. Tout est simple: si vous écrivez COL-XS-4, la largeur de la colonne serait de 33% sur tous les périphériques et si Col-LG-4, alors uniquement en grand. Voici une telle caractéristique, rappelez-vous.
Eh bien, si la valeur de largeur n'est pas enregistrée sur des écrans plus petits, que se passe-t-il? C'est réinitialisé. C'est comme ça que ça se passe:
Col-SM-4 - Sur les petits écrans, le bloc occupera 33% de largeur, il se fera sur des écrans MD et LG, mais sur XS, c'est-à-dire la plus petite largeur pour tomber jusqu'à 100%. Donc, rappelez-vous une autre règle simple: si rien n'est spécifié pour les écrans plus petits, l'appareil sera affiché à 100% de largeur.
En fait, nous spécifions le navigateur:
Laissez le bloc de contenu d'une largeur de 8 des 12 haut-parleurs et cette situation sera sur les petits, les écrans de taille moyenne et de grands (spécifier simplement pour les petits écrans, comme vous vous en souvenez, la valeur est héritée). Mais sur les plus jeunes écrans, le bloc fera 100%. C'est vrai, généralement sur appareils mobilesles sites AH vont dans exactement 1 colonne.
Laissez la colonne latérale d'une troisième largeur d'une rangée sur tous les mêmes petits, grands et grands écrans. Eh bien, sur le plus petit, comme vous l'avez déjà compris, sa largeur est également réinitialisée à 100%. C'est ça simple.
Eh bien, avec un pied de page et il n'y a rien à comprendre. Bien, principes de base Nous désassemblons la grille fonctionne, mais vous avez toujours besoin de voir comment ...
Bootstrap de maille imbriquée
Le fait est que maintenant nous avons cassé le modèle uniquement sur les blocs principaux, mais ils peuvent également être divisés en colonnes à l'intérieur. Par exemple, dans le contenu peut être émis dans plusieurs colonnes. Comment être? Très simple - nous créons à l'intérieur exactement la même grille. Il sera intégré, mais contient également 12 colonnes. Si tout cela est généralisé, alors nous arrivons à quelle conclusion:
À l'intérieur de tout bloc, il peut y avoir une quantité illimitée de grilles. Par exemple, dans un bloc avec des marchandises, une grille pour la séparation de marchandises, dans le bloc avec un seul produit, vous pouvez créer une autre grille, par exemple, pour la séparation du prix, la disponibilité de la disponibilité et des autres. informations.
Nous allons maintenant essayer de faire un autre maillage à l'intérieur du bloc avec du contenu pour organiser dans 3 produits de haut-parleurs. Nous prenons donc l'unité dans laquelle nous avons du contenu:
Et écrivez-y:
Nom du produit
Description du produit
Comme vous pouvez le constater, nous avons créé à l'intérieur du contenu nouvelle grille - Investit dans une rangée et, dans la rangée, il y aura déjà 3 blocs avec des biens. Il suffit de copier le bloc Col-SM-4 avec une carte de produit et insérez-le 2 de plus, il s'avérera que (un produit du produit peut être pris n'importe où, j'ai pris beaucoup):
J'ai raté un autre point important de sorte que les images adaptées aux blocs dans lesquelles vous devez définir la classe IMG-Responsive. Si vous, comme moi, vous pensez qu'il est inconfortable, écrivez simplement dans votre propre style.CSS alors:
Img (max-largeur: 100%; hauteur: auto; affichage: bloc;)
Toutes, enregistrez ce code et branchez votre fichier CSS dans le projet. Maintenant, les images seront adaptatives par défaut.
Eh bien, très probablement, il s'est avéré? Oui, et sans bootstrap, vous devriez souffrir plus longtemps. Le seul lors de la création d'une grille à l'intérieur de tout bloc n'est plus nécessaire de créer un bloc avec une classe de conteneur. Pourquoi n'est-ce pas nécessaire? Oui, car le bloc dans lequel la grille est créée et sert de conteneur.
Ainsi, vous pouvez créer en tant que colonnes désireuses dans n'importe quel bloc et faire un modèle de toute complexité. Et tout cela est beaucoup plus rapide que sans bootstrap, car tous les CSS que vous devez écrire à partir de zéro.
Utilitaires réactifs
C'est une autre possibilité merveilleuse de bateaux de bateau. C'est que vous pouvez masquer ou rendre visible tous les blocs sur la largeur dont vous avez besoin. Par exemple, pour masquer complètement la colonne latérale sur des écrans étroits, ajoutez de nouveaux éléments sur des appareils mobiles, ajoutez une colonne sur des écrans larges, etc.
Il y a beaucoup d'options d'application, mais je ne vous ai pas dit de la chose la plus importante, comment utiliser ces utilitaires? Pour ce faire, il suffit d'ajouter des classes le bloc souhaité. Si vous avez besoin de le cacher, il suffit de spécifier cette classe:
Que fera la classe cachée-xs dans ce cas? Il va cacher un pied de page sur des appareils extra-petits. Sur tous les autres blocs seront visibles.
Si vous devez le disperser uniquement sur les plus jeunes écrans, vous devez utiliser la classe Visible-XS-Block. Dans ce cas, le bloc sera caché sur tous les écrans, à l'exception du très étroit. Ainsi, les classes d'utilitaires adaptatifs sont prescrites comme suit:
- Mot caché ou visible, en fonction de ce dont vous avez besoin
- Réduction XS, SM, MD ou LG, indiquant quelles écrans pour masquer ou afficher un bloc.
- Pour visible, vous devez également ajouter l'une des trois valeurs suivantes: Bloc - Affichez l'élément sous forme de bloc, en ligne-Block - en tant que bloc droit, ligne en ligne.
Eh bien, quelques exemples pour qu'il soit clair:
- hidden-Xs caché-lg - plaques de cuisson de la table sur les plus petits et grands écrans. Comme vous pouvez le constater, vous pouvez spécifier plusieurs classes à travers l'espace.
- visible-XS-Inline Visible-MD-Block - sur de petits et grands écrans, il ne sera pas affiché du tout. Sur extra-petit, il sera plat, mais sur le milieu du milieu.
- visible-LG-Block - L'élément ne sera visible que sur les plus grands écrans, tous les autres seront cachés
C'est comme ça que tout fonctionne. C'est exactement comment autrement. J'espère que vous avez compris cela. Fixons dans la pratique. Nous avons un modèle de test, bien que très primitif.
Une tâche: Faites de sorte que la colonne latérale disparaisse sur les petits écrans et sur le plus petit même un produit. Et de sorte que sur les appareils XS, les marchandises étaient déjà dans 2 colonnes et non dans 3.
Essayez de le faire vous-même, modifiant uniquement le code HTML. Qu'avez-vous besoin de faire? Premièrement, nous allons traiter de la colonne pour le cacher sur les écrans SM, il suffit de ajouter sa classe cachée-SM.
Excellent, le troisième produit doit maintenant ajouter la classe Hidden-XS et disparaîtra sur les plus petits écrans. Eh bien, les classes des deux produits restants seront telles:
C'est-à-dire que sur des périphériques moyens, le bloc occupera 4 colonnes de 12, qui peuvent être traduites à 33,33% de largeur et sur un supplément de 50%. Et comme un pâté de maisons avec les marchandises disparaîtra sur cette largeur, les deux blocs avec des marchandises se positionnent parfaitement en 1 rangée, comme ceci: 
Excellent! En utilisant ceci, vous pouvez déjà manipuler des blocs sur la page Web pratiquement à votre guise. Essayez de trouver des tâches avec vous-même et de les mettre en œuvre.
Glisser moi complètement
Plus loin je vais montrer un autre autre très bonne réception - Possibilité de déplacer le bloc à droite ou à gauche. Supposons que nous n'avions aucun produit dans une série, et 1. Et cela prend loin de toute la largeur. Et votre tâche est de l'aligner au centre. Il est facile de faire si vous gardez à l'esprit que vous travaillez avec un système de 12 colonnes.
Laissons un bloc avec une marchandise:
Il suffit de faire des calculs simples pour comprendre à quel point le bloc doit être modifié pour cent. Il doit être déplacé vers 4 colonnes à gauche sur des écrans moyens et grands, et sur 3 colonnes sur les petites. Cela ressemble à:
La classe Col-MD-Offset-4 dit: sur des écrans de taille moyenne et de gros, faites glisser l'unité laissée de 33% de la largeur du conteneur parent (1/3 de la retraite à gauche, 1/3 de la largeur du bloc, ⅓ La retraite à droite, le centrage est obtenu).
Classe Col-XS-Offset-6: sur des écrans extra-petits et petits, glissez vers la gauche de 25% (¼ de retraite à gauche, ½ largeur de bloc, ¼ de retraite à droite).
J'espère que vous comprenez l'essence et, si nécessaire, appliquez ces classes.
Composants de bootstrap et exemples de leur utilisation
Je vous félicite. Nous avons juste passé le sujet le plus important associé au cadre. C'est une grille et travaille avec elle important. Travailler avec les composants est déjà le fait que vous passez simplement à la documentation, copiez le code du composant souhaité et, si nécessaire, changez-vous à vous-même. Mais je vais toujours donner quelques exemples d'utiliser des composants.
Flotteurs rapides et annulation
Les classes à gauche et à gauche vous permettent de faire rapidement un bloc flottant, envoyez-le à gauche ou à droite. N'oubliez pas l'annulation du flux. Pour ce faire, vous pouvez utiliser la classe Clearfix.
Bootstrap: menu Horizontal Adaptive (Mobile)
Nous ajouterons les composants suivants directement au modèle, donc s'il existe un désir de travailler avec le code et non seulement de lire, faites toutes les actions pour moi.
En réalité, le bootstrap est très facile à ne pas être effectué non seulement d'un menu adaptatif, mais le soi-disant mobile, qui est entièrement plié sur les petits écrans et se cache sous un seul bouton. Cette technique peut être observée dans de nombreux modèles adaptatifs et la mise en œuvre est en fait très facile. Le code du menu mobile est dans la documentation, je vais le prendre à partir de là et légèrement refaire.
Donc, tout d'abord, je supprime un bloc avec une casquette, car notre menu est en fait et ce sera un chapeau dans le cas de mon modèle. Le code de menu doit être placé devant tout le contenu du site, même avant l'unité de conteneur. Pourquoi? Oui, vous verrez maintenant que la grille est déjà intégrée au panneau de navigation. Donc, voici le code:
Qu'est-ce que beaucoup de codes, n'ayez pas peur. C'est comme ça que ressemble au site: 
Mais si vous n'avez aucune largeur de l'écran, il est logique de clarifier. Pour ce faire, vous devez créer une enveloppe de bloc optionnel pour un menu placé après le bloc avec la classe de fluide conteneur. N'oubliez pas de fermer ce bloc. Je lui ai donné une classe Navbar-Wrap. Ce sont des styles pour lui:
Comme vous pouvez le constater, dans le menu, nous avons ajouté un logo, deux articles simples abandonnés, le formulaire de recherche. C'est-à-dire qu'il s'est avéré beaucoup d'articles. Vous pouvez facilement personnaliser le menu en lui ajoutant vos cours. Mais maintenant, mon objectif est de vous montrer ce composant.
Donc, le menu examinera les périphériques avec une largeur d'écran inférieure à 768 pixels: 
Comme vous pouvez le constater, le menu recourbé. Il est décrit en cliquant sur le bouton dans le coin supérieur droit. Seul le logo reste à l'écran.
Menu déroulant
Dans le même temps, à partir de l'exemple ci-dessus, vous pouvez comprendre comment l'élément de menu déroulant est effectué dans le bootstrap, nous résisterons à ce code pour une considération plus détaillée:
Simulateurs
Donc, le conteneur pour l'élément déroulant est la liste habituelle de la liste avec la classe déroulante. À l'intérieur, il se trouve le lien principal, le clic sur lequel révèle le menu déroulant. Il est très important de l'enregistrer attribut aux donnéesCe que vous voyez dans le code, rien ne fonctionnera sans elle. Vous devez également vous assurer que le fichier bootstrap.js est connecté aux pages Web.
Span avec Caret Class n'est rien de plus qu'un tireur, grâce à laquelle il peut être compris que l'objet déroulant, mais le menu lui-même est formé ci-dessous à l'aide d'une liste marquée standard. Ainsi, tout est assez simple, vous pouvez appliquer ce code pour mettre en œuvre des points déroulants.
Ajoutez des miettes de pain avec une bootstrap (chaîne de navigation)
Dans de nombreux magasins, vous pouvez trouver le refuge Bloc Chrumm, qui contient le chemin complet de la page en cours. En utilisant le cadre, il est également facile à faire, voir le code.
Amorcer - Ceci est un cadre spécial (c'est-à-dire un ensemble d'outils), qui comprend des solutions HTML, CSS et JavaScript. L'idée principale de ce cadre est une création commode de projets Web qui possèdent adaptatif propriété. Adaptabilité dans ce cas, cela signifie que la disposition du document Web doit s'adapter au périphérique qui l'affiche - PC, tablette, smartphone, etc. La conception visuelle des éléments individuels de la disposition de la page Web est également incluse dans le cadre.
Lien . Pour connecter le cadre, vous devez soit télécharger le package de fichiers et les connecter à la balise. , Ou connectez-les à distance - là-bas. Par example,
Pour afficher le contenu de la page dans le cadre, le soi-disant est conçu. Système de maille ( système de grille ), qui vous permet de créer (valeur par défaut) jusqu'à 12 colonnes (et des lignes correspondantes) sur la page, et cette conception peut dépendre du périphérique où la page est visualisée.
Par exemple, pour les appareils de taille moyenne ( appareils moyens. ) Il est possible de déterminer les colonnes comme suit:
Ce qui signifiera deux colonnes, dans la première, il a une longueur conditionnelle de 8, et la seconde est 4 sur 12. En résumé, ces valeurs sont évidemment données également 12. En fait, la largeur de la colonne est spécifiée dans proportion. Un autre exemple:
Signifie qu'il y aura 3 colonnes de la même largeur. Ou alors
Signifie 1 colonne étirée sur toute la largeur de l'écran.
De toute évidence, le périphérique mobile ne correspond pas à la mise en page pour PC. Les mises en page décrites ci-dessus sur le dispositif mobile seront affichées non sous la forme de colonnes, mais une sous une autre - car elles n'ont pas assez d'espace horizontalement. Dans le cadre, des classes spéciales ont été développées pour travailler avec des appareils mobiles. Ces classes peuvent être spécifiées pour une alternative mise en page dans le cas d'un appareil mobile ( xS - Appareils mobiles, SM - Petits appareils ). Par example,
Cela signifie qu'il existe deux cellules dans la disposition, mais la proportion de leur largeur sera différente lors de l'affichage sur un PC ou sur un périphérique mobile: 8 et 4 sur un PC à une ligne, ou 2 et 10 sur un appareil mobile. En montant des deux paires de valeurs, donnez 12, il sera donc placé dans une rangée.
Créer un menu. Pour créer la classe d'utilisation du menu nAV. (Les boutons ou les liens sont placés dans le bloc de cette classe) et classe nAVBAR. dans lequel la navigation finie est placée. Par example,
Navire de navigation - Adaptive Un composant utilisé comme bloc avec une navigation sur site.
Adaptabilité Dans ce cas, il est que ces composants sont "pliés" lors de l'affichage des périphériques mobiles si les éléments de navigation ne contiennent pas horizontalement.
Bonjour tous le monde! Toute personne qui travaille sur la conception et la partie fonctionnelle de leur blog à un moment donné réfléchit à la manière d'accélérer et de simplifier ce processus. Cet objectif servit de cadres. Ce sont des bibliothèques spéciales permettant d'utiliser des ébauches de code déjà prescrites, caractérisées par la validité et le navigateur croisé. Aujourd'hui, vous voulez faire l'une de ces solutions - Bootstrap. Dans le cadre de cet article, nous n'étudierons pas en détail toutes les subtilités de travailler avec elle. Notre tâche consiste à en apprendre davantage sur ses avantages de base, comment connecter Bootstrap à WordPress et comment modifier les styles et la structure des blogs à l'aide de ce cadre.
Qu'est-ce que Bootstrap?
BateauStrap est un cadre gratuit sur base de données CSS et JavaScript fournissant un certain nombre d'outils intégrés pour créer des sites Web adaptatifs ou plutôt leur développement frontal. Il a été créé à l'origine pour une utilisation interne par Twitter et s'appelait "Twitter Bootstrap", mais à l'avenir, a augmenté dans un projet indépendant. Cette bibliothèque peut être utilisée pour travailler avec des fichiers HTML statiques et avec divers systèmes Gestion du contenu, dans lequel les styles externes sont pris en charge.
Vous pouvez éditer ou même créer de manière indépendante, en utilisant Bootstrap, Thème WordPress Pour votre blog. Pour ce faire, dans le cadre Arsenal, les styles de base sont fournis pour les composants de base pouvant être utilisés sur le site: la navigation et les formulaires, les fenêtres et les notifications modales, les accordéions et les carrousels déposent des listes et de nombreuses autres choses.
Sur Internet, vous pouvez trouver de nombreuses ressources diverses faites à l'aide de cette bibliothèque. Les lecteurs de mon blog sont les plus susceptibles d'être intéressés par des modèles de bootstrap pour WordPress. Dans RUNET, vous trouverez un grand nombre de sujets basés sur le cadre, y compris gratuitement. Ils se distinguent par une conception et une fonctionnalité élégantes.
Qu'est-ce qui rend le bootstrap populaire parmi les développeurs? Regardons un certain nombre d'avantages indiscutables que nous travaillons avec lui:
- code open source, c'est-à-dire que toute la fonctionnalité est fournie complètement gratuitement;
- grille intégrée à 12 colonnes. Il suffit d'ajouter la classe HTML-Element nécessaire pour la définir nécessaire pour positionner par rapport à d'autres objets et à la page de la page;
- adaptabilité. Plus tôt, j'ai écrit, et pourquoi cela doit être fait sans ambiguïté. Dans la même option, cette option est activée par défaut et implique d'optimiser le site des appareils de bureau, des tablettes et des smartphones. De plus, vous pouvez installer toutes les options d'extension manuellement;
- variabilité dans la conception du plus couramment utilisé sur les pages Web d'éléments. Avec l'aide de classes spéciales, vous pouvez facilement gérer l'affichage et le comportement des événements, des onglets, des boutons et d'autres choses. Solutions préparées et prêtes pour les éléments dynamiques. Ainsi, par exemple, pour créer un curseur, il suffit de trouver le code nécessaire dans la documentation, de le copier et de placer sur votre blog, remplacez les images de l'exemple avec le vôtre. Comment cela fonctionne dans la pratique, je vous montrerai plus loin sur l'exemple d'installation dans le menu WordPress Bootstrap;
- iconscript. Bonus agréable sous la forme de plusieurs centaines d'icônes de glythicons en format vectoriel graphique;
- castomisation, c'est-à-dire La possibilité d'utiliser sélectivement diverses possibilités du cadre, par exemple: Connexion au projet uniquement dans la grille et les polices, ou uniquement des supports ou une combinaison de plusieurs options;
- facilité de réglage - styles standard Passer outre création simple Nouvelles règles CSS, sans utilisation " ! important.»;
- excellente documentation avec des exemples. Malgré le fait que le site officiel est l'anglais, ne sera pas difficile de trouver son équivalent russe sur Internet.
Le principal inconvénient de travailler avec la bibliothèque ne peut être que le fait que lors de la modification ou de la création d'un thème adaptatif, les composants WordPress ne peuvent pas être simplement ajoutés à partir de la console CMS. Leur utilisation nécessitera l'insertion du code supplémentaire ou de l'installation de plug-ins auxiliaires.
Cadre de connexion à WordPress
Tout d'abord, téléchargez la bibliothèque à partir du site officiel - https://getbootstrap.com: cliquez sur "Télécharger bootstrap" et dans l'onglet "Mise en route", sélectionnez l'option "Télécharger Bootstrap". Actuellement, la version stable reste Bootstrap 3, mais la quatrième version est déjà publiée dans le mode de test. Il a quelques différences de l'actuelle, mais si vous explorez la bootstrap 3, la version mise à jour du cadre ne posera aucune question.
Déballez l'archive et voir 3 dossiers principaux: cSS, JS., polices.. Les fichiers contenant dans leur nom "min" ne sont pas différents du même nom sans cette particule. Il indique que le code est enregistré sans espaces, en une ligne, pour réduire le poids du fichier sans perte dans la fonctionnalité. Un tel format est non calculé, mais il est souvent souvent connecté au projet. Cela affecte positivement. Dans les dossiers cSS. et jS. Les fichiers de styles et de scripts sont couchés et dans le dossier polices. - Les mêmes icônes de vecteurs mentionnées ci-dessus. En fait, nous voyons ici une police présentée dans plusieurs formats.
Un des façons commodes Placer des fichiers-cadres dans le projet - Création d'un dossier séparé. Pour ce faire, à la racine du site du catalogue wP-Contenu - Thèmes - Title_text Le dossier est formé libs.Où à l'avenir, il peut y avoir d'autres bibliothèques utilisées dans le projet. Et déjà dedans - un dossier amorceroù nous copions tout le contenu tiré de l'archive.
Comme nous l'avons déjà noté plus tôt, il est possible de ne rouler qu'une fonctionnalité distincte de la bottera, par exemple une grille ou une icône. Ceci est mis en œuvre sur la page du site officiel "Personnaliser".
Ici, vous devez supprimer les coches de ces composants et plug-ins avec la bibliothèque que vous ne souhaitez pas vous connecter au projet. Et ensuite, en srollant la page vers le bas, téléchargez la version bootstrap sur mesure en appuyant sur Compiler et télécharger.
De plus, pour remplacer les styles de bootstrap et les styles de thèmes "natifs", vous pouvez créer dans le dossier du modèle dans le catalogue. cSS.déposer style.css.. Si vous ne connaissez pas la structure du modèle WordPress, l'article est obligatoire à lire.
Pour connecter Bootstrap à WordPress, Ouvrez-vous éditeur de texte déposer les fonctions.php.qui réside dans le répertoire de votre modèle actif. Nous trouvons la fonction des scripts de connexion (on peut appeler, par exemple, funct.ion.twentysixteen_scripts () (), Par titre le sujet) et insérez le code suivant:
| 1 2 3 | // bottestrap stylesheet. wp_enqueue_style ("bootstrap-style", get_template_directory_uri ()., tableau (), ""); |
// bottestrap stylesheet. wp_enqueue_style ("bootstrap-style", get_template_directory_uri (). "/Libs/bootstrap/css/bootstrap.min.css", tableau (), "");
- Cette chaîne connecte le fichier de style-cadre minimisé. Le premier paramètre de fonction ( " amorcer— style.") - Un nom arbitraire du plug-in.
Paramètre suivant ( obtenir._ modèle._ annuaire._ uri() . "/ libs./ amorcer/ cSS./ amorcer. min.. cSS." ) - Le chemin du fichier. Ici en utilisant la fonction obtenir._ modèle._ annuaire._ uri() Nous obtenons le chemin du chemin avec le dossier avec le modèle actif, puis "Faites glisser" directement vers le fichier dans ce modèle - . "/ libs./ amorcer/ cSS./ amorcer. min.. cSS." .
Nous continuons à insérer le code:
| 1 2 3 4 | // mythe stylesheet. wp_enqueue_style ("mythe-style", get_template_directory_uri (). "/css/style.css", tableau (), ""); |
// mythe stylesheet. wp_enqueue_style ("mythe-style", get_template_directory_uri (). "/css/style.css", tableau (), "");
- De même, nous connectons notre propre fichier de style dans lequel nous pouvons modifier les règles de bootstrap. Veuillez noter que cela devient possible, nos styles doivent être réservés après les styles de cadre. Ceux. Il est nécessaire de placer cette ligne du code de sorte qu'il est après le code responsable de la connexion des styles de bibliothèque.
Et la dernière chaîne que nous devons connecter Bootstrap à WordPress:
| 1 2 3 4 | // bootstrap js wp_enqueue_script ("bootstrap-js", get_template_directory_uri ()., Array ("JQuery"), ""); |
// bootstrap js wp_enqueue_script ("bootstrap-js", get_template_directory_uri (). "/Libs/bootstrap/js/bootstrap.min.js", tableau ("jQuery"), "");
- À la fin, nous connectons un fichier de script minimisé. Ici, nous aurons besoin d'un troisième paramètre de fonction - déployer ()qui est responsable de la séquence de scripts de connexion. Le fait est que le bootstrap dépend de la bibliothèque de jQuery. Si au moment où le serveur chargera notre cadre, JQuery ne sera pas connecté au projet, les scripts de bootstrap ne fonctionneront pas. La bibliothèque de jquery elle-même n'a pas besoin de télécharger, car le WordPress le fait automatiquement. Mais que la connexion est survenue dans la séquence dont vous avez besoin, nous définissons que les scripts JS Bootstrap JS devraient toujours aller après JQuery. C'est exactement la ligne tableau ("jQuery").
Si vous créez une bootstrap pour WordPress à partir de zéro ou ne souhaitez simplement pas mélanger tous les scripts en un seul endroit, je vous suggère de créer une fonction distincte pour connecter Bootstrap 3 à WordPress. À la fin du fichier fonctions.php.placez le code suivant:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Fonction load_bootstrap () (fonction LOAD_BOOTTRAP () (// BOOTSTRAP stylesheet. Wp_enqueue_style ("bootstrap-style", get_template_directory_uri (). "/Libs/bootstrap/css/bootstrap.min.css", déployer (), ""); // mythe stylesheet. wp_enqueue_style ("mythe-style", get_template_directory_uri (). "/css/style.css", tableau (), ""); // bootstrap js wp_enqueue_script ("bootstrap-js", get_template_directory_uri (). "/Libs/bootstrap/js/bootstrap.min.js", tableau ("jQuery"), ""); ) Add_action ("wp_enqueue_scripts", "loader_bootstrap"); |
fonction LOAD_BOOTTRAP () (Fonction LOAD_BOOTTRAP () (// BOOTSTRAP stylesheet. wp_enqueue_style ("bootstrap-style", get_template_directory_uri (). "/Libs/bootstrap/css/bootstrap.min.css", tableau (), ""); // mythème stylesheet wp_enqueue_style ("mythe-style", get_template_directory_uri () "/csss/style.css", tableau (), "."); // bootstrap js wp_enqueue_script (". bootstrap-js", get_template_directory_uri (). "/libs/bootstrap/js/bootstrap.min.js", tableau ("jQuery"), "");) add_action ("wp_enqueue_scripts", "load_bootstrap");
- où charge._ amorcer() - Le nom arbitraire de la fonction que nous avons créée et la dernière ligne donne à son moteur à l'exécution du moteur.
Les principales capacités de la pédale et comment ça marche
Pour comprendre comment WordPress et Bootstrap et Bootstrap sont interactifs, comprenons le principe du travail du cadre.
Donc, dans le fichier de style bootstrap, des classes spéciales sont prescrites, qui sont ajoutées au balisage HTML, déterminant ainsi l'affichage ou le comportement des éléments.
Marquage: conteneurs et cellules. La structure de balisage de bootstrap est basée sur le système de bloc d'éléments imbriqués. Les conteneurs de commande les plus élevés dépassant l'enveloppe sont formés en leur ajoutant des classes. .récipient ou alors .Container-fluideSelon que nous voulons obtenir un bloc avec une largeur fixe adaptative ou un "caoutchouc".
Le niveau ci-dessous est des blocs incorporés avec une classe. .ligne. Celles-ci Éléments structurels représentent des lignes qui organisent des groupes horizontaux de cellules.
Le contenu est placé dans les cellules. Chaque ligne est cassée par 12 cellules - éléments HTML avec des classes .col -lgl- *,col-mD- *,col-sm- *,col-xs- *. Ces classes définissent la largeur des cellules pour les téléphones ( xs.), comprimés ( sM.), appareils de bureau avec un petit moniteur ( mARYLAND.), pour un écran d'expansion élevé ( lg). Mais quelle figure dans les pixels est entendue par chacune de ces extensions:
Au lieu d'un astérisque dans le nom de la classe, le nombre est indiqué de 1 à 12, égal au nombre de cellules que l'élément devrait occuper. Mais la somme de toutes les cellules dans la même ligne ne doit pas dépasser 12. Voici un exemple de code:
Mais on ressemblera dans le navigateur:
En détail et avec des exemples, comment travailler avec une grille de bootstrap, décrite dans la documentation-cadre sur le site officiel de la section "CSS" - "Système de grille".
les tables. Le cadre fournit un certain nombre de classes pour les éléments "Table", qui peuvent facilement stocker des tables:
- . tableau - style de base, seules limites horizontales;
- . tableau-rayé. - alternance de rangées grises et blanches dans la table;
- .table-bordé.- formation de toutes les limites des rangées et des colonnes;
- . tableau-flotter.- souligner la ligne de la table en planant;
- . tableau-sensible- Cette classe rend la table adaptative à tous les appareils.
Boutons. Pour créer des boutons élégants, le bootherap propose également un certain nombre de classes de format. .btn- *Où, au lieu d'un astérisque, vous pouvez substituer n'importe quelle valeur de la capture d'écran ci-dessous et obtenir le bouton correspondant:
Ainsi, par exemple, vous devez enregistrer votre "bouton" pour obtenir un bouton vert dans le style de bootstrap 3:
Images. Pour les éléments IMG, il existe également des solutions intéressantes:
Ce n'est qu'une petite partie des capacités de la pédale. Le cadre fournit des cours pour travailler avec la typographie, les icônes, les formulaires, les conseils contextuels, la navigation et de nombreux autres. Si vous appréciez quels avantages peuvent recevoir le fonctionnel Bootstrap pour un blog WordPress, veillez à étudier la documentation de cette bibliothèque.
Comment former un menu Bootstrap sur le WordPress
Nous savons déjà comment connecter Bootstrap à Wordpres s.et maintenant nous pouvons envisager un exemple application pratique Cadre de blog. Pour ce faire, nous remplacerons le menu existant du sujet actif par la navigation de bootstrap adaptative. Je vais utiliser dans l'exemple d'un modèle de test basé sur le sujet WordPress "Vingt Sihteen", où j'ai déjà créé un menu à deux niveaux.
Nous trouvons le code de menu "Par défaut NAVBAR", proposé sur le site Web officiel de la section "Composants" - "NAVBAR": "NAVBAR":
Éditer au besoin. Je vais supprimer, par exemple, lien vers le logo (marque), le formulaire et la liste avec la classe . nAVBAR-droite. Et cette partie:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
- Remplacez le code suivant:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | "Top_menu", "profondeur" \u003d\u003e 2, "conteneur" \u003d\u003e false, "menu_class" \u003d\u003e "NAVBar-Nav", // Process Navali Menu à l'aide de notre WRN Walker personnalisé "Walker" \u003d\u003e Nouveau WP_Bootstrap_navwalker ()) ); ?\u003e |
"Top_menu", "profondeur" \u003d\u003e 2, "conteneur" \u003d\u003e false, "menu_class" \u003d\u003e "NAVBar-Nav", // Process Navali Menu à l'aide de notre WRN Walker personnalisé "Walker" \u003d\u003e Nouveau WP_Bootstrap_navwalker ()) ); ?\u003e
Le résultat de la navigation finale est placé dans le fichier correspondant au lieu d'exister. J'ai ce fichier header.php.:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
|
En ligne " menu." => " haut._ menu." Il est indiqué par le menu que vous êtes nommé principal dans le panneau d'administration. " profondeur" => 2 - Niveau de nidification pour ces cas s'il existe des points déroulants. " menu._ classer" => " nAV. nAVBAR.— nAV." - Voici les classes du menu de la bootstrap que nous avons utilisée.
Mais pour intégrer la navigation bootstrap dans WordPress, nous aurons besoin d'un autre fichier avec une classe spéciale - wp._ amorcer_ navwalker. php.. Il peut être téléchargé de GitHub sur le lien -. Vous appuyez ici sur le bouton «Clone ou Téléchargez» et sélectionnez «Télécharger ZIP».
Supprimer les fichiers de l'archive et dans le dossier WP-BOOTSTRAP-NAVWALKER-MASTER Copiez le fichier souhaité.
wp._ amorcer_ navwalker. php. Placer dans le dossier de notre sujet. Retourner dans le fichier Funk.PHP et au début, nous connectons la classe téléchargée:
// registre Walker de navigation personnalisé
exiger_once ("wp_bootstrap_navwkalker.php");
Notre navigation adaptative Bootstrap pour le modèle WordPress est prête. Plus d'accord reste derrière les styles. Voici le menu qu'il s'est avéré:
Lorsque vous survolez la liste déroulante et que les liens de navigation sont cachés et appelés à l'aide de l'icône de menu.
Toutes les détails de la connexion Bootstrap à WordPress et créez un menu-cadre basé sur le cadre peuvent être trouvés à partir de la vidéo:
Si vous n'avez pas le temps d'étudier toutes les nuances de travailler avec une bibliothèque sur WordPress, utilisez les plug-ins de Bootstrap, le plus populaire - WordPress.Twitter.AmorcerCSS. et Facile.AmorcerPetit code..
À ce sujet, notre connaissance avec le cadre est terminée. Aujourd'hui, nous avons appris à connecter Bootstrap à WordPress, sur les principaux avantages de cette bibliothèque et la fonctionnalité du cadre, qui peut nous aider à créer un thème adaptatif moderne. Apprenez les tutoriels et expérimenter!
Comment installer Bootstrap? Pour le début, nous devons obtenir une distribution sur le site officiel de ButShrap. Sur la page manuelle, plusieurs options d'installation seront proposées:
Télécharger la version Production (produit final qui peut être utilisé ) et développement de la version ( contient toutes les sources)
La différence entre ces versions est que la version de la production est déjà compilée et optimisée, c'est-à-dire entièrement prête à être utilisée et la version de développement, au contraire, contient le code source qui doit être compilé.
J'ajouterai que la version pour le développement peut être installée à l'aide de gestionnaires de lots, tels que: Bower ou Compositeur, et la version de production.- avec de l'aideCDN.
Après avoir téléchargé la distribution dont vous avez besoin et le déballé, dans notre cas, il s'agit d'une version de production, envisagez la structure de l'application. Et nous avons donc trois catalogues: CSS, JS et polices.
Bootstrap / ├── CSS / │── BOOTSTRAP.CSS ││── BOOTSTRAP.CSS.MAP │ ├── BOOTSTRAP.MIN.CSS │── BOOTSTRAP.MIN.CSS.MAP │ ├── Bootstrap-thème .CSS │── bootstrap-theme.css.map │── bootstrap-theme.min.css ││── bootstrap-theme.min.css.map ├── JS / ││── Bootstrap.js │ └── bootstrap.min.js └── polices / ├── Glyphicons-Halflings-standard.eot ├── Glyphicons-Halflings-Régulier.svg ├── Glyphicons-Halflings-Régulier.ttf ├── Glyphicons-Halflings- régulier.woff └── glyphicons-halflings-régulier.woff2
Le répertoire CSS réside avec des versions CSS minorisées (Portez habituellement le préfixe min) et non minifiée, qui convient à lire et peut être utilisée comme code source. En outre, la carte source est jointe à chaque fichier. (code) *.carte (requis pour le débogage dans le navigateur) .
bOOTSTRAP.CSS est le fichier principal, vous pouvez trouver tout ce qui rend BOOTSTRAP avec un cadre CSS raide et populaire.
bootstrap-theme.css est un petit sujet qui remplace les styles de fichier de base et ajoute un nouvel affichage pour certains composants. (La bonne pratique est considérée comme considérée comme ne pas affecter le code source des bibliothèques et des cadres, il évitera la masse des problèmes si nous décidons soudainement de mettre à jour) Alors bootstrap-theme.css peut être utilisé comme une bonne base de données.
JS comprend également deux versions de fichiers (Mintenant et non) et contient des plugins standard (carrousel, fenêtres modales etc.) , ainsi qu'un petit ensemble d'outils, plus des informations détaillées Vous pouvez apprendre sur le site officiel du bootstrap dans la section JavaScript.
Vous pouvez maintenant procéder directement pour connecter des fichiers bootstrap. Créez à la racine de notre application Index.html et définissez le balisage de base en ajoutant nos fichiers à celui-ci:
Bonjour le monde!
Avant la balise de fermeture Ajouter des styles: bootstrap.min.css et bootstrap-theme.min.css (IMPORTANT! Un fichier avec des styles qui remplacera les styles d'un autre fichier, vous devez poster le dernier. Le fichier bootstrap-theme.min.css est situé à la fin) .
En ce qui concerne les scripts: si vous remarquez, la bibliothèque de jQuery a été ajoutée, car Bootstrap a une dépendance difficile, et les plugins ne peuvent tout simplement pas fonctionner. La procédure de connexion sera la suivante: jquery.min.js, bootstrap.min.js pourquoi exactement dans cette commande? Tout est simple: les plugins ont besoin de jQuery comme des machines dans le carburant, vous devez donc pour la première fois de remplir une voiture. Le dernier nuance, connectez le meilleur script à la fin du document, devant la balise de fermeture