bootstrap学习笔记系列4------bootstrap按钮

最新推荐文章于 2022-05-28 21:30:55 发布

南京闫伟亮的野爹

最新推荐文章于 2022-05-28 21:30:55 发布

阅读量157

点赞数 1

分类专栏：前端文章标签：【BootStrap学习笔记】

原文链接：https://www.mk2048.com/blog/blog.php?id=b2b2hjkbb&title=bootstrap%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E7%B3%BB%E5%88%974------bootstrap%E6%8C%89%E9%92%AE

版权

前端专栏收录该内容

368 篇文章 3 订阅

订阅专栏

按钮标签

在

<a>

<button>

或

input

元素上使用按钮class。但是为了避免跨浏览器的不一致性，建议使用

<button>

标签。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta charset="utf-8">
      <!-- 引入 Bootstrap -->
      <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>

          <!--记录不同的标签使用bootstrap的btn类-->
      <a class="btn btn-default" href="#" role="button">链接</a>
      <button class="btn btn-default" type="submit">按钮</button>
      <input class="btn btn-default" type="button" value="输入">
      <input class="btn btn-default" type="submit" value="提交">
      
      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>
</html>

感觉link标签的不怎么明显，但是还是能够从边距上看出是一个button的，这里只是说明了怎样利用不同的标签来使用

btn

class。

可以使用在以上标签的样式

基本样式

```
btn
```
为按钮添加基本的按钮样式，一般与下面的类联合只用，这样可以保证按钮大小和边距的统一。

颜色
```
btn-default
```
默认的按钮样式，就是白底黑字灰框，要跟
```
btn
```
联合使用，下同
```
btn-primary
```
原始的按钮样式，蓝底白字
```
btn-success
```
成功的样式，绿底白字
```
btn-info
```
表示点击后会弹出信息，淡蓝色底白字
```
btn-warning
```
表示需要谨慎操作的按钮，黄底白字
```
btn-danger
```
表示危险的操作，红底白字
```
btn-link
```
让按钮看起来像一个连接，仍然保持按钮的行为

大小
```
btn-lg
```
比普通的图标要大的大图标
```
btn-sm
```
小图标
```
btn-xs
```
超小图标
```
btn-block
```
块级按钮，拉伸至父元素100%的宽度

按钮这里并不能构成响应式分布，如果三个都写了，最后一个类会覆盖前面的样式。

状态

```
active
```
表示按钮被激活，按钮会比普通的按钮宽一些
```
disabled
```
disabled属性和disabled类都能将按钮禁用，两者效果相同。对于link，用disabled属性会让link显示出和button相同的效果。鼠标移上去就变成禁止的样式

      <!--应用了disabled类的只是禁用了连接-->   
      <a class="btn btn-danger disabled"  role="button" href="#">应用disabled类</a>
      
      <!--使用了disabled属性则禁用了整个按钮-->
      <a class="btn btn-danger"  role="button" disabled="disabled" href="#">应用disabled标签</a>
      
      <button class="btn btn-default btn-danger disabled"  type="submit">按钮</button>

南京闫伟亮的野爹

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap学习笔记系列4------bootstrap按钮

按钮标签在 <a>, <button>或 input元素上使用按钮class。但是为了避免跨浏览器的不一致性，建议使用 <button>标签。 <!DOCTYPE html><html> <...
复制链接

扫一扫