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

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

Javascript 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
jQuery 联动日历实现代码
May 31 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
vue组件内部引入外部js文件的方法
Jan 18 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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
You might like
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
php中this关键字用法分析
2016/12/07 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
JavaScript中的类继承
2010/11/25 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
JavaScript多线程详解
2015/08/12 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
node版本管理工具n包使用教程详解
2018/11/09 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
JS实现轮播图效果
2020/01/11 Javascript
python实现字符串和字典的转换
2018/09/29 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python_mask_array的用法
2020/02/18 Python
python脚本和网页有何区别
2020/07/02 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
阿尔卡特(中国)的面试题目
2014/08/20 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
医学专业五年以上个人求职信
2013/12/03 职场文书
书香校园活动方案
2014/02/28 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
七年级语文教学反思
2016/03/03 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python