Comment utiliser les composants d'amorçage-Tutoriel d'amorçage-php.cn

Comment utiliser les composants d'amorçage

(*-*)浩

Libérer： 2019-07-19 11:54:14

original

3718 Les gens l'ont consulté

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>

Copier après la connexion

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>

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!