css - 将框架从 pure.css 更改为 bootstrap，而不更改标记

Question

目前我在 Pure 中设计了一个网站.如何在不更改标记的情况下将纯表单更改为 Bootstrap 表单？我的纯形式是这样的:

 <form class="pure-form pure-form-stacked">
                    <div class="pure-control-group">
                        <label for="first-name">First name</label>
                        <input class="pure-input-1-2" type="text" id="first-name" placeholder="First name">
                    </div>

                    <div class="pure-control-group">
                        <label>Last name</label>
                        <input class="pure-input-1-2" type="text" placeholder="Last name">
                    </div>

                    <div class="pure-control-group">
                        <label>Middle names</label>
                        <input class="pure-input-1-2" type="text" placeholder="Middle names">
                    </div>

                    <div class="pure-control-group">
                        <label>Gender</label>
                        <select>
                            <option>Male</option>
                            <option>Female</option>
                            <option>Other</option>
                        </select>
                    </div>

                    <button>Save</button>
                </form>

Answer 1

您可以将 Bootstrap 的预定义类用于标签和表单控件。

举个例子:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form role="form">
  <div class="form-group">
    <label for="first-name">First Name:</label>
    <input type="first-name" class="form-control" id="first-name" placeholder="First Name">
  </div>
  <div class="form-group">
    <label for="last-name">Last Name</label>
    <input type="last-name" class="form-control" id="last-name" placeholder="Last Name">
  </div>
  <div class="form-group">
    <label for="middle-names">Middle Name</label>
    <input type="middle-names" class="form-control" id="middle-name" placeholder="Middle names">
  </div>
  <div class="form-group">
    <label for="sel1">Gender</label>
    <select class="form-control" id="gender">
      <option>Male</option>
      <option>Female</option>
      <option>Other</option>
    </select>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
  </form

表单布局的标准规则:

• 始终使用 <form role="form">
• 在 <div class="form-group"> 中包装标签和表单控件
• 将类 .form-control 添加到所有文本 <input> , <textarea> , 和 <select>元素