boostrap按钮总结

川长思鸟来 2022-05-14 04:52 142阅读 0赞

#### 按钮 ####

<table> 
 <thead> 
  <tr> 
   <th>样式</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>btn</td> 
   <td>原始样式按钮</td> 
  </tr> 
  <tr> 
   <td>btn-default</td> 
   <td>默认按钮</td> 
  </tr> 
  <tr> 
   <td>btn-primary</td> 
   <td>提交按钮</td> 
  </tr> 
  <tr> 
   <td>btn-success</td> 
   <td>成功按钮</td> 
  </tr> 
  <tr> 
   <td>btn-info</td> 
   <td>信息按钮</td> 
  </tr> 
  <tr> 
   <td>btn-warning</td> 
   <td>警告按钮</td> 
  </tr> 
  <tr> 
   <td>btn-danger</td> 
   <td>危险按钮</td> 
  </tr> 
  <tr> 
   <td>btn-lg</td> 
   <td>大按钮</td> 
  </tr> 
  <tr> 
   <td>btn-sm</td> 
   <td>小按钮</td> 
  </tr> 
  <tr> 
   <td>btn-xs</td> 
   <td>最小按钮</td> 
  </tr> 
  <tr> 
   <td>btn-block</td> 
   <td>宽屏按钮</td> 
  </tr> 
  <tr> 
   <td>active</td> 
   <td>禁用按钮</td> 
  </tr> 
  <tr> 
   <td>disabled btn-danger btn-xs</td> 
   <td>多种按钮样式混用</td> 
  </tr> 
 </tbody> 
</table>

下面案例代码:

1<!DOCTYPE html>
     2<html>
     3<head>
     4<meta charset="utf-8"> 
     5<script src="js/bootstrap/3.3.6/bootstrap.js"></script>
     6<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
     7<script src="js/bootstrap/3.3.6/bootstrap.js"></script>
     8<p>
     9<button type="button" class="btn">原始样式按钮</button>
    10</p>
    11<p>
    12<button type="button" class="btn btn-default">默认按钮</button>
    13</p>
    14<p>
    15<button type="button" class="btn btn-primary">提交按钮</button>
    16</p>
    17<p>
    18<button type="button" class="btn btn-success">成功按钮</button>
    19</p>
    20<p>
    21<button type="button" class="btn btn-info">信息按钮</button>
    22</p>
    23<p>
    24<button type="button" class="btn  btn-warning">危险按钮</button>
    25</p>
    26<p>
    27<button type="button" class="btn btn-link">表现为链接</button>
    28</p>
    29<p>
    30<button type="button" class="btn btn-lg">大按钮</button>
    31</p>
    32<p>
    33<button type="button" class="btn btn-sm ">小按钮</button>
    34</p>
    35<p>
    36<button type="button" class="btn btn-xs">最小按钮</button>
    37</p>
    38<p>
    39<button type="button" class="btn btn-block ">宽屏按钮</button>
    40</p>
    41<p>
    42<button type="button" class="btn btn-active">激活状态按钮</button>
    43</p>
    44<p>
    45<button type="button" class="btn btn-disabled">禁用按钮</button>
    46</p>
    47<p>
    48<button type="button" class="btn disabled btn-danger btn-xs">多种按钮样式混用</button>
    49</p>
    50</body>
    51</html>

![这里写图片描述][70]

[70]: /images/20220514/1fa8f280dd914d858770efb237fdaedc.png