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

JS在TextArea光标位置插入文字并实现移动光标到文字末尾

Jun 21 Javascript

js中window.open()的所有参数详细解析

Jan 09 Javascript

简单js代码实现selece二级联动(推荐)

Feb 18 Javascript

JavaScript中实现最高效的数组乱序方法

Oct 11 Javascript

Angularjs 基础入门

Dec 26 Javascript

Jquery实现鼠标移动放大图片功能实例

Mar 25 Javascript

总结AngularJS开发者最常犯的十个错误

Aug 31 Javascript

JavaScript SHA-256加密算法详细代码

Oct 06 Javascript

JS冒泡事件与事件捕获实例详解

Nov 25 Javascript

JavaScript实现垂直滚动条效果

Jan 18 Javascript

微信小程序仿猫眼实现实例代码

Mar 14 Javascript

JS实现简单日历特效

Jan 03 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

JS的IE和Firefox兼容性集锦

2006/12/11 Javascript

索趣科技的答案

2007/02/07 Javascript

jQuery 页面 Mask实现代码

2010/01/09 Javascript

利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域

2013/12/14 Javascript

javascript中使用正则计算中文长度的例子

2014/04/29 Javascript

使用原生js实现页面蒙灰(mask)效果示例代码

2014/06/20 Javascript

JavaScript学习笔记之内置对象

2015/01/22 Javascript

JavaScript实现计算字符串中出现次数最多的字符和出现的次数

2015/03/12 Javascript

JS基于Ajax实现的网页Loading效果代码

2015/10/27 Javascript

JQuery解析XML数据的几个简单实例

2016/05/18 Javascript

浅谈js中字符和数组一些基本算法题

2016/08/15 Javascript

jQuery搜索框效果实现代码(百度关键词联想)

2021/02/25 Javascript

微信小程序地图（map）实例详解

2016/11/16 Javascript

自动适应iframe右边的高度

2016/12/22 Javascript

js弹性势能动画之抛物线运动实例详解

2017/07/27 Javascript

详细介绍RxJS在Angular中的应用

2017/09/23 Javascript

详解vue2.6插槽更新v-slot用法总结

2019/03/09 Javascript

Vue的click事件防抖和节流处理详解

2019/11/13 Javascript

JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】

2020/02/24 Javascript

Node.js fs模块原理及常见用途

2020/10/22 Javascript

vant-ui AddressEdit地址编辑和van-area的用法说明

2020/11/03 Javascript

微信小程序自定义底部弹出框功能

2020/11/18 Javascript

vue+elementUI动态增加表单项并添加验证的代码详解

2020/12/17 Vue.js

微信小程序自定义modal弹窗组件的方法详解

2020/12/20 Javascript

[10:07]2014DOTA2国际邀请赛实拍选手现场观战DK对阵Titan

2014/07/12 DOTA

调试Python程序代码的几种方法总结

2015/04/28 Python

python实现根据主机名字获得所有ip地址的方法

2015/06/28 Python

python多线程分块读取文件

2019/08/29 Python

如何关掉pycharm中的python console(图解)

2019/10/31 Python

微信小程序之html5 canvas绘图并保存到系统相册

2019/06/20 HTML / CSS

英国领先的家庭时尚品牌：Peacocks

2018/01/11 全球购物

地球上最先进的胡子和头发修剪器：Bevel

2018/01/23 全球购物

春风行动实施方案

2014/03/28 职场文书

学校四群教育实施方案

2014/06/12 职场文书

2019个人半年工作总结

2019/06/21 职场文书

开发者首先否认《遗弃》被取消的传言

2022/04/11 其他游戏