代码拉取完成，页面将自动刷新
同步操作将从 笔下光年/Light Year Admin Using Iframe v5 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>按钮 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="card">
<header class="card-header"><div class="card-title">按钮</div></header>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th class="w-25">按钮</th>
<th>class=""</th>
<th class="w-25">按钮</th>
<th>class=""</th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="btn btn-default btn-w-md" type="button">默认按钮</button></td>
<td><code>btn btn-default</code></td>
<td><button class="btn btn-primary btn-w-md" type="button">主要颜色按钮</button></td>
<td><code>btn btn-primary</code></td>
</tr>
<tr>
<td><button class="btn btn-success btn-w-md" type="button">绿色按钮</button></td>
<td><code>btn btn-success</code></td>
<td><button class="btn btn-info btn-w-md" type="button">蓝色按钮</button></td>
<td><code>btn btn-info</code></td>
</tr>
<tr>
<td><button class="btn btn-warning btn-w-md" type="button">橙色按钮</button></td>
<td><code>btn btn-warning</code></td>
<td><button class="btn btn-danger btn-w-md" type="button">红色按钮</button></td>
<td><code>btn btn-danger</code></td>
</tr>
<tr>
<td><button class="btn btn-secondary btn-w-md" type="button">灰色按钮</button></td>
<td><code>btn btn-secondary</code></td>
<td><button class="btn btn-dark btn-w-md" type="button">黑色按钮</button></td>
<td><code>btn btn-dark</code></td>
</tr>
<tr>
<td><button class="btn btn-purple btn-w-md" type="button">紫色按钮</button></td>
<td><code>btn btn-purple</code></td>
<td><button class="btn btn-pink btn-w-md" type="button">粉红色按钮</button></td>
<td><code>btn btn-pink</code></td>
</tr>
<tr>
<td><button class="btn btn-cyan btn-w-md" type="button">青色按钮</button></td>
<td><code>btn btn-cyan</code></td>
<td><button class="btn btn-yellow btn-w-md" type="button">黄色按钮</button></td>
<td><code>btn btn-yellow</code></td>
</tr>
<tr>
<td><button class="btn btn-brown btn-w-md" type="button">棕色按钮</button></td>
<td><code>btn btn-brown</code></td>
<td><button class="btn btn-link" type="button">链接形式</button></td>
<td><code>btn btn-link</code></td>
</tr>
<tr>
<td><button class="btn btn-light btn-w-md" type="button">浅灰色按钮</button></td>
<td><code>btn btn-light</code></td>
<td><button class="btn btn-indigo btn-w-md" type="button">靛蓝色按钮</button></td>
<td><code>btn btn-indigo</code></td>
</tr>
<tr>
<td><button class="btn btn-teal btn-w-md" type="button">蓝绿色按钮</button></td>
<td><code>btn btn-teal</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<p>如果你不希望按钮中的文字换行的话，可以为按钮添加 <code>.text-nowrap</code> 类。</p>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<header class="card-header"><div class="card-title">按钮的其他样式</div></header>
<div class="card-body">
<h6>可用作按钮的 <code>HTML</code> 标签</h6>
<p><code>.btn</code> 系列类（class）被设计为用于 <code><button></code> 元素。不过，你也可以将这些类用于 <code><a></code> 或 <code><input></code> 元素（但是某些浏览器可能会使用略有不同的渲染方式）。</p>
<p>当 <code>.btn</code> 系列类（class）用于 <code><a></code> 元素并触发页面上的功能（例如折叠内容），而不是链接到新页面或当前页面中的内容部分时，应当为这些链接设置 <code>role="button"</code> 属性，以便将链接的目的以适当的方式传递给类似屏幕阅读器的辅助工具。</p>
<div class="border-example">
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
</div>
<pre><a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset"></pre>
<h6>边框按钮</h6>
<p>当你需要使用按钮，但不希望按钮带有背景颜色时，请将默认的修饰符类（modifier class）替换为 <code>.btn-outline-*</code> 系列类（class），已去除按钮上的所有背景图片和颜色。</p>
<div class="example-box">
<button type="button" class="btn btn-outline-primary">主色按钮</button>
<button type="button" class="btn btn-outline-secondary">灰色按钮</button>
<button type="button" class="btn btn-outline-success">绿色按钮</button>
<button type="button" class="btn btn-outline-danger">红色按钮</button>
<button type="button" class="btn btn-outline-warning">橙色按钮</button>
<button type="button" class="btn btn-outline-info">蓝色按钮</button>
<button type="button" class="btn btn-outline-light">浅灰色按钮</button>
<button type="button" class="btn btn-outline-dark">黑色按钮</button>
<button type="button" class="btn btn-outline-purple">紫色按钮</button>
<button type="button" class="btn btn-outline-pink">粉红色按钮</button>
<button type="button" class="btn btn-outline-cyan">青色按钮</button>
<button type="button" class="btn btn-outline-yellow">黄色色按钮</button>
<button type="button" class="btn btn-outline-indigo">靛蓝色按钮</button>
<button type="button" class="btn btn-outline-brown">棕色按钮</button>
<button type="button" class="btn btn-outline-teal">蓝绿色按钮</button>
</div>
<div class="row">
<div class="col-lg-6">
<div class="lyear-divider">圆角按钮</div>
<p><code>class</code> 中增加 <code>.btn-round</code>。</p>
<div class="example-box">
<button class="btn btn-w-md btn-round btn-primary">主色按钮</button>
<button class="btn btn-w-md btn-round btn-secondary">灰色按钮</button>
<button class="btn btn-w-md btn-round btn-success">绿色按钮</button>
<button class="btn btn-w-md btn-round btn-info">蓝色按钮</button>
<button class="btn btn-w-md btn-round btn-warning">橙色按钮</button>
<button class="btn btn-w-md btn-round btn-danger">红色按钮</button>
</div>
</div>
<div class="col-lg-6">
<div class="lyear-divider">带图标的按钮</div>
<p>这里放弃跟v4版本那样使用 <code>label</code> 的情况，直接在按钮中放图标按钮元素即可。</p>
<div class="example-box">
<button class="btn btn-primary"><i class="mdi mdi-checkbox-marked-circle-outline"></i> 确认提交</button>
<button class="btn btn-info"><i class="mdi mdi-play-circle-outline"></i> 播放</button>
<button class="btn btn-warning"><i class="mdi mdi-delete-empty"></i> 清空数据</button>
<button class="btn btn-danger"><i class="mdi mdi-close"></i> 删除</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<header class="card-header"><div class="card-title">按钮的其他属性</div></header>
<div class="card-body">
<h6>指定按钮宽度</h6>
<p>可使用 <code>.btn-w-xs</code>, <code>.btn-w-sm</code>, <code>.btn-w-md</code>, <code>.btn-w-lg</code> 和 <code>.btn-w-xl</code> 类指定按钮宽度。</p>
<div class="example-box">
<button class="btn btn-w-xs btn-primary">极小宽</button>
<button class="btn btn-w-sm btn-primary">小的</button>
<button class="btn btn-w-md btn-primary">中等宽度</button>
<button class="btn btn-w-lg btn-primary">宽按钮</button>
<button class="btn btn-w-xl btn-primary">超宽</button>
</div>
<div class="row">
<div class="col-lg-6">
<div class="lyear-divider">按钮大小</div>
<p>需要更大或更小的按钮吗？使用 <code>.btn-lg</code> 或 <code>.btn-sm</code> 类可以设置按钮的不同尺寸</p>
<div class="example-box">
<button type="button" class="btn btn-primary btn-lg">大的按钮</button>
<button type="button" class="btn btn-primary btn-sm">小的按钮</button>
</div>
</div>
<div class="col-lg-6">
<div class="lyear-divider">禁用状态</div>
<p>通过为 <code><button></code> 元素设置 <code>disabled</code> 属性（此属性是布尔类型的）可以使按钮看起来处于禁用状态。处于禁用状态的按钮被设置了 <code>pointer-events: none</code> 属性，以防止触发鼠标悬停（hover）和活动（active）状态。</p>
<div class="example-box">
<button type="button" class="btn btn-primary" disabled>主色按钮</button>
<button type="button" class="btn btn-secondary" disabled>灰色按钮</button>
<a href="#!" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">主色链接</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">灰色链接</a>
</div>
</div>
<div class="col-lg-12">
<div class="lyear-divider">块级元素按钮</div>
<p>创建块级元素按钮，不再像 Bootstrap 4 一样给按钮指定相关的类，这里是在父元素上指定 <code>display</code> 和 <code>gap</code> 相关。</p>
<div class="border-example">
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div>
</div>
<pre><div class="d-grid gap-2">
<button class="btn btn-primary" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div></pre>
<p>在这里，我们创建了一个响应式变化，从垂直堆叠的按钮开始，直到 <code>md</code> 断点，其中 <code>.d-md-block</code> 取代了 <code>.d-grid</code> 类，从而使 <code>gap-2</code> 类无效。调整浏览器大小以查看它们的变化。</p>
<div class="border-example">
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div>
</div>
<pre><div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div></pre>
<p>可以使用网格列宽类调整块按钮的宽度。例如，对于半宽“块级元素按钮”，使用 <code>.col-6</code> 和 <code>.mx-auto</code> 将其水平居中放置。</p>
<div class="border-example">
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div>
</div>
<pre><div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div></pre>
<p>当按钮水平时，可使用其他类调整按钮的对齐方式。这里我们以前面的响应示例为例，在按钮上添加了一些 <code>flex</code> 类和 <code>margin</code>相关类，以便在按钮不再堆叠时右对齐按钮。</p>
<div class="border-example">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div>
</div>
<pre><div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary me-md-2" type="button">按钮</button>
<button class="btn btn-primary" type="button">按钮</button>
</div></pre>
</div>
</div>
<div class="callout callout-warning">Bootstrap 5的文档中有关于按钮插件的说明，对于这个按钮插件目前我也不太明白具体在实际开发中有什么用处，这里就不再说明，有兴趣的小伙伴自行查看官方的文档。</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手