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 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
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
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
javascript连续赋值问题
2015/07/08 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
python实现在控制台输入密码不显示的方法
2015/07/02 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python构建网页爬虫原理分析
2017/12/19 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
python pygame实现方向键控制小球
2019/05/17 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
python 安装移动复制第三方库操作
2020/07/13 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
python 基于wx实现音乐播放
2020/11/24 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
行政人员工作职责
2013/12/05 职场文书
中英文求职信范文
2014/01/27 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
公司离职证明范本
2014/10/17 职场文书
2015年医院工作总结范文
2015/04/09 职场文书