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

jQuery 美元符冲突的解决方法

Mar 28 Javascript

js各种验证文本框输入格式(正则表达式)

Oct 22 Javascript

js中判断用户输入的值是否为空的简单实例

Dec 23 Javascript

JS中的二叉树遍历详解

Mar 18 Javascript

JavaScript随机打乱数组顺序之随机洗牌算法

Aug 02 Javascript

利用node.js本地搭建HTTP服务器

Apr 19 Javascript

jquery中封装函数传递当前元素的方法示例

May 05 jQuery

vue中页面跳转拦截器的实现方法

Aug 23 Javascript

vue如何通过id从列表页跳转到对应的详情页

May 01 Javascript

Web安全之XSS攻击与防御小结

Dec 13 Javascript

重学 JS：为啥 await 不能用在 forEach 中详解

Apr 15 Javascript

vue实现表单录入小案例

Sep 27 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

深入了解php4(1)--回到未来

2006/10/09 PHP

php array_slice函数的使用以及参数详解

2008/08/30 PHP

PHP基于递归实现的约瑟夫环算法示例

2017/08/27 PHP

php+js实现裁剪任意形状图片

2018/10/31 PHP

PHP+mysql防止SQL注入的方法小结

2019/04/27 PHP

获取服务器传来的数据用JS去空格的正则表达式

2012/03/26 Javascript

js下拉框二级关联菜单效果代码具体实现

2013/08/03 Javascript

js切换光标示例代码

2013/10/10 Javascript

原生js操作checkbox用document.getElementById实现

2013/10/12 Javascript

jquery下div 的resize事件示例代码

2014/03/09 Javascript

JavaScript使用Replace进行字符串替换的方法

2015/04/14 Javascript

浅谈下拉菜单中的Option对象

2015/05/10 Javascript

JavaScript实现的微信二维码图片生成器的示例

2016/10/26 Javascript

Bootstrap 过渡效果Transition 模态框（Modal）

2017/03/17 Javascript

使用canvas及js简单生成验证码方法

2017/04/02 Javascript

简单实现JS上传图片预览功能

2017/04/14 Javascript

基于Vue框架vux组件库实现上拉刷新功能

2017/11/28 Javascript

vue2 前端搜索实现示例

2018/02/26 Javascript

javascript标准库(js的标准内置对象)总结

2018/05/26 Javascript

Vue Cli 3项目使用融云IM实现聊天功能的方法

2019/04/19 Javascript

如何通过JS实现日历简单算法

2020/10/14 Javascript

Ant design vue table 单击行选中勾选checkbox教程

2020/10/24 Javascript

一些常用的Python爬虫技巧汇总

2016/09/28 Python

python使用循环打印所有三位数水仙花数的实例

2018/11/13 Python

html5关于外链嵌入页面通信问题(postMessage解决跨域通信)

2020/07/20 HTML / CSS

车辆维修工自我评价怎么写

2013/09/20 职场文书

自我鉴定书范文

2013/10/02 职场文书

农村党支部先进事迹

2014/01/14 职场文书

小学阳光体育活动总结

2014/07/05 职场文书

员工三分钟演讲稿

2014/08/19 职场文书

委托书范本

2014/09/13 职场文书

2014年机关工会工作总结

2014/12/19 职场文书

医生辞职信范文

2015/03/02 职场文书

2015年重阳节主持词

2015/07/04 职场文书

python 中的@运算符使用

2021/05/26 Python

MySQL 服务和数据库管理

2021/11/11 MySQL