章节
问答
课签
笔记
评论
占位
占位

定制风格

在介绍按钮开篇就说过,Web页面可能会有不同的按钮风格。那么在Bootstrap框架也考虑了。在Bootstrap框架中除了默认的按钮风格之外,还有其他六种按钮风格,每种风格的其实都一样,不同之处就是按钮的背景颜色、边框颜色和文本颜色。

在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,在使用过程中,开发者只需要选择不同的类名即可:

使用起来就很简单,就像前面介绍的默认按钮一样的使用方法,只需要在基础按钮“.btn”基础上追加对应的类名,就可以得到需要的按钮风格。如:

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

运行效果如下或查看右侧结果窗口:

有关于按钮风格定制的源码可以查阅bootstrap.css文件第2081行~第2318行。

 

任务

我来试试:在代码编辑中添加一个信息按钮

?不会了怎么办

参考代码:

<button class="btn btn-info" type="button">信息按钮.btn-info</button>
||
1
2
<!doctype html>
<html lang="en"
    >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
body {
padding: 50px
      200px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 雨天好
是不一样的,btn-default是灰色底的,btn是没有任何样式的

已采纳回答 / 慕粉3863275
要在HTML中引入style.css<...code...>

最赞回答 / 依韵_宵音
HTML <button> 标签的 type 属性定义和用法type 属性规定按钮的类型。提示:请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。语法<button type="value">属性值值描述submit    该按钮是提交按钮(除了 Internet Explorer,该值是其他浏览器的默认值)。    button    该按钮是可点击的按钮(Int...

最赞回答 / 丶小八戒
参考链接:http://www.runoob.com/bootstrap/bootstrap-buttons.html

最新回答 / 樱缘
很不错,我很多知识都是在这里学的
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言