<!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/bootstrap@3.3.7/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>