编程 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与CSS复习（《精通javascript》）

Jun 29 Javascript

js动态加载以及确定加载完成的代码

Jul 31 Javascript

浅谈jquery回调函数callback的使用

Jan 30 Javascript

JavaScript中连接操作Oracle数据库实例

Apr 02 Javascript

jQuery animate easing使用方法图文详解

Jun 17 Javascript

Vue中如何实现轮播图的示例代码

Jul 27 Javascript

vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

Nov 28 Javascript

Vue开发之封装上传文件组件与用法示例

Apr 25 Javascript

JS利用prototype给类添加方法操作详解

Jun 21 Javascript

js实现简单的秒表

Jan 16 Javascript

vue2和vue3的v-if与v-for优先级对比学习

Oct 10 Javascript

js实现简单商品筛选功能

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

PHP中的正规表达式（二）

2006/10/09 PHP

php smarty 二级分类代码和模版循环例子

2011/06/01 PHP

简单的php数据库操作类代码(增,删,改,查)

2013/04/08 PHP

基于PHP服务端图片生成缩略图的方法详解

2013/06/20 PHP

PHP hex2bin()函数用法讲解

2019/02/25 PHP

javascript css在IE和Firefox中区别分析

2009/02/18 Javascript

Javascript继承机制的设计思想分享

2011/08/28 Javascript

怎样在JavaScript里写一个swing把数据插入数据库

2012/12/10 Javascript

JavaScript作用域链示例分享

2014/05/27 Javascript

判断字符串的长度(优化版)中文占两个字符

2014/10/30 Javascript

javascript 闭包详解

2015/07/02 Javascript

浅析Node.js的Stream模块中的Readable对象

2015/07/29 Javascript

jQuery表单验证简单示例

2016/10/17 Javascript

js仿QQ邮箱收件人选择与搜索功能

2017/02/10 Javascript

JS实现简单短信验证码界面

2017/08/07 Javascript

微信小程序模板（template）使用详解

2018/01/31 Javascript

看看“疫苗查询”小程序有温度的代码

2018/07/31 Javascript

VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

2018/11/30 Javascript

关于Vue源码vm.$watch()内部原理详解

2019/04/26 Javascript

在VUE中使用lodash的debounce和throttle操作

2020/11/09 Javascript

[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局

2016/03/03 DOTA

Python3基础之条件与循环控制实例解析

2014/08/13 Python

详解Python中的文本处理

2015/04/11 Python

python Django框架实现自定义表单提交

2016/03/25 Python

对Python字符串中的换行符和制表符介绍

2018/05/03 Python

Selenium定时刷新网页的实现代码

2018/10/31 Python

将pytorch转成longtensor的简单方法

2020/02/18 Python

使用IPython或Spyder将省略号表示的内容完整输出

2020/04/20 Python

如何基于python把文字图片写入word文档

2020/07/31 Python

印度在线内衣和时尚目的地：Zivame

2017/09/28 全球购物

绩效考核实施方案

2014/03/18 职场文书

2014年保洁员工作总结

2014/11/19 职场文书

现实表现证明材料

2015/06/19 职场文书

元宵节晚会主持词

2015/07/01 职场文书

2016教师校本培训心得体会

2016/01/08 职场文书

《浅水洼里的小鱼》教学反思

2016/02/16 职场文书