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

学习ExtJS form布局

Oct 08 Javascript

一个挺有意思的Javascript小问题说明

Sep 26 Javascript

Jquery+asp.net后台数据传到前台js进行解析的方法

May 11 Javascript

很不错的两款Bootstrap Icon图标选择组件

Jan 28 Javascript

JavaScript实现搜索框的自动完成功能(一)

Feb 25 Javascript

Bootstrap CSS组件之大屏幕展播

Dec 17 Javascript

BootStrapValidator校验方式

Dec 19 Javascript

js中数组的常用方法小结

Dec 30 Javascript

JS触摸与手势事件详解

May 09 Javascript

jquery获取链接地址和跳转详解（推荐）

Aug 15 jQuery

vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法

Sep 19 Javascript

JS/jQuery实现超简单的Table表格添加,删除行功能示例

Jul 31 jQuery

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网站备份程序代码分享

2011/06/10 PHP

PHP浮点数的一个常见问题

2016/03/10 PHP

PHP正则之正向预查与反向预查讲解与实例

2020/04/06 PHP

php让json_encode不自动转义斜杠“/”的方法

2020/04/27 PHP

传智播客学习之JavaScript基础篇

2009/11/13 Javascript

jQuery 表格插件整理

2010/04/27 Javascript

Script的加载方法小结

2011/01/12 Javascript

event对象获取方法总结在google浏览器下测试

2013/11/03 Javascript

Jquery使用Firefox FireBug插件调试Ajax步骤讲解

2013/12/02 Javascript

jQuery读取XML文件内容的方法

2015/03/09 Javascript

JavaScript阻止回车提交表单的方法

2015/12/30 Javascript

jQuery与Ajax以及序列化

2016/02/01 Javascript

js利用clipboardData实现截屏粘贴功能

2016/10/12 Javascript

jQuery插件扩展实例【添加回调函数】

2016/11/26 Javascript

JavaScript时间戳与时间日期间相互转换

2017/12/11 Javascript

vue之浏览器存储方法封装实例

2018/03/15 Javascript

微信小程序按钮去除边框线分享页面功能

2018/08/27 Javascript

详解微信小程序网络请求接口封装实例

2019/05/02 Javascript

Vue的路由及路由钩子函数的实现

2019/07/02 Javascript

JavaScript进阶（一）变量声明提升实例分析

2020/05/09 Javascript

详解JSON.stringify()的5个秘密特性

2020/05/26 Javascript

[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19

2018/08/21 DOTA

Python数据结构与算法之完全树与最小堆实例

2017/12/13 Python

详解Python中如何写控制台进度条的整理

2018/03/07 Python

Python 统计字数的思路详解

2018/05/08 Python

Python RabbitMQ消息队列实现rpc

2018/05/30 Python

Django上使用数据可视化利器Bokeh解析

2019/07/31 Python

python爬虫猫眼电影和电影天堂数据csv和mysql存储过程解析

2019/09/05 Python

HTML5 FormData 方法介绍以及实现文件上传示例

2017/09/12 HTML / CSS

html5使用canvas实现跟随光标跳动的火焰效果

2014/01/07 HTML / CSS

意外伤害赔偿协议书

2014/09/16 职场文书

夫妻分居协议书范本（有子女版）

2014/11/01 职场文书

2014年六五普法工作总结

2014/11/25 职场文书

2015年保险业务员工作总结

2015/05/27 职场文书

关于国庆节的广播稿

2015/08/19 职场文书

MySQL聚簇索引和非聚簇索引的区别详情

2022/06/14 MySQL