将框架从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的预定义类标签和表单控件。

下面是一个例子：

<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控制所有文字<input>，<textarea>和<select>元素