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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
javascript实现倒计时关闭广告
Feb 09 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP的加密方式及原理
2012/06/14 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
PHP实现的策略模式示例
2019/03/20 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python实现购物程序思路及代码
2017/07/24 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
python 高阶函数简单介绍
2021/02/19 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
行政经理岗位职责
2013/11/09 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
出国签证在职证明
2014/09/20 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
放弃继承权公证书
2015/01/23 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js