欢迎光临
我们一直在努力

Bootstrap教程:button按钮多种颜色风格

按钮也是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>

效果图:

赞(0) 打赏
未经允许不得转载:新起点博客 » Bootstrap教程:button按钮多种颜色风格
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏