3-16 基本按钮
本节编程练习不计算学习进度,请电脑登录imooc.com操作

基本按钮

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>

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

任务

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

  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.  
  10.  
  11.  
  12. </body>
  13. </html>
  1. body {
  2. padding: 100px;
  3. }
下一节