Bootstrap历练实例:基本按钮群组

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例:基本按钮群</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">按钮1</button>
<button type="button" class="btn btn-default">按钮2</button>
<button type="button" class="btn btn-default">按钮3</button>

</div>
<div class="btn-group">

<button type="button" class="btn btn-default">按钮4</button>
<button type="button" class="btn btn-default">按钮5</button>
<button type="button" class="btn btn-default">按钮6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮7</button>
<button type="button" class="btn btn-default">按钮8</button>
<button type="button" class="btn btn-default">按钮9</button>

</div>
</div>

</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

时间: 2024-10-05 04:25:25

Bootstrap历练实例:基本按钮群组的相关文章

Bootstrap历练实例:按钮组大小

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:按钮组大小</title> <meta charset="utf-8" /> <meta name="viewpor

Bootstrap历练实例:向列表组添加链接

向列表组添加链接 通过使用锚标签代替列表项,我们可以向列表组添加链接.我们需要使用 <div> 代替 <ul> 元素.下面的实例演示了这点: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:向列表组添

Bootstrap历练实例:向列表组添加内容

向列表组添加自定义内容 我们可以向上面已添加链接的列表组添加任意的 HTML 内容.下面的实例演示了这点: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:向列表组添加内容</title> <meta ch

Bootstrap历练实例:带列表组的面板

带列表组的面板 我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从 列表组 一章中学习如何创建列表组. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

Bootstrap历练实例:基本按钮组

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:基本按钮组</title> <meta charset="utf-8" /> <meta name="viewpor

Bootstrap 历练实例 - 按钮(Button)插件复选框

复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Boo

Bootstrap历练实例:块级按钮

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例:块级按钮</title> <meta charset="utf-8" /> <meta name="viewpo

Bootstrap历练实例:点击激活的按钮

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例:点击激活的按钮</title> <meta charset="utf-8" /> <meta name="vie

Bootstrap历练实例:小的按钮

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例:小的按钮</title> <meta charset="utf-8" /> <meta name="viewpo