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

Question

目前，我在Pure中设置了一个网站样式。如何在不更改标记的情况下将纯表单更改为引导表单？我的纯粹形式是：

 <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的预定义类用于标签和表单控件。

以下是一个例子：

＆＃13;

＆＃13;

<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

＆＃13;

＆＃13;

＆＃13;

表单布局的标准规则：

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