第一步：引用Bootstrap官网封装号的CSS插件
Bootstrap 是前端最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
第二步：设计你自己喜欢的按钮的样式或者根据项目需求进行设计
１、页面上的数字１是单纯颜色改变样式
２、页面上数字２是在按钮上增加小图标
３、页面上数字３是使按钮具有下拉菜单
４、第三行按钮的单击下拉菜单里面第一级它处在状态是禁用状态。
第三步：代码讲解
<!--－－－－－－－－－－1、单纯改变按钮颜色－－－－－－－－－－－-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-sm-lg-12 text-center">
<div class="btn">默认颜色(灰色)</div> *class类里面设置按钮颜色属性＊
<div class="btn btn-primary">颜色（深蓝色）</div>
<div class="btn btn-info">颜色（淡蓝色）</div>
<div class="btn btn-success">颜色（青色）</div>
<div class="btn btn-warning">颜色（橙黄色）</div>
<div class="btn btn-danger">颜色（红色）</div>
</div>
<!--－－－－－单纯的颜色设计－－－－－－－－－－－－-->
<!-----------------------２、使按钮带有小图标-------------------------------------------->
<div style="margin-top: 50px;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-sm-lg-12 text-center">
<button type="button" id="update" style="min-width:150px;" class="btn btn-warning" onclick="window.location.href = '/BackGround/UserManage'">
<i class="glyphicon glyphicon-level-up" style="font-size: 13px; color: red;">返回上一步</i>
</button>
<button type="reset" id="reset" style="min-width:150px;" class="btn btn-danger" onclick="resets()"> <span class="glyphicon glyphicon-retweet">重置</span> </button>
<button type="button" id="update" style="min-width:150px;" class="btn btn-info"><i class="glyphicon glyphicon-ok"> 提交</i> </button>
</div>
／＊<i class=""></i> 或者<span class=""></span>标签都可以设置小图标在它class类设置＊／
<!------------------------------------使按钮带有小图标--------------------->
<!--－－－－－－－－－－－－－－－－３、按钮式下拉菜单－－－－－－－－－－－－－-->
<div style="top:35px;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-sm-lg-12 text-center" >
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
单击下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="disabled"><a href="#">第一级</a></li>@*class类：disabled－－是禁止属性*@
<li><a href="#">第二级</a></li>
<li><a href="#">第三级</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">第四级</a></li>
</ul>
</div>
<!--下 -->
<div class="btn-group">@* call类：btn-group－－是向下属性 *@
<button type="button" class="btn btn-danger">分裂式按钮下拉菜单</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only"> </span>
</button>
<ul class="dropdown-menu">
<li><a href="#">第一级</a></li>
<li><a href="#">第二级</a></li>
<li><a href="#">第三级</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">第四级</a></li>
</ul>
</div>
<!--上-->
<div class="btn-group dropup">@* call类：btn-group dropup－－是向上属性 *@
<button type="button" class="btn btn-warning">向上弹出分裂式按钮菜单</button>
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only"> </span>
</button>
<ul class="dropdown-menu">
<li><a href="#">第一级</a></li>
<li><a href="#">第二级</a></li>
<li><a href="#">第三级</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">第四级</a></li>
</ul>
</div>
</div>
<!--－－－－－－－－－－－－－－－－按钮式下拉菜单－－－－－－－－－－－－－-->