bootstrap按钮

bootstrap提供了其中按钮样式:默认(.btn-default),主要(.btn-primary),成功(.btn-success),警告(.btn-warning),危险(.btn-danger),信息(.btn-info),链接(.btn-link)其中基础颜色样式按钮.

代码使用如下:

<button class="btn btn-default">默认按钮</button>
	<button class="btn btn-success">成功按钮</button>
	<button class="btn btn-danger">危险按钮</button>
	<button class="btn btn-info">信息按钮</button>
	<button class="btn btn-warning">警告按钮</button>
	<button class="btn btn-link">链接按钮</button>
	<button class="btn btn-primary">主要按钮</button>

bootstrap除了提供基础颜色按钮外还提供了按钮的带下样式大按钮(.btn-lg),正常按钮(无需强调),小按钮(.btn-sm),超小按钮)(.btn-xs),还提供了按钮块状化(btn-block),这样使得按钮变为块元素,独占一行.

下面演示大小样式的使用:

<button class="btn btn-success btn-lg">成功按钮 大按钮</button>
<button class="btn btn-danger btn-sm">中等危险按钮</button>
<button class="btn btn-info btn-xs">小按钮信息按钮</button>
<button class="btn btn-warning btn-lg btn-block">块状大警告按钮</button>

当然按钮也提供了其他的一些属性,按钮禁用,按钮默认激活(active)等状态

<div class="btn-group">
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-danger active">默认激活active危险按钮</button>
<button class="btn btn-info" disabled>禁用按钮(disabled)信息按钮</button>
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

Dom 事件处理函数

别人整理的,我顺手就给捏来了哈哈。很详细的一些事件,浏览器支持情况,以及详细的说明。在这里向整理者致敬。 <!DOCTYPE html PUBLIC "-//W...

1888
来自专栏smy

解决ios不支持按钮:active伪类的方法

 mozilla开发社区上有 :active 不起作用的答案: [1] By default, Safari Mobile does not use the :...

3357
来自专栏韦弦的偶尔分享

微信小程序button组件样式

需要使用微信小程序button组件的open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下:

3.7K4
来自专栏河湾欢儿的专栏

选中分享

941
来自专栏CRPER折腾记

VS Code折腾记 - (2) 快捷键大全,没有更全

VSCode的快捷键继承了一些IDE风格,有VS的身影,也有Emacs的身影。。简言之,内置快捷键玩熟了,效率提高不是一点两点。

1612
来自专栏禅林阆苑

前端拾零01—checkbox&radio&select总结 【原创】

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

1133
来自专栏河湾欢儿的专栏

2.布局解决方案- 水平布局<1>

水平布局 写出两个盒子并满足以下条件条件: 1.里面的宽度盒子不固定 2.外面盒子的宽度不固定

1053
来自专栏Huramkin的归档库

VSCode的快捷键

|快捷键|作用| |Alt + Click| 插入光标-支持多个| |Ctrl + Alt + up/down |上下插入光标-支持多个| |Ctr...

1.8K1
来自专栏hbbliyong

WPF模板

先来个模板: <ControlTemplate x:Key="button" TargetType="Button"> <Border ...

3894
来自专栏Youngxj

CSS3随机背景图片切换特效

8296

扫码关注云+社区

领取腾讯云代金券