按钮的样式

最新推荐文章于 2023-12-07 14:42:12 发布
最新推荐文章于 2023-12-07 14:42:12 发布
阅读量678 收藏 1
点赞数
分类专栏： HTML 文章标签： button bootstrap

对按钮的样式的设置方法有很多，在bootstrap中给出了这样的几种对样式的设置，其实也是就是对button这个标签的属性进行改变，我们可以设置class的值为btn tbn-default，表示默认的按钮。当class的值设置为btn btn-primary表示的原始的按钮，还可以是成功的按钮btn btn-success，还可以是警告的 按钮btn btn-warning，还可以设置其class的值为btn

 btn-danger，也可以设置其中class的值为btn btn-link，当然我们也可以设置其中的按钮是禁用的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<title>按钮选项</title>
</head>
<body>
<!-- 标准按钮 -->
<button type="button" class="btn btn-default">默认的按钮</button>
<!-- 提供额外的视觉效果，标志一组按钮中的原始的动作 -->
<button type="button" class="btn btn-primary">原始的按钮</button>
<!-- 表示一个成功的积极的动作 -->
<button type="button" class="btn btn-success">成功的按钮</button>
<!-- 信息按钮 -->
<button type="button" class="btn btn-warning">警告的按钮</button>
<!-- 危险按钮 -->
<button type="danger" class="btn btn-danger">危险的按钮</button>
<!-- 链接的按钮 -->
<button type="button" class="btn btn-link">链接的按钮</button>
<!-- 禁用的按钮 -->
<button type="button" disabled="disabled">禁用的按钮</button>
</body>
</html>

上面这个例子是我们对按钮的一个简单的设置。

我是大头鸟
关注
专栏目录
CSS样式实现选择按钮
袁竹茜
06-29 9131
CSS样式实现选择按钮表单元素中的选择按钮的原生样式并不好看，在实际项目中需要优化。很多优化的方法都用CSS美化按钮的原生样式，或用图片来代替原生样式。本文描述了使用CSS样式实现方形选择按钮和圆形选择按钮的方法。 方形选择按钮实现效果如下图： 由上图可以看出，这样的选择按钮非常适合用于类似“同意服务条款”这样的情景。一下是实现的代码，重点是css样式。.html<!DOCTYPE html> <h
bootstrap之button样式
xixi
10-29 6911
一、前言现在开始介绍bootstrap的button模块样式，包括buttons.less、button-groups.less。二、源码1、buttons.less1.1、buttons.less源码 // // Buttons(按钮) // -------------------------------------------------- // Base styles(基础样式) //
选择按钮样式
qq_41241767的博客
01-15 330
<div class="apply_con_type"> <div> <input type="radio" name="identity" value="1" > <label class="radio-label" for="">农户、社区居民</lab...
Bootstrap历练实例：警告样式按钮
adiking520110的博客
11-23 254
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例：警告样式按钮</title> <meta charset...
idea 部分按钮中的功能
weixin_30650039的博客
11-04 844
1. reimport 重新导入依赖； 2. version control ：可切换同一个项目不同地址下的代码(切换路径[directory设置])； 3. modules 每一个有pom文件的项目都会产生一个modules； 4. artfacts: 和部署项目时有关的；artifact是一个项目资源的组合体。例如，一个已编译的java类的集合，一个已打包的java应用。 　　arti...
漂亮的C#WPF自定义按钮样式
12-30
在C# WPF（Windows Presentation Foundation）开发中，创建自定义按钮样式是提升用户界面美观性和交互性的重要手段。WPF提供了一套强大的样式和模板系统，允许开发者完全定制控件的外观和行为。本教程将深入探讨如何...
html5分页导航按钮样式动画特效
06-24
"html5分页导航按钮样式动画特效"的主题聚焦于利用HTML5特性来实现分页导航的创新设计，旨在提升用户体验并增加网页的互动性。 分页导航是网页设计中的常见元素，尤其在处理大量数据或内容时，如博客、论坛和电子...
CSS使用classList实现两个按钮样式的切换
09-27
在网页设计中，有时我们需要创建交互式用户界面，其中就包括了按钮样式的切换。CSS（Cascading Style Sheets）提供了强大的样式控制能力，而JavaScript则可以赋予网页动态交互的功能。在这种情况下，我们可以利用DOM...
风格清新漂亮的CSS3开关按钮样式
06-11
本文将深入探讨如何利用CSS3创建风格清新、漂亮的开关按钮样式，包括3D效果和扁平化设计。我们将通过分析提供的`index2.html`和`index.html`文件以及相关的CSS样式来学习这一主题。 首先，让我们了解CSS3中的伪类和...
CssButton按钮样式
09-21
本文将深入探讨如何使用CSS来创建美观且功能丰富的“CssButton”按钮样式，以及相关的实践示例。 一、基础按钮样式 一个基本的HTML按钮元素看起来像这样： ```html 点击我 ``` 默认情况下，浏览器会为按钮提供一种...
按钮样式 Btn Style
06-26
按钮样式 Btn Style
button中的type="button"
weixin_30642305的博客
02-07 405
button中的type="button"属性如果不添加，在表单中，单击button会刷新整个页面； 转载于:https://www.cnblogs.com/yuxinpeng/p/6374709.html
【前端系列】36种button样式
热门推荐
檀越的博客
11-17 4万+
3.button 种类 "Button"可以指多种不同类型的按钮，以下是其中的一些：以下是一些 HTML 中设置按钮样式的常用方法：1.使用 CSS 样式表：可以通过 CSS 样式表来设置按钮的外观，例如设置按钮的背景色、字体颜色、边框等。 2.使用内联样式：可以在按钮标签中使用 style 属性来设置按钮的样式。 3.使用类名：可以为按钮设置一个类名，然后在 CSS 样式表中设置该类名的样式。 觉得有用的话点个赞 呗。
css_按钮_Button_样式
weixin_42786460的博客
09-01 3601
css_按钮_Button_样式
Bootstrap-按钮（参考H+提供的，按钮样式和代码）
最新发布
qq_54015925的博客
12-07 4498
btn btn-primary样式：蓝色（我感觉是绿色，但是查了一些资料都说是蓝色），提供额外的视觉感，可在一系列按钮中指出主要操作。btn btn-link样式：浅蓝色，简化一个按钮，是他看起来像一个连接同时保持按钮的行为。btn btn-success样式：浅蓝色（个人觉得：浅蓝色），可作为默认样式的代替样式。btn btn-block样式：使按钮设置为块样式，+lg样式可填充满整个父容器。btn btn-info样式：绿色（个人觉得：天蓝色），标识成功或积极的动作。以第一种为例，其余的修改对应的。
BootStrap笔记-按钮相关
IT1995的博客
01-17 1441
程序运行截图如下： 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-
AmazeUI 按钮
一直专注于互联网
02-16 1732
&lt;!doctype html&gt; &lt;html class="no-js"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name=&
Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式
weixin_34343000的博客
03-17 2496
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
Bootstrap-button btn样式
weixin_41952920的博客
07-28 1464
Button-按钮 按钮的样式 <button class="btn btn-default">default</button> <button class="btn btn-primary">primary</button> <button class="btn btn-success">success</button> &...
按钮样式
05-25
按钮样式可以通过CSS来设置，以下是一个基本的按钮样式： ```css button { background-color: #4CAF50; /* 设置背景颜色 */ border: none; /* 去掉边框 */ color: white; /* 设置字体颜色 */ padding: 10px 20...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值