Bootstrap组件_按钮组
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap组件_按钮组
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
按鈕組通過按鈕組容器把一組按鈕放在同一行里。通過與按鈕插件聯合使用，可以設置為單選框或多選框的樣式和行為。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按鈕組</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="btn-group" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-up"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></body>
</html>
按鈕工具欄把一組 <div class="btn-group"> 組合進一個 <div class="btn-toolbar"> 中就可以做成更復雜的組件。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按鈕組</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="btn-group" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-up"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></body>
</html>
尺寸只要給 .btn-group 加上 .btn-group-* 類，就省去為按鈕組中的每個按鈕都賦予尺寸類了，如果包含了
多個按鈕組時也適用。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按鈕組</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="btn-toolbar" role="toolbar"><div class="btn-group btn-group-lg" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div><div class="btn-group btn-group-sm" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div><div class="btn-group btn-group-xs" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div></div></div></body>
</html>
嵌套想要把下拉菜單混合到一系列按鈕中，只須把 .btn-group 放入另一個 .btn-group 中。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按鈕組</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="btn-group" role="group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expended="false" ><span class="caret"></span></button><ul class="dropdown-menu" role="menu"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li></ul></div></div></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>按鈕組</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ><script src="jquery-1.12.1.js"></script><script src="bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="btn-group btn-group-justified" role="group"><div class="btn-group" role="group"><button type="button" class="btn btn-default">left</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default">middle</button></div><div class="btn-group" role="group"><button type="button" class="btn btn-default">right</button></div></div></div></body>
</html>
?
總結
以上是生活随笔為你收集整理的Bootstrap组件_按钮组的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap组件_下拉菜单
- 下一篇： Bootstrap组件_输入框组