0

0

bootstrapt按钮的风格有哪些

(*-*)浩

(*-*)浩

发布时间:2019-07-12 10:49:26

|

4289人浏览过

|

来源于php中文网

原创

bootstrapt按钮的风格有哪些

摘要:bootstrapt按钮的风格主要有:基础按钮、默认按钮、主要按钮、成功按钮、信息按钮、警告按钮、危险按钮、链接按钮。

一、按钮简介:

  按钮也是Bootstrap框架核心内容之一。因为按钮是Web制作中不可缺少的东西。

  而且不同的Web页面具有不同的按钮风格,甚至说同一个Web网站或应用程序具有多种按钮风格,比如说不同的按钮颜色、大小和状态等。


  
    
    
    
    
    
    
   

  

二、基本按钮

  Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样,都是通过类名“btn”来实现。

  不同的是在V3.x版本要简约很多,去除了V2.x版本中的大量的CSS3中的部分特效,比如说文本阴影(text-shadow)、渐变背景(background-image)、边框阴影(box-shadow)等。
  Bootstrap框架中的考虑了不同浏览器的解析差异,进行了比较安全的兼容性处理,使按钮效果在不同的浏览器中所呈现的效果基本相同。

  源码请查阅bootstrap.css文件第1992行~第2010行:

  Bootstrap框架的按钮使用非常的简单,使用方式如下:


  

 

jQuery_CSS3适应手机端的Tab菜单页面切换插件
jQuery_CSS3适应手机端的Tab菜单页面切换插件

今天给大家分享一款设计和精致的jQuery Tab页面切换插件,它的样式风格与传统的Tab切换不同,首先Tab标签使用的是小图标模式,就像一个按钮一样。另外,在切换tab时,tab标签的样式也很有特点,是一个凸起的弧形,给人3D立体的视觉效果。同时切换tab时背景颜色还可以自动切换。

下载

三、默认按钮

  Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。

  默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色边框颜色文本颜色

  源码请查阅bootstrap.css文件第2040行~第2044行

  使用默认按钮风格也非常的简单,只需要在基础按钮“btn”的基础上增加类名“btn-default”即可:


  

 

 

 

 

 

四、多标签支持(多种标签制作按钮)

  一般制作按钮除了使用

  同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”。

  如果不添加是不会有任何按钮效果。


a标签按钮span标签按钮

p标签按钮

  

  虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用buttona标签来制作按钮。

 

 

 

 

 

五、定制不同风格的按钮

  在介绍按钮开篇就说过,Web页面可能会有不同的按钮风格。那么在Bootstrap框架也考虑了。

  在Bootstrap框架中除了默认的按钮风格之外,还有其他六种按钮风格,每种风格的其实都一样,不同之处就是按钮的背景颜色、边框颜色和文本颜色。

  在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,在使用过程中,开发者只需要选择不同的类名即可:

  

  

  使用起来就很简单,就像前面介绍的默认按钮一样的使用方法,只需要在基础按钮“.btn”基础上追加对应的类名,就可以得到需要的按钮风格。如:


 

 

 

 

 

 

 

六、按钮大小

  在Bootstrap框架中,对于按钮的大小,也是可以定制的。类似于input一样,通过在基础按钮“.btn”的基础上追加类名来控制按钮的大小。

  在Bootstrap框架中提供了三个类名来控制按钮大小:

  

   从上表中不难发现,在Bootstrap框架中控制按钮的大小都是通过修改按钮的paddingline-heightfont-sizeborder-radius几个属性。

   源码查阅bootstrap.css文件中第2319行~第2339行

   那么在实际使用中,这几个类名可以配合按钮中其他颜色类名一起使用,但唯一一点不能缺少“.btn”类名:


 
    
    

  

 

 

 

 

 

七、块状按钮

  Bootstrap框架中提供了一个类名“btn-block”。

  按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的paddingmargin值。在实际当中,常把这种按钮称为块状按钮

  具体源码请查阅bootstrap.css文件第2340行~第2353行:

  使用方法和前面的类似,只需要在原按钮类名上添加“.btn-block”类名,当然“.btn”类名是不可或缺的:


  

 

 

 

 

八、按钮状态——活动状态

  Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种:活动状态禁用状态

  Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)点击状态(:active)焦点状态(:focus)几种。

  源码请查看bootstrap.css文件第2011行~第2029行

  不同风格下的按钮都具有这几种状态效果,只是颜色做了一定的调整,我们以默认风格(btn-default)为例:

  源码请查看bootstrap.css文件第2045行~第2058行

  当按钮处理正在点击状态(也就是鼠标按下的未松开的状态),对于


  
    
    
    
    
    
    
   

 

 

 

 

 

九、按钮状态——禁用状态

  和input等表单控件一样,在Bootstrap框架的按钮中也具有禁用状态的设置。

  禁用状态与其他状态按钮相比,就是背景颜色的透明度做了一定的处理,opcity的值从100%调整为65%。

  在Bootstrap框架中,要禁用按钮有两种实现方式:  

    方法1:在标签中添加disabled属性

    方法2:在元素标签中添加类名“disabled”

  两者的主要区别是:

    “.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。

    如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。

    对于标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。

    而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。


 

相关专题

更多
C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

10

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

29

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

13

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

11

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

8

2026.01.22

菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

55

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

CSS3实现按钮特效视频教程
CSS3实现按钮特效视频教程

共15课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号