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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
Javascript模块化编程详解
Dec 01 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
前端必学之PHP语法基础
2016/01/01 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
vue使用stompjs实现mqtt消息推送通知
2017/06/22 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
python实现画一颗树和一片森林
2018/06/25 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
Django choices下拉列表绑定实例
2020/03/13 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
告诉你怎样写创业计划书
2014/01/27 职场文书
高一军训决心书
2015/02/05 职场文书
预备党员自我评价范文
2015/03/04 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
MySQL数据库查询之多表查询总结
2022/08/05 MySQL