Dans le module précédent,
nous avons examiné le nombre de composants Bootstrap qui sont purement basés sur CSS.
Ainsi, en appliquant les classes CSS pour ces composants,
nous avons pu les créer sur notre page Web.
Dans ce module, nous allons examiner plus de composants basés sur Javascript de Bootstrap.
Donc, en résumé, comme nous l'avons vu dans le module précédent,
Bootstrap prend en charge un certain nombre de classes CSS qui peuvent être appliquées à
votre balisage HTML dans vos pages Web pour activer et utiliser ces classes CSS.
Ainsi, vous pouvez voir comment les classes CSS ont modifié les balises HTML génériques et
fourni la propre façon de Bootstrap de présenter les mêmes informations.
Ainsi, les composants qui sont purement basés sur CSS peuvent facilement être activés en
appliquant les classes CSS bootstrap
aux différentes balises HTML qui sont là dans vos pages Web.
Bootstrap peut être utilisé uniquement pour ses classes CSS.
Un autre aspect des classes CSS Bootstraps que nous avons vu était
que la plupart de ces composants ont commencé avec une classe de base que vous avez appliquée.
Comme par exemple, lorsque vous regardez le bouton,
vous avez vu que la classe de base était la classe BTN.
Ensuite, vous appliqueriez quelque chose comme
un primaire BTN qui ajouterait leurs couleurs au BTN,
alors vous pourriez définir la taille du bouton en disant BTN SM.
Ensuite, vous pouvez également définir le bouton comme un bloc entier en utilisant la classe de bloc BTN.
Donc, toutes ces classes et modificateurs suivants à la classe BTN de base.
Donc, cette approche, vous le verrez
encore et encore dans de nombreux composants Bootstraps.
Ainsi, vous aurez une classe de base puis un ensemble de classes de modificateurs qui peuvent être
appliquées pour modifier le comportement du composant de base.
Cela facilite la conception de votre page Web.
Prenant un autre exemple, nous pouvons regarder la classe Nav.
Nous utilisons la classe Nav dans la barre NAV-que
nous avons incluse dans notre page Web dans le module précédent.
La classe Nav, nous modifions cela en lui appliquant la classe Nav bar Nav.
Cela nous a donc fourni une certaine façon de présenter les informations de navigation.
Dans ce module, nous examinerons les NAV-tabs et les
NAV-pilules qui sont encore une autre façon de présenter les informations de navigation pour la page Web.
Les onglets et les pilules que nous présentons à nouveau la navigation,
pris en charge par un plugin JavaScript,
fournit un moyen amélioré de fournir la navigation dans votre contenu.
Donc, nous allons examiner cela dans ce module particulier.
J' utilise ceci comme un exemple pour vous illustrer comment a commencé à partir d'une classe de base,
vous pouvez modifier en appliquant les classes de conditions commerciales à la classe de base.
Bien sûr, si vous voulez mettre en
action la partie JavaScript de vos composants Bootstrap,
alors vous devriez commencer à appliquer les classes JavaScript.
Donc, Bootstrap prend en charge un certain nombre de composants qui
sont pris en charge par les plugins JavaScript.
Maintenant, lorsque vous utilisez ces plugins dans votre page Web,
vous pouvez inclure des plugins individuels que vous allez réellement utiliser dans votre site Web,
ou l'ensemble des plugins.
Maintenant, ce que nous allons faire dans les exercices, c'est d'
inclure l'ensemble des plugins parce que nous voulons juste les explorer tous.
Mais si vous concevez un site Web,
vous pouvez inclure seulement un sous-ensemble de ces plugins
que vous utilisez réellement dans votre site Web,
réduisant ainsi la quantité de code JavaScript qui doit
être envoyé à un utilisateur qui consulte votre page Web.
C' est la façon dont je regarde l'approche Bootstraps pour utiliser JavaScript dans
son propre support pour les composants Bootstrap qui sont activés avec JavaScript.
Si vous regardez JavaScript seul,
il offre beaucoup de flexibilité et vous permet de faire beaucoup de choses intéressantes.
Mais cela implique également d'
écrire du code JavaScript à utiliser lors de la conception de votre site Web.
Maintenant, je regarde JavaScript comme un grand lutteur de sumo avec beaucoup de capacités,
beaucoup de puissance, mais sauvage.
Maintenant, jQuery en tant que bibliothèque qui est construite sur JavaScript,
prend essentiellement le lutteur de sumo, puis l'emballe d'une meilleure manière pour rendre
ce gorille de cent livres dans une taille plus gérable,
plus facile à aborder et plus facile à
inclure et à utiliser dans votre site Web conception.
Donc, si vous utilisez la bibliothèque jQuery directement,
vous pouvez certainement tirer parti
de nombreux composants jQuery et en faire usage dans votre page Web.
Maintenant, c'est une approche que vous pouvez toujours adopter car jQuery
va déjà être inclus dans votre page Web Bootstrap,
si vous allez tirer parti des composants basés sur JavaScript.
Bootstrap va plus loin,
puis regarder l'image de
Bootstrap est de prendre le lutteur sumo puis de le mettre dans une boîte.
Essentiellement debout pour empaqueter
vos plugins JavaScript dans un composant que vous pouvez utiliser plus facilement dans vos pages Web.
Ainsi, les composants basés sur Java Bootstrap prennent essentiellement le support basé sur JQuery,
mais les empaqueter d'une manière que vous pouvez les utiliser dans
votre page Web même sans écrire une seule ligne de code JavaScript.
C' est là que le composant JavaScript Bootstrap
peut être utilisé sans écrire une seule ligne de code.
La façon dont il est pris en charge dans Bootstrap est que,
les composants JavaScript prennent en charge un certain nombre d'
attributs d'étoile de trait de données que vous pouvez appliquer à vos balises HTML.
Donc, vous me verrez utiliser des choses comme le bascule de données, l'
espion de données, la cible de données, et ainsi de suite.
Si vous vous souvenez, lorsque nous avons conçu la barre NAV-bar,
vous aviez en fait vu quelques attributs.
Là, nous avons conçu le bouton pour les très petits écrans.
Maintenant, il est temps pour nous de [inaudible] pourquoi nous l'avons fait dans le module précédent.
Donc, nous allons explorer cette approche en détail dans ce module, en
regardant plusieurs composants Bootstrap qui tirent parti de la prise en charge de JavaScript.
Bien sûr, vous pouvez tirer parti
de l'API JavaScript complète qui est
disponible pour tous ces composants en écrivant du code JavaScript.
Nous allons reporter cela au module suivant,
où nous allons examiner comment vous pouvez écrire du code JavaScript simple basé sur
la syntaxe jQuery pour ajouter
plus de fonctionnalités à vos composants Bootstrap basés sur Javascript.