编程 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重建星际争霸

Dec 22 Javascript

JavaScript 事件的一些重要说明

Oct 25 Javascript

纯js实现瀑布流展现照片(自动适应窗口大小)

Apr 08 Javascript

Json序列化和反序列化方法解析

Dec 19 Javascript

jQuery ajax调用WCF服务实例

Jul 16 Javascript

Vue.js 2.0 移动端拍照压缩图片上传预览功能

Mar 06 Javascript

JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】

Apr 19 Javascript

JS+WCF实现进度条实时监测数据加载量的方法详解

Dec 19 Javascript

vue中动态绑定表单元素的属性方法

Feb 23 Javascript

webpack 3.X学习之多页面打包的方法

Sep 04 Javascript

Element-UI中Upload上传文件前端缓存处理示例

Feb 21 Javascript

Vue vm.$attrs使用场景详解

Mar 08 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

Linux下进行MYSQL编程时插入中文乱码的解决方案

2007/03/15 PHP

PHP XML操作的各种方法解析(比较详细)

2010/06/17 PHP

PHP实现模拟http请求的方法分析

2017/12/20 PHP

js关闭子窗体刷新父窗体实现方法

2012/12/04 Javascript

cookie 最近浏览记录(中文escape转码)具体实现

2013/06/08 Javascript

jQuery照片伸缩效果不影响其他元素的布局

2014/05/09 Javascript

JS实现图片产生波纹一样flash效果的方法

2015/02/27 Javascript

javasript实现密码的隐藏与显示

2015/05/08 Javascript

JS实现获取当前URL和来源URL的方法

2016/08/24 Javascript

微信小程序石头剪刀布实例代码

2017/01/04 Javascript

Ionic 2 实现列表滑动删除按钮的方法

2017/01/22 Javascript

基于rem的移动端响应式适配方案(详解)

2017/07/07 Javascript

js实现动态改变radio状态的方法

2018/02/28 Javascript

详解node.js 下载图片的 2 种方式

2018/03/02 Javascript

Vue中使用Sortable的示例代码

2018/04/07 Javascript

详解JavaScript中关于this指向的4种情况

2019/04/18 Javascript

[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦

2016/06/28 DOTA

python获取本机外网ip的方法

2015/04/15 Python

Python在线运行代码助手

2016/07/15 Python

python微信跳一跳系列之色块轮廓定位棋盘

2018/02/26 Python

Selenium定位元素操作示例

2018/08/10 Python

Python中new方法的详解

2019/01/15 Python

40个你可能不知道的Python技巧附代码

2020/01/29 Python

Python转换itertools.chain对象为数组的方法

2020/02/07 Python

anaconda3安装及jupyter环境配置全教程

2020/08/24 Python

Python非单向递归函数如何返回全部结果

2020/12/18 Python

深入CSS3 动画效果的总结详解

2013/05/09 HTML / CSS

HTML5 新事件小结

2009/07/16 HTML / CSS

详解html5页面 rem 布局适配方法

2018/01/12 HTML / CSS

英国电子产品购物网站：TobyDeals

2018/07/30 全球购物

介绍一下linux文件系统分配策略

2012/11/17 面试题

市场营销管理毕业生自荐信

2014/03/03 职场文书

灰雀教学反思

2014/04/28 职场文书

2014年城管工作总结

2014/11/20 职场文书

Spring IOC容器Bean的作用域及生命周期实例

2022/05/30 Java/Android

centos环境下nginx高可用集群的搭建指南

2022/07/23 Servers