Apprentissage du bootstrap. Bootstrap est une mise en page réactive simple pour les débutants. Qu'est-ce que le bootstrap

«Nous nous sommes familiarisés avec le framework, avons examiné ses avantages, examiné brièvement sa soi-disant grille, il est maintenant temps de comprendre en pratique comment utiliser Bootstrap.

Vous pouvez télécharger Bootstrap depuis le site officiel getbootstrap.com. Sur page d'accueil cliquez sur le bouton " Télécharger Bootstrap».

Après avoir cliqué, nous arrivons sur une page qui propose plusieurs types de téléchargements. Dans cet article, nous examinerons le téléchargement régulier version complète cadre.

Après avoir téléchargé et décompressé l'archive, nous obtenons trois dossiers :

• CSS- dossier avec des styles
• JS- dossier avec les scripts js
• POLICES- dossier avec les polices d'icônes

C'est tout le cadre. Pour travaux supplémentaires avec Bootstrap je vais créer un dossier du même nom bootstrap , dans le dossier je vais en créer un fichier vide index.html et remplira le dossier et le fichier avec l'analyse du framework dans cet article, et à la fin de l'article je donnerai un lien pour que vous puissiez voir le résultat. Si vous me suivez, vous comprendrez que travailler avec le framework est vraiment simple.

À partir du framework téléchargé, nous aurons besoin de l'intégralité du dossier des polices, d'un fichier de style du dossier css appelé bootstrap.css ou bootstrap.min.css et de même d'un script du dossier js appelé bootstrap.js ou bootstrap.min.js .

La différence entre les fichiers avec « .min. » des fichiers ordinaires dans ces fichiers avec « .min ». optimisé, c'est-à-dire que le code est écrit sur une seule ligne sans sauts de ligne ni espaces, ils pèsent donc moins que d'habitude et le contenu des fichiers est absolument le même.

Maintenant, je vais créer un dossier css dans mon dossier bootstrap, y mettre le fichier bootstrap.min.css et créer un dossier js dans lequel je mettrai bootstrap.min.js. De plus dans dossier CSS Créons pour l'instant un fichier style.css vide pour ajouter nos propres styles.

Les fichiers de framework nécessaires ont été déplacés et nous ne travaillerons désormais qu'avec le fichier index.html. Afin de ne pas écrire le code vous-même, passons à la documentation : sur la page de téléchargement du site officiel ci-dessous, vous trouverez un squelette HTML prêt à l'emploi du document, copiez-le et collez-le dans notre fichier d'index.

Notre fichier de style, notre script js et notre bibliothèque jQuery sont déjà inclus dans le squelette, mais si vous n'utilisez pas " bootstrap» modèle, mais sur certains de vos propres, vous devez alors connecter le fichier de styles bootstrap.min.css entre les balises, puis le style.css créé.

Ensuite, avant la balise de fermeture, nous incluons d'abord la bibliothèque jQuery.

Et après la bibliothèque, nous connectons le script js.

En général, le squelette HTML du document ressemble à ceci.

Amorçage

Le processus préparatoire est terminé, Bootstrap est connecté, nous pouvons passer à autre chose et commencer à remplir notre page WEB avec des composants de framework.

Comment utiliser la documentation

La documentation du framework est très bonne, ce qui le rend simple à utiliser. Le menu principal du site officiel comporte plusieurs sections : « Commencer», « CSS», « Composants», « Javascript" Et " Personnaliser", sur la page de chaque section dans colonne de droite il y a des noms différents composants, cliquer dessus affiche leur description et leurs cas d'utilisation sous forme de code prêt à l'emploi.

S'il y a des difficultés avec Anglais, alors il existe plusieurs ressources sur le réseau avec de la documentation traduite, voici l'adresse d'un de ces sites www.oneskyapp.com/ru/docs/bootstrap. Vous pouvez également utiliser une sorte de traducteur de navigateur, la traduction sera bien sûr tordue, mais l'essence de ce qui est écrit sera claire. En général, il vous suffit de lire la documentation, de prendre des exemples de code et de vous entraîner.

Travailler avec la grille Bootstrap

Comme je l'ai dit dans l'article précédent, la grille fonctionne comme un tableau, incluant les lignes .rangée et haut-parleurs .col, il peut y avoir un maximum de douze colonnes. Des préfixes (lg , md , sm , xs) sont ajoutés au class.col pour indiquer la largeur de cette colonneà une résolution d’écran spécifique.

Les lignes et les colonnes sont regroupées dans un bloc avec une classe .récipient ou class.container-fluid . La différence entre eux est que la classe .container a une largeur maximale de 1170 pixels, tandis que la classe .container-fluid a une largeur illimitée, c'est-à-dire toute la largeur de l'écran, même si la résolution de l'écran est très grande. Informations complètes Pour plus d'informations sur la grille Bootstrap, consultez la documentation dans le " CSS».

A l'aide de la grille-cadre, nous réaliserons la mise en page classique de notre page (en-tête, contenu, colonne latérale et pied de page), pour cela nous allons créer trois lignes et quatre colonnes, c'est le code que nous obtenons.

PIED DE PIED DE LA BARRE LATÉRALE DU CONTENU DE L'EN-TÊTE

Pour séparer les blocs, j'ai écrit deux classes supplémentaires : .block, .block2 et je leur ai ajouté quelques règles dans le fichier style.css créé.

Bloc (arrière-plan : #eee ; bordure : 1px solide #000 ; ) .block2( arrière-plan : #ccc ; bordure : 1px solide #000 ; )

Ajoutons une police d'icônes à nos titres. Dans la rubrique " Composants» sélectionnez les icônes qui vous plaisent, copiez le texte sous l'image, ce texte est une classe. Créez une balise à l'intérieur de la balise d'en-tête et collez la classe copiée.

EN-TÊTE

Maintenant, cela ne faisait pas de mal d'ajouter une sorte de menu. Pour ce faire, dans la rubrique " Composants"aller à" Barre de navigation", sélectionnez le menu que vous aimez, copiez le code et collez-le après la balise d'ouverture.

Il ne reste plus qu'à remplir " contenu t" et " barre latérale" Nous faisons tout selon le même schéma : sélectionnez un composant dans la documentation, lisez la description, copiez-le et collez-le dans bon endroit. J'ajouterai un formulaire et un bouton, en cliquant sur lequel ouvrira une fenêtre modale avec un tableau.

Juste comme ça, en seulement 5 minutes, nous avons esquissé disposition la plus simple pages, adaptatives à tous les appareils, et pratiquement aucun code n'a été écrit seul. Suivez le lien et voyez le résultat.

C'est ici que je terminerai l'article. Nous n’avons examiné qu’une infime partie des fonctionnalités du framework, mais je pense que vous comprenez comment travailler avec Bootstrap. L'étape suivante consiste à modifier les styles du framework en fonction de vos besoins et à télécharger uniquement les composants nécessaires. Nous analyserons tout cela dans l’article «

Le système de grille Twitter Bootstrap 3 est manière rapide créer mise en page HTML site. C'est exactement la partie la plus fondamentale du bootstrap, car... grâce à la grille que vous pouvez créer version adaptative site, fournit emplacement correct tous les éléments. Et le développement de la mise en page commence par classe CSS récipient.

Conteneur (conteneur) à largeur fixe.

D'après le nom, il est évident que le conteneur contient une largeur donnée, dont les modifications se produisent à la suite de modifications dans la fenêtre de travail du navigateur.

L'alignement s'effectue au centre en utilisant propriétés CSS: .container(   margin-left: auto;   margin-right: auto; ) Le conteneur a rembourrage: .container(   padding-left : 15px;   padding-right : 15px; )

Le tableau ci-dessous montre la largeur du conteneur, qui dépend de la largeur de la fenêtre du client Web de l'utilisateur :

Conteneur avec largeur en caoutchouc. Contrairement à un conteneur fixe, conteneur-fluid n'a pas de largeur, et la seule chose qu'il possède des classes CSS est : .container(   padding-left: 15px;   padding-right: 15px; )

Une ligne à l'intérieur d'un conteneur.

Une fois que vous avez choisi le conteneur, vous devez passer aux lignes. La ligne prend la même largeur que le conteneur. A une marge négative :

Row(   margin-left: -15px;   margin-right: -15px; ) Du coup, notre construction ressemble déjà à ceci (par exemple, je prendrai une largeur fixe) :

Utilisation de blocs dans Twitter Bootstrap. Comme je l'ai déjà écrit, la ligne de classe CSS est utilisée pour créer des lignes. Et à l'intérieur de ces mêmes lignes, vous devez placer des blocs :

Le contenu du site est placé à l'intérieur du bloc. Vous pouvez également placer d'autres lignes. Une ligne contient 12 blocs.

La largeur du bloc est spécifiée au format relatif à l'aide de quantité requise colonnes La largeur de départ – 1 – correspond à une colonne Bootstrap, largeur maximale – 12 – quantité maximale colonnes sur une seule ligne.

Par exemple : si nous devons avoir 4 blocs de largeur identique sur une ligne, alors nous devons définir la largeur sur 3 (div class ="col-*-3" > ... div >). Le total est de 12 (3+3+3+3).

Disposition adaptative pour les gadgets

J'ai déjà écrit que Twitter Bootstrap 3 est célèbre pour ses grilles adaptées à divers appareils utilisateur, qu'il s'agisse d'un téléphone, d'une tablette ou d'un moniteur pour votre ordinateur personnel/travail). Et le moment est venu de bien le comprendre.

Dans l'exemple ci-dessus, j'ai mis un astérisque après le mot col. Et au lieu d'un astérisque, vous devez indiquer pour quel appareil le bloc donné sera utilisé :

• – col-xs-* – utilisé pour créer une grille avec de petits écrans. Les téléphones correspondent à cette définition ;
• – col-sm-* – pour les appareils avec une largeur d'écran légèrement plus grande qu'un téléphone, par exemple une tablette ;
• – col-md-* – tailles d'écran moyennes, c'est-à-dire les netbooks ;
• – col-lg-* – pour les grands écrans. Si vous croyez Yandex.metrics, alors à l'heure actuelle le nombre d'utilisateurs se situe précisément sur les sites sous ces écrans. Mais cet indicateur dépend beaucoup du thème du site.

Les tableaux ci-dessous fournissent des données concernant ces classes : Twitter Bootstrap 3 Petit écran de vue du système de grille Twitter
Téléphones intelligents
(Petit écran
Comprimés
(≥768px et écran central
Ordinateurs portables
(≥992px et grand écran
Ordinateurs
(≥1200px)

Disposition fixe (class ="container" )	S'adapte à 100 % de la largeur du client Web	750px	970px	1170px
Disposition du caoutchouc (class ="container-fluid" )	S'adapte à 100 % de la largeur de l'écran du client Web
Préfixe de classe	classe="col-xs-*"	classe="col-sm-*"	classe="col-md-*"	classe="col-lg-*"
Largeur de colonne maximale d'amorçage pour une disposition fixe (class ="container" )		62px (750px / 12)	81px (970px / 12)	97px (1170px / 12)
Largeur de colonne maximale pour une disposition fluide (class ="container-fluid" )	La largeur du client web est divisée par 12
Rembourrage	15px sur les bords

Mais soyez prudent ici !

Par exemple, si vous utilisez la classe ="col-sm-*" , cela s'appliquera non seulement aux tablettes, mais aussi aux netbooks et aux grands écrans, mais cela ne fonctionne que si vous ne spécifiez pas "col-md-*" " et "col-lg-*" . Ceux. si votre ligne aura un bloc pour tous les écrans, alors il suffit d'écrire div class ="col-xs-12" > ... div >, et non div class ="col-xs-12 col-sm-12 col-md -12 col-lg-12" > ... div >.

Un exemple de mise en page adaptative sur Twitter Bootstrap 3

En théorie, tout semble clair, mais en même temps rien n’est clair. Afin de comprendre et de sécuriser d'une manière ou d'une autre tous ces blocs, lignes et de comprendre la signification de toute cette grille, je vais considérer un petit morceau de code à l'aide duquel tout se mettra en place. Je ne suis pas designer et dans cette leçon, vous n'avez pas besoin d'inventer quelque chose de super beau. Pour idée générale

Des images schématiques suffiront. À titre d'exemple, je suis en train de créer une mise en page composée de trois blocs, situés dans la même rangée, mais qui seront affichés différemment sur appareils utilisateur

. La figure ci-dessous montre tout cela. Et d'ailleurs, lorsque vous commandez le développement d'une mise en page, vous devez informer à l'avance le concepteur que la mise en page sera réalisée pour le framework Twitter Bootstrap 3, car le concepteur représentera immédiatement les éléments conformément à la grille.

Grande largeur d'écran

Les styles appliqués à la mise en page seront appliqués lorsque la zone active de la fenêtre du navigateur (largeur) est supérieure à 1200px. Sur la photo, vous pouvez voir que les conteneurs occupent tout l’espace de la rangée et le divisent en trois parties égales. Il s'avère que 12 blocs doivent être divisés en 3 conteneurs (puisqu'ils sont tous identiques), nous obtenons qu'il y a 4 blocs dans un de ces conteneurs. En bout de ligne pour grande largeur

écran:

  

Conteneur n°1

  

Conteneur n°2

Conteneur n°3

  Largeur moyenne de l'écran Les styles appliqués à la mise en page seront déclenchés lorsque la zone active de la fenêtre du navigateur (largeur) est supérieure ou égale à 992px et inférieure à 1200px. Deux conteneurs sont situés horizontalement et occupent 100 % de la largeur (chaque conteneur occupe 6 blocs), et un est situé avec nouvelle ligne

Le résultat pour la largeur moyenne de l'écran (attention, je vais ajouter de nouvelles classes et éléments au code déjà écrit) :

écran:

  

Conteneur n°1

     

Conteneur n°2

  Petite largeur d'écran et « petit écran » En utilisant le même principe, vous devez ajouter des classes pour les écrans restants. Je ne décrirai pas la même chose, je vais juste donner un résumé général :

écran:

     

Conteneur n°1

     

Conteneur n°2

 

Pour «crumb-screen», vous pouvez omettre la classe css class ="col-xs-12" , car il occupe automatiquement 100% de la largeur de l'écran et afin de ne pas encombrer le code avec des caractères inutiles, vous pouvez les supprimer.

Le code final de ce modèle ressemblera à :

écran:

     

Conteneur n°1

     

Conteneur n°2

  Différents éléments sur différents écrans Auparavant, j'utilisais la classe ="visible-md-block" - qui s'affiche sur les écrans moyens. Plus de détails sur la classe "visible": Nom de la classe Description

classe="visible-xs-*"	Cette classe ajoute de la visibilité à un « petit écran » dont la largeur est inférieure à 768 px. Si l'écran est plus grand, l'élément ne sera pas visible.
classe="visible-sm-*"	Cette classe ajoute de la visibilité uniquement sur les gadgets dont la largeur d'écran est supérieure ou égale à 768 px (c'est-à-dire ≥ 768 px) mais inférieure à 992 px. Si l'écran ne répond pas à ces caractéristiques, l'élément ne sera pas affiché.
classe="visible-md-*"	Cette classe ajoute de la visibilité uniquement sur les gadgets dont la largeur d'écran est supérieure ou égale à 992 px (c'est-à-dire ≥992 px) mais inférieure à 1 200 px. Si l'écran ne répond pas à ces caractéristiques, l'élément ne sera pas affiché.
classe="visible-lg-*"	Cette classe ajoute de la visibilité uniquement sur les gadgets dont la largeur d'écran est supérieure ou égale à 1 200 px (c'est-à-dire ≥ 1 200 px). Si l'écran ne répond pas à ces caractéristiques, l'élément ne sera pas affiché.
classe="visible-*-inline"	affichage:en ligne
classe="visible-*-bloc"	Une partie de la mise en page obtient la propriété CSS display :block
class="visible-*-inline-block"	Une partie de la mise en page obtient la propriété CSS display :inline-block

La classe ="hidden" est utilisée pour masquer des éléments.

Nom de la classe Description

classe = "caché-xs"	Cette classe ajoute de la furtivité à un élément uniquement sur les gadgets dont la largeur d'écran est inférieure à 768 pixels. Sur d'autres écrans, des parties de la mise en page seront visibles.
classe = "caché-sm"	Cette classe ajoute de la furtivité à un élément uniquement sur les gadgets dont la largeur d'écran est supérieure ou égale à 768 px (c'est-à-dire ≥ 768 px) et inférieure à 992 px. Sur d'autres écrans, des parties de la mise en page seront visibles.
classe = "caché-md"	Cette classe ajoute de la furtivité à un élément uniquement sur les gadgets dont la largeur d'écran est supérieure ou égale à 992 px (c'est-à-dire ≥ 992 px) et inférieure à 1 200 px. Sur d'autres écrans, des parties de la mise en page seront visibles.
classe = "caché-lg"	Cette classe ajoute de la furtivité à un élément uniquement sur les gadgets dont la largeur d'écran est supérieure ou égale à 1 200 px (c'est-à-dire ≥ 1 200 px). Sur d'autres écrans, des parties de la mise en page seront visibles.

Vous pouvez également appliquer simultanément plusieurs classes à un élément, par exemple :

Cet élément ne s'affichera pas sur les écrans utilisateur moyens et grands

Les développeurs de Twitter Bootstrap 3 n'ont pas oublié l'impression de documents/pages Web et ont ajouté plusieurs classes spécialement conçues à cet effet :

Autre exemple : si vous avez un élément sur une ligne qui fait 6 blocs de large et est centré, alors vous devez spécifier un décalage de 3 blocs :

   ...   

     ...  

Salutations à tous les invités de mon blog et aux geeks du développement Web. La publication d'aujourd'hui sera consacrée à l'introduction d'un framework aussi populaire que Bootstrap. Après avoir lu l'article actuel, vous apprendrez pourquoi il a été créé, comment travailler avec bootstrap et comment l'installer, quels outils ce framework fournit et où il est le plus souvent utilisé. Eh bien, maintenant, allez-y et triez le nouveau matériel !

Qu’est-ce que Bootstrap ?

Bootstrap est un framework conçu spécifiquement pour la mise en page front-end ( interface externe) services et applications Web.

Il comprend modèles standards composé de typographie, de boutons, de formulaires, divers menus, y compris les menus déroulants, les tableaux, fenêtres modales, navigation, curseurs (réguliers et sous forme de carrousel) et autres outils, ainsi que toutes sortes de plugins sur .

Les plus populaires d'entre eux sont Tooltip, qui est responsable des fenêtres contextuelles, Dropdown, qui est responsable des listes déroulantes, Carousel, qui organise un curseur déroulant, et bien d'autres.

AVEC liste complète plugins existants, modèles et composants peuvent être trouvés sur le site officiel http://getbootstrap.com/getting-started/. De plus, avec son aide, à partir de la deuxième version, vous pouvez créer une mise en page réactive.

Quelques mots sur l'histoire

Je pense qu’il faut connaître un peu l’histoire de la création de l’instrument décrit afin de comprendre de quoi il s’agit.

Bootstrap a été créé par Mark Otto et Jacob Thornton spécifiquement pour réseau social Gazouillement. Il faisait office de bibliothèque interne. C'est pourquoi vous voyez parfois le nom Twitter Bootstrap.

La bibliothèque s'appelait à l'origine Twitter Blueprint. Cependant, au moment où le produit a été rendu public (et cela s'est produit le 19 août 2011), son nom a été changé en Bootstrap. Il existe aujourd'hui quatre versions du framework.

Le plus remarquable et le plus demandé en ce moment est Bootstrap 3. Ce fut le premier à utiliser le concept mobiled'abord. En outre, de nombreuses modifications et améliorations ont été introduites.

Quels sont les avantages de l’utilisation de Bootstrap ?

En fait, comme pour toutes les technologies, l’utilisation de Bootstrap présente des aspects à la fois positifs et négatifs. Par conséquent, n’utilisez jamais ce framework à la légère. Dans l'un des articles, j'ai décrit en détail les avantages et les inconvénients de travailler avec Bootstrap.

Et maintenant, je veux attirer votre attention sur le confort solutions prêtes à l'emploi que Bootstrap fournit et leurs aspects positifs.

Ainsi, lors de la connexion du framework décrit, vous avez la possibilité d'utiliser des éléments prêts à l'emploi tels que :

• Toutes sortes de composants, qui incluent : des barres de navigation, des listes déroulantes, des boutons, des indicateurs de progression, une pagination et autres ;
• Plugins JavaScript, y compris les transitions, les éléments modaux et déroulants, les blocs contextuels et les info-bulles, la réduction, l'implémentation des onglets, les curseurs et autres ;
• Modèles de grille, y compris flottants ;
• Mises en page ;
• Et bien sûr, la mise en place du responsive design.

Frais attention particulière faites attention aux grilles, ou comme on les appelle aussi, aux mises en page. Maintenant, il y aura un petit spoiler, pardonnez-moi, car j'ai décidé de consacrer un article séparé à ce sujet, mais il n'y a rien à faire !

Grâce à cet outil, Bootstrap est très souvent utilisé pour rédiger des sites web. Parce qu'il s'agit d'un mécanisme vraiment compétent et puissant pour disposition des blocs. Les créateurs du framework ont ​​fourni un nombre maximum de colonnes - 12. C'est plus que suffisant pour installer le « framework ».

De plus, dans certaines situations, l'utilisation de Bootstrap simplifie non seulement le code, mais vous fait également gagner beaucoup de temps. Dans le même temps, vous n'avez pas à craindre que certains éléments ne fonctionnent pas dans les navigateurs problématiques (oui, je fais allusion à IE), car Bootstrap est entièrement compatible avec .

Comment connecter le framework ?

Il existe plusieurs options de connexion de cet instrument. Je suppose que je vais commencer par installer le fichier de démarrage.

Ainsi, sur le site officiel en utilisant le lien, vous pouvez télécharger versions actuelles Bootstrap. C'est très simple. Choisissez simplement celui qui vous convient paquet d'installation et cliquez sur le bouton « Télécharger ». Sur le même site, vous pouvez télécharger la version alpha de Bootstrap 4.

La deuxième façon est bien sûr en utilisant le CDN. Ainsi, pour connecter les dernières versions du framework, vous devez insérer le lien suivant :

Si vous devez activer une version plus petite de JavaScript, copiez cette ligne :

Eh bien, les sujets sont liés comme suit :

Sur le site Web russifié, vous pouvez regarder une vidéo de formation sur la connexion de ce framework (http://mybootstrap.ru/video-obuchenie-twitter-bootstrap/).

C'est tout, les amis, il est temps de se dire au revoir. N'oubliez pas de partager publications intéressantes avec des collègues, et abonnez-vous également aux mises à jour de mon blog. Au revoir!

Cordialement, Roman Chueshov

Lu : 213 fois

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.

Disposition Bootstrap adaptative : comment tout 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, qui permet d'accéder à l'emplacement souhaité dans le 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 n'importe quel 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.

Dans cette leçon, nous apprendrons comment télécharger et connecter le framework Bootstrap (version 3 ou 4) au site.

Boîte à outils d'apprentissage Bootstrap

Ensemble minimum d'outils (programmes) pour créer des projets Web à l'aide du framework Bootstrap :

• éditeur de texte pour travailler avec du code (Notepad, Brackets, Notepad++, etc.) ;
• navigateur ( Google Chrome, Mozilla Firefox, Opéra, Safari, Internet Explorer ou autres).

Téléchargement du framework Bootstrap

La création d'un projet web dont la conception est basée sur le framework Bootstrap commence toujours par son téléchargement. Vous pouvez télécharger le framework Bootstrap de diverses manières. Par exemple, via un lien situé sur le site getbootstrap.com ou en utilisant le gestionnaire de packages npm, Composer, Bower ou autres. La manière de procéder dépend de votre expérience ou de votre situation spécifique.

Comment installer le framework Bootstrap en utilisant gestionnaires de paquets, ainsi que comment le construire à l'aide de Grunt, vous pouvez le lire dans cet article.

Le moyen le plus simple de télécharger est d'utiliser le lien. Il y a 2 liens sur le site Bootstrap.

Le premier lien contient des fichiers prêts à l'emploi Fichiers CSS et JavaScript. Cet assemblage est principalement utilisé pour étudier le framework ou pour être utilisé dans des projets dont la conception peut être réalisée dans les styles par défaut définis par les auteurs.

Téléchargez Bootstrap 3.4.0 Téléchargez Bootstrap 4.2.1

Le deuxième lien contient le cadre dans codes sources. Cette version est plus pratique pour le développement de sites Web, car... il est très facile de changer de style, jeu de couleurs composants, les configurer, etc. Mais ces fichiers sources, devra être compilé et minifié avant d’être utilisé sur une page. Ce processus généralement automatisé, par exemple à l'aide de Gulp.

Codes sources de Bootstrap 3.4.0 Codes sources de Bootstrap 4.2.1 Déballage de l'archive Bootstrap

Après avoir téléchargé l'archive (avec prêt à l'emploi application de CSS et fichiers JavaScript), il doit être décompressé dans le répertoire de votre projet Web.

Si vous regardez l'archive, vous remarquerez qu'elle contient le contenu suivant (sur Exemple d'amorçage 3.4.0):

Bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── j s/ │ ├ ── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └ ── glyphicons-halflings-regular.woff

Le répertoire css contient les styles du framework Bootstrap et le répertoire js contient des plugins permettant de faire fonctionner certains composants. Les plugins sont écrits à l'aide de fonctions bibliothèques jQuery. Par conséquent, avant Bootstrap JS, vous devez inclure la bibliothèque jQuery.

Comme vous pouvez le voir, il y en a 2 dans les archives Versions CSS et les fichiers JavaScript, c'est-à-dire avec et sans le suffixe min. La version du fichier avec min n'est pas différente de celle sans min , elle est simplement minimisée (compressée).

En production (sur un site de production), il est préférable d'utiliser des versions réduites des fichiers. Ces fichiers sont plus petits et fournissent donc plus chargement rapide pages du site.

Les versions non minifiées sont plus pratiques à utiliser pendant le développement ainsi que pour l'étude.

En plus de ces fichiers, dans ces archives La police d'icônes "Glyphicons" est également incluse. La police Glyphicons contient plus de 250 icônes de l'ensemble Glyphicon Halflings. La police est présentée à l'aide de 4 fichiers : glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff).

Une telle variété de formats pour une même police est nécessaire pour assurer son affichage dans tous les navigateurs.

Vous pouvez en savoir plus sur les icônes au format de police, ainsi que sur leurs avantages et inconvénients, dans cet article.

L'archive du framework Bootstrap 4 n'est pratiquement pas différente de Bootstrap 3. Sa principale différence est qu'il ne contient pas la police "Glyphicons". Si vous avez besoin d'icônes de police, vous devrez les connecter vous-même. Par exemple, en utilisant l'un des ensembles suivants : FontAwesome, Octicons, Glyphicons, IcoMoon, etc. Si vous ne souhaitez pas utiliser police prête, et créez le vôtre, qui sera composé uniquement des icônes nécessaires, puis utilisez ces informations.

De plus, l'archive Bootstrap 4 contient également les fichiers bootstrap-grid.css et bootstrap-reboot.css. Ces fichiers ne sont nécessaires que pour ceux qui n'ont pas besoin de tout le framework, mais seulement d'une partie de celui-ci.

Le premier fichier (bootstrap-grid.css) contient la grille Bootstrap et le second (bootstrap-reboot.css) est le normaliseur qui définit styles de base, afin qu'ils soient les mêmes pour tous les éléments HTML dans tous les navigateurs.

Connecter Bootstrap à une page HTML

Le processus d'installation du framework Bootstrap 3 consiste à connecter fichiers suivants vers une page HTML 5 :

Bootstrap CSS (bootstrap.min.css);

Dernière version Bibliothèques jQuery (requises pour que les plugins Bootstrap JS fonctionnent) ;

Amorcer JavaScript (bootstrap.min.js).

Note: Fichiers JavaScript Il est préférable de l'inclure avant la balise de fermeture body(), car cela garantira un chargement et un affichage plus rapides du contenu principal de la page Web.

...

La connexion du framework Bootstrap 4 se fait comme ceci :

...

Vous pouvez également connecter Bootstrap 4 avec en utilisant le CDN(il n'est pas nécessaire de télécharger Bootstrap pour le projet) :

Copié

...

Bootstrap CDN 3.4.0 :

Copié

Pour tester la fonctionnalité du framework, nous allons créer un bouton qui, lorsqu'il est touché, affichera une info-bulle contextuelle.

Apportez-moi le curseur $(function () ( $("").popover((trigger:"hover")); ));