Maison > Article > interface Web > Comment utiliser les composants d'amorçage
Comment utiliser les composants d'amorçage
- (*-*)浩original
- 2019-07-19 11:54:143724parcourir
Le composant bootstrap est très simple à utiliser. Il vous suffit de référencer la classe correspondante et de définir l'élément HTML correspondant pour l'utiliser.
Tels que : icône de police (apprentissage recommandé : Tutoriel vidéo Bootstrap)
Bootstrap est livré avec des glyphes dans plus de 200 formats de police.
Pour utiliser les icônes de police, utilisez simplement le code ci-dessous. Veuillez laisser un espace approprié entre l'icône de police et le texte.
<span class="glyphicon glyphicon-search"></span>
Par exemple : pour utiliser un menu déroulant, ajoutez simplement le menu déroulant à la classe .dropdown .
L'exemple suivant montre un menu déroulant de base : la prise en charge de js est requise.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <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> </body> </html>
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!