Maison > interface Web > Tutoriel d'amorçage > Quels sont les composants du site officiel de bootstrap ?

Quels sont les composants du site officiel de bootstrap ?

(*-*)浩
Libérer: 2019-07-18 14:56:25
original
2543 Les gens l'ont consulté

Bootstrap contient une multitude de composants Web Sur la base de ces composants, vous pouvez rapidement créer un site Web magnifique et entièrement fonctionnel. Il comprend les composants suivants :

Menu déroulant, groupe de boutons, menu déroulant de boutons, navigation, barre de navigation, chemin de navigation, pagination, mise en page, vignette, boîte de dialogue d'avertissement, progression barre, objets multimédias, etc.

Quels sont les composants du site officiel de bootstrap ?

Voici quelques-uns des composants démontrés. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Déroulants)

Le menu déroulant est commutable et affiche les liens dans un menu contextuel au format liste . Ceci peut être réalisé en interagissant avec le plugin JavaScript Dropdown.

Si vous devez utiliser le menu déroulant, il vous suffit d'ajouter le menu déroulant dans la classe .dropdown. L'exemple suivant montre un menu déroulant de base :

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>
Copier après la connexion

Navigation

Ils utilisent le même balisage et la même classe de base .nav. Bootstrap fournit également une classe d'assistance pour partager le balisage et l'état. Changer la classe modifiée vous permet de basculer entre différents styles.

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>
Copier après la connexion

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal