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 相关文章推荐
重载toString实现JS HashMap分析
Mar 13 Javascript
防止文件缓存的js代码
Jan 10 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
React如何避免重渲染
Apr 10 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python基本语法练习实例
2017/09/19 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
快速查询Python文档方法分享
2017/12/27 Python
python微信公众号之关键词自动回复
2018/06/15 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python @property装饰器原理解析
2020/01/22 Python
使用Python实现牛顿法求极值
2020/02/10 Python
python实现程序重启和系统重启方式
2020/04/16 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
建筑工程管理专业自荐信范文
2013/12/28 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
爱护公共设施标语
2014/06/24 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
数据库连接池
2021/04/06 MySQL
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript