3-9 表单控件(按钮)
本节编程练习不计算学习进度，请电脑登录imooc.com操作

表单控件(按钮)

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现：

  ☑  input[type=“submit”]

  ☑  input[type=“button”]

  ☑  input[type=“reset”]

  ☑  <button>

在Bootstrap框架中的按钮都是采用<button>来实现。

有关于Bootstrap中按钮如何制作，在这里不做过多阐述，因为按钮也是Bootstrap框架中核心部分之一，后面我们专门有一节内容来介绍Bootstrap的按钮。

这里先让大家看看Bootstrap的按钮长成什么样：

 

任务

本小节没有代码任务，单击“提交”按钮进行下一个小节学习。

index.htmlstyle.css 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单控件状态——焦点状态</title>
  6. 	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <table class="table table-bordered table-striped">  
  10.     <thead>  
  11.       <tr>  
  12.         <th>Button</th>  
  13.         <th>class=""</th>  
  14.         <th>Description</th>  
  15.       </tr>  
  16.     </thead>  
  17.     <tbody>  
  18.       <tr>  
  19.         <td><button class="btn" href="#">Default</button></td>  
  20.         <td><code>btn</code></td>  
  21.         <td>Standard gray button with gradient</td>  
  22.       </tr>  
  23.       <tr>  
  24.         <td><button class="btn btn-primary" href="#">Primary</button></td>  
  25.         <td><code>btn btn-primary</code></td>  
  26.         <td>Provides extra visual weight and identifies the primary action in a set of buttons</td>  
  27.       </tr>  
  28.       <tr>  
  29.         <td><button class="btn btn-info" href="#">Info</button></td>  
  30.         <td><code>btn btn-info</code></td>  
  31.         <td>Used as an alternative to the default styles</td>  
  32.       </tr>  
  33.       <tr>  
  34.         <td><button class="btn btn-success" href="#">Success</button></td>  
  35.         <td><code>btn btn-success</code></td>  
  36.         <td>Indicates a successful or positive action</td>  
  37.       </tr>  
  38.       <tr>  
  39.         <td><button class="btn btn-warning" href="#">Warning</button></td>  
  40.         <td><code>btn btn-warning</code></td>  
  41.         <td>Indicates caution should be taken with this action</td>  
  42.       </tr>  
  43.       <tr>  
  44.         <td><button class="btn btn-danger" href="#">Danger</button></td>  
  45.         <td><code>btn btn-danger</code></td>  
  46.         <td>Indicates a dangerous or potentially negative action</td>  
  47.       </tr>  
  48.       <tr>  
  49.         <td><button class="btn btn-inverse" href="#">Inverse</button></td>  
  50.         <td><code>btn btn-inverse</code></td>  
  51.         <td>Alternate dark gray button, not tied to a semantic action or use</td>  
  52.       </tr>  
  53.     </tbody>  
  54.   </table>    
  55. </body>
  56. </html>
  1. body{padding:20px;margin:20px;}
下一节