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

php is_numberic函数造成的SQL注入漏洞

Mar 10 Javascript

jquery mobile的触控点击事件会多次触发问题的解决方法

May 08 Javascript

jQuery产品间断向下滚动效果核心代码

May 08 Javascript

js 左右悬浮对联广告代码示例

Dec 12 Javascript

谈一谈JS消息机制和事件机制的理解

Apr 14 Javascript

Javascript中字符串replace方法的第二个参数探究

Dec 05 Javascript

bootstrap modal弹出框的垂直居中

Dec 14 Javascript

AngularJS Toaster使用详解

Feb 24 Javascript

30分钟快速入门掌握ES6/ES2015的核心内容（上）

Apr 18 Javascript

对angularJs中ng-style动态改变样式的实例讲解

Sep 30 Javascript

详解在Angular4中使用ng2-baidu-map的方法

Jun 19 Javascript

Vue学习之axios的使用方法实例分析

Jan 06 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抓屏函数实现屏幕快照代码分享

2014/01/02 PHP

php通过隐藏表单控件获取到前两个页面的url

2014/09/09 PHP

php数组函数array_key_exists()小结

2015/12/10 PHP

PHP使用内置函数生成图片的方法详解

2016/05/09 PHP

JQuery循环滚动图片代码

2011/12/08 Javascript

JQuery切换显示的效果实例代码

2013/02/27 Javascript

关于jquery input textare 事件绑定及用法学习

2013/04/03 Javascript

jquery制作居中遮罩层效果分享

2014/02/21 Javascript

jquery实现html页面 div 假分页有原理有代码

2014/09/06 Javascript

JavaScript中的console.trace()函数介绍

2014/12/29 Javascript

JS实现很酷的EMAIL地址添加功能实例

2015/02/28 Javascript

举例详解JavaScript中Promise的使用

2015/06/24 Javascript

jQuery实现类似老虎机滚动抽奖效果

2015/08/06 Javascript

JavaScript实现设计模式中的单例模式的一些技巧总结

2016/05/17 Javascript

Bootstrap学习笔记之css组件(3)

2016/06/07 Javascript

把多个JavaScript函数绑定到onload事件处理函数上的方法

2016/09/04 Javascript

Vue制作Todo List网页

2017/04/26 Javascript

使用Browserify来实现CommonJS的浏览器加载方法

2017/05/14 Javascript

绘制微信小程序验证码功能的实例代码

2021/01/05 Javascript

[03:24]2014DOTA2国际邀请赛神秘商店生意火爆

2014/07/18 DOTA

[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23

2018/08/24 DOTA

Python使用Turtle模块绘制五星红旗代码示例

2017/12/11 Python

python中的colorlog库使用详解

2019/07/05 Python

django数据模型中null和blank的区别说明

2020/09/02 Python

国际象棋商店：The Chess Store

2018/07/09 全球购物

英国现代市场：ARKET

2019/04/10 全球购物

法拉利英国精品店：Ferraris Boutique UK

2019/07/20 全球购物

广州喜创信息技术有限公司JAVA软件工程师笔试题

2012/10/17 面试题

个人简历自我评价

2014/02/02 职场文书

运动会稿件200字

2014/02/07 职场文书

《曹刿论战》教学反思

2014/03/02 职场文书

人力资源部经理助理岗位职责

2014/03/04 职场文书

会计求职自荐信

2014/06/20 职场文书

申报材料格式

2014/12/30 职场文书

2015年护士节活动总结

2015/02/10 职场文书

vue项目两种方式实现竖向表格的思路分析

2021/04/28 Vue.js