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 相关文章推荐
json 定义
Jun 10 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
Node.js笔记之process模块解读
May 31 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
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 分页原理详解
2009/08/21 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
jquery获取input的value问题说明
2010/08/19 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
js实现计算器功能
2020/08/10 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
sublime python3 输入换行不结束的方法
2018/04/19 Python
python的turtle库使用详解
2019/05/10 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
django中间键重定向实例方法
2019/11/10 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
优秀大学生求职自荐信范文
2014/04/19 职场文书
安装工程师岗位职责
2015/02/13 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server