按钮也是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。而且不同的Web页面具有不同的按钮风格,甚至说同一个Web网站或应用程序具有多种按钮风格,比如说不同的按钮颜色、大小和状态等。那么Bootstrap框架也考虑了这些因素,接下来和bootstrap教程网我们一起来探讨Bootstrap框架中的另一核心部分内容——按钮。
Bootstrap框架的按钮也是一个独立部分,我们同样在不同的版本之中能找到对应的代码:
演示代码:
<!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> <br> <br> <button class="btn" type="button">基础按钮.btn</button> <br> <br> <button class="btn btn-default" type="button">默认按钮.btn-default</button> <br> <br> <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <br> <br> <button class="btn btn-success" type="button">成功按钮.btn-success</button> <br> <br> <button class="btn btn-info" type="button">信息按钮.btn-info</button> <br> <br> <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <br> <br> <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <br> <br> <button class="btn btn-link" type="button">链接按钮.btn-link</button> <br> </body> </html>
效果图:
评论前必须登录!
注册