溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Bootstrap 組件練習(xí)

發(fā)布時(shí)間：2020-06-20 22:16:32 來(lái)源：網(wǎng)絡(luò) 閱讀：298 作者：SolomonT 欄目：開發(fā)技術(shù)

<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<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>

<h2>你好，世界！</h2>

<!-- 載入glyphicon圖標(biāo) -->

<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">默認(rèn)灰色按鈕</button>

    <button type=“button” class="btn btn-primary">藍(lán)色</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">危險(xiǎn)</button></br>


<a class="btn btn-primaty" href="#" role="button">用a標(biāo)簽必須確定role為button</a>


<!-- 按鈕大小控制 -->

    <button type=“button” class="btn btn-default btn-lg">默認(rèn)灰色按鈕</button>

    <button type=“button” class="btn btn-primary">藍(lán)色</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">危險(xiǎn)</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>



<!-- 圖標(biāo)載入按鈕，看起來(lái)有圖標(biāo)文字的按鈕 -->

 <button type=“button” class="btn btn-primary disabled="disabled"><span class="glyphicon glyphicon-play-circle

" ></span>&nbsp&nbsp 播放</button></br>



 <button type=“button” class="btn btn-primary disabled="disabled"><span class="glyphicon glyphicon-earphone

" ></span>&nbsp&nbsp打電話</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="#" onclick="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="#" onclick="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="#" onclick="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">區(qū)域<span class="caret"></span>

</button>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">

    <li><a href="#">西湖區(qū)</a></li>

    <li class="disabled"><a href="#">海曙區(qū)</a></li>

    <li><a href="#">嶗山區(qū)</a></li>

    <li role="separator" class="divider"></li>

    <li><a href="#" onclick="window.close()">鹿城區(qū)</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="#" onclick="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="#" onclick="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="#" onclick="window.close()">溫州</a></li>

    </ul>

</div>

<div class="btn-group" role="toolbar">

  <button type="button" class="btn btn-warning">區(qū)域</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="#">西湖區(qū)</a></li>

    <li class="disabled"><a href="#">海曙區(qū)</a></li>

    <li><a href="#">嶗山區(qū)</a></li>

    <li role="separator" class="divider"></li>

    <li><a href="#" onclick="window.close()">鹿城區(qū)</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="#" onclick="window.close()">五馬街</a></li>

    </ul>

</div>

</div>








</div>


</div>

<!-- 順序載入jquery庫(kù)并且加載bootstrap壓縮js庫(kù) -->

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="../js/bootstrap.min.js"></script>


</body>

</html>  -->


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手