脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap按钮

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="输入框">

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

您可能感兴趣的文章:

相关文章

  • JavaScript中transform实现数字翻页效果

    JavaScript中transform实现数字翻页效果

    本文主要介绍JavaScript中利用transform实现数字翻页效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 微信小程序系列之自定义顶部导航功能

    微信小程序系列之自定义顶部导航功能

    这篇文章主要介绍了微信小程序系列之自定义顶部导航功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • JS实现部分HTML固定页面顶部随屏滚动效果

    JS实现部分HTML固定页面顶部随屏滚动效果

    这篇文章主要介绍了JS实现部分HTML固定页面顶部随屏滚动效果,涉及JavaScript响应onscroll事件动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2015-12-12
  • Javascript中浏览器窗口的基本操作总结

    Javascript中浏览器窗口的基本操作总结

    BOM全称是brower object model(浏览器对象模型)，主要用于管理窗口及窗口间的通讯，其核心对象是window。说窗口，可能并不准确。因为，有的浏览器窗口可能包含多个标签页，每个标签页都有自己的window对象。本文将详细介绍这些内容，有需要可以参考学习。
    2016-08-08
  • 如何利用JavaScript读取excel文件并绘制echarts图形

    如何利用JavaScript读取excel文件并绘制echarts图形

    这篇文章主要介绍了如何利用JavaScript读取excel文件并绘制echarts图形，文章通过excel财务报表，并且需要根据这张excel表绘制成各种echarts图形，需要了解更多详情的小伙伴可以参考一下文章内内容
    2022-05-05
  • JS基于FileSystemObject创建一个指定路径的TXT文本文件

    JS基于FileSystemObject创建一个指定路径的TXT文本文件

    这篇文章主要介绍了JS基于FileSystemObject创建一个指定路径的TXT文本文件,涉及javascript使用ActiveXObject控件中FileSystemObject对象模型的基本技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 修改file按钮的默认样式实现代码

    修改file按钮的默认样式实现代码

    file按钮作为上传文件使用，不过默认的样式确实让人不敢恭维啊，如何才可以修改为漂亮一点的呢？接下来与大家分享下具体的实现代码，感兴趣的朋友可以参考下哈
    2013-04-04
  • 微信小程序绘制图片发送朋友圈

    微信小程序绘制图片发送朋友圈

    这篇文章主要为大家详细介绍了微信小程序绘制图片发送朋友圈，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JS中bridge的原理与封装

    JS中bridge的原理与封装

    这篇文章主要介绍了JS中bridge的原理与封装，文章围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-06-06
  • JS实现iframe自适应高度的方法示例

    JS实现iframe自适应高度的方法示例

    这篇文章主要介绍了JS实现iframe自适应高度的方法,结合实例形式分析了JS实现iframe高度自适应的实现技巧,并给出了项目示例供大家参考,需要的朋友可以参考下
    2017-01-01

最新评论