编程 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窗口功能指南之在窗口中书写内容

Jul 21 Javascript

List all the Databases on a SQL Server

Jun 21 Javascript

使用jQuery.wechat构建微信WEB应用

Oct 09 Javascript

jquery滚动特效集锦

Jun 03 Javascript

js+html5实现canvas绘制圆形图案的方法

Jun 05 Javascript

Jquery全选与反选点击执行一次的解决方案

Aug 14 Javascript

js拖拽的原型声明和用法总结

Apr 04 Javascript

深入理解JavaScript函数参数(推荐)

Jul 26 Javascript

纯JS实现可拖拽表单的简单实例

Sep 02 Javascript

JavaScript编写一个贪吃蛇游戏

Mar 09 Javascript

如何使用three.js 制作一个三维的推箱子游戏

Jul 29 Javascript

Vue实现菜单切换功能

Nov 08 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 Smarty date_format [格式化时间日期]

2010/03/15 PHP

使用session判断用户登录用户权限(超简单)

2013/06/08 PHP

PHP中exec函数和shell_exec函数的区别

2014/08/20 PHP

jquery入门必备的基本认识及实例(整理)

2013/06/24 Javascript

DOM节点深度克隆函数cloneNode()用法实例

2015/01/12 Javascript

js父页面中使用子页面的方法

2016/01/09 Javascript

JS拖拽组件学习使用

2016/01/19 Javascript

JQUERY的AJAX请求缓存里的数据问题处理

2016/02/23 Javascript

JQueryMiniUI按照时间进行查询的实现方法

2017/06/07 jQuery

React Native 环境搭建的教程

2017/08/19 Javascript

vue 动态修改a标签的样式的方法

2018/01/18 Javascript

浅谈angular4.0中路由传递参数、获取参数最nice的写法

2018/03/12 Javascript

Angular异步变同步处理方法

2018/08/13 Javascript

vue form 表单提交后刷新页面的方法

2018/09/04 Javascript

VUE+Element UI实现简单的表格行内编辑效果的示例的代码

2018/10/31 Javascript

如何自定义微信小程序tabbar上边框的颜色

2019/07/09 Javascript

Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

2020/03/29 Javascript

[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN

2018/03/30 DOTA

浅谈python中copy和deepcopy中的区别

2017/10/23 Python

Python画柱状统计图操作示例【基于matplotlib库】

2018/07/04 Python

python实战教程之自动扫雷

2018/07/13 Python

Flask核心机制之上下文源码剖析

2018/12/25 Python

python导包的几种方法(自定义包的生成以及导入详解)

2019/07/15 Python

python @classmethod 的使用场合详解

2019/08/23 Python

python3.7将代码打包成exe程序并添加图标的方法

2019/10/11 Python

使用python采集Excel表中某一格数据

2020/05/14 Python

python 解决mysql where in 对列表(list,,array)问题

2020/06/06 Python

使用jupyter notebook运行python和R的步骤

2020/08/13 Python

毕业生的自我鉴定

2013/10/29 职场文书

聚美优品的广告词

2014/03/14 职场文书

财务会计大学生自我评价

2014/04/09 职场文书

校园安全标语

2014/06/07 职场文书

男方婚礼答谢词

2015/01/20 职场文书

2015纪念九一八事变84周年演讲稿

2015/03/19 职场文书

2016公司新年问候语

2015/11/11 职场文书

python读取pdf格式文档的实现代码

2021/04/01 Python