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

利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

Mar 24 Javascript

js获取指定日期前后的日期代码

Aug 20 Javascript

js操纵dom生成下拉列表框的方法

Feb 24 Javascript

js检测判断日期大于多少天的方法

May 04 Javascript

jQuery实现的自定义弹出层效果实例详解

Sep 04 Javascript

微信小程序 window_x64环境搭建

Sep 30 Javascript

Vue 短信验证码组件开发详解

Feb 14 Javascript

利用node.js搭建简单web服务器的方法教程

Feb 20 Javascript

详谈js原型继承的一些问题

Sep 06 Javascript

vue 使用Jade模板写html,stylus写css的方法

Feb 23 Javascript

js通过canvas生成图片缩略图

Oct 02 Javascript

JavaScript实现点击出现子菜单效果

Feb 08 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使用GD库输出汉字的方法【测试可用】

2016/11/10 PHP

php对接java现实加签验签的实例

2016/11/25 PHP

Laravel 5.1 框架Blade模板引擎用法实例分析

2020/01/04 PHP

javascript 二维数组的实现与应用

2010/03/16 Javascript

javascript getElementsByClassName实现代码

2010/10/11 Javascript

jquery实现div阴影效果示例代码

2013/09/16 Javascript

js关于字符长度限制的问题示例探讨

2014/01/24 Javascript

node.js中的fs.closeSync方法使用说明

2014/12/17 Javascript

JavaScript中的变量定义与储存介绍

2014/12/31 Javascript

jquery实现在光标位置插入内容的方法

2015/02/05 Javascript

Javascript中prototype属性实现给内置对象添加新的方法

2015/05/14 Javascript

纯JS实现可拖拽表单的简单实例

2016/09/02 Javascript

JavaScript的for循环中嵌套一个点击事件的问题解决

2017/03/03 Javascript

JS监控关闭浏览器操作的实例详解

2017/09/12 Javascript

JavaScript数据结构之单链表和循环链表

2017/11/28 Javascript

详解VUE-地区选择器(V-Distpicker)组件使用心得

2018/05/07 Javascript

vue3.0 CLI - 2.1 - component 组件入门教程

2018/09/14 Javascript

详解vue中使用微信jssdk

2019/04/19 Javascript

WebStorm无法正确识别Vue3组合式API的解决方案

2021/02/18 Vue.js

Python远程桌面协议RDPY安装使用介绍

2015/04/15 Python

Python统计日志中每个IP出现次数的方法

2015/07/06 Python

Python实现导出数据生成excel报表的方法示例

2017/07/12 Python

Python中的defaultdict与__missing__()使用介绍

2018/02/03 Python

python字典快速保存于读取的方法

2018/03/23 Python

python在html中插入简单的代码并加上时间戳的方法

2018/10/16 Python

使用selenium和pyquery爬取京东商品列表过程解析

2019/08/15 Python

python+django+rest框架配置创建方法

2019/08/31 Python

Flask框架 CSRF 保护实现方法详解

2019/10/30 Python

在Django中实现添加user到group并查看

2019/11/18 Python

澳大利亚牛仔裤商店：Just Jeans

2016/10/13 全球购物

搞笑获奖感言

2014/01/30 职场文书

人力资源部门的主要职能

2014/02/22 职场文书

公司委托书格式

2014/08/01 职场文书

我与祖国共奋进演讲稿

2014/09/13 职场文书

2014年健康教育工作总结

2014/11/20 职场文书

python迷宫问题深度优先遍历实例

2021/06/20 Python