免費(fèi)AI編程助手
Bootstrap 按鈕下拉菜單
2018-07-10 17:49 更新
按鈕下拉菜單
我們還可以創(chuàng)建下拉按鈕，以從一個(gè)按鈕有多個(gè)操作。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" ></script>
<style type="text/css">
.bs-example{<!--from o2fo.com-->
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
<hr>
<form>
<div class="input-group">
<div class="input-group-btn">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">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 class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</form>
</div>
</body>
</html>分段下拉按鈕組
除了其他按鈕之外，我們可以定義放置下拉按鈕的分段下拉按鈕組。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<link rel="stylesheet" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" rel="external nofollow" rel="external nofollow" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" rel="external nofollow" rel="external nofollow" ></script>
<style type="text/css">
.bs-example{<!--from o2fo.com-->
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<div class="input-group-btn">
<button tabindex="-1"
class="btn btn-default"
type="button">Action</button>
<button tabindex="-1"
data-toggle="dropdown"
class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default" type="button">Action</button>
<button tabindex="-1"
data-toggle="dropdown"
class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
<hr>
<form>
<div class="input-group">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default" type="button">Action</button>
<button tabindex="-1" data-toggle="dropdown"
class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button tabindex="-1" class="btn btn-default" type="button">Action</button>
<button tabindex="-1" data-toggle="dropdown"
class="btn btn-default dropdown-toggle" type="button">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</form>
</div>
</body>
</html>以上內(nèi)容是否對您有幫助：
更多建議：