表单控件(按钮)，玩转Bootstrap（基础）教程-慕课网

表单控件(按钮)

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

☑ input[type=“submit”]

☑ input[type=“button”]

☑ input[type=“reset”]

☑ <button>

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

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

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

任务

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

?不会了怎么办

index.html
style.css

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件状态——焦点状态</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <table class="table table-bordered table-striped"> <thead> <tr> <th>Button</th> <th>class=""</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><button class="btn" href="#">Default</button></td> <td><code>btn</code></td> <td>Standard gray button with gradient</td> </tr> <tr> <td><button class="btn btn-primary" href="#">Primary</button></td> <td><code>btn btn-primary</code></td> <td>Provides extra visual weight and identifies the primary action in a set of buttons</td> </tr> <tr> <td><button class="btn btn-info" href="#">Info</button></td> <td><code>btn btn-info</code></td> <td>Used as an alternative to the default styles</td> </tr> <tr> <td><button class="btn btn-success" href="#">Success</button></td> <td><code>btn btn-success</code></td> <td>Indicates a successful or positive action</td> </tr> <tr> <td><button class="btn btn-warning" href="#">Warning</button></td> <td><code>btn btn-warning</code></td> <td>Indicates caution should be taken with this action</td> </tr> <tr> <td><button class="btn btn-danger" href="#">Danger</button></td> <td><code>btn btn-danger</code></td> <td>Indicates a dangerous or potentially negative action</td> </tr> <tr> <td><button class="btn btn-inverse" href="#">Inverse</button></td> <td><code>btn btn-inverse</code></td> <td>Alternate dark gray button, not tied to a semantic action or use</td> </tr> </tbody> </table> </body> </html>

body{padding:20px;margin:20px;}

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

3-9 表单控件(按钮)