编程 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 相关文章推荐

动态修改DOM 里面的 id 属性的弊端分析

Sep 03 Javascript

利用了jquery的ajax实现二级联互动菜单

Dec 02 Javascript

javaScript中Math()函数注意事项

Jun 18 Javascript

jquery实现一个简单的表单验证实例

Mar 30 Javascript

JavaScript事件处理的方式(三种)

Apr 26 Javascript

jquery根据td给相同tr下其他td赋值的实现方法

Oct 05 Javascript

node.js调用Chrome浏览器打开链接地址的方法

May 17 Javascript

使用D3.js创建物流地图的示例代码

Jan 27 Javascript

微信小程序实现导航栏选项卡效果

Jun 19 Javascript

jQuery-ui插件sortable实现自由拖动排序

Dec 01 jQuery

JS Ajax请求会话过期处理问题解决方法分析

Nov 16 Javascript

Js参数RSA加密传输之jsencrypt.js的使用

Feb 07 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

You might like

全国FM电台频率大全 - 21 海南省

2020/03/11 无线电

php广告加载类用法实例

2014/09/23 PHP

PHP类的封装与继承详解

2015/09/29 PHP

Yii2中使用join、joinwith多表关联查询

2016/06/30 PHP

PHP数组编码gbk与utf8互相转换的两种方法

2016/09/01 PHP

thinkPHP5.0框架应用请求生命周期分析

2017/03/25 PHP

用脚本调用样式的几种方法

2006/12/09 Javascript

javascript下有关dom以及xml节点访问兼容问题

2007/11/26 Javascript

jQuery数据显示插件整合实现代码

2011/10/24 Javascript

关于编写性能高效的javascript事件的技术

2014/11/28 Javascript

jQuery过滤选择器详解

2015/01/13 Javascript

jQuery使用之标记元素属性用法实例

2015/01/19 Javascript

jquery实现用户打分评分特效

2015/05/28 Javascript

ECMA5数组的新增方法有哪些及forEach（）模仿实现

2015/11/03 Javascript

BootStrap中Datetimepicker和uploadify插件应用实例小结

2016/05/26 Javascript

关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用详解

2017/05/12 Javascript

Vue集成Iframe页面的方法示例

2017/12/12 Javascript

使用Vue.js和Element-UI做一个简单登录页面的实例

2018/02/23 Javascript

jQuery实现的分页插件完整示例

2020/05/26 jQuery

[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic

2018/04/02 DOTA

Python HTMLParser模块解析html获取url实例

2015/04/08 Python

Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例

2017/11/23 Python

详解Python3.6安装psutil模块和功能简介

2018/05/30 Python

Mac 使用python3的matplot画图不显示的解决

2019/11/23 Python

python opencv 实现对图像边缘扩充

2020/01/19 Python

pytorch加载自己的图像数据集实例

2020/07/07 Python

Python的logging模块基本用法

2020/12/24 Python

GUESS西班牙官方网上商城：美国服饰品牌

2017/03/15 全球购物

英国网上自行车商店：Tredz Bikes

2019/10/29 全球购物

计划生育宣传标语

2014/06/21 职场文书

工伤事故赔偿协议书（标准）

2014/09/29 职场文书

2015年度班主任自我评价

2015/03/11 职场文书

教师创先争优承诺书

2015/04/27 职场文书

基于Redis实现分布式锁的方法（lua脚本版）

2021/05/12 Redis

总结Python使用过程中的bug

2021/06/18 Python

Windows server 2012 配置Telnet以及用法详解

2022/04/28 Servers