Create example code using Bootstrap forms-JS Tutorial-php.cn

Create example code using Bootstrap forms

高洛峰

Release： 2017-03-22 15:14:51

Original

1992 people have browsed it

This article mainly introduces the production code of the BootStrap form in detail. It has a certain reference value. Interested friends can refer to it.

The examples in this article are shared with everyone. The specific code of Bootstrap form layout is provided for your reference. The specific content is as follows

Bootstrap provides the following types of form layout:

Vertical form (default)
Inline form
Horizontal form

Form example made by Xiaoniuniu:

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 教学意见调查表</title> 
 <meta charset="utf-8"> 
 <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
 <style> 
 body { 
 padding-top: 150px; 
 padding-bottom: 40px; 
 background-color: #D0E9C6; 
 font-family: &#39;楷体&#39;; 
 font-size: 22px; 
 } 
 
 .col-sm-2 control-label.form-control{ 
 position: relative; 
 height: 60px; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box; 
 } 
 .form-horizontal{ 
 max-width:800px; 
 padding: 15px; 
 margin: 0 auto; 
 } 
 </style> 
</head> 
<body> 
<p class="container"> 
 <form class="form-horizontal" role="form" action="#" method="post"> 
 <p class="form-group"> 
 <label for="name" class="col-sm-2 control-label">名字</label> 
 <p class="col-sm-10"> 
  <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> 
 </p> 
 </p> 
 <p class="form-group"> 
 <label for="class" class="col-sm-2 control-label">班级</label> 
 <p class="col-sm-10"> 
  <input type="text" class="form-control" id="lastname" placeholder="请输入班级"> 
 </p> 
 </p> 
 <p class="form-group"> 
 <label for="Student ID" class="col-sm-2 control-label">学号</label> 
 <p class="col-sm-10"> 
  <input type="text" class="form-control" id="Student ID" placeholder="请输入学号"> 
 </p> 
 </p> 
 <p class="form-group"> 
 <label for="kemu" class="col-sm-2 control-label">科目名称</label> 
 <p class="col-sm-10"> 
  <input type="text" class="form-control" id="kemu" placeholder="请输入科目名称"> 
 </p> 
 </p> 
 <p class="form-group"> 
 <label for="name2" class="col-sm-2 control-label">意见</label> 
 <p class="col-sm-10"> 
 <input type="text" class="form-control" rows="3"> 
 </p> 
 </p> 
 
 <p align="center"> 
 <input type="submit" class="btn-success" style="border-radius:5px; width: 120px;" value="提交" /> 
 <input type="button" class="btn-info" style="border-radius:5px; width: 120px;" value="取消" /> 
 </p> 
 
 
 </form> 
 </p> 
 <script src="js/jquery.min.js"></script> 
 <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

Copy after login

Rendering:

Create example code using Bootstrap forms

Detailed explanation of Bootstrap’s pure CSS3 arrow button style

jQuery realizes infinite regional linkage based on BootStrap style

Detailed explanation Bootstrap implements beautiful and concise CSS3 price list example source code

The above is the detailed content of Create example code using Bootstrap forms. For more information, please follow other related articles on the PHP Chinese website!