Twitter Bootstrap 3 - Composants JavaScript

Bootstrap Twitter: un cadre CSS simple et puissant et des composants JavaScript détaillés

Twitter Bootstrap est l'un des cadres CSS les plus faciles et faciles à utiliser sur Internet. Mais ce n'est pas seulement pour les débutants, et son puissant ensemble de composants JavaScript est également populaire auprès des concepteurs, facile à utiliser et intégration rapide dans les projets. Ce tutoriel plongera dans certains des meilleurs composants JavaScript Bootstrap Twitter et comment les utiliser.

Points clés:

• Twitter Bootstrap 3 est un puissant cadre CSS avec des composants JavaScript complets, et peut facilement construire des modèles même si vous ne comprenez pas le CSS.
Les composants JavaScript de Bootstrap 3 sont écrits sur la base de JQuery, y compris Modal, Dropdown, ScrollSpy, Tab, Fooltp, Popover et Alert. Chaque composant a ses propres fonctionnalités spécifiques et peut être personnalisé pour répondre aux différents besoins du projet.
L'utilisation de ces composants JavaScript nécessite le téléchargement de Bootstrap 3 à partir de getbootstrap.com, ainsi qu'un navigateur Web (Google Chrome recommandé) et un éditeur de texte (comme le texte sublime). Pour s'assurer que les composants JavaScript fonctionnent correctement, Bootstrap CSS doit être inclus.
Le composant JavaScript de Bootstrap 3 est l'une des raisons importantes pour lesquelles il est si populaire. Ils fournissent des solutions pratiques aux développeurs qui ne comprennent pas les CSS et les concepteurs qui souhaitent améliorer l'efficacité de la conception.

Soyez utilisé:

Tout d'abord, vous devez télécharger Bootstrap 3 sur getbootstrap.com, préparer un navigateur Web (de préférence Google Chrome) et un éditeur de texte (j'utilise un texte sublime). Il convient de noter que les composants JavaScript de bootstrap sont écrits en fonction de jQuery, donc jQuery est nécessaire pour les utiliser. Après avoir téléchargé Bootstrap 3, copiez le contenu du dossier

dans le nouvel espace de travail. Vous vous demandez peut-être, pourquoi avez-vous toujours besoin de dossiers CSS et de polices pour apprendre JavaScript? De nombreux composants JavaScript bootstrap reposent sur CSS pour fonctionner correctement, ils ne fonctionneront donc pas correctement sans Bootstrap CSS inclus. Bootstrap 3 nous permet également d'utiliser chaque module séparément sans télécharger tous les composants JavaScript. Ce tutoriel se termine par la façon d'utiliser les modules seuls, au lieu d'inclure tous les composants. Ce tutoriel expliquera les principaux composants JavaScript twitter suivants suivants: dist

modal (boîte modale)
Dropdown (menu déroulant)
ScrollSpy (écoute de défilement)
onglet (onglet)
Info-bulle (info-bulle)
popover (popup)
alerte (boîte d'avertissement)

Nous expliquerons chaque composant un par un et faire quelques expériences pour obtenir un composant JavaScript Bootstrap 3 personnalisé. Cliquez ici pour afficher la page de démonstration.

modal (boîte modale)

Les boîtes modales sont similaires aux boîtes d'avertissement traditionnelles, mais sont plus puissantes, y compris les titres modaux, les corps modaux, le pied de page modal, les boutons de fermeture et les symboles de fermeture dans le coin supérieur droit. Il peut être utilisé dans de nombreuses applications pour les fenêtres de confirmation, comme avant de effectuer des paiements ou de supprimer un compte, etc.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  启动演示模态框
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">模态标题</h4>
      </div>
      <div class="modal-body">
        <h1>Hello World!</h1>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

Le modal bootstrap contient trois parties: titre, corps et pied de page. Vous pouvez décider quoi placer dans chaque section.

(Dropdown des composants suivants, ScrollSpy, Tab, Info-Ipp, Popover, alerte pour les explications et les exemples d'exemples, veuillez les ajouter en fonction du texte d'origine et garder le format d'image inchangé)

Conclusion

Avec ce tutoriel, vous devez mieux comprendre comment Twitter Bootstrap peut nous aider à écrire des composants JavaScript sans écrire de code jQuery. Ces composants JavaScript sont l'une des principales raisons pour lesquelles les frameworks Bootstrap Twitter sont si populaires. Il convient non seulement aux développeurs qui ne comprennent pas le CSS, mais aident également les concepteurs à améliorer l'efficacité de la conception. Dans le prochain article, je vais expliquer comment créer un curseur en utilisant le composant de carrousel de Twitter Bootstrap 3. Si vous avez des questions, n'hésitez pas à laisser un message dans la section des commentaires. Si vous êtes nouveau sur Twitter Bootstrap, veuillez visiter ma page d'auteur sur SitePoint et lire mon précédent tutoriel Twitter Bootstrap.

(La partie FAQ fournie dans le texte d'origine peut être éventuellement pseudo-originalisée au besoin, ou directement conservée.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!