引导按钮、字形图标、表格

引导按钮

引导按钮是一种常用的用户界面元素，可以用于引导用户执行操作或进入特定的页面。

样式

引导按钮可以有多种样式，包括填充样式、轮廓样式、可选状态样式等。

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-outline-primary">Primary Outline Button</button>
<button class="btn btn-outline-secondary">Secondary Outline Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-info">Info Button</button>
<button class="btn btn-light">Light Button</button>
<button class="btn btn-dark">Dark Button</button>
<button class="btn btn-link">Link Button</button>

使用方法

引导按钮可以用来触发事件、链接到一个页面或执行某些操作。

<button id="delete-button" class="btn btn-danger">Delete</button>
<button id="submit-button" class="btn btn-primary" type="submit">Submit</button>
<a href="/about" class="btn btn-secondary">About Us</a>

字形图标

字形图标是一种常见的用户界面元素，可以用来表示某种意义、方便用户理解。

样式

字形图标可以使用多种库来实现，包括Font Awesome、Material Design Icons等。

<i class="fa fa-search"></i>
<i class="fab fa-github"></i>
<i class="mdi mdi-account"></i>
<i class="oi oi-book"></i>

使用方法

字形图标可以与其他元素进行组合使用，例如按钮、标签等，以增强表现力和可读性。

<button id="search-button" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
<label for="username"><i class="mdi mdi-account"></i> Username:</label>

表格

表格是一种常见的数据展示方式，可以用来呈现大量数据并进行分析。

样式

表格可以有不同的样式，包括简单表格、带边框表格、响应式表格等。

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

使用方法

表格可以用来呈现数据、进行排序和筛选等。

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
      <td>mark@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
      <td>jacob@example.com</td>
    </tr>
  </tbody>
</table>