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

javascript:以前写的xmlhttp池,代码

May 18 Javascript

js获取单元格自定义属性值的代码(IE/Firefox)

Apr 05 Javascript

JavaScript 反科里化 this [译]

Sep 20 Javascript

jQuery插件zoom实现图片全屏放大弹出层特效

Apr 15 Javascript

jQuery预加载图片常用方法

Jun 15 Javascript

vue使用axios实现文件上传进度的实时更新详解

Dec 20 Javascript

Element-ui之ElScrollBar组件滚动条的使用方法

Sep 14 Javascript

JavaScript继承的特性与实践应用深入详解

Dec 30 Javascript

vue组件开发props验证的实现

Feb 12 Javascript

angular 实现下拉列表组件的示例代码

Mar 09 Javascript

详解vue-element Tree树形控件填坑路

Mar 26 Javascript

微信小程序之 catalog 切换实现解析

Sep 12 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初学者头疼问题总结

2006/10/09 PHP

用户的详细注册和判断

2006/10/09 PHP

深入理解PHP中的Session和Cookie

2013/06/21 PHP

PHP+jQuery+Ajax实现用户登录与退出

2015/04/27 PHP

PHP+redis实现的限制抢购防止商品超发功能详解

2019/09/19 PHP

浅谈PHP5.6 与 PHP7.0 区别

2019/10/09 PHP

在Z-Blog中运行代码[html][/html]（纯JS版）

2007/03/25 Javascript

js 上传图片预览问题

2010/12/06 Javascript

JS+CSS实现一个气泡提示框

2013/08/18 Javascript

window.open()实现post传递参数

2015/03/12 Javascript

jQuery validate验证插件使用详解

2016/05/11 Javascript

JavaScript变量类型以及变量作用域详解

2017/08/14 Javascript

JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

2018/01/07 Javascript

原生JS实现网页手机音乐播放器歌词同步播放的示例

2018/02/02 Javascript

JavaScript鼠标拖拽事件详解

2020/04/03 Javascript

JS 创建对象的模式实例小结

2020/04/28 Javascript

[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/18 DOTA

python开发之str.format()用法实例分析

2016/02/22 Python

Python利用Beautiful Soup模块修改内容方法示例

2017/03/27 Python

Python入门_学会创建并调用函数的方法

2017/05/16 Python

Python数据分析之如何利用pandas查询数据示例代码

2017/09/01 Python

Python基于辗转相除法求解最大公约数的方法示例

2018/04/04 Python

Python设计模式之抽象工厂模式原理与用法详解

2019/01/15 Python

基于Django实现日志记录报错信息

2019/12/17 Python

Python列表倒序输出及其效率详解

2020/03/04 Python

如何基于python实现不邻接植花

2020/05/01 Python

协程Python 中实现多任务耗资源最小的方式

2020/10/19 Python

利用CSS3实现文本框的清除按钮相关的一些效果

2015/06/23 HTML / CSS

css3实现wifi信号逐渐增强效果实例

2017/08/09 HTML / CSS

英国山地公路自行车商店：Tweeks Cycles

2018/03/16 全球购物

皇家阿尔伯特英国官方商店：Royal Albert骨瓷

2019/03/25 全球购物

数学系个人求职信范文

2014/01/30 职场文书

《伯牙绝弦》教学反思

2014/03/02 职场文书

离婚协议书范文

2015/01/26 职场文书

2015年重阳节慰问信

2015/03/23 职场文书

工厂员工辞职信范文

2015/05/12 职场文书