📌  相关文章
📜  如何在引导程序中制作圆形按钮 - Html (1)

📅  最后修改于: 2023-12-03 15:24:38.113000             🧑  作者: Mango

如何在引导程序中制作圆形按钮 - HTML

在 HTML 中，可以使用 Bootstrap 框架来制作一个圆形按钮。以下是实现的步骤：

  1. 引入 Bootstrap 样式表和脚本文件。
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
  1. 使用 btn 样式和 .btn-circle 类制作圆形按钮。
<button class="btn btn-circle"></button>
  1. 为 .btn-circle 类设置样式。
<style>
  .btn-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #007bff;
  }
</style>

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Circle Button</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <style>
    .btn-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #007bff;
    }
  </style>
</head>
<body>
  <button class="btn btn-circle"></button>
</body>
</html>

返回的 markdown 代码片段：

# 如何在引导程序中制作圆形按钮 - HTML

在 HTML 中，可以使用 Bootstrap 框架来制作一个圆形按钮。以下是实现的步骤：

1. 引入 Bootstrap 样式表和脚本文件。

```html
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
  1. 使用 btn 样式和 .btn-circle 类制作圆形按钮。
<button class="btn btn-circle"></button>
  1. 为 .btn-circle 类设置样式。
<style>
  .btn-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #007bff;
  }
</style>

完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Circle Button</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <style>
    .btn-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #007bff;
    }
  </style>
</head>
<body>
  <button class="btn btn-circle"></button>
</body>
</html>