编程 Javascript

Bootstrap表单控件使用方法详解

Posted in Javascript onJanuary 11, 2017

表单作为Bootstrap的核心内容，主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。

Bootstrap表单控件使用方法详解

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">

 <!-- 使用最新的浏览器内核解析 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- 移动设备优先 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

 <!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <scri></script>
 <![<endifdiv class="form-group"></endifdiv>]-->
 </head>
 <body>
 <div class="container">
 <!-- 
  表单的栅格系统使用 form-horizontal
  div的栅格系统使用 row
 -->
 <form class="form-horizontal">
 <div class="form-group">
  <label class="col-md-2 control-label" for="username">用户名：</label>

  <div class="col-md-10">
  <input id="username" class="form-control" type="text" name="username" value="" placeholder="请输入用户名"></input>
  </div>
 </div>
 <div class="form-group">
  <label class="col-md-2 control-label" for="password">密 码：</label>
  <div class="col-md-10">
  <input id="password" class="form-control" type="password" name="password" value="" placeholder="请输入用密码"></input>
  </div>
 </div>

 <div class="form-group">
  <label class="col-md-2 control-label" for="file">上传文件：</label>
  <div class="col-md-10">
  <input id="file" type="file" name="file" value=""></input>
  </div>
 </div>

 <div class="form-group">
  <label class="col-md-2 control-label" >爱好：</label>
  <div class="col-md-10">
  <div class="checkbox">
  <label class="checkbox-inline">
   <input type="checkbox">画画</input>
  </label>

  <label class="checkbox-inline">
   <input type="checkbox">音乐</input>
  </label>

  <label class="checkbox-inline">
   <input type="checkbox">体育</input>
  </label>
  </div> 
  </div> 
 </div>

  <div class="form-group">
  <label class="col-md-2 control-label">学历：</label>
  <div class="col-md-10">
  <div class="radio">
  <label class="radio-inline">
   <input name="raido" type="radio">中学</input>
  </label>

  <label class="radio-inline">
   <input name="raido" type="radio">大专</input>
  </label>

  <label class="radio-inline">
   <input name="raido" type="radio">研究生</input>
  </label>
  </div>  
  </div>
 </div>

 <div class="form-group">
  <label class="col-md-2 control-label">个人简历</label>
  <div class="col-md-10">
  <textarea class="form-control" name="person" rows="5" placeholder="请输入">


  </textarea>
  </div>
 </div>

 <div class="col-md-10 col-md-offset-2">
 <button type="button" class="btn btn-success">提交表单</button>
 </div>
 </form>


 </div>


 <!-- jQuery first, then Bootstrap JS. -->
 <script src="bootstrap/js/jquery.min.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>
</html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap表单控件使用方法详解

- Author -

小鱼儿_zhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery Easyui Tree的oncheck事件实现代码

May 28 Javascript

JS限制文本框只能输入数字和字母方法

Feb 28 Javascript

jQuery实现页面滚动时动态加载内容的方法

Mar 20 Javascript

MVVM模式中ViewModel和View、Model有什么区别？

Jun 19 Javascript

动态创建按钮的JavaScript代码

Jan 29 Javascript

jquery实现的回旋滚动效果完整实例【附demo源码下载】

Sep 20 Javascript

DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）

Nov 09 Javascript

JS获取url参数,JS发送json格式的POST请求方法

Mar 29 Javascript

jQuery实现购物车的总价计算和总价传值功能

Nov 28 jQuery

15 分钟掌握vue-next响应式原理

Oct 13 Javascript

vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】

Mar 06 Javascript

jQuery使用ajax传递json对象到服务端及contentType的用法示例

Mar 12 jQuery

老生常谈的跨域处理

Jan 11 #Javascript

bootstrap选项卡使用方法解析

Jan 11 #Javascript

常用的javascript设计模式

Jan 11 #Javascript

WebView启动支付宝客户端支付失败的问题小结

Jan 11 #Javascript

Bootstrap实现提示框和弹出框效果

Jan 11 #Javascript

分享bootstrap学习笔记心得(组件及其属性)

Jan 11 #Javascript

jQuery实现CheckBox全选、全不选功能

Jan 11 #Javascript

You might like

php缓存技术详细总结

2013/08/07 PHP

简单谈谈php中ob_flush和flush的区别

2014/11/27 PHP

PHP MYSQL实现登陆和模糊查询两大功能

2016/02/05 PHP

浅谈PHP中其他类型转化为Bool类型

2016/03/28 PHP

十分钟打造AutoComplete自动完成效果代码

2009/12/26 Javascript

NodeJs中的非阻塞方法介绍

2012/06/05 NodeJs

js常用自定义公共函数汇总

2014/01/15 Javascript

深入剖析javascript中的exec与match方法

2016/05/18 Javascript

微信小程序 wxapp画布 canvas详细介绍

2016/10/31 Javascript

Vue.js实现移动端短信验证码功能

2017/03/29 Javascript

Node使用Sequlize连接Mysql报错：Access denied for user ‘xxx’@‘localhost’

2018/01/03 Javascript

基于vue和react的spa进行按需加载的实现方法

2018/09/29 Javascript

详解Python在七牛云平台的应用（一）

2017/12/05 Python

在Windows中设置Python环境变量的实例讲解

2018/04/28 Python

python得到windows自启动列表的方法

2018/10/14 Python

Python GUI编程文本弹窗的实例

2019/06/11 Python

详解程序意外中断自动重启shell脚本（以Python为例）

2019/07/26 Python

Python学习笔记之lambda表达式用法详解

2019/08/08 Python

Python实现快速排序的方法详解

2019/10/25 Python

Python实现随机取一个矩阵数组的某几行

2019/11/26 Python

python3实现从kafka获取数据,并解析为json格式,写入到mysql中

2019/12/23 Python

torch 中各种图像格式转换的实现方法

2019/12/26 Python

Python Numpy,mask图像的生成详解

2020/02/19 Python

Django ForeignKey与数据库的FOREIGN KEY约束详解

2020/05/20 Python

详解CSS3伸缩布局盒模型Flex布局

2018/08/20 HTML / CSS

欧姆龙医疗保健与医疗产品：Omron Healthcare

2020/02/10 全球购物

生产部管理制度

2014/01/31 职场文书

消防先进事迹材料

2014/02/10 职场文书

公益广告宣传方案

2014/02/28 职场文书

大学生创业计划书怎么写

2014/09/15 职场文书

大学生实习证明范文（5篇）

2014/09/18 职场文书

海南召开党的群众路线教育实践活动总结大会新闻稿

2014/10/21 职场文书

2015公司年度工作总结

2015/05/14 职场文书

2017大学生寒假社会实践心得体会

2016/01/14 职场文书

MySQL中连接查询和子查询的问题

2021/09/04 MySQL

python双向链表实例详解

2022/05/25 Python