厦门网站建设中心,网站建设用宝塔,网站快照更新慢,信息网站 模板昨天我们看了看bootstrap的网#xff08;栅#xff09;格系统#xff0c;想必都对bootstrap网格系统有个大致的了解#xff0c;今天我们再来看看bootstrap的按钮组合。按钮的样式在boostrap中#xff0c;任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 … 昨天我们看了看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 typebutton classbtn btn-default默认按钮/button
!-- 提供额外的视觉效果标识一组按钮中的原始动作 --
button typebutton classbtn btn-primary原始按钮/button
!-- 表示一个成功的或积极的动作 --
button typebutton classbtn btn-success成功按钮/button
!-- 信息警告消息的上下文按钮 --
button typebutton classbtn btn-info信息按钮/button
!-- 表示应谨慎采取的动作 --
button typebutton classbtn btn-warning警告按钮/button
!-- 表示一个危险的或潜在的负面动作 --
button typebutton classbtn btn-danger危险按钮/button
!-- 并不强调是一个按钮看起来像一个链接但同时保持按钮的行为 --
button typebutton classbtn btn-link链接按钮/butto运行结果上面按钮的样式大家也都看到了那么问题来了按钮只能是这么大吗按钮的大小能否进行更改——按钮的大小可以更改。按钮的大小改按钮大小之前我们先看看如何进行更改改按钮的大小需要遵循那些规范呢我们可以通过一个表格来说明这个问题Class描述.btn-lg这会让按钮看起来比较大。.btn-sm这会让按钮看起来比较小。.btn-xs这会让按钮看起来特别小。.btn-block这会创建块级的按钮会横跨父元素的全部宽度。class需要写的class名字类样式关于按钮的大小下面请看一段代码pbutton typebutton classbtn btn-primary btn-lg大的原始按钮/buttonbutton typebutton classbtn btn-default btn-lg大的按钮/button
/p
pbutton typebutton classbtn btn-primary默认大小的原始按钮/buttonbutton typebutton classbtn btn-default默认大小的按钮/button
/p
pbutton typebutton classbtn btn-primary btn-sm小的原始按钮/buttonbutton typebutton classbtn btn-default btn-sm小的按钮/button
/p
pbutton typebutton classbtn btn-primary btn-xs特别小的原始按钮/buttonbutton typebutton classbtn btn-default btn-xs特别小的按钮/button
/p
pbutton typebutton classbtn btn-primary btn-lg btn-block块级的原始按钮/buttonbutton typebutton classbtn btn-default btn-lg btn-block块级的按钮/button
/p运行结果下面在介绍几种按钮的状态激活按钮pbutton typebutton classbtn btn-default btn-lg 默认按钮/buttonbutton typebutton classbtn btn-default btn-lg active激活按钮/button
/p
pbutton typebutton classbtn btn-primary btn-lg 原始按钮/buttonbutton typebutton classbtn btn-primary btn-lg active激活的原始按钮/button
/p运行结果禁用按钮pbutton typebutton classbtn btn-default btn-lg默认按钮/buttonbutton typebutton classbtn btn-default btn-lg disableddisabled禁用按钮/button
/p
pbutton typebutton classbtn btn-primary btn-lg 原始按钮/buttonbutton typebutton classbtn btn-primary btn-lg disableddisabled禁用的原始按钮/button
/p
pa href# classbtn btn-default btn-lg rolebutton链接/aa href# classbtn btn-default btn-lg disabled rolebutton禁用链接/a
/p
pa href# classbtn btn-primary btn-lg rolebutton原始链接/aa href# classbtn btn-primary btn-lg disabled rolebutton禁用的原始链接/a
/p运行结果按钮标签a classbtn btn-default href# rolebutton链接/a
button classbtn btn-default typesubmit按钮/button
input classbtn btn-default typebutton value输入
input classbtn btn-default typesubmit value提交运行结果按钮组div classcontainerh2按钮组/h2p.btn-group 类用于创建按钮组/pdiv classbtn-groupbutton typebutton classbtn btn-primary苹果/buttonbutton typebutton classbtn btn-success橘子/buttonbutton typebutton classbtn 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穆雄雄的博客
