bootstrap 組件練習
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hello bootstrap</title>
<!-- 載入bootstrap壓縮CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div>
<h1>你好，世界！</h1>
<!-- 載入glyphicon圖標 -->
<span class="glyphicon glyphicon-search">搜索</span></br>
<span class="glyphicon glyphicon-camera">拍照</span></br>
<span class="glyphicon glyphicon-circle-arrow-down">下載</span></br>
<!-- 基本按鈕顯示 -->
<button type=“button” class="btn btn-default">默認灰色按鈕</button>
<button type=“button” class="btn btn-primary">藍色</button>
<button type=“button” class="btn btn-info">信息</button>
<button type=“button” class="btn btn-success">成功</button>
<button type=“button” class="btn btn-warning">警告</button>
<button type=“button” class="btn btn-danger">危險</button></br>
<a class="btn btn-primaty" href="#" role="button">用a標籤必須確定role爲button</a>
<!-- 按鈕大小控制 -->
<button type=“button” class="btn btn-default btn-lg">默認灰色按鈕</button>
<button type=“button” class="btn btn-primary">藍色</button>
<button type=“button” class="btn btn-info btn-sm">信息</button>
<button type=“button” class="btn btn-success">成功</button>
<button type=“button” class="btn btn-warning btn-xs">警告</button>
<button type=“button” class="btn btn-danger">危險</button>
<button type=“button” class="btn btn-link">link</button>
<!-- 按鈕像父塊一樣大-->
<button type=“button” class="btn btn-primary btn-lg btn-block">block level button</button>
<button type=“button” class="btn btn-default btn-lg btn-block">block level button</button>
<!-- 按鈕禁用 -->
<button type=“button” class="btn btn-success disabled="disabled">成功</button>
<button type=“button” class="btn btn-warning disabled="active">警告</button></br>
<!-- 圖標載入按鈕，看起來有圖標文字的按鈕 -->
<button type=“button” class="btn btn-primary disabled="disabled"><span class="glyphicon glyphicon-play-circle
" ></span>   播放</button></br>
<button type=“button” class="btn btn-primary disabled="disabled"><span class="glyphicon glyphicon-earphone
" ></span>  打電話</button></br>
<!-- 按鈕一般下拉菜單 -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="false" aria-expanded="false">省份<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">浙江</a></li>
<li class="disabled"><a href="#">江蘇</a></li>
<li><a href="#">廣東</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" οnclick="window.close()">山東</a></li>
</ul>
</div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div> </br>
<div class="btn-group" role="group">
<!-- <div class="btn-group-vertical" role="group"> -->
<div class="btn-group" role="toolbar">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="false" aria-expanded="false">省份<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">浙江</a></li>
<li class="disabled"><a href="#">江蘇</a></li>
<li><a href="#">廣東</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" οnclick="window.close()">山東</a></li>
</ul>
</div>
<div class="btn-group" role="toolbar">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="false" aria-expanded="false">城市<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">杭州</a></li>
<li class="disabled"><a href="#">寧波</a></li>
<li><a href="#">青島</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" οnclick="window.close()">溫州</a></li>
</ul>
</div>
<div class="btn-group" role="toolbar">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="false" aria-expanded="false">區域<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">西湖區</a></li>
<li class="disabled"><a href="#">海曙區</a></li>
<li><a href="#">嶗山區</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" οnclick="window.close()">鹿城區</a></li>
</ul>
</div>
<div class="btn-group" role="toolbar">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="false" aria-expanded="false">街道<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">莫干山路</a></li>
<li class="disabled"><a href="#">寧波路</a></li>
<li><a href="#">嶗山東路</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" οnclick="window.close()">五馬街</a></li>
</ul>
</div>
</div>
<!-- 按鈕分裂式下拉菜單-->
<div class="btn-group dropup">
<div class="btn-group">
<button type="button" class="btn btn-warning">省份</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="false" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">浙江</a></li>
<li class="disabled"><a href="#">江蘇</a></li>
<li><a href="#">廣東</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" οnclick="window.close()">山東</a></li>
</ul>
</div>
<div class="btn-group" role="toolbar">
<button type="button" class="btn btn-warning">城市</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="false" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">杭州</a></li>
<li class="disabled"><a href="#">寧波</a></li>
<li><a href="#">青島</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" οnclick="window.close()">溫州</a></li>
</ul>
</div>
<div class="btn-group" role="toolbar">
<button type="button" class="btn btn-warning">區域</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1"
aria-haspopup="false" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">西湖區</a></li>
<li class="disabled"><a href="#">海曙區</a></li>
<li><a href="#">嶗山區</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" οnclick="window.close()">鹿城區</a></li>
</ul>
</div>
<div class="btn-group" role="toolbar">
<button type="button" class="btn btn-warning">街道</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">莫干山路</a></li>
<li class="disabled"><a href="#">寧波路</a></li>
<li><a href="#">嶗山東路</a></li>
<li role="separator" class="divider"></li>
<li><a href="#" οnclick="window.close()">五馬街</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 順序載入jquery庫並且加載bootstrap壓縮js庫 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Docker 安裝最新的 JFrog Artifactory 製品倉庫
Docker 安裝最新的 JFrog Artifactory 製品倉庫 1、前言 JFrog Artifactory 是目前全球唯一的支持所有開發語言，