`

Bootstrap 按钮样式

阅读更多

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:
以下样式可用于<a>, <button>, 或 <input> 元素上:

 

描述
.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

禁用按钮

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

相关推荐

    Bootstrap4按钮样式扩展库

    这是一款简单的Bootstrap4按钮样式扩展库。该Bootstrap4按钮样式扩展库通过定义CSS,来为bootstrap 4原生按钮添加3D按钮,带图标的按钮,圆角按钮,以及为按钮添加更多的可用颜色,非常实用。

    Bootstrap带图标的按钮样式

    首先,Bootstrap按钮的基础样式是通过其预定义的CSS类实现的,如`.btn`,`.btn-primary`,`.btn-secondary`等。这些类提供了不同颜色和状态的按钮样式。在"带图标的按钮样式"中,开发者通常会使用`.btn`类作为基础,...

    Bootstrap 按钮样式与使用代码详解

    Bootstrap 按钮样式与使用代码详解 Bootstrap 是一个流行的前端框架,用于快速构建响应式、移动优先的网站。在Bootstrap中,按钮是界面设计中不可或缺的元素,它提供了多种预定义的样式,使得开发者可以轻松创建...

    超绚丽的 Bootstrap 水晶样式按钮集合

    - **第三方扩展**:例如,Bootstrap 工具库中有许多第三方扩展,如 Bootswatch、Bootstrap Buttons Generator 等,提供了更多的按钮样式选项,可能包含水晶样式。 5. **响应式设计**: Bootstrap 的按钮组件是...

    两款漂亮的bootstrap分页样式

    例如,开发者可能会用CSS3来改变分页按钮的背景色、文字颜色、边框样式,或者添加悬停效果和过渡动画。 `related`文件夹可能包含了与分页样式相关的其他资源,比如图片或者JavaScript脚本。`fonts`文件夹可能存储了...

    基于bootstrap图标形状单选按钮radio

    基于bootstrap的单选按钮图标 改变了浏览器自带形状,支持自定义图标

    纯CSS3 Bootstrap步骤箭头按钮样式

    为了使步骤按钮更具Bootstrap风格,我们可以应用其预定义的类,如`btn`和`btn-primary`,以获取Bootstrap的按钮样式。同时,我们也可以自定义颜色、大小和边框等属性,以满足特定的设计需求。 ```html 步骤1 ...

    bootstrap离线样式,自用

    - **css**:包含Bootstrap的基础样式文件(如`bootstrap.min.css`)和可选主题(如果有的话)。 - **js**:包含Bootstrap的JavaScript库(如`bootstrap.min.js`)和独立的插件文件。 - **fonts**:存放 ...

    unigui Bootstrap按钮分组

    本文将深入探讨如何在Unigui中使用Bootstrap按钮分组(Button Group)这一功能。 Bootstrap按钮分组是一种将多个按钮排列在一起,形成一个单元的布局方式,这在很多场景下非常实用,比如在表单提交、导航选项或者...

    CSS Bootstrap4按钮样式扩展库特效

    而CSS Bootstrap4按钮样式扩展库特效则是在基础的Bootstrap4按钮样式上进行了增强和扩展,提供了更多的视觉效果和交互体验。 在Bootstrap4中,按钮的基本样式包括默认(Default)、主要(Primary)、次级...

    bootstrap按钮颜色.txt

    bootstrap样式按钮颜色(剩下的都是凑字数真的没什么可介绍的

    fastadmin 后台 bootstrap样式库 样式替换文件

    FastAdmin的界面设计很大程度上依赖于Bootstrap的CSS和JavaScript组件,这些组件包括网格系统、导航、按钮、表单、模态框、下拉菜单等,提供了丰富的样式和交互效果。然而,在实际项目中,我们可能需要根据品牌需求...

    基于Bootstrap的纯CSS3箭头按钮样式

    本资源聚焦于一个特定的元素——基于Bootstrap的纯CSS3箭头按钮样式,这是一个创新的设计,旨在增强用户界面的交互性和视觉吸引力。 首先,CSS3是层叠样式表的最新版本,引入了许多新的特性和功能,例如伪类、动画...

    bootstrap-crystal-buttons水晶样式按钮集合

    总的来说,"bootstrap-crystal-buttons"提供了一套美观的按钮样式,适用于希望提升网页界面设计感的开发者。通过研究和应用这些水晶样式,你可以让你的Bootstrap按钮更加引人注目,同时也可以借此机会深入理解CSS...

    bootstrap步骤条-按钮-箭头样式

    4. **箭头按钮样式**: - 利用Bootstrap的`.btn`类作为基础,通过修改CSS来添加箭头。这可能涉及到调整边框宽度、颜色和透明度,以及使用`transform`属性来旋转元素。 - 通过CSS3的伪元素(`:before`和`:after`)...

    ztree_bootstrap样式风格

    `Bootstrap`提供了丰富的预定义样式,包括字体、颜色、按钮、表单、网格系统等,能够帮助开发者快速构建响应式的网页。 在描述中提到的“压缩包中有使用说明和对应的文件”,这通常意味着压缩包中可能包含以下内容...

    Bootstrap按钮组件详解

    当用户将鼠标悬停在按钮上,或者按钮获得焦点时,Bootstrap按钮会显示出高亮样式,这有助于用户了解哪些按钮是可以点击的。悬停效果是通过增加z-index来实现的,同时移除了按钮的轮廓线,以提供更佳的用户体验。 ``...

    bootstrap炫酷的按钮集合~满足各种需求

    在实际应用中,开发者可以根据项目需求,选择合适的按钮样式和功能,通过修改Bootstrap的预定义类或者编写自定义CSS,来创建符合品牌形象或界面风格的按钮。同时,利用jQuery的灵活性,可以进一步增强按钮的交互性和...

    bootstrap-select 下拉框demo(含多种样式)

    bootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-select 下拉框demobootstrap-...

Global site tag (gtag.js) - Google Analytics