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

基本按钮

Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样,都是通过类名“btn”来实现。不同的是在V3.x版本要简约很多,去除了V2.x版本中的大量的CSS3中的部分特效,比如说文本阴影(text-shadow)、渐变背景(background-image)、边框阴影(box-shadow)等。
难能可贵的是,Bootstrap框架中的考虑了不同浏览器的解析差异,进行了比较安全的兼容性处理,使按钮效果在不同的浏览器中所呈现的效果基本相同。

源码请查阅bootstrap.css文件第1992行~第2010行:

.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

Bootstrap框架的按钮使用非常的简单,使用方式如下:

<button class="btn" type="button">我是一个基本按钮</button>

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

任务

我来试一试:在右侧代码编辑器中添加一个基本按钮
 

?不会了怎么办

参考代码如下:

<button class="btn" type="button">我是一个基本按钮</button>
||
1
2
<!doctype html>
<html lang="en"
    >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
body {
padding: 100px
      ;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

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

最新回答 / _TimChen
因为没有link  style.css

已采纳回答 / 慕工程7806118
<button>  Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”

最赞回答 / 丶MOAOL
这个是通过预写的CLASS来实现效果的,也就是他通过TYPE是什么类型来给样式,TYPE和CLASS的顺序可以搞动的,多试一下就知道了!

最新回答 / 雨夜敬清秋
调整class和type的位置即可
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言