Boostrap技能点整理之【按钮样式】

昨天我们看了看bootstrap的网(栅)格系统,想必都对bootstrap网格系统有个大致的了解,今天我们再来看看bootstrap的按钮组合。

按钮的样式

在boostrap中,任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:

以下样式可用于超链接,表单以及button上

描述
.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禁用按钮

上面列出了这么多的按钮样式,下面我们来通过一段代码的运行结果让大家对各个按钮有个基本的照面:

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</butto

运行结果:

上面按钮的样式大家也都看到了,那么问题来了,按钮只能是这么大吗?按钮的大小能否进行更改?——按钮的大小可以更改。

按钮的大小

改按钮大小之前,我们先看看如何进行更改,改按钮的大小需要遵循那些规范呢?我们可以通过一个表格来说明这个问题:

Class描述
.btn-lg这会让按钮看起来比较大。
.btn-sm这会让按钮看起来比较小。
.btn-xs这会让按钮看起来特别小。
.btn-block这会创建块级的按钮,会横跨父元素的全部宽度。

class:需要写的class名字(类样式)

关于按钮的大小,下面请看一段代码:

<p><button type="button" class="btn btn-primary btn-lg">大的原始按钮</button><button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p><button type="button" class="btn btn-primary">默认大小的原始按钮</button><button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p><button type="button" class="btn btn-primary btn-sm">小的原始按钮</button><button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p><button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button><button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p><button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button><button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>

运行结果:

下面在介绍几种按钮的状态:

激活按钮

<p><button type="button" class="btn btn-default btn-lg ">默认按钮</button><button type="button" class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p><button type="button" class="btn btn-primary btn-lg ">原始按钮</button><button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
</p>

运行结果:

禁用按钮

<p><button type="button" class="btn btn-default btn-lg">默认按钮</button><button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
</p>
<p><button type="button" class="btn btn-primary btn-lg ">原始按钮</button><button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p><a href="#" class="btn btn-default btn-lg" role="button">链接</a><a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
</p>
<p><a href="#" class="btn btn-primary btn-lg" role="button">原始链接</a><a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
</p>

运行结果:

按钮标签

<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="提交">

运行结果:

按钮组

<div class="container"><h2>按钮组</h2><p>.btn-group 类用于创建按钮组:</p><div class="btn-group"><button type="button" class="btn btn-primary">苹果</button><button type="button" class="btn btn-success">橘子</button><button type="button" class="btn btn-warning">香蕉</button></div>
</div>

运行结果:

关于按钮组的内容我们已经整理完毕,关于bootstrap其他内容,请关注后续文章。

往期推荐

Boostrap技能点整理之【网格系统】

2020-05-26

Boostrap技能点整理之【bootstrap简介】

2020-05-25

C#基础知识详解之【文件的输入与输出】

2020-05-23

C#基础知识详解之【字段与属性】

2020-05-24

C#基础知识详解之【异常处理】

2020-05-22

C#基础知识详解之【值类型和引用类型】

2020-05-21

公众号:雄雄的小课堂

CSDN:穆雄雄的博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/325063.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MyBatis中的缓存

01 Mybatis中的缓存简介 缓存的好处&#xff1a;只是查询才有缓存 &#xff08;增删改没有缓存的&#xff09;&#xff0c;可以增块访问的速度 sqlsession级缓存 &#xff08;一级缓存&#xff09; 默认开启的 所有的操作是公用同一个SQLsession对象并且执行的是同一条SQL语句的…

基于VS2017的Docker Support体检ASP.NET Core站点的Docker部署

最近在学习如何用 Docker 部署生产环境中的 ASP.NET Core 站点&#xff0c;作为一个 Docer 新手&#xff0c;从何处下手更容易入门呢&#xff1f;一开始就手写 Docker 配置文件&#xff08;Docfile, docker-compose.yml&#xff09;容易让人产生挫败感&#xff0c;想到 Visual …

ssl1202-滑雪【记忆化搜索法】

Description Michael喜欢滑雪百这并不奇怪&#xff0c; 因为滑雪的确很刺激。可是为了获得速度&#xff0c;滑的区域必须向下倾斜&#xff0c;而且当你滑到坡底&#xff0c;你不得不再次走上坡或者等待升降机来载你。Michael想知道载一个区域中最长底滑坡。区域由一个二维数组…

break VS continue

使用范围 循环中使用的作用(不同点) 相同点 break: 循环结构中 结束当前循环 关键字后面不能声明执行语句 continue: 循环结构中 结束当次循环 关键字后面不能声明执行语句

JavaFX UI控件教程(十六)之Separator

翻译自 Separator 本章介绍如何使用分隔符组织JavaFX应用程序的UI组件。 SeparatorJavaFX API中可用的类表示水平或垂直分隔线。它用于划分应用程序用户界面的元素&#xff0c;不会产生任何操作。但是&#xff0c;您可以设置样式&#xff0c;对其应用视觉效果&#xff0c;甚…

eclipse下载与安装步骤详解,包含解决错误(最全最详细,多图)

以前一直用的是myeclipse,今天有幸接触eclipse,那我们就先来安装的配置一下&#xff0c;下载地址&#xff1a;公众号中回复常用软件下载&#xff0c;下载完成以后就可以安装了&#xff0c;首先我们来先安装jdk1.7,打开jdk的安装包双击即可&#xff0c;直接点击下一步&#xff1…

微软中国Azure开源开发者(深圳)研讨会

时间&#xff1a;2017年6月28日 地点&#xff1a;深圳福田香格里拉大酒店 微软开发技术与云平台自从迈向开放、开源、跨平台的转型以来&#xff0c;已经受到全球开源社区们的关注。从Github 上高居世界首位的开源项目贡献数量&#xff0c;可以看到微软贯彻开源战略的实际行动。…

MyBatis中ThreadLocal

01 遇到的问题 –如果我们做一个请求时候多次使用sqlsession对象这样就会造成sqlsession 浪费&#xff0c;也就是资源浪费&#xff0c;效率也会降低 –我们需要达到的目的就是用户发出的一个请求中实现sqlsession的共享 –请求没有改变&#xff0c;线程就不会改变 –最终的目的…

洛谷P1434-滑雪【线性化Dp】

Description Michael喜欢滑雪百这并不奇怪&#xff0c; 因为滑雪的确很刺激。可是为了获得速度&#xff0c;滑的区域必须向下倾斜&#xff0c;而且当你滑到坡底&#xff0c;你不得不再次走上坡或者等待升降机来载你。Michael想知道载一个区域中最长底滑坡。区域由一个二维数组…

JavaFX UI控件教程(十七)之Slider

翻译自 Slider 在本章中&#xff0c;您将学习如何在JavaFX应用程序中使用滑块来显示和与一系列数值进行交互。 该Slider控件由一个轨道和一个可拖动的拇指组成。它还可以包括刻度线和刻度标签&#xff0c;用于指示范围的数值。图16-1显示了一个典型的滑块并指出了它的主要元…

Photoshop中将图片拖不进软件的编辑区的解决方法,超详细

今天在学习ps的过程中&#xff0c;发现我的ps怎么和人家老师的不一样&#xff0c;怎么不一样呢&#xff1f;人家老师的ps5中&#xff0c;鼠标可以直接拖到ps的编辑栏中&#xff0c;可是我的死活拖不进去。怎么办&#xff1f;怎么办&#xff1f;经过自己瞎鼓捣和上网查&#xff…

IdentityServer4 指定角色授权(Authorize(Roles=amp;quot;adminamp;quot;))

1. 业务场景 IdentityServer4 授权配置Client中的AllowedScopes&#xff0c;设置的是具体的 API 站点名字&#xff0c;也就是使用方设置的ApiName&#xff0c;示例代码&#xff1a; //授权中心配置new Client{ ClientId "client_id_1", AllowedGrantTypes G…

MyBatis中的注解

代码实现 1. Select("select * from student") 2. List<Student> selectAll(); 3. 4. Select("select * from student where sid#{param1}") 5. Student selectOne(int id); 6. 7. Insert("insert into student value…

ssl1463-公共子串【各种dp之1】

前言&#xff1a; 开始水做练习题了&#xff0c;反正难度还是比较大的QAQ。比较dp。emmmmmmmmmmmmmmmmmmm 题目 大概就是给出两个字符串&#xff0c;蓝后让你求出他们相同的一串&#xff08;but可以不连续 不连续还叫子串&#xff1f;&#xff09;的长度。 输入 abcfbc abf…

JavaFX UI控件教程(十八)之Progress Bar和Progress Indicator

翻译自 Progress Bar and Progress Indicator 在本章中&#xff0c;您将了解进度指示器和进度条&#xff0c;以及可视化JavaFX应用程序中任何操作进度的UI控件。 本ProgressIndicator类及其直接子类ProgressBar所提供的功能&#xff0c;以表明特定的任务是处理和检测是如何工…

数组的初始化与默认值

初始化 一维数组 数组一旦初始化完成&#xff0c;其长度就确定了 int[] ids;//声明//1.1 静态初始化:数组的初始化和数组元素的赋值操作同时进行ids new int[]{1001,1002,1003,1004};//1.2动态初始化:数组的初始化和数组元素的赋值操作分开进行String[] names new String[5…

你不知道ADo.Net中操作数据库的步骤【超详细整理】

1.先创建数据库连接字符串&#xff1a; string strcon "Data Source.;Initial CatalogschoolDB;Integrated SecurityTrue";2.创建SqlConnection对象&#xff0c;需要注意的是SqlConnection对象在using System.Data.SqlClient;命名空间中。 SqlConnection conn new…

OJ4007-计算字符串距离【各种dp之2】

题目 大概&#xff08;又大概&#xff1f;&#xff09;就是输入t组数据&#xff0c;每组数据输入两个字符串&#xff08;又是两个字符串&#xff1f;&#xff09; 然后我们可以进行以下操作 1.修改一个字符&#xff08;如把“a”替换为“b”&#xff09; 2.删除一个字符&…

C# 7.2和8.0路线图

C# 7.2和8.0的许多新功能已经列入了计划&#xff0c;其中包括空引用类型和有限形式的多重继承。 只读引用和只读结构体 [7.2原型] 首先提到的是只读引用和结构体。简单来讲&#xff0c;这项特性使得C#能够使用类似const的参数来提高性能。像我们所知道的“ref只读参数”和简单…

MyBatis中的原理

01Mybatis的运行原理 运行过程中涉及到的类 1.1 Resources MyBatis中IO流的工具类 1.1 加载配置文件 1.2 SqlSessionFactoryBuilder() 构建器 1.2.1 作用:创建SqlSessionFactory接口的实现类 1.3 XMLConfigBuilder MyBatis全局配置文件内容构建器类 1.3.1 作用负责读取流内容并…