利用Bootstrap实现漂亮简洁的CSS3价格表实例源码

利用Bootstrap实现漂亮简洁的CSS3价格表实例源码

介绍

在网页设计过程中，价格表是一个常见的设计元素。而Bootstrap是一个流行的前端框架，它可以让我们方便地创建各种漂亮的界面元素。本文将介绍如何利用Bootstrap实现漂亮简洁的CSS3价格表实例源码。

步骤

步骤1：创建基本的HTML结构

在HTML文件中创建一个基本的表格结构，用于展示价格和功能信息。在表格中添加标题行和数据行。

  <div class="container">
    <h2>Price Table</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Plan</th>
          <th>Price</th>
          <th>Description</th>
          <th>Sign Up</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Basic</td>
          <td>$99/month</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td><a class="btn btn-primary" href="#">Sign Up</a></td>
        </tr>
        <tr>
          <td>Pro</td>
          <td>$199/month</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td><a class="btn btn-primary" href="#">Sign Up</a></td>
        </tr>
        <tr>
          <td>Premium</td>
          <td>$299/month</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td><a class="btn btn-primary" href="#">Sign Up</a></td>
        </tr>
      </tbody>
    </table>
  </div>

步骤2：添加样式

添加以下CSS样式表到文件中，用于定制价格表的外观。

  table {
      width: 100%;
      margin: 20px 0;
      border-collapse: collapse;
  }

  /* Zebra striping */
  tr:nth-of-type(odd) {
      background: #f9f9f9;
  }

  th {
      background: #555;
      color: white;
      font-weight: bold;
  }

  td, th {
      padding: 10px;
      border: 1px solid #ccc;
      text-align: left;
  }

  /* Button */
  .btn {
      display: inline-block;
      background: #555;
      color: #fff;
      padding: 10px 20px;
      text-decoration: none;
      border-radius: 5px;
  }

  /* Primary button */
  .btn-primary {
      background: #f5c518;
      color: #333;
  }

  /* Large desktops */
  @media (min-width: 1200px) {

      /* Table */
      table {
          width: 50%;
      }

  }

  /* Small desktops and tablets */
  @media (min-width: 768px) and (max-width: 1199px) {

      /* Table */
      table {
          width: 70%;
      }

  }

  /* Mobile devices */
  @media (max-width: 767px) {

      /* Table */
      table {
          width: 100%;
      }

  }

以上代码中定义了价格表的样式，包括表格的宽度、单元格边框、背景颜色、标题行的背景颜色、价格和描述的对齐方式，以及按钮的样式等。同时，利用@media查询实现了根据不同设备尺寸自适应的布局效果。

步骤3：引入Bootstrap

在文件中引入Bootstrap的CSS和JS文件，以充分利用Bootstrap提供的功能。

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

示例说明

示例1：修改价格和描述

我们可以轻松地通过修改HTML代码中的价格和描述信息，来实现价格表信息的更新。

 <div class="container">
    <h2>Price Table</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Plan</th>
          <th>Price</th>
          <th>Description</th>
          <th>Sign Up</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Basic</td>
          <td>$99/month</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td><a class="btn btn-primary" href="#">Sign Up</a></td>
        </tr>
        <tr>
          <td>Pro</td>
          <td>$199/month</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td><a class="btn btn-primary" href="#">Sign Up</a></td>
        </tr>
        <tr>
          <td>Premium</td>
          <td>$399/month</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td><a class="btn btn-primary" href="#">Sign Up</a></td>
        </tr>
      </tbody>
    </table>
  </div>

示例2：增加新的价格计划

我们可以轻松地通过向表格中添加新的数据行，来实现价格表信息的扩展。

  <div class="container">
    <h2>Price Table</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Plan</th>
          <th>Price</th>
          <th>Description</th>
          <th>Sign Up</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Basic</td>
          <td>$99/month</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td><a class="btn btn-primary" href="#">Sign Up</a></td>
        </tr>
        <tr>
          <td>Pro</td>
          <td>$199/month</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td><a class="btn btn-primary" href="#">Sign Up</a></td>
        </tr>
        <tr>
          <td>Premium</td>
          <td>$299/month</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td><a class="btn btn-primary" href="#">Sign Up</a></td>
        </tr>
        <tr>
          <td>Enterprise</td>
          <td>Contact Us</td>
          <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
          <td><a class="btn btn-primary" href="#">Sign Up</a></td>
        </tr>
      </tbody>
    </table>
  </div>

总结

通过以上步骤，我们可以创建漂亮简洁的CSS3价格表实例。在实际的网站设计中，我们可以根据自己的需求进行修改和扩展，实现更加复杂的价格表布局和功能。