编程 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 弹出层注册页面等(asp.net后台)

Jun 17 Javascript

artdialog的图片/标题以及关闭按钮不显示的解决方法

Jun 27 Javascript

用jQuery获取IE9下拉框默认值问题探讨

Jul 22 Javascript

在JavaScript应用中使用RequireJS来实现延迟加载

Jul 01 Javascript

javascript基本语法

May 31 Javascript

JS控制层作圆周运动的方法

Jun 20 Javascript

移动端界面的适配

Jan 11 Javascript

微信小程序 UI与容器组件总结

Feb 21 Javascript

微信小程序对接七牛云存储的方法

Jul 30 Javascript

浅谈vuepress 踩坑记

Apr 18 Javascript

vue-cli3 取消eslint校验代码的解决办法

Jan 16 Javascript

JS实现移动端可折叠导航菜单（现代都市风）

Jul 07 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 FPDF类库应用实现代码

2009/03/20 PHP

yii框架中的Url生产问题小结

2012/01/16 PHP

PHP 面向对象详解

2012/09/13 PHP

浅析php插件 HTMLPurifier HTML解析器

2013/07/01 PHP

php socket通信(tcp/udp)实例分析

2016/02/14 PHP

ThinkPHP5.1表单令牌Token失效问题的解决

2019/03/22 PHP

php设计模式之工厂方法模式分析【星际争霸游戏案例】

2020/01/23 PHP

PHP7 list() 函数修改

2021/03/09 PHP

将CKfinder整合进CKEditor3.0的新方法

2010/01/10 Javascript

用js实现输入提示(自动完成)的实例代码

2013/06/14 Javascript

学习使用jquery iScroll.js移动端滚动条插件

2020/03/24 Javascript

JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)

2016/12/14 Javascript

JavaScript实现时钟滴答声效果

2017/01/29 Javascript

ES6新特性八：async函数用法实例详解

2017/04/21 Javascript

xmlplus组件设计系列之分隔框（DividedBox)（8）

2017/05/02 Javascript

Node.js五大应用性能技巧小结（必须收藏）

2017/08/09 Javascript

微信小程序实现全国机场索引列表

2018/01/31 Javascript

Vue自定义指令实现checkbox全选功能的方法

2018/02/28 Javascript

基于vue中css预加载使用sass的配置方式详解

2018/03/13 Javascript

Js中将Long转换成日期格式的实现方法

2018/06/05 Javascript

深入解析ES6中的promise

2018/11/08 Javascript

JavaScript常见鼠标事件与用法分析

2019/01/03 Javascript

JavaScript基于遍历操作实现对象深拷贝功能示例

2019/03/05 Javascript

python实现在windows服务中新建进程的方法

2015/06/30 Python

TF-IDF算法解析与Python实现方法详解

2017/11/16 Python

python如何实现反向迭代

2018/03/20 Python

python自动打开浏览器下载zip并提取内容写入excel

2021/01/04 Python

浅析HTML5的WebSocket与服务器推送事件

2016/02/19 HTML / CSS

罗技美国官网：Logitech美国

2020/01/22 全球购物

英国在线定做百叶窗网站：Make My Blinds

2020/08/17 全球购物

自荐信的两点禁忌

2013/10/30 职场文书

青年文明号事迹材料

2014/01/18 职场文书

投资建议书模板

2014/05/12 职场文书

优秀求职信

2014/05/29 职场文书

法定代表人证明书

2014/11/28 职场文书

优秀大学生申请书

2019/06/24 职场文书