Share
Bootstrap est conçu pour prendre en charge de nombreux scénarios en fournissant une poignée de composants Web couramment utilisés. Il y a des boutons, une barre de navigation réactive, des onglets, des info-bulles, des carrousels, etc. Malgré tout, même avec tous les jouets que Bootstrap nous donne, il manque encore un motif très populaire: la navigation hors-toile.
Cette approche de la navigation éloigne le menu de la zone visible (la zone de dessin) et donne plus d’espace pour se concentrer sur le contenu principal. La navigation hors-toile a d'abord été rendue populaire dans les applications mobiles natives, après quoi elle est passée au Web responsive (en partie grâce à l'article de Luke Wroblewski). Généralement, il utilise jQuery pour changer l’état de la navigation.
En parlant de cela, Bootstrap étant si populaire et le support de la communauté étant si important, les développeurs ont créé des plugins ou des extensions pour inclure des composants qui ne sont pas disponibles. officiel Bootstrap. Et cela comprend un pour la mise en œuvre d'une navigation hors-toile.
Dans ce didacticiel, je vais vous montrer comment ajouter une navigation hors-zone à Bootstrap avec une extension appelée Jasny Bootstrap par Arnold Daniels. Mes deux raisons pour cette option sont:
Au cours de ce tutoriel, je vais vous expliquer un flux de travail qui facilite la maintenabilité du site Web à l'aide de Bower. Assurez-vous donc que Bower est déjà installé sur votre système. Si vous préférez ne pas utiliser Bower, c'est bien, mais pour commencer, nous avons également publié une poignée de didacticiels pour débutants sur Bower..
Eh bien, commençons.
Commençons par créer des répertoires de travail dans lesquels nous placerons les éléments nécessaires..
répertoire de travail | - actifs | | - css | | - img | '- js' - sources | - js '- moins
Nous allons utiliser le les atouts dossier pour enregistrer les actifs du site Web tels que les images, les feuilles de style, les fichiers JavaScript et les goûts. le sources le dossier est où nous allons mettre la non compilé code source de LESS et JavaScript. Ensuite, nous définirons la spécification du projet - nom, version, dépendances et autres - avec Bower..
Courir bower init commande dans le répertoire de travail et remplissez toutes les invites.
Un exemple des entrées de commande "bower init" Vous n'avez pas à suivre les entrées comme indiqué ci-dessus avec précision; ajustez les entrées selon vos propres exigences. Une fois terminé, un nouveau nom de fichier bower.json devrait être présent, contenant la spécification du projet que nous venons de remplir.
Ce projet nécessite deux cadres; à savoir Bootstrap et Jasny Bootstrap. Avant de les installer, spécifions le nom du répertoire dans lequel Bower devra installer les packages. Pour ce faire, créez un nouveau fichier à la racine du répertoire de travail nommé .Bowerrc et mettez les lignes suivantes pour nommer le dossier.
"répertoire": "composants"
Ensuite, incluez ces lignes ci-dessous dans bower.json, qui indiquera à Bower que les dépendances du projet sont Bootstrap et Jasny Bootstrap version 3.1.1 ou plus récente.
"devDependencies": "bootstrap": "> = 3.1.1", "jasny-bootstrap": "> = 3.1.1"
Dans un terminal ou une invite de commande, exécutez bower installer commande pour saisir les dépendances qui balayent tout spécifié à la fois.
Comme spécifié dans .Bowerrc, les dépendances du projet doivent maintenant se trouver dans un dossier nouvellement généré nommé Composants.
Avec toutes les dépendances préparées, nous pouvons commencer à travailler sur le projet! Nous lancerons les choses en organisant les feuilles de style. Il y a quatre feuilles de style MOINS que nous devrons créer, à savoir:
Accentsconagua
variables.less - comme son nom l'indique, cette feuille de style contient les variables utilisées dans Bootstrap. Nous allons faire cette copie au cas où nous voudrions personnaliser les variables, sans affecter les fichiers d'origine (copie des variables Bootstrap à partir de ce Gist).variables-jasny.less - de même, cette feuille de style contient les variables utilisées dans l'extension, Jasny Bootstrap (copiez les variables ici).sans app - cette feuille de style contient des références aux feuilles de style Bootstrap et Jasny Bootstrap dont nous avons besoin pour construire le site Web (vous pouvez copier le contenu ici).style.less - nous écrirons nos propres styles dans cette feuille de style.Créez et assemblez-les comme suit:
… '- sources | - js' - moins | - app.less | - style.less | - variables-jasny.less '- variables.less
La prochaine chose à faire est de compiler ces feuilles de style. Pour ce faire, nous utiliserons Koala avec la configuration suivante:
sans app aussi bien que style.less destination de sortie vers actifs / css / annuaire..carte pour faciliter le débogage de la feuille de style. Si c’est la première fois que vous avez entendu parler de Source Map, consultez notre tutoriel sur Tuts + Code, Source Map 101.
Une fois que la configuration est définie, compilez LESS to CSS..
Remarque: gardez à l'esprit que vous n'êtes pas obligé d'utiliser Koala si vous préférez une autre façon de compiler vos fichiers LESS.
Créez un nouveau fichier HTML nommé index.html. Mis à part la structure nue de base HTML5, la index.html Le fichier contiendra également la balise méta viewport, la balise méta description, le titre et les liens vers les feuilles de style, comme suit:
Bootstrap Navigation hors-toile
Ajoutons maintenant la navigation hors-toile. Jasny Bootstrap utilise une approche similaire à Bootstrap en ce qui concerne le balisage des composants. Voici comment nous commençons la structure de navigation hors-toile:
Il comprend une poignée de cours. Trois classes à savoir menu de navigation, navmenu-inverse, navmenu-fixed-right définir l'élément en tant que menu de navigation. le menu de navigation est l'un des composants de Jasny Bootstrap qui définit l'élément affecté en tant que navigation verticale. le offcanvas est la classe qui définit l'élément hors de la fenêtre. De plus, nous avons également ajouté une nouvelle classe, navmenu-site, ce qui nous permettra de personnaliser la navigation avec nos propres styles.
Les éléments de menu dans la navigation hors-toile peuvent être disposés à l’aide des touches nav navmenu-nav classe, comme si.
Vous pouvez également inclure des composants Bootstrap originaux en conjonction avec ce balisage, tels que les menus déroulants et les boutons..
Le balisage HTML pour la navigation que nous allons ajouter dans ce tutoriel est assez long. Ainsi, dans un souci de simplicité, le balisage complet peut être obtenu via ce Gist..
L'image suivante montre notre intention de mettre en page le contenu de la page Web:
Le plan du site Web, montrant la mise en page. Comme indiqué ci-dessus, le contenu du site Web comprendra un logo, un bouton bascule avec l'icône "Hamburger" pour faire glisser la navigation vers l'intérieur et l'extérieur, ainsi que quelques lignes de slogans avec un gros bouton, appelé bouton d'appel à l'action.
Le balisage HTML du contenu est également long à coller dans ce tutoriel. Au lieu de cela, n'hésitez pas à copier le tout de ce Gist.
La plupart des styles proposés ne seront que décoratifs et s’articuleront autour de couleurs, de tailles et de positions. Ce style décoratif sera obtenu en personnalisant les styles prédéfinis Bootstrap et en écrivant nos propres styles. Ainsi, au lieu de parcourir les étapes qui pourraient déjà être évidentes, je voudrais souligner quelques détails clés qui comptent le plus.
Tout d’abord, avant d’écrire une seule ligne, importez le sans app feuille de style dans le style.less. Cela nous permettra de réutiliser les Variables et les Mixins qu’il contient..
@import (référence) 'app.less';
Deuxièmement, nous créons une variable LESS pour définir le chemin de l'image. Nous nommons la variable @ path-img.
@ path-img: '… /… / assets / img /';
Chaque fois que nous aurons besoin de faire référence à une image dans la feuille de style, nous inclurons cette variable. Cet exemple ci-dessous montre comment nous l'utilisons pour désigner le logo..
.en-tête de marque margin-top: 10px; marge inférieure: 10px; float: gauche; text-align: left; marge supérieure: -15px; un .text-hide (); affichage: inline-block; background-image: url ('@ path-img logo.png'); répétition de fond: non répétée; taille du fond: 100% 100%; largeur: 100px; hauteur: 33px; Enfin, nous souhaitons centrer le contenu, les slogans et le bouton, verticalement. CSS, à ce stade, ne nous a pas encore fourni un moyen pratique d'aligner le contenu verticalement à l'aide d'une seule déclaration de propriété. Par conséquent, il existe un certain nombre de moyens pour y parvenir et, honnêtement, aucun n’est meilleur que tout autre..
Dans ce cas, nous alignerons le contenu à l'aide de la méthode d'affichage CSS Table. Si vous regardez le balisage de la page Web, vous verrez que nous envelopperons le contenu de la page Web avec deux Pour aligner le contenu verticalement, nous définissons la Des détails complets sur les règles de style peuvent être obtenus dans ce Gist. Une fois que nous avons ajouté les styles, le site Web devrait maintenant avoir l'aspect et la convivialité, comme dans la capture d'écran ci-dessous: Cependant, le site Web ne fonctionne pas encore complètement. Essayez de cliquer sur l'icône "Hamburger"; aucune navigation hors toile ne glisse. Cette fonctionnalité provient de la bibliothèque JavaScript, nous devons donc la compiler et l'ajouter au site Web.. Nous avons besoin de quatre bibliothèques JavaScript pour utiliser la navigation hors-toile, qui sont: jQuery, transition.js, dropdown.js pour activer le menu déroulant que nous avons ajouté dans la navigation, et enfin le offcanvas.js. Pour les compiler ensemble, créez un nouveau fichier JavaScript dans le répertoire. source / js annuaire. Dans ce cas, nous allons le nommer app.js. Importer les bibliothèques JavaScript en utilisant le Définissez la sortie sur / assets / js répertoire et appuyez sur le Compiler bouton. N'oubliez pas de lier le fichier compilé dans la page Web. Maintenant, vous devriez être capable de faire glisser la navigation hors-toile dans et hors. De plus, vous pouvez également ajouter le code JavaScript suivant au bas de la page, ce qui activera l'effet de transition du menu déroulant.. Dans ce tutoriel, nous avons inclus une navigation hors de la toile qui fonctionne vers Bootstrap à l’aide d’une extension appelée Jasny Bootstrap.. Avoir utilisé Bower dans ce tutoriel nous aidera à maintenir et à rester à jour avec ces deux bibliothèques. Après un certain temps, ces deux bibliothèques pourraient être mises à jour. Avec Bower, vous pouvez exécuter le Si une nouvelle version est disponible, lancez simplement le programme J'espère que vous avez appris quelques méthodes et astuces de ce tutoriel. Si vous avez des questions, n'hésitez pas à les laisser dans les commentaires..site-wrapper et site-wrapper-inner classe, comme si. afficher propriété de site-wrapper à table, et faites en sorte qu'elle couvre toute la fenêtre en spécifiant le largeur et le la taille à 100%. Ensuite, nous définissons l'emballage interne afficher propriété à cellule de table. Cela nous permet maintenant d'appliquer alignement vertical propriété pour aligner le contenu verticalement..site-wrapper display: table; largeur: 100%; hauteur: 100%; hauteur minimale: 100%; .site-wrapper-inner display: table-cell; alignement vertical: milieu;
6. Rendre la page Web Come Alive
… '- sources | - js | '- app.js' - moins
@ koala-prepend, ainsi.// @ koala-prepend "… /… /components/jquery/dist/jquery.js" // @ koala-prepend "… /… /components/bootstrap/js/transition.js" // @ koala-prepend "… /… /Components/jasny-bootstrap/js/offcanvas.js "
Transition
Conclusion
liste de la tonnelle commande pour répertorier tous les packages Bower installés et vérifier si une nouvelle version de chacun d'entre eux est disponible.
mise à jour de bower ou la bower installer commande pour mettre à jour le paquet. C'est si facile.Références supplémentaires
