免費(fèi)AI編程助手
Bootstrap 按鈕組
2018-03-03 16:34 更新
Bootstrap按鈕組將一系列按鈕組合在一行中。
要?jiǎng)?chuàng)建按鈕組，在一個(gè)<div>元素中封裝一系列按鈕，并在其上應(yīng)用.btn-group類。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
</body>
</html>垂直按鈕組
要?jiǎng)?chuàng)建垂直按鈕組，請(qǐng)使用 .btn-group-vertical類。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Top</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Bottom</button>
</div>
</div>
</body>
</html>按鈕工具欄
我們可以將按鈕組合在一起來(lái)創(chuàng)建按鈕工具欄。要?jiǎng)?chuàng)建按鈕工具欄，要在<div>元素中封裝按鈕組，并在其上應(yīng)用.btn-toolbar類。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">8</button>
</div>
</div>
</div>
</body>
</html>按鈕組的高度
我們可以在按鈕組上應(yīng)用相關(guān)大小的類，如.btn-group-lg，.btn-group-sm或.btn-group-xs來(lái)創(chuàng)建更大或更小的按鈕組。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<br>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<br>
<div class="btn-toolbar">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<br>
<div class="btn-toolbar">
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
</div>
</body>
</html>在組中對(duì)齊按鈕
我們可以通過(guò)應(yīng)用一個(gè)額外的類.btn-group-justified到.btn-group基類，來(lái)使一組按鈕伸展到相同的大小以跨越其父類的整個(gè)寬度。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Left</a>
<a href="#" class="btn btn-primary">Middle</a>
<a href="#" class="btn btn-primary">Right</a>
</div>
</div>
</body>
</html>對(duì)齊按鈕組
要使用<button>元素調(diào)整按鈕組，請(qǐng)將每個(gè)按鈕單獨(dú)封裝在.btn-group類中。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
</div>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：