bootstrap元件怎麼使用

(*-*)浩
發布: 2019-07-19 11:54:14
原創
3741 人瀏覽過

bootstrap元件使用非常簡單,只需要引用對應的類別、和設定對應HTML元素即可使用。

bootstrap元件怎麼使用

如:字體圖示(推薦學習:Bootstrap影片教學

Bootstrap 捆綁了200 多種字體格式的字形。

如需使用字體圖標,只需要簡單地使用下面的程式碼。請在字體圖示和文字之間保留適當的空間。

<span class="glyphicon glyphicon-search"></span>
登入後複製

如:使用下拉式選單,只需在 class .dropdown 內加上下拉式選單。

下面的實例示範了基本的下拉式選單:需要js支援。

<!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>
登入後複製

更多Bootstrap相關技術文章,請造訪Bootstrap教學欄位進行學習!

以上是bootstrap元件怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板