Bootstrap系列---按钮
Bootstrap 按钮
注:本系列转载于菜鸟教程,仅用以自己学习总结和使用,只会显示自己学习使用的内容,
详细内容可以查看菜鸟教程网址:https://www.runoob.com/bootstrap/bootstrap-buttons.html
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 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 | 块级按钮(拉伸至父元素100%的宽度) |
.active | 按钮被点击 |
.disabled | 禁用按钮 |
按钮大小
下表列出了获得各种大小按钮的 class:
Class | 描述 |
---|---|
.btn-lg | 这会让按钮看起来比较大。 |
.btn-sm | 这会让按钮看起来比较小。 |
.btn-xs | 这会让按钮看起来特别小。 |
.btn-block | 这会创建块级的按钮,会横跨父元素的全部宽度。 |
按钮状态
Bootstrap 提供了激活、禁用等按钮状态的 class,下面将进行详细讲解。
激活状态
按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。
下表列出了让按钮元素和锚元素呈激活状态的 class:
元素 | Class |
---|---|
按钮元素 | 添加 .active class 来显示它是激活的。 |
锚元素 | 添加 .active class 到 <a> 按钮来显示它是激活的。 |
禁用状态
当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。
下表列出了让按钮元素和锚元素呈禁用状态的 class:
元素 | Class |
---|---|
按钮元素 | 添加 disabled 属性 到 <button> 按钮。 |
锚元素 | 添加 disabled class 到 <a> 按钮。 |
按钮标签
您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class,避免跨浏览器的不一致性问题。
自适应大小的按钮组
可以通过 .btn-group-justified 类来设置自适应大小的按钮组。
内嵌下拉菜单的按钮组
按钮组内嵌的按钮可以设置下拉菜单
Bootstrap系列---按钮相关推荐
- ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件
Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. ...
- Bootstrap -- 插件: 按钮状态、折叠样式、轮播样式
Bootstrap -- 插件: 按钮状态.折叠样式.轮播样式 1. 按钮(Button)插件:可以添加进一些交互,比如控制按钮状态. 如需向按钮添加加载状态,只需要简单地向 button 元素添加 ...
- Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮、进度条、菜单效果
Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮.进度条.菜单效果 版权声明: 原文地址: http://www.cnblogs.com/ado ...
- Bootstrap 拼接式按钮菜单
拼接式按钮菜单由两个按钮拼接而成,一个是动作按钮,一个是下拉菜单开关按钮,它们之间被一个分隔线隔开.下拉菜单开关按钮表现为一个三角符号.用户点击主操作按钮,完成按钮相关动作:点击开关按钮,会弹出菜单. ...
- Bootstrap之按钮的样式
在bootstrap中, 按钮(button)有不同的六种方式. 默认的button的样式是: btn. 这个是必要的样式. 还有其他的六种不同方式展现.分别为: 默认, 主要, 成功, 信息, 警告 ...
- Bootstrap系列 -- 34. 按钮下拉菜单
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...
- Bootstrap系列 -- 32. 按钮垂直分组
实际运用当中,总会碰到垂直显示的效果.在Bootstrap框架中也提供了这样的风格.我们只需要把水平分组的"btn-group"类名换成"btn-group-vertic ...
- Bootstrap系列之按钮组(Button group)
文章の目录 1.基本示例 2.按钮工具栏 3.Sizing 4.嵌套 5.Vertical variation 写在最后 将一系列按钮与按钮组一起放在一行中,并使用JavaScript增强它们的功能. ...
- Bootstrap系列 -- 41. 带表单的导航条
有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个"navbar-form",使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.nav ...
- Bootstrap系列 -- 11. 基础表单
表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各 ...
最新文章
- POJ - 2337 Catenyms 欧拉回路
- CNN的一些可视化方法!
- HTML文件类型定义
- java中字节流的选择,求助,java中怎么用字节流读写汉字
- 如何访问docker内php,主机怎么访问docker里的程序
- Arrays.toList工具类
- jmail 收件(转)
- LeetCode刷题(37)--Edit Distance
- C++中函数如何返回数组
- 2017界面UI设计风格流行什么?(一)
- 三极管放大电路的基本原理
- 用互联网大脑模型分析滴滴的战略意图和战术失误
- html 文字阴影 一重投影,鼠标移入文字添加阴影 溢出的文字 添加多重颜色
- 网站攻击常见的几种方式
- C#使用公共语言拓展(CLE)调用Python3(tensorflow)
- 教你如何修改ROS机器人工作空间文件夹名字
- 项目经理该怎样做好项目质量管理工作?
- c刊计算机领域见刊快的期刊,见刊快的核心期刊_见刊快的核心期刊_好投的医学核心期刊...
- OSG笔记一:在Win7、VS2010下配置OSG3.4
- C4D R19 图文安装教程