编程 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.AutoComplete.js中文修正版(支持firefox)

Apr 09 Javascript

js实现图片轮换效果代码

Apr 16 Javascript

深入理解JavaScript系列（30）：设计模式之外观模式详解

Mar 03 Javascript

浅谈JavaScript中运算符的优先级

Jul 07 Javascript

JS中创建函数的三种方式及区别

Mar 13 Javascript

js操作数据库实现注册和登陆的简单实例

May 26 Javascript

JS中script标签defer和async属性的区别详解

Aug 12 Javascript

在localStorage中存储对象数组并读取的方法

Sep 24 Javascript

jquery学习笔记之无new构建详解

Dec 07 jQuery

详解关于vue-area-linkage走过的坑

Jun 27 Javascript

微信小程序实现二维码签到考勤系统

Jan 16 Javascript

jQuery 选择器用法实例分析【prev + next】

May 22 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

不用iconv库的gb2312与utf-8的互换函数

2006/10/09 PHP

php下删除字符串中HTML标签的函数

2008/08/27 PHP

PHP定时更新程序设计思路分享

2014/06/10 PHP

PHP和javascript常用正则表达式及用法实例

2014/07/01 PHP

thinkphp中ajax与php响应过程详解

2014/12/08 PHP

PHP中4种常用的抓取网络数据方法

2015/06/04 PHP

PHP实现对png图像进行缩放的方法(支持透明背景)

2015/07/15 PHP

PHP实现超简单的SSL加密解密、验证及签名的方法示例

2017/08/28 PHP

jquery随意添加移除html的实现代码

2011/06/21 Javascript

JavaScript中Math对象方法使用概述

2014/01/02 Javascript

jQuery控制控件文本的长度的操作方法

2016/12/05 Javascript

js实现将json数组显示前台table中

2017/01/10 Javascript

React-Native使用Mobx实现购物车功能

2017/09/14 Javascript

Three.js实现浏览器变动时进行自适应的方法

2017/09/26 Javascript

JavaScript面试出现频繁的一些易错点整理

2018/03/29 Javascript

基于nodejs的雪碧图制作工具的示例代码

2018/11/05 NodeJs

jQuery 图片查看器插件 Viewer.js用法简单示例

2020/04/04 jQuery

Javascript Symbol原理及使用方法解析

2020/10/22 Javascript

Python中列表的一些基本操作知识汇总

2015/05/20 Python

Python 函数基础知识汇总

2018/03/09 Python

python通过微信发送邮件实现电脑关机

2018/06/20 Python

Python解决走迷宫问题算法示例

2018/07/27 Python

Python函数参数匹配模型通用规则keyword-only参数详解

2019/06/10 Python

Pytorch mask_select 函数的用法详解

2020/02/18 Python

CSS3中引入多种自定义字体font-face

2020/06/12 HTML / CSS

教师实习自我鉴定

2013/12/18 职场文书

优秀应届本科生求职信

2014/07/19 职场文书

邻里守望志愿服务活动方案

2014/08/15 职场文书

新兵入伍心得体会

2014/09/04 职场文书

2014年反腐倡廉工作总结

2014/12/05 职场文书

公司总经理岗位职责

2015/04/01 职场文书

2015年大学生党员承诺书

2015/04/27 职场文书

2016年“9.22”世界无车日活动小结

2016/04/05 职场文书

如何让vue长列表快速加载

2021/03/29 Vue.js

在 Golang 中实现 Cache::remember 方法详解

2021/03/30 Python

springmvc直接不经过controller访问WEB-INF中的页面问题

2022/02/24 Java/Android