首页
所有分类
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字典探测用户名工具
Oct 05 Javascript
JS 非图片动态loading效果实现代码
Apr 09 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
vuex与组件联合使用的方法
May 10 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 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
单向链表(1) Date(1) 扫雷(1) Scheduled(1) 接口(1) 抽象类(1) 驱动模型(1) router(1) 路由(1) 乱码(3)
You might like
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
许愿墙中用到的函数
2006/10/07 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
Python中的with...as用法介绍
2015/05/28 Python
TensorFlow变量管理详解
2018/03/10 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python getpass实现密文实例详解
2019/09/24 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
pytorch SENet实现案例
2020/06/24 Python
Footshop法国：购买运动鞋
2020/01/19 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
职业生涯规划书范文
2014/03/10 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
mysql创建存储过程及函数详解
2021/12/04 MySQL
python处理json数据文件
2022/04/11 Python