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

JavaScript中yield实用简洁实现方式

Jun 12 Javascript

js获取下拉列表框中的value和text的值示例代码

Jan 11 Javascript

JavaScript实现点击单选按钮改变输入框中文本域内容的方法

Aug 12 Javascript

javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

Jan 08 Javascript

AngularJS模块学习之Anchor Scroll

Jan 19 Javascript

浅析JavaScript Array和string的转换(推荐)

May 20 Javascript

深入理解JavaScript中的call、apply、bind方法的区别

May 30 Javascript

JavaScript制作简单分页插件

Sep 11 Javascript

详解Javascript 中的 class、构造函数、工厂函数

Dec 20 Javascript

vue.js图片转Base64上传图片并预览的实现方法

Aug 02 Javascript

js canvas实现红包照片效果

Aug 21 Javascript

JS监听组合按键思路及实现过程

Apr 17 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

Zerg剧情介绍

2020/03/14 星际争霸

PHP连接SQLServer2005 的问题解决方法

2010/07/19 PHP

PHP和Mysqlweb应用开发核心技术第1部分 Php基础－3 代码组织和重用2

2011/07/03 PHP

PHP实现今天是星期几的几种写法

2013/09/26 PHP

php生成html文件方法总结

2014/12/01 PHP

php删除文本文件中重复行的方法

2015/04/28 PHP

Laravel如何创建服务器提供者实例代码

2019/04/15 PHP

javascript String 对象

2008/04/25 Javascript

JavaScript 嵌套函数指向this对象错误的解决方法

2010/03/15 Javascript

Jquery为单选框checkbox绑定单击click事件

2012/12/18 Javascript

node.js中的events.emitter.once方法使用说明

2014/12/10 Javascript

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

2014/12/17 Javascript

js时间戳转为日期格式的方法

2015/12/28 Javascript

基于jquery实现智能提示控件intellSeach.js

2016/03/17 Javascript

JavaScript位移运算符(无符号) >>> 三个大于号的使用方法详解

2016/03/31 Javascript

基于jQuery实现淡入淡出效果轮播图

2020/07/31 Javascript

nodejs服务搭建教程 nodejs访问本地站点文件

2017/04/07 NodeJs

nodejs密码加密中生成随机数的实例代码

2017/07/17 NodeJs

Bootstrap + AngularJS 实现简单的数据过滤字符查找功能

2017/07/27 Javascript

js图片上传的封装代码

2017/08/01 Javascript

微信小程序 Animation实现图片旋转动画示例

2018/08/22 Javascript

nodejs require js文件入口,在package.json中指定默认入口main方法

2018/10/10 NodeJs

[00:32]2018DOTA2亚洲邀请赛iG出场

2018/04/03 DOTA

使用Pyrex来扩展和加速Python程序的教程

2015/04/13 Python

python3利用Dlib19.7实现人脸68个特征点标定

2018/02/26 Python

pandas 快速处理 date_time 日期格式方法

2018/11/12 Python

几个适合python初学者的简单小程序，看完受益匪浅！(推荐)

2019/04/16 Python

selenium+PhantomJS爬取豆瓣读书

2019/08/26 Python

Django-migrate报错问题解决方案

2020/04/21 Python

TensorFlow保存TensorBoard图像操作

2020/06/23 Python

常用UNIX 命令(Linux的常用命令)

2013/07/10 面试题

参观监狱心得体会

2014/01/02 职场文书

开学典礼感言

2014/02/16 职场文书

论文评语大全

2014/04/29 职场文书

2016年小学中秋节活动总结

2016/04/05 职场文书

vue实现可以快进后退的跑马灯组件

2022/04/08 Vue.js