首页
所有分类
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 29 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
详解Js模板引擎（TrimPath）
Nov 22 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 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
Next.js(1) nginx(76) Mybatis-Plus(3) mounted(1) 子查询(1) TableField(1) 日志格式分析(1) 脚手架(2) el-table(1) create(1)
You might like
解析如何用php screw加密php源代码
2013/06/20 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP实现数组根据某个字段进行水平合并，横向合并案例分析
2019/10/08 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python编写一个闹钟功能
2017/07/11 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
《苏珊的帽子》教学反思
2014/04/07 职场文书
2014年安全生产责任书
2014/07/22 职场文书
2015年公务员工作总结
2015/04/24 职场文书
队列队形口号
2015/12/25 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Python 实现Mac 屏幕截图详解
2021/10/05 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技