Bootstrap 组件-按钮组

最新推荐文章于 2022-02-10 10:38:02 发布

litengbin

最新推荐文章于 2022-02-10 10:38:02 发布

阅读量266

点赞数

分类专栏：前端-Bootstrap

前端-Bootstrap 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1 按钮组
2 : 按钮工具栏
3 : 按钮组大小
4 : 垂直排列的按钮组
5 : 复选框
6 : 单选框

按钮组

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="btn-group" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>

按钮工具栏

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="btn-toolbar" role="toolbar" aria-label="study">
<div class="btn-group" role="group" aria-label="java">
  <button type="button" class="btn btn-default">基础</button>
  <button type="button" class="btn btn-default">中级</button>
  <button type="button" class="btn btn-default">高级</button>
</div>
 
<div class="btn-group" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>
 
<div class="btn-group" role="group" aria-label="framework">
  <button type="button" class="btn btn-default">Hiber</button>
  <button type="button" class="btn btn-default">Struts</button>
  <button type="button" class="btn btn-default">Spring</button>
</div>
</div>

按钮组大小

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
br{
margin:20px;
}
</style>
 
<div class="btn-group btn-group-lg" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>
<br>
 
<div class="btn-group btn-group" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>
<br>
<div class="btn-group btn-group-xs" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>

垂直排列的按钮组

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.0.3/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<div class="btn-group-vertical" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>

复选框

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="checkbox" checked>LOL(默认选中)
  </label>
  <label class="btn btn-default">
    <input type="checkbox" > DOTA
  </label>
  <label class="btn btn-default">
    <input type="checkbox" > WOW
  </label>
</div>

单选框

<!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" checked>LOL(默认选中)
  </label>
  <label class="btn btn-default">
    <input type="radio" > DOTA
  </label>
  <label class="btn btn-default">
    <input type="radio" > WOW
  </label>
</div>