站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

bootstrap样式按钮有哪些

时间:2021-12-31 [网络编程]作者:fabuyuan 浏览:6 次

bootstrap样式按钮有:1、“.btn”圆角灰色按钮;2、“.btn-lg”大按钮;3、“.btn-sm”小按钮;4、“.btn-xs”超小按钮;5、“.btn-block”块级按钮;6、“.disabled”禁用样式按钮等等。

bootstrap样式按钮有哪些  2

本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL G3电脑

bootstrap 按钮样式汇总

类样式描述
.btn圆角灰色按钮,为了让按钮不那么尖锐,我们的按钮都应该使用这个样式来获得圆角,然后再覆盖上其他的特性。
.btn-default默认/标准按钮,白色的按下灰色。
.btn-primary原始按钮样式(未被操作),这个跟active相对应,他是一个按钮没被操作的样式,而active是按钮被点击时显示的相应的样式。
.btn-success表示成功的动作
.btn-info该样式可用于要弹出信息的按钮
.btn-warning表示需要谨慎操作的按钮
.btn-danger表示一个危险动作的按钮操作
.btn-link让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg大按钮
.btn-sm小按钮
.btn-xs超小按钮
.btn-block块级按钮(拉伸至父元素100%的宽度)
.active按钮被点击,按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。
.disabled禁用按钮,颜色会变淡 50%,并失去渐变。

基本的按钮组

<div class="btn-group">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <button type="button" class="btn btn-default">按钮 3</button>
</div>

bootstrap样式按钮有哪些  2

按钮的大小

<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-default">Button 1</button>
	<button type="button" class="btn btn-default">Button 2</button>
	<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default">Button 4</button>
	<button type="button" class="btn btn-default">Button 5</button>
	<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default">Button 7</button>
	<button type="button" class="btn btn-default">Button 8</button>
	<button type="button" class="btn btn-default">Button 9</button>
</div>

bootstrap样式按钮有哪些  2

更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!

以上就是bootstrap样式按钮有哪些的详细内容,更多请关注站长家园其它相关文章!

本文标签:  bootstrap样式按钮

转载请注明来源:bootstrap样式按钮有哪些

本文永久链接地址:https://www.adminjie.com/post/6942.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • css3如何让盒子水平居中

      css3如何让盒子水平居中

      css3让盒子水平居中的方法:1、使用margin属性,给盒子元素添加“margin:0auto;”样式即可水平居中;2、利用flex弹性布局来实现水平居中...

    • 如何将css文件设置为utf-8

      如何将css文件设置为utf-8

      在css中,可以利用“@charset”规则来将字符编码设置为“utf-8”,该规则可以指定样式文件中使用的字符编码,语法为“@charset"UTF-8";...

    • css怎么设置按钮中的字大小

      css怎么设置按钮中的字大小

      css设置按钮中字体大小的方法:1、给按钮元素添加class属性并设置属性值;2、使用class选择器选中按钮元素,添加“font-size:数值px;”样式即...

    • javascript标识符不能以什么开头

      javascript标识符不能以什么开头

      在javascript中,标识符不能以数字开头,即第一个字符不能为数字,必须是字母、下划线“_”或美元符号“$”,其后的字符可以是字母、数字或下划线、美元符号;...

    • javascript中跳转语句有哪两种

      javascript中跳转语句有哪两种

      javascript中的两种跳转语句:1、break语句,用于退出循环或者退出一个switch语句,让程序继续执行循环之后的代码,语法“break;”;2、co...

    热门文章