Heim > Artikel > Web-Frontend > So verwenden Sie Bootstrap-Komponenten
So verwenden Sie Bootstrap-Komponenten
- (*-*)浩Original
- 2019-07-19 11:54:143678Durchsuche
Die Bootstrap-Komponente ist sehr einfach zu verwenden. Sie müssen lediglich auf die entsprechende Klasse verweisen und das entsprechende HTML-Element festlegen, um sie zu verwenden.
Zum Beispiel: Schriftartensymbol (empfohlenes Lernen: Bootstrap-Video-Tutorial)
Bootstrap wird mit Glyphen in mehr als 200 Schriftformaten geliefert.
Um Schriftsymbole zu verwenden, verwenden Sie einfach den folgenden Code. Bitte lassen Sie zwischen Schriftartsymbol und Text ausreichend Platz.
<span class="glyphicon glyphicon-search"></span>
Zum Beispiel: Um ein Dropdown-Menü zu verwenden, fügen Sie einfach das Dropdown-Menü zur Klasse .dropdown hinzu.
Das folgende Beispiel zeigt ein einfaches Dropdown-Menü: js-Unterstützung ist erforderlich.
<!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>
Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr darüber zu erfahren!
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Bootstrap-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!