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

JS获取鼠标坐标的实例方法

Jul 18 Javascript

jQuery使用hide方法隐藏页面上指定元素的方法

Mar 30 Javascript

avalon js实现仿微博拖动图片排序

Aug 14 Javascript

利用transition实现文字上下抖动的效果

Jan 21 Javascript

javascript 中null和undefined区分和比较

Apr 19 Javascript

vue教程之toast弹框全局调用示例详解

Aug 24 Javascript

JavaScript 中Date对象的格式化代码方法汇总

Sep 06 Javascript

Angularjs按需查询实例代码

Oct 30 Javascript

解决option标签selected="selected"属性失效的问题

Nov 06 Javascript

node中IO以及定时器优先级详解

May 10 Javascript

jQuery删除/清空指定元素的所有子节点实例代码

Jul 04 jQuery

微信小程序webview与h5通过postMessage实现实时通讯的实现

Aug 20 Javascript

老生常谈的跨域处理

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 生成N个不重复的随机数

2015/01/21 PHP

Laravel学习教程之路由模块

2017/08/18 PHP

php将字符串转换为数组实例讲解

2020/05/05 PHP

一步一步教你写一个jQuery的插件教程(Plugin)

2009/09/03 Javascript

jquery全选/全不选/反选另一种实现方法(配合原生js)

2013/04/07 Javascript

jQuery截取指定长度字符串代码

2014/08/21 Javascript

JS实现转动随机数抽奖特效代码

2020/04/16 Javascript

Boostrap模态窗口的学习小结

2016/03/28 Javascript

用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)

2017/05/17 Javascript

Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)

2017/09/14 Javascript

jquery radio 动态控制选中失效问题的解决方法

2018/02/28 jQuery

json对象及数组键值的深度大小写转换问题详解

2018/03/30 Javascript

详解如何构建Promise队列实现异步函数顺序执行

2018/10/23 Javascript

nodejs基础之buffer缓冲区用法分析

2018/12/26 NodeJs

vue.js iview打包上线后字体图标不显示解决办法

2020/01/20 Javascript

[04:59]DOTA2-DPC中国联赛正赛 Ehome vs iG 选手采访

2021/03/11 DOTA

Python中动态创建类实例的方法

2017/03/24 Python

python中验证码连通域分割的方法详解

2018/06/04 Python

python3+django2开发一个简单的人员管理系统过程详解

2019/07/23 Python

python基于gevent实现并发下载器代码实例

2019/11/01 Python

python实现名片管理器的示例代码

2019/12/17 Python

把vgg-face.mat权重迁移到pytorch模型示例

2019/12/27 Python

python 实现仿微信聊天时间格式化显示的代码

2020/04/17 Python

Python requests.post方法中data与json参数区别详解

2020/04/30 Python

Python读取Excel数据并生成图表过程解析

2020/06/18 Python

读书心得体会

2013/12/28 职场文书

代理商会议邀请函

2014/01/27 职场文书

学习之星事迹材料

2014/05/17 职场文书

家长会标语

2014/06/24 职场文书

大明湖导游词

2015/02/03 职场文书

教师创先争优承诺书

2015/04/27 职场文书

保护校园环境倡议书

2015/04/28 职场文书

假如给我三天光明：舟逆水而行，人遇挫而达

2019/10/29 职场文书

python爬虫请求库httpx和parsel解析库的使用测评

2021/05/10 Python

Go遍历struct,map,slice的实现

2021/06/13 Golang

Java 中的 Lambda List 转 Map 的多种方法详解

2022/07/07 Java/Android