添加引导程序以做出反应 - CSS

在Web设计中，引导程序（Bootstrap）是最受欢迎的前端框架之一。 它提供了很多内置的CSS和JavaScript组件，可以轻松地为您的网站或应用程序添加漂亮的外观和交互。

在本教程中，我们将介绍如何添加引导程序以实现对按钮进行交互的效果。

步骤 1: 引入引导程序

首先，您需要在HTML文件中引入Bootstrap CSS样式表和JavaScript脚本。 最简单的方法是使用以下CDN（内容分发网络）链接：

<!-- 最新的Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery库-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 最新的Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

您可以将这些链接添加到您的HTML文件的头部部分。

步骤 2: 创建一个带有按钮的表单

要实现对按钮进行交互的效果，我们需要将按钮放入一个表单中。 如果您已经有一个表单，请跳过这一步。 否则，您可以使用以下HTML代码创建一个简单的表单：

<div class="container">
   <form>
     <div class="form-group">
       <label>Email:</label>
       <input type="email" class="form-control" placeholder="Enter email" id="email">
     </div>
    
     <div class="form-group">
       <label>Password:</label>
       <input type="password" class="form-control" placeholder="Enter password" id="pwd">
     </div>
    
     <button type="submit" class="btn btn-primary">Submit</button>
   </form>
 </div>

此代码将创建一个包含电子邮件和密码输入字段以及一个提交按钮的表单。

步骤 3: 添加交互效果

接下来，我们将使用CSS和JavaScript来添加我们的按钮交互效果。

首先，我们需要添加以下CSS样式到我们的样式表中：

.btn-primary.loading:after {
    content:"";
    background: url('https://i.stack.imgur.com/ZZgKn.gif');
    background-size: contain;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    position: relative;
    top: 1px;
}

这将为我们的提交按钮添加一个“加载中”动画效果。

接下来，我们需要使用以下JavaScript代码来在点击提交按钮时添加“加载中”效果，并在2秒钟后自动将其删除：

$('form').submit(function() {
   $('button[type="submit"]').addClass('loading');
   setTimeout(function(){
      $('button[type="submit"]').removeClass('loading');
   },2000);
});

这会将提交按钮的class设置为“loading”，从而触发我们刚刚添加的CSS动画效果。 2秒钟后，我们通过将按钮的class更改为原始状态来删除它。

结论

现在，我们的按钮交互效果完成了！ 您可以在自己的网站或应用程序上实现此效果，并通过使用引导程序来创建任何其他UI组件。

在这篇文章中，我们已经通过以下步骤学习了如何实现对按钮进行交互的效果：

1. 引入引导程序；
2. 创建包含按钮的表单；
3. 使用CSS和JavaScript添加交互性能。

希望您能学到更多关于Web设计的知识，谢谢！