引导卡

引导卡是一种常用的页面元素，它通常用于指导用户完成某个操作或告知用户当前页面的状态。引导卡可以包含文本、图片、按钮等内容，具有良好的可定制性，应用广泛。下面介绍几种常见的引导卡实现方式。

CSS实现

使用CSS可以实现简单的引导卡效果，代码如下：

<div class="card">
  <h2>标题</h2>
  <p>内容</p>
  <button>按钮</button>
</div>

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 200px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card h2 {
  font-size: 24px;
}

.card p {
  font-size: 18px;
}

.card button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 10px;
}

上面的代码实现了一个简单的引导卡，点击按钮可以执行特定的操作。使用CSS可以轻松定制引导卡的样式，但无法实现动态效果。

JavaScript实现

使用JavaScript可以实现动态的引导卡效果，代码如下：

<div id="card" class="card">
  <h2>标题</h2>
  <p>内容</p>
  <button onclick="closeCard()">关闭</button>
</div>

.card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  width: 200px;
  opacity: 0;
  pointer-events: none;
}

.card.show {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease-in-out;
}

.card h2 {
  font-size: 24px;
}

.card p {
  font-size: 18px;
}

.card button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: 10px;
}

function showCard() {
  var card = document.getElementById("card");
  card.classList.add("show");
}

function closeCard() {
  var card = document.getElementById("card");
  card.classList.remove("show");
}

上面的代码实现了一个动态的引导卡，点击按钮会弹出卡片，再次点击会关闭卡片。使用JavaScript可以实现更加灵活多样的引导卡效果。

Bootstrap实现

使用Bootstrap可以快速创建各种类型的引导卡，具有良好的可定制性和响应式设计，代码如下：

<div class="card">
  <img src="img/img_avatar.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>标题</b></h4>
    <p>内容</p>
    <button>按钮</button>
  </div>
</div>

$(function () {
  $('[data-toggle="popover"]').popover()
})

上面的代码使用了Bootstrap的popover组件，点击按钮可以弹出卡片内容。Bootstrap的组件库非常丰富，可以快速实现各种类型的引导卡效果。