3-18 多标签支持
本节编程练习不计算学习进度,请电脑登录imooc.com操作

多标签支持

一般制作按钮除了使用<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标签变成按钮。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>多标签支持</title>
  6. <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <button class="btn btn-default" type="button">button标签按钮</button>
  10. <input type="submit" class="btn btn-default" value="input标签按钮"/>
  11.  
  12. <span class="btn btn-default">span标签按钮</span>
  13. <div class="btn btn-default">div标签按钮</div>
  14. </body>
  15. </html>
  1. body {
  2. padding: 100px;
  3. }
下一节