cari

Rumah >hujung hadapan web >tutorial js >使用Bootstrap表单制作实例代码

使用Bootstrap表单制作实例代码

高洛峰
高洛峰asal
2017-03-22 15:14:512048semak imbas

这篇文章主要为大家详细介绍了BootStrap表单的制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Bootstrap表单布局的具体代码，供大家参考，具体内容如下

Bootstrap 提供了下列类型的表单布局：

垂直表单（默认）
内联表单
水平表单

小妞妞做的表单实例：

<!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>

效果图：

使用Bootstrap表单制作实例代码

相关文章：

详解Bootstrap的纯CSS3箭头按钮样式

jQuery基于BootStrap样式实现无限极地区联动

详解Bootstrap实现漂亮简洁的CSS3价格表实例源码

Atas ialah kandungan terperinci 使用Bootstrap表单制作实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js判断是否是手机页面的方法介绍Artikel seterusnya：使用Bootstrap过渡效果Transition模态框（Modal）的方法

Artikel berkaitan

Lihat lagi