首页
所有分类
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面向对象编程(一) 实例代码
Jun 25 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 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
AM(1) 手调机(1) 实习报告(1) 频偏(1) 数调机(1) 鉴频器(1) 高放电路(1) 灵敏度(1) 频率(1) 发烧友(1)
You might like
Mysql的常用命令
2006/10/09 PHP
php生成xml简单实例代码
2009/12/16 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
php 可变函数使用小结
2018/06/12 PHP
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Python实现FTP上传文件或文件夹实例（递归）
2017/01/16 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
Python日志器使用方法及原理解析
2020/09/27 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
什么是.net的Remoting技术
2016/07/08 面试题
会计实习生自我鉴定
2013/12/12 职场文书
奠基仪式策划方案
2014/05/15 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
上党课的心得体会
2014/09/02 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
2015年人事科工作总结
2015/04/28 职场文书
导游词之长城八达岭
2019/09/24 职场文书