首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

bootstrap表单示例代码分享

Posted in Javascript onMay 18, 2017

本文实例为大家分享了bootstrap表单的具体代码，供大家参考，具体内容如下

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 <title>表单和图片</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" > 
 <link rel="stylesheet" href="css/main.css" rel="external nofollow" > 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body> 
 
<form> 
 <label>用户名：</label> 
 <input type="text" placeholder="请输入用户名"> 
 
 <label>密码：</label> 
 <input type="password" placeholder="请输入密码"> 
</form> 
<form> 
 <label>用户名：</label> 
 <input type="text" placeholder="请输入用户名" class="form-control"> 
 
 <label>密码：</label> 
 <input type="password" placeholder="请输入密码" class="form-control"> 
</form> 
<!--基本表单--> 
<form> 
 <div class="form-group"> 
  <label>用户名：</label> 
  <input type="text" placeholder="请输入用户名" class="form-control"> 
 </div> 
 
 <div class="form-group"> 
  <label>密码：</label> 
  <input type="password" placeholder="请输入密码" class="form-control"> 
 </div> 
</form> 
<!--内联表单--> 
<form class="form-inline"><!--当屏幕小于768时，变为两行--> 
 <div class="form-group"> 
  <label>用户名：</label> 
  <input type="text" placeholder="请输入用户名" class="form-control"> 
 </div> 
 
 <div class="form-group"> 
  <label>密码：</label> 
  <input type="password" placeholder="请输入密码" class="form-control"> 
 </div> 
</form> 
<!--加入input-group-addon--> 
<form class="form-inline"> 
 <div class="form-group"> 
  <label>用户名：</label> 
  <input type="text" placeholder="请输入用户名" class="form-control"> 
 </div> 
 
 <div class="form-group"> 
  <label>密码：</label> 
  <input type="password" placeholder="请输入密码" class="form-control"> 
 </div> 
 
 <div class="input-group"> 
  <div class="input-group-addon">￥</div> 
  <input type="number" placeholder="请输入整数" class="form-control"> 
  <div class="input-group-addon">元</div> 
 </div> 
</form> 
<!--水平表单--> 
<form class="form-horizontal"><!--当屏幕小于768时，变为两行--> 
 <div class="form-group"> 
  <div class="col-sm-2 control-label"> 
   <label>用户名：</label> 
  </div> 
  <div class="col-sm-10"> 
   <input type="text" placeholder="请输入用户名" class="form-control"> 
  </div> 
 </div> 
 
 <div class="form-group"> 
  <div class="col-sm-2 control-label"> 
   <label>密码：</label> 
  </div> 
  <div class="col-sm-10"> 
   <input type="password" placeholder="请输入密码" class="form-control"> 
  </div> 
 </div> 
</form> 
<!--文本域--> 
<form> 
 <textarea rows="3"></textarea> 
</form> 
<form> 
 <div class="form-group"> 
  <label>文本域</label> 
  <textarea rows="3" class="form-control"></textarea> 
 </div> 
</form> 
<!--复选框--> 
<form> 
 <input type="checkbox">体育 
 <input type="checkbox">音乐 
 
 <label> 
  <input type="checkbox">体育 
 </label> 
 <label> 
  <input type="checkbox">音乐 
 </label> 
<!--基本复选框和复选框设置禁用--> 
 <div class="checkbox"> 
  <label> 
   <input type="checkbox">体育 
  </label> 
 </div> 
 <div class="checkbox"> 
  <label> 
   <input type="checkbox">音乐 
  </label> 
 </div> 
 <div class="checkbox disabled"> 
  <label> 
   <input type="checkbox" disabled>爱好 
  </label> 
 </div> 
<!--内联复选框--><!--复选框用法和单选框一样的--> 
  <label class="checkbox-inline"> 
   <input type="checkbox">体育 
  </label> 
  <label class="checkbox-inline"> 
   <input type="checkbox">音乐 
  </label> 
  <label class="checkbox-inline disabled"> 
   <input type="checkbox" disabled>爱好 
  </label> 
</form> 
<!--下拉框--> 
<form> 
 <select> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>4</option> 
 </select> 
 <select class="form-control"> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
  <option>4</option> 
 </select> 
</form> 
<!--校验状态--> 
<form> 
 <div class="form-group has-success has-feedback"> 
  <label class="control-label">用户名：</label> 
  <input type="text" placeholder="请输入用户名" class="form-control"> 
  <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
 </div> 
 <div class="form-group"> 
  <label>密码：</label> 
  <input type="password" placeholder="请输入密码" class="form-control"> 
 </div> 
</form> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
</body> 
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

bootstrap表单示例代码分享

- Author -

YY小苹果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
Javascript高级技巧分享
Feb 25 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
高性能JavaScript DOM编程（1）
Aug 11 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 #Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 #Javascript
微信小程序中input标签详解及简单实例
May 18 #Javascript
JavaScript运动框架 链式运动到完美运动（五）
May 18 #Javascript
JavaScript运动框架 多值运动（四）
May 18 #Javascript
微信小程序页面开发注意事项整理
May 18 #Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 #Javascript
logging(1) 加密(1) 相对路径(1) hmac(1) openpyxl(1) 解密(1) requests(1) 面向对象(3) Pickle(1) hashlib(1)
You might like
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
Vue.js项目实战之多语种网站的功能实现（租车）
2019/08/07 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python自动翻译实现方法
2016/05/28 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
Old Navy加拿大官网：美式休闲服饰品牌
2017/09/26 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
QA工程师岗位职责
2013/11/20 职场文书
正科级干部考察材料
2014/05/29 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
加薪通知
2015/04/25 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
工作会议简报
2015/07/20 职场文书
新教师教学工作总结
2015/08/14 职场文书
实习员工转正的评语汇总，以备不时之需
2019/12/17 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js