首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

更改Bootstrap 4中按钮的背景色

在Bootstrap 4中,可以通过添加相应的CSS类来更改按钮的背景色。以下是一些常用的类及其对应的背景色:

  1. primary:蓝色背景,用于主要操作按钮。 示例代码:<button class="btn btn-primary">Primary Button</button>
  2. secondary:灰色背景,用于次要操作按钮。 示例代码:<button class="btn btn-secondary">Secondary Button</button>
  3. success:绿色背景,用于表示成功或完成的按钮。 示例代码:<button class="btn btn-success">Success Button</button>
  4. danger:红色背景,用于表示危险或错误的按钮。 示例代码:<button class="btn btn-danger">Danger Button</button>
  5. warning:黄色背景,用于表示警告或需要注意的按钮。 示例代码:<button class="btn btn-warning">Warning Button</button>
  6. info:浅蓝色背景,用于提供额外的信息的按钮。 示例代码:<button class="btn btn-info">Info Button</button>
  7. light:浅灰色背景,用于创建轻量级按钮。 示例代码:<button class="btn btn-light">Light Button</button>
  8. dark:深灰色背景,用于创建深色按钮。 示例代码:<button class="btn btn-dark">Dark Button</button>

除了以上的基本背景色类,Bootstrap 4还提供了一些其他的背景色类,如:

  • primary-outline:蓝色边框和透明背景,用于创建带有蓝色边框的透明按钮。
  • success-outline:绿色边框和透明背景,用于创建带有绿色边框的透明按钮。
  • danger-outline:红色边框和透明背景,用于创建带有红色边框的透明按钮。

示例代码:<button class="btn btn-primary-outline">Primary Outline Button</button>

这些按钮背景色类可以应用于<button><a><input>等元素上,以实现不同类型的按钮样式。

腾讯云提供了云开发服务,其中包括云函数、云数据库、云存储等产品,可以帮助开发者快速构建和部署云端应用。更多关于腾讯云开发的信息,请参考腾讯云开发官方文档:腾讯云开发

注意:本答案仅提供了Bootstrap 4中按钮背景色的基本使用方法和一些相关的腾讯云产品信息,具体的实现方式和更多细节可以参考Bootstrap官方文档或其他相关资源。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • WPF 使用 Microsoft.Toolkit.Wpf.UI.Controls InkCanvas 时加上背景色按钮方法

    本文来告诉大家如何在 WPF 应用 HOST 了 UWP InkCanvas 控件时,给 InkCanvas 控件设置背景色,加上按钮等业务功能实现方法 在上一篇博客有告诉大家如何在 WPF 里面使用上...包,请参阅 WPF 引用 UWP 控件 不打包为 MSIX 分发方法 在开始之前,需要了解是 UWP InkCanvas 控件是没有背景色这个属性,也就是说 UWP InkCanvas 控件需要依靠外层容器或者背后元素给颜色作为背景色...UWP 控件挡住 因此为了给 UWP InkCanvas 控件加上背景色,就需要采用在 WPF 里面 HOST 自定义 UWP 控件科技。...UWP 项目,其中一个是 UWP 空白应用项目,另一个是 UWP 控件项目。...InkCanvas 控件添加背景色方法上,在新建 UWP 控件项目里面,添加一个自定义控件,如 CustomInkControl.xaml 控件 在这个控件里面的 XAML 添加如下代码 <UserControl

    2.2K20

    如何更改谷歌Chrome浏览器70新标签页按钮打开位置

    谷歌在Chrome 69中莫名其妙将新建标签按钮移到了标签最左侧,打破了很多用户使用习惯,真的是反人类设计。不过在新发布Chrome 70中,谷歌为用户增加了选择权利。...现在,用户可以自己设置新建标签页按钮位置,可以在最左侧,最右侧以及标签右侧。...如何更改Chrome新标签按钮位置 打开谷歌Chrome浏览器,在地址栏输入“chrome://flags”并回车,打开Chrome隐藏设置。...在搜索框输入“New tab”,可以看到“New tab button position”,然后单击右侧下拉列表。 ? 如上图所示,有一些选项。...默认情况下,按钮会在最后一个标签页右侧,你可以自由选择按钮位置。 重新启动浏览器后更改生效。

    4.9K00

    Bootstrap实用手册

    浏览器宽度 w < 768,背景色 红色 ②. 浏览器宽度 768<= w <=991 背景色 绿色 ③. 浏览器宽度 w > 991 背景色 粉色 4....Bootstrap 组件 - 按钮组.btn-group (1). 基本按钮 ? (2). 将一组 .btn-group 组合进一个 .btn-toolbar(按钮工具栏) ? (3)....Bootstrap 组件 -警告框.alert,允许将任意字符与可选关闭按钮组合在一起结构 (1). .alert-success/danger/info/warning 成功/危险/信息/警告...JS 插件-按钮 botton.js (1). 设置按钮操作文本,为 按钮元素 添加 data-loading-text="显示文本" ? (2)....自定义css文件时,所有的变量都存在variables.less文件夹里面,修改里面声明变量值,bootstrap.less会随着更改,而自定义less文件引入了bootstrap.less文件也会随着更改

    6K20

    简易登录页面实现

    ,设置了其最大宽度、居中对齐、背景色、内边距、边框圆角和阴影等。...该函数作用是切换显示不同登录选项内容,并给当前选中按钮添加active类,同时移除其他按钮active类。...以下是代码思路: 首先,引入了必要样式和依赖库。通过标签引入了BootstrapCSS文件,这样页面的样式可以使用Bootstrap框架提供样式。...在.tab类中,有三个登录选项按钮,分别对应"Student"、“Teacher"和"Admin”。这些按钮有一个共同.tablinks类,其中一个按钮默认具有active类。...该函数被每个登录选项按钮onclick事件调用。函数作用是切换显示不同登录选项内容,并给当前选中按钮添加active类,同时移除其他按钮active类。

    23830

    简易登录页面实现

    ,设置了其最大宽度、居中对齐、背景色、内边距、边框圆角和阴影等。...该函数作用是切换显示不同登录选项内容,并给当前选中按钮添加active类,同时移除其他按钮active类。...以下是代码思路: 首先,引入了必要样式和依赖库。通过标签引入了BootstrapCSS文件,这样页面的样式可以使用Bootstrap框架提供样式。...在.tab类中,有三个登录选项按钮,分别对应"Student"、“Teacher"和"Admin”。这些按钮有一个共同.tablinks类,其中一个按钮默认具有active类。...该函数被每个登录选项按钮onclick事件调用。函数作用是切换显示不同登录选项内容,并给当前选中按钮添加active类,同时移除其他按钮active类。

    27520

    Swift 笔记#2 - SwiftUI 基础控件 Button 必知必会

    本期学习 SwiftUI 基础控件 Button 使用,内容基本涵盖了 Button 高频使用场景;通过本节课你将收获: 常规创建 button 两种 方式 给按钮设置 图标、设置 圆角;更改...前景色 、背景色按钮设置 渐变背景色、阴影 效果 复用按钮样式,给按钮添加 动效 简单 交互 实现 视频版长度 14 分钟(内涵 5 小节) 视频讲解 https://v.qq.com/x/page.../b0941lzemwb.html 文字讲解 1、两种方式创建按钮 效果预览: s1 关键代码: VStack { Button("第一个按钮"){ print("被点击了")....font(.title) .foregroundColor(Color.green) } } 2、常用按钮样式 添加图标 前景色 背景色 完美圆角 效果预览..."被点击了呃") }){ Text("Hi~这是另一个 Button") }.buttonStyle(GradientButtonStyle()) } 6、点击更改状态

    1.7K20

    《iVX 高仿美团APP制作移动端完整项目》06 美食页商家推荐内容、分类、推荐商家制作

    ,直接设置标题这个行垂直对齐属性为居中即可: 二、 内容行制作 接着我们查看内容部分搜索框在一个白色背景并且圆角包裹容器之中: 此时我们应该先创建一个行,命名为内容并且给予背景色为白色...: 接着找到对应圆角区域给予圆角为 30px,并且取消底部两个圆角应用: 此时页面如下: 三、 搜索框制作 接着咱们往这个行中添加一个行,命名为搜索框: 再往这个搜索框中添加一个按钮和一个输入框...: 接着给予这个搜索框背景色为透明,并且使搜索框内容水平居中对齐,高度为包裹: 此时我们发现当前搜索框距离顶部太近,给予一个搜索框行伤内边距即可: 在这一步最后,我们还需要把内容块高度更改为包裹...,并且使其添加到该行之中: 此时发现轮播页高度太大: 更改其对应高度即可,在这里更改高度为 100px: : 随后我们点击轮播页上传对应图片: 两张图片上传完毕后如图所示为结果...,并且可以点击对应按钮对图片进行查看: 在此我们发现,轮播页距离顶部搜索框太过贴近,并且左右边缘太过挨近,咱们更改轮播图行对应上下左右外边距即可: 五、 种类信息制作 接下来咱们制作种类信息

    91720

    一、首页第一个首页栏制作【仿淘票票系统前后端完全制作(除支付外)】

    50%使其元素能够占据一行,并且还需要更改他们背景色为透明,否则自身背景色将会盖住标题栏背景色: 接着在左侧创建一个行,用于存放logo,在此没有 logo 可以暂时给予一个背景色,这个行高宽为...点击需要添加下拉菜单容器,然后点击扩展组件,点击下拉菜单即可添加: 在下拉菜单属性中,,更改当前选中值,设置选项列表中内容,更改大小即可完成: 接着在右侧行中更改水平对齐属性选择靠右...即可占满整行: 接着右侧信息内部中也分为左侧和右侧 ,左侧为影片信息,右侧为按钮购买,那么此时创建两个行为这些内容父容器,并且给予命名: 此时左侧信息为 70% 右侧购票为 30%...宽度,在此需要主要是,右侧购票信息按钮为垂直居中,那么此时就需要给予这个购票信息高度为撑开,再设置垂直对其为居中(如果你父容器没有设置高度,那么撑开无效): 接着在左侧添加文本,文本宽度都为...: 最后我们在右侧添加一个按钮,设置对应文本和颜色: 三、添加导航容器 我们还发现,这个首页导航栏是在下部: 那么此时就需要用到一个导航容器,点击扩展组件,找到导航容器添加到当前页面

    8.6K20

    Bootstrap学习文档(二)

    Bootstrap 标签和样式 Bootstrap 中把一些标签样式重置了,也即是为一些标签设置了带有 Bootstrap 风格样式,如 h 标签,p 标签等等,这其中包含了 HTML5 标签。...Bootstrap 为我们提供了丰富按钮样式 按钮背景色 btn-default 默认按钮样式 btn-link 链接样式按钮 btn-primary 首选项颜色按钮 btn-success...成功颜色按钮 btn-info 一般信息颜色按钮 btn-warning 警告颜色按钮 btn-danger 危险颜色按钮 按钮尺寸 btn-lg btn-md btn-sm btn-xs...text-danger 可以发现和前面的按钮背景色后面一部分有相同地方,Bootstrap 命名是很有规律,对于不同使用场景,使用不同前缀。...爱秋艳 爱秋艳 爱秋艳 3.三角符号和按钮 Bootstrap

    2.3K50

    bootstrap table 设置自定义列宽

    问题描述日常工作过程中遇到这样一个问题,在页面上某一个字段内容比较多时,会导致 bootstrap table 列被撑大,同时出现滚动条,且后面的操作按钮需要滑动滚动条才可以正常操作,这样用起来就比较麻烦...就像这样商品ids 列内容很多导致当前列直接溢出屏幕,后面的操作按钮无法直观看到那么为了处理这个问题,可以通过限制 商品ids 展示宽度 来控制页面展示,控制列表不至于溢出屏幕,比如这样但是有时候想要需要展示内容全部展示在列表上...设置列宽尝试设置 商品ids 列列宽来保证可以看到后续字段列及操作按钮,在表头增加下列格式限制 css 代码 .table thead th[data-field="goodsIds...important; } 那么设置之后看到效果这里可以看到表头背景色设置已经成功了,但是列宽度并没有设置成功。...这样可以防止单词过长导致内容溢出到这里,本次关于 bootstrap table 设置表格列宽度操作就完成了,整体操作虽然不是很复杂,但是还是需要记忆一下,以此博文记录,希望可以帮到有需要小伙伴。

    23810

    分享7款超赞CSS3动画效果,值得你收藏!

    2、CSS3下划线跟随动画菜单,背景色渐变 这是一款CSS3菜单,特点就是有一条下划线会跟随鼠标移动,当鼠标滑过菜单项时,下划线跟随动画就会出现,并对当前激活菜单项进行下划线加粗。...此外,菜单背景色也会有渐变效果,看上去非常酷炫。 ? 3、CSS3手势变换动画特效 这款CSS3动画展现在我们眼前是一只手掌,点击手掌下方滑动按钮,就可以切换手势,目前可以切换两种不同手势。...4、基于BootstrapCSS3面包屑菜单 面包屑菜单以嵌入到网站中,帮助用户在网站中实现各级目录跳转。...这款面包屑菜单沿用了bootstrap风格,利用CSS3特性,让菜单项进行圆角处理,整体变得很圆润。 ?...6、HTML5/CSS3 3D下拉折叠菜单 3D子菜单 这是一款很有特色CSS3菜单,该菜单不仅拥有下拉菜单特点,而且下拉子菜单还拥有3D折纸效果,看起来蛮酷。 ?

    2.4K30
    领券