位置: 编程技术 - 正文
推荐整理分享详解Bootstrap按钮(bootstrap按钮的风格有哪些?),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:bootstrap options,bootstrap options,bootstrap 按钮,bootstrap 按钮,bootstrap怎么让按钮居中,bootstrap 按钮,bootstrap 按钮,bootstrap按钮图标,内容如对您有帮助,希望把文章链接给更多的朋友!
描述
Bootstrap Button(按钮)JavaScript 插件允许您加强按钮的功能。您可以控制按钮的状态,也可以为组件创建按钮组,比如工具条。
什么是必需的
您必须引用 jquery.js 和 bootstrap-button.js - 这两个 JavaScript 文件。它们都位于 docs/assets/js 文件夹内。
如何使用它
您可以不编写任何 JavaScript 只通过标记使用该插件,也可以通过 JavaScript 启用按钮。
Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:
以下样式可用于<a>, <button>, 或 <input> 元素上:
类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式(未被操作) .btn-success 表示成功的动作 .btn-info 该样式可用于要弹出信息的按钮 .btn-warning 表示需要谨慎操作的按钮 .btn-danger 表示一个危险动作的按钮操作 .btn-link 让按钮看起来像个链接 (仍然保留按钮行为) .btn-lg 制作一个大按钮 .btn-sm 制作一个小按钮 .btn-xs 制作一个超小按钮 .btn-block 块级按钮(拉伸至父元素%的宽度) .active 按钮被点击 .disabled 禁用按钮
首先看下不同颜色的按钮:
效果:
btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link给按钮加上了不同的样式。
按钮大小
鉴于head部分都是相同的,只列出Body的内容。
效果如下所示:
按钮状态
按钮分为active和disabled两种状态、激活状态:按钮呈现出被按压的外观,即背景颜色变深、深色边框和阴影。禁用状态:按钮颜色会变淡 %,并失去渐变
看具体的例子:
按钮标签
a,input都可以表现的像一个按钮,但是避免跨浏览器不一致,最好使用Button标签。
以上内容给大家介绍了Bootstrap按钮相关知识,希望大家喜欢。
详解Bootstrap glyphicons字体图标 本章将讲解字体图标(Glyphicons),并通过一些实例了解它的使用。Bootstrap捆绑了多种字体格式的字形。首先让我们先来理解一下什么是字体图标。首先
详解Bootstrap的aria-label和aria-labelledby应用 aria-label正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本。如:!DOCTYPEhtmlhtmlheadmetacharset="
Javascript基于对象三大特性(封装性、继承性、多态性) Javascript基于对象的三大特征和C++,Java面向对象的三大特征一样,都是封装(encapsulation)、继承(inheritance)和多态(polymorphism)。只不过实现的方式不同,其基
友情链接: 武汉网站建设