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

多标签支持

一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit"><a>标签等。同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果。

我们一起来看看其他标签制作的基本按钮效果:

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

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

注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用buttona标签来制作按钮。

任务

我来试试:把a标签变成按钮。

?不会了怎么办

参考代码:

<a href="##" class="btn btn-default">a标签按钮</a>
||
1
2
<!doctype html>
<html lang="en"
    >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
body {
padding: 100px
      ;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

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

最新回答 / 幕布斯3545301
是的  这个#代替一个连接的,如果输入的是一个完整链接的话点击你后面的那个标签就可以直接跳转到该网站,例如将##替换为http://www.baidu.com就会直接跳转到百度。

已采纳回答 / 陈淑群
因为.btn这个类里面设置了   display: inline-block;

最新回答 / 慕娘2491410
这只是把a标签的链接做空而已,你可以在href属性里填上网址或者页面其他可以唯一标记的id

最新回答 / 吾王比利
有~肯定会有遗忘的,我是将内容看完后就把自己敲过的代码和截的图片看一下就加深印象了。接下来就可以参考官方API

已采纳回答 / 李晓健
给一下具体的代码和报错信息看一下。

最赞回答 / hey自然
摘自为w3school:<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。请始终为按钮规定 type ...

最新回答 / 慕工程7806118
html 里面的 role 本质上是增强语义性,增强组件的可访问性、可用性和可交互性。设置div 的 role=“button”,辅助工具就可以认出这实际上是个button
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言