<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<style type="text/css">
</style>
<body>
<!--按钮-->
<div class="container">
<button type="button" class="btn btn-success">success</button>
<button type="button" class="btn btn-block">block</button>
<button type="button" class="btn btn-danger">danger</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-primary">primary</button>
<button type="button" class="btn btn-link">link</button>
<button type="button" class="btn btn-warning">warning</button>
</div>
<div class="container">
<button type="button" class="btn btn-info btn-lg">info</button>
<button type="button" class="btn btn-info">info</button>
<button type="button" class="btn btn-info btn-sm">info</button>
<button type="button" class="btn btn-info btn-xs">info</button>
</div>
<!--激活 禁用-->
<a href="#" class="btn btn-default btn-lg active" disabled="disable">default</a>
<!--图片 圆形 圆角 带边框-->
<img src="1.png" alt="" class="img-circle">
<img src="1.png" alt="" class="img-rounded">
<img src="1.png" alt="" class="img-thumbnail">
<!--
图标类基于span标签 不能与其他组件同用
-->
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<!--下拉菜单-->
<div class="container">
<!--pull-right 按钮向右边靠-->
<div class="dropdown pull-right">
<button class="btn btn-success dropdown-toggle"
type="button" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<!--添加一个标题-->
<li role="presentation" class="dropdown-header">###</li>
<li><a href="#" role="menuitem">联系方式</a></li>
<li><a href="#" role="menuitem">关于</a></li>
<!--添加分割线-->
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">***</li>
<li><a href="#" role="menuitem">1</a></li>
<li class="disabled"><a href="#" role="menuitem">2</a></li>
</ul>
</div>
</div>
<!--按钮组-->
<div class="container">
<div class="btn-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 class="btn-toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
</div>
</div>
<!--按钮组加下拉菜单
默认水平 垂直btn-group-vertical
-->
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</div>
</div>
<!--3个按钮充满整个屏幕-->
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/zuiaimiusi/p/12169270.html
时间： 2024-08-14 16:32:41