让我来为您详细讲解如何分享Bootstrap简单表格、表单、登录页面的完整攻略。

分享Bootstrap简单表格、表单、登录页面

1. 前置条件

在开始分享Bootstrap简单表格、表单、登录页面的完整攻略之前，请保证您已经做了以下准备：

• 已经安装了Bootstrap框架。
• 对于HTML、CSS和JavaScript有一定的基础和了解。

2. 简单表格

2.1. 创建表格

第一步是创建一个表格。在HTML中，我们可以使用<table>标签来创建表格。使用<thead>标签来定义表头，使用<tbody>标签来定义表格的主体内容。在表头中，使用<tr>标签来定义表头的一行，在这行中使用<th>标签来定义表头的列。在主体中，使用<tr>标签来定义每行内容，并使用<td>标签来定义每列的内容。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>23</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>21</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小强</td>
      <td>25</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

2.2. 使用Bootstrap样式

在创建好表格之后，我们可以使用Bootstrap的样式来美化表格。我们可以在<table>标签中添加class属性table来使用Bootstrap默认表格样式。

<table class="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>23</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>21</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小强</td>
      <td>25</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

3. 表单

3.1. 创建表单

在HTML中，我们可以使用<form>标签来创建一个表单。在表单中，我们可以使用<input>标签来保存用户输入的数据。<input>标签有不同的类型，比如文本框、密码框、单选框、复选框等等。

<form>
  <div class="form-group">
    <label for="username">用户名：</label>
    <input type="text" class="form-control" id="username">
  </div>
  <div class="form-group">
    <label for="password">密码：</label>
    <input type="password" class="form-control" id="password">
  </div>
  <div class="form-group">
    <label for="gender">性别：</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="male" value="male">
      <label class="form-check-label" for="male">
        男
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="gender" id="female" value="female">
      <label class="form-check-label" for="female">
        女
      </label>
    </div>
  </div>
  <div class="form-group">
    <label for="hobby">爱好：</label>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="reading" id="reading">
      <label class="form-check-label" for="reading">
        阅读
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="music" id="music">
      <label class="form-check-label" for="music">
        音乐
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="sports" id="sports">
      <label class="form-check-label" for="sports">
        运动
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

3.2. 使用Bootstrap样式

在创建好表单之后，我们可以使用Bootstrap的样式来美化表单。我们可以在<form>标签中添加class属性form-horizontal来使用Bootstrap默认表单样式。

<form class="form-horizontal">
  <div class="form-group">
    <label for="username" class="col-sm-2 control-label">用户名：</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="username">
    </div>
  </div>
  <div class="form-group">
    <label for="password" class="col-sm-2 control-label">密码：</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password">
    </div>
  </div>
  <div class="form-group">
    <label for="gender" class="col-sm-2 control-label">性别：</label>
    <div class="col-sm-10">
      <div class="radio">
        <label>
          <input type="radio" name="gender" id="male" value="male"> 男
        </label>
      </div>
      <div class="radio">
        <label>
          <input type="radio" name="gender" id="female" value="female"> 女
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="hobby" class="col-sm-2 control-label">爱好：</label>
    <div class="col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox" value="reading" id="reading"> 阅读
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="music" id="music"> 音乐
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="sports" id="sports"> 运动
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">提交</button>
    </div>
  </div>
</form>

4. 登录页面

4.1. 创建登录页面

在HTML中，我们可以使用<form>标签来创建一个表单。在表单中，我们可以使用<input>标签来保存用户输入的数据。我们可以使用Bootstrap的样式来美化登录页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>登录页面</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h1 class="text-center">欢迎登录</h1>
    <form class="form-horizontal">
      <div class="form-group">
        <label for="username" class="col-sm-4 control-label">用户名：</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </div>
      </div>
      <div class="form-group">
        <label for="password" class="col-sm-4 control-label">密码：</label>
        <div class="col-sm-8">
          <input type="password" class="form-control" id="password" placeholder="请输入密码">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-4 col-sm-8">
          <div class="checkbox">
            <label>
              <input type="checkbox"> 记住我
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-4 col-sm-8">
          <button type="submit" class="btn btn-primary">登录</button>
        </div>
      </div>
    </form>
    <div class="text-center">
      <a href="#">忘记密码</a>
    </div>
  </div>
</body>
</html>

4.2. 使用Bootstrap样式

在创建好登录页面之后，我们可以使用Bootstrap的样式来美化页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>登录页面</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
  <style>
    body {
      background-color: #f5f5f5;
    }

    .container {
      max-width: 500px;
      margin: 0 auto;
      padding-top: 50px;
    }

    h1 {
      font-size: 3rem;
    }

    .form-horizontal {
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="text-center">欢迎登录</h1>
    <form class="form-horizontal">
      <div class="form-group">
        <label for="username" class="col-sm-4 control-label">用户名：</label>
        <div class="col-sm-8">
          <input type="text" class="form-control" id="username" placeholder="请输入用户名">
        </div>
      </div>
      <div class="form-group">
        <label for="password" class="col-sm-4 control-label">密码：</label>
        <div class="col-sm-8">
          <input type="password" class="form-control" id="password" placeholder="请输入密码">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-4 col-sm-8">
          <div class="checkbox">
            <label>
              <input type="checkbox"> 记住我
            </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-4 col-sm-8">
          <button type="submit" class="btn btn-primary btn-block">登录</button>
        </div>
      </div>
    </form>
    <div class="text-center">
      <a href="#">忘记密码</a>
    </div>
  </div>
</body>
</html>

以上就是分享Bootstrap简单表格、表单、登录页面的完整攻略。希望对您有帮助。