Bootstrap CSS布局之按钮

 更新时间:2016年12月17日 10:11:01   作者:github_34514750  
这篇文章主要介为大家详细绍了Bootstrap CSS布局之按钮的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

按钮是任何系统都不能缺少的组件,设置到按钮的大小、颜色、状态等。

//btn源码
.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;
 -ms-touch-action: manipulation;
  touch-action: manipulation;
 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;
}

按钮样式

btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、btn-link

按钮大小

btn-xs、btn-sm、btn-lg、btn-block

//源码
.btn-lg,
.btn-group-lg > .btn {
 padding: 10px 16px;
 font-size: 18px;
 line-height: 1.3333333;
 border-radius: 6px;
}
.btn-sm,
.btn-group-sm > .btn {
 padding: 5px 10px;
 font-size: 12px;
 line-height: 1.5;
 border-radius: 3px;
}
.btn-xs,
.btn-group-xs > .btn {
 padding: 1px 5px;
 font-size: 12px;
 line-height: 1.5;
 border-radius: 3px;
}

所有按钮的宽度都是文本的长短再加上padding值来决定,若我们需要一个充满父容器的100%宽度的按钮,则无法实现。所以有btn-block
btn-block不根据文本收缩,也没有padding和margin值,而是充满父容器

//源码
.btn-block {
 display: block;
 width: 100%;
}
.btn-block + .btn-block {
 margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
 width: 100%;
}

多标签支持

btn相关元素的强大之处,不仅能支持button元素,也能支持a元素和input元素

<a class="btn btn-default" href="#">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="submit" value="输入框">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • uniapp自定义弹框的方法

    uniapp自定义弹框的方法

    这篇文章主要为大家详细介绍了uniapp自定义弹框的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • javascript 异步页面查询实现代码(asp.net)

    javascript 异步页面查询实现代码(asp.net)

    异步页面查询,其实与自动完成时一样的原理,根据用户输入的关键词自动的与数据库中的匹配,并显示出来,提高用户体验,但主要搜索量大的话,增加服务器开销。
    2010-05-05
  • 给localStorage设置一个过期时间的方法分享

    给localStorage设置一个过期时间的方法分享

    我们都知道localStorage不主动删除,永远不会销毁,那么如何设置localStorage的过期时间呢?下面这篇文章主要给大家介绍了关于如何给localStorage设置一个过期时间的相关资料,需要的朋友可以参考下
    2018-11-11
  • JavaScript面试必备技巧之手写一个Promise

    JavaScript面试必备技巧之手写一个Promise

    很多同学在面试的时候都会被要求手写一个Promise,那么今天我总结了一些手写Promise的方法,可以跟着我的思路一起来实现一个Promise,让我们的面试更有把握
    2023-02-02
  • javascript使用eval或者new Function进行语法检查

    javascript使用eval或者new Function进行语法检查

    使用代码来实现分析代码的语法,这是一件极其痛苦的事情。简单的解决办法是:使用脚本引擎自己的语法检查,比方说eval( ) 或者new Function( )。
    2010-10-10
  • js自定义Tab选项卡效果

    js自定义Tab选项卡效果

    这篇文章主要为大家详细介绍了js自定义Tab选项卡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • ES6正则的扩展实例详解

    ES6正则的扩展实例详解

    这篇文章主要介绍了ES6正则的扩展,结合实例形式详细分析了ES6正则操作常用的修饰符、模式、属性、方法及相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • 微信小程序实现城市列表选择

    微信小程序实现城市列表选择

    这篇文章主要为大家详细介绍了微信小程序实现城市列表选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • js实现随机抽奖

    js实现随机抽奖

    这篇文章主要为大家详细介绍了js实现随机抽奖功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 微信小程序 腾讯地图SDK 获取当前地址实现解析

    微信小程序 腾讯地图SDK 获取当前地址实现解析

    这篇文章主要介绍了微信小程序 腾讯地图SDK 获取当前地址实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08

最新评论