编程 Javascript

Bootstrap表单制作代码

Posted in Javascript onMarch 17, 2017

本文实例为大家分享了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: '楷体'; 
 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> 
<div class="container"> 
 <form class="form-horizontal" role="form" action="#" method="post"> 
 <div class="form-group"> 
 <label for="name" class="col-sm-2 control-label">名字</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="firstname" placeholder="请输入名字"> 
 </div> 
 </div> 
 <div class="form-group"> 
 <label for="class" class="col-sm-2 control-label">班级</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="lastname" placeholder="请输入班级"> 
 </div> 
 </div> 
 <div class="form-group"> 
 <label for="Student ID" class="col-sm-2 control-label">学号</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="Student ID" placeholder="请输入学号"> 
 </div> 
 </div> 
 <div class="form-group"> 
 <label for="kemu" class="col-sm-2 control-label">科目名称</label> 
 <div class="col-sm-10"> 
  <input type="text" class="form-control" id="kemu" placeholder="请输入科目名称"> 
 </div> 
 </div> 
 <div class="form-group"> 
 <label for="name2" class="col-sm-2 control-label">意见</label> 
 <div class="col-sm-10"> 
 <input type="text" class="form-control" rows="3"> 
 </div> 
 </div> 
 
 <div 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="取消" /> 
 </div> 
 
 
 </form> 
 </div> 
 <script src="js/jquery.min.js"></script> 
 <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

效果图：

Bootstrap表单制作代码

参考地址：http://www.w3cschool.cn/bootstrap/bootstrap-v2-forms.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap表单制作代码

- Author -

boonyaxnn

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery构造器的实现代码小结

May 16 Javascript

Yii-自定义删除确认弹框(zyd)jquery实现代码

Mar 04 Javascript

再谈JavaScript线程

Jul 10 Javascript

js中使用使用原型(prototype)定义方法的好处详解

Jul 04 Javascript

AngularJS定时器的使用与移除操作方法【interval与timeout】

Dec 14 Javascript

单击按钮发送验证码,出现倒计时的简单实例

Mar 17 Javascript

JavaScript中最常用的10种代码简写技巧总结

Jun 28 Javascript

浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件

Dec 07 Javascript

JS/jQuery实现超简单的Table表格添加,删除行功能示例

Jul 31 jQuery

Vue 防止短时间内连续点击后多次触发请求的操作

Nov 11 Javascript

vue 表单输入框不支持focus及blur事件的解决方案

Nov 17 Vue.js

k8s node节点重新加入master集群的实现

Feb 22 Javascript

Bootstrap 过渡效果Transition 模态框（Modal）

Mar 17 #Javascript

使用vue.js编写蓝色拼图小游戏

Mar 17 #Javascript

Vue.js实现一个漂亮、灵活、可复用的提示组件示例

Mar 17 #Javascript

javascript 动态生成css代码的两种方法

Mar 17 #Javascript

AngularJS中$http使用的简单介绍

Mar 17 #Javascript

单击按钮发送验证码,出现倒计时的简单实例

Mar 17 #Javascript

jQuery Ajax前后端使用JSON进行交互示例

Mar 17 #Javascript