【django】class='btn' btn按钮样式

最新推荐文章于 2023-10-30 15:13:26 发布
转载 最新推荐文章于 2023-10-30 15:13:26 发布 · 1.5w 阅读 · 28

本文详细介绍了AntUI框架中的按钮组件使用方法，包括不同样式、状态、尺寸、块级显示及图标集成，适用于前端开发人员快速掌握按钮组件的配置与应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Button

目录

基本使用

默认样式

在要应用按钮样式的元素上添加 .am-btn，再设置相应的颜色。

  • .am-btn-default - 默认，灰色按钮
  • .am-btn-primary - 蓝色按钮
  • .am-btn-secondary - 浅蓝色按钮
  • .am-btn-success - 绿色按钮
  • .am-btn-warning - 橙色按钮
  • .am-btn-danger - 红色按钮
  • .am-btn-link

 Copy

默认样式 主色按钮 次色按钮 绿色按钮 橙色按钮 红色按钮 链接 应用按钮样式的链接

<button type="button" class="am-btn am-btn-default">默认样式</button>
<button type="button" class="am-btn am-btn-primary">主色按钮</button>
<button type="button" class="am-btn am-btn-secondary">次色按钮</button>
<button type="button" class="am-btn am-btn-success">绿色按钮</button>
<button type="button" class="am-btn am-btn-warning">橙色按钮</button>
<button type="button" class="am-btn am-btn-danger">红色按钮</button>
<a class="am-btn am-btn-link">链接</a>
<a class="am-btn am-btn-danger" href="http://www.bing.com" target="_blank">应用按钮样式的链接</a>

圆角按钮

在默认样式的基础上添加 .am-radius class.

 Copy

默认样式 主色按钮 次色按钮 绿色按钮 橙色按钮 红色按钮

<button type="button" class="am-btn am-btn-default am-radius">默认样式</button>

椭圆形按钮

在默认样式的基础上添加 .am-round class.

 Copy

默认样式 主色按钮 次色按钮 绿色按钮 橙色按钮 红色按钮

<button type="button" class="am-btn am-btn-default am-round">默认样式</button>

按钮状态

激活状态

在按钮上添加 .am-active class。

 Copy

激活状态 激活状态

链接按钮激活状态 链接按钮激活状态

<button type="button" class="am-btn am-btn-primary am-active">激活状态</button>
<button type="button" class="am-btn am-btn-default am-active">激活状态</button>
<br >
<br >
<a href="#" class="am-btn am-btn-primary am-active" role="button">链接按钮激活状态</a>
<a href="#" class="am-btn am-btn-default am-active" role="button">链接按钮激活状态</a>

禁用状态

在按钮上设置 disabled 属性或者添加 .am-disabled class。

 Copy

禁用状态 禁用状态

链接按钮禁用状态 链接按钮禁用状态

<button type="button" class="am-btn am-btn-primary" disabled="disabled">禁用状态</button>
<button type="button" class="am-btn am-btn-default" disabled="disabled">禁用状态</button>

<a href="#" class="am-btn am-btn-primary am-disabled">链接按钮禁用状态</a>
<a href="#" class="am-btn am-btn-default am-disabled">链接按钮禁用状态</a>

IE9 会把设置了 disabled 属性的 button 元素文字渲染成灰色并加上白色阴影，CSS 无法控制这个默认样式。

按钮尺寸

  • .am-btn-xl
  • .am-btn-lg
  • .am-btn-default
  • .am-btn-sm
  • .am-btn-xs

 Copy

按钮 - xl 按钮 - lg 按钮默认大小 按钮 - sm 按钮 - xs

按钮 - xl 按钮 - lg 按钮默认大小 按钮 - sm 按钮 - xs

<button class="am-btn am-btn-default am-btn-xl">按钮 - xl</button>
<button class="am-btn am-btn-default am-btn-lg">按钮 - lg</button>
<button class="am-btn am-btn-default">按钮默认大小</button>
<button class="am-btn am-btn-default am-btn-sm">按钮 - sm</button>
<button class="am-btn am-btn-default am-btn-xs">按钮 - xs</button>

<button class="am-btn am-btn-primary am-btn-xl">按钮 - xl</button>
<button class="am-btn am-btn-primary am-btn-lg">按钮 - lg</button>
<button class="am-btn am-btn-primary">按钮默认大小</button>
<button class="am-btn am-btn-primary am-btn-sm">按钮 - sm</button>
<button class="am-btn am-btn-primary am-btn-xs">按钮 - xs</button>

块级显示

添加 .am-btn-block class。

 Copy

块级显示的按钮块级显示的按钮

<button type="button" class="am-btn am-btn-primary am-btn-block">块级显示的按钮</button>
<button type="button" class="am-btn am-btn-default am-btn-block">块级显示的按钮</button>

按钮 Icon

使用 Icon 之前需先引入 Icon 组件。

 Copy

 设置  结账 加载中 下载片片 

<button class="am-btn am-btn-default">
  <i class="am-icon-cog"></i>
  设置
</button>

<a class="am-btn am-btn-warning" href="#">
  <i class="am-icon-shopping-cart"></i>
  结账
</a>

<button class="am-btn am-btn-default">
  <i class="am-icon-spinner am-icon-spin"></i>
  加载中
</button>

<button class="am-btn am-btn-primary">
  下载片片
  <i class="am-icon-cloud-download"></i>
</button>

Issue 列表

django-admin自定义功能按钮样式
LuiChun
09-14 1239
【代码】django-admin自定义功能按钮样式。
解决Django一个表单对应多个按钮的问题
01-20
下面将详细介绍如何解决Django中一个表单对应多个按钮的问题。 首先，我们需要在HTML模板中为每个按钮添加不同的`name`属性。这样，当用户点击按钮提交表单时，这些`name`属性会被包含在POST请求的数据中。例如： ...
WEB前端网页设计-Bootstrap4 按钮
君逍遥o
04-10 623
Bootstrap 4 提供了不同样式的按钮。
AmazeUI 按钮
一直专注于互联网
02-16 1782
&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=&
amazeui学习笔记--js插件（UI增强2）--按钮交互Button
weixin_34291004的博客
05-09 285
amazeui学习笔记--js插件（UI增强2）--按钮交互Button 一、总结 1、按钮loading状态： &lt;button type="button" class="am-btn am-btn-primary btn-loading-example"&gt;Submit - Button&lt;/button&gt; &lt;input type="button" clas...
amazeui学习笔记--css（HTML元素1）--按钮Button
weixin_34128501的博客
05-08 446
amazeui学习笔记--css（HTML元素1）--按钮Button 一、总结 1、button的基本使用：a、am-btn 在要应用按钮样式的元素上添加.am-btn，b、颜色 再设置相应的颜色（例如：<button type="button" class="am-btn am-btn-danger">红色按钮</button>）。 2、a标签做button：各...
django 按钮的样式_【实战演练】Python+Django网站开发系列11-成绩查询与成绩录入...
weixin_39763640的博客
12-16 417
#本文欢迎转载，转载请注明出处和作者终于做到最后一步了，选课、删除、已选展示、修改密码等功能都已经完成，剩下查询已选课程的成绩（学生界面）与成绩录入（老师界面）。其中成绩查询的页面与之前做过的基本上是一样的，一个ORM命令就搞定。成绩录入这边，我们需要引入弹层jquery插件，帮助我们快速完成。1、成绩查询1.1后台查询业务逻辑编辑views.py里面的queryscore函数，需要做个简单的连接...
<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li><a id="twNewsBtn" class="btn btn-primary navbar-btn" href="#" role="button" style="width: 150px;">台群新聞</a></li> <li><a id="cnNewsBtn" class="btn btn-primary navbar-btn" href="#" role="button" style="width: 150px;">陸群新聞</a></li> <li><a id="worldBtn" class="btn btn-primary navbar-btn" href="#" role="button" style="width: 150px;">總經更新</a></li> <li><a id="incomeBtn" class="btn btn-primary navbar-btn" href="#" role="button" style="width: 150px;">營收更新</a></li> </ul> </div> <div class="col-sm-9 col-md-10 main"> </div> </div> </div> 這是我用jinja2+bootstrap3寫的前端部分代碼,請幫我在div .col-sm-9 col-md-10 main 標籤內實現一個尺寸計算器,讓使用者可以輸入長寬高的上下限, 其他代碼我有需要請不要改動,幫我增添代碼就好
04-22
<button type="submit" class="btn btn-primary pull-right">计算 ``` 此部分代码展示了如何使用 `Bootstrap3` 的样式类（如 `form-group`, `control-label`, `form-control` 等）以及响应式网格系统来布置...
django btn
12-27
这里，“custom-btn-class”代表用户自己定义的一组样式规则，可以根据实际需求调整按钮的颜色、大小等视觉效果。 如果想要更灵活地控制不同场景下的按钮显示风格，也可以创建专门用于处理此类情况的模板过滤器或者...
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <title>登录页</title> <style> form { margin: 200px auto; width: 35%; height: 25%; } div.card { padding-left: 50px; padding-right: 50px; } </style> </head> <body> <div class="container"> <form class="text-center"> <img class="mb-4" src="img/logo.svg" alt="" width="120" height="120"> <h1 class="h3 mb-4 fw-normal">登录</h1> <div class="mb-4 form-floating"> <label for="username">用户</label> <input type="text" class="form-control" id="username"> </div> <div class="mb-4 form-floating"> <label for="password">密码</label> <input type="password" class="form-control" id="password"> </div> <button class="w-100 btn btn-lg btn-dark" type="submit">登录</button> <p class="mt-5 mb-3 text-muted">© 2025–2035</p> </form> </div> </body> </html>就用我这个html文件，加上登出按钮
最新发布
06-25
- `class="btn btn-outline-danger"`：使用 Bootstrap 的按钮样式 - `class="logout-btn"`：自定义样式类，用于定位按钮位置 ### 2. 样式部分（CSS） ```css .logout-btn { position: absolute; top: 20px; ...
{% extends "admin/base.html" %} {% block content %} <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <h2>药品列表</h2> <table class="table"> <thead> <tr> <th>ID</th> <th>药品名称</th> <th>操作</th> </tr> </thead> <tbody> {% for drug in drugs %} <tr> <td>{{ drug.id }}</td> <td>{{ drug.drug_name }}</td> <td> <a href="{% url 'admin:drug_db_drug_list_change' drug.id %}" class="btn btn-primary btn-sm">编辑</a> <form action="{% url 'admin:drug_db_drug_list_delete' drug.id %}" method="post" class="d-inline"> {% csrf_token %} <button class="btn btn-danger btn-sm">删除</button> </form> </td> </tr> {% empty %} <tr> <td colspan="3">暂无药品</td> </tr> {% endfor %} </tbody> </table> <a href="{% url 'admin:drug_db_drug_list_add' %}" class="btn btn-success">添加新药品</a> </div> <div class="col-md-6"> <h2>药品相互作用</h2> <table class="table"> <thead> <tr> <th>ID</th> <th>药品1</th> <th>药品2</th> <th>相互作用</th> <th>操作</th> </tr> </thead> <tbody> {% for interaction in interactions %} <tr> <td>{{ interaction.id }}</td> <td>{{ interaction.drug1 }}</td> <td>{{ interaction.drug2 }}</td> <td>{{ interaction.interaction }}</td> <td> <a href="{% url 'admin:drug_db_drug_interaction_change' interaction.id %}" class="btn btn-primary btn-sm">编辑</a> <form action="{% url 'admin:drug_db_drug_interaction_delete' interaction.id %}" method="post" class="d-inline"> {% csrf_token %} <button class="btn btn-danger btn-sm">删除</button> </form> </td> </tr> {% empty %} <tr> <td colspan="5">暂无药品相互作用</td> </tr> {% endfor %} </tbody> </table> <a href="{% url 'admin:drug_db_drug_interaction_add' %}" class="btn btn-success">添加新药品相互作用</a> </div> </div> </div> {% endblock %} 为上述代码设置相应的视图和URL配置，并将这些视图和操作注册到Django admin页面中。
05-18
class DrugListView(TemplateView): template_name = "admin/drug_db/drug_list.html" def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) context["drugs"] = Drug.objects...
bootstrap 按钮颜色 class=“btn btn-success“
qinzuoyu996的博客
03-05 4020
Bootstrap默认为很多组件都提供了5种颜色的样式： 这5种颜色分别是： btn-primary（重点蓝） btn-success（成功绿） btn-info（信息蓝） btn-warning（警告橙） btn-danger（危险红） 效果图：
Django网络应用实践（3）-button按钮点击事件+超链接跳转及分页+路由管理
fuyouliyang的博客
04-10 5122
js的代码中，需要明确的是点击该按钮后所调用的路由，此时的路由不是一个具体的页面，而是在后台中具体处理某一事件的一个自定义函数。想要实现点击button按钮后触发某个事件，这就得使用js的知识，将按钮与具体的某个事件绑定，当点击该按钮时触发这一事件。与button跳转一样，这里跳转的还是一个执行某个功能的一个自定义函数，这个函数会负责将静态页面渲染出来。html的代码中，需要对button中id的参数进行明确，id明确之后才能绑定事件。我的二级路由写在app目录中的urls.py中，这个文件需要自己创建。
bootstrap btn 按钮颜色 class="btn btn-success"
热门推荐
peiwang245的博客
07-23 3万+
Bootstrap默认为很多组件都提供了5种颜色的样式， 这5种颜色分别是： primary（重点蓝）、 success（成功绿）、 info（信息蓝）、 warning（警告橙）、 danger（危险红）。 定义规则是：组件名称-颜色类型，如btn-primary、alert-info。 ...
Django点击交互操作
AI悦创·编程私教1v1
03-05 3196
需求介绍 数据库内容读取并展示到首页上，首页展示了非常多的文章的标题和摘要，如果要查看内容的话，还得点击文章的查看，进到 article.html 中才可以看到。 那点击操作，如何实现？本节课我们来实现这个功能。 链接的渲染 首先是点击，那个查看按钮，是个 a 标签，点击触发的 href 属性，也就是访问新的链接。 访问新的链接，链接中必须携带当前文章的信息，方便在视图函数层面，查询到具体的文章信息，并渲染到 article.html 中。 传输的信息必须独一无二，不然就会出现。数据库中，每条数据都会自动
Django--10 列表按钮点击弹出模态框Modal
liuning2008的专栏
02-17 3425
1 功能展示 点击按钮“处理”，弹出确认框 点击按钮“确定”，弹出modal框 点击按钮“确定”，发送ajax请求 后台接收到ajax请求，将接收到的数据打印 2 模态对话框html页面 <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class
Django中button的处理 & ajax提交数据时不走Form组件验证
Quincy.Coder的博客
11-18 3012
button分类： type=’submit’ 默认类型，会默认提交表单~ type=’button’ type=’reset’ 项目中出现的问题: ajax提交数据时不走Form组件验证 处理方式: 指定input的类型type=’button’ 指定button的类型type=’button’ 上述两种处理方式效果一致！！！
【django】input type= button和 submit
qq1518572311的博客
12-24 2108
&lt;input type="button" /&gt; 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。 &lt;input type="submit" /&gt; 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。 ...
django中循环生成的多个btn，只有第一个btn会弹出模态框
枫的博客
10-30 772
为每个button按钮都绑定同一点击事件，点击每个btn都可弹出模态框。// 点击id为btnDown的按钮，出现对应的模态框。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值