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

IE和Firefox的Javascript兼容性总结[推荐收藏]

Oct 19 Javascript

给页面渲染时间加速干掉Dom Level 0 Event

Dec 19 Javascript

Extjs4 Treegrid 使用心得分享(经验篇)

Jul 01 Javascript

Jquery代码实现图片轮播效果（一）

Aug 12 Javascript

关于Sequelize连接查询时inlude中model和association的区别详解

Feb 27 Javascript

React-router 4 按需加载的实现方式及原理详解

May 25 Javascript

JS实现的简单标签点击切换功能示例

Sep 21 Javascript

vue-cli之router基本使用方法详解

Oct 17 Javascript

vue-cli系列之vue-cli-service整体架构浅析

Jan 14 Javascript

PWA介绍及快速上手搭建一个PWA应用的方法

Jan 27 Javascript

es6函数之尾递归用法实例分析

Apr 25 Javascript

js+audio实现音乐播放器

Sep 13 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+JavaScript实现无刷新上传图片

2017/02/21 PHP

php中类和对象：静态属性、静态方法

2017/04/09 PHP

PHP中in_array的隐式转换的解决方法

2018/03/06 PHP

PHP两个n位的二进制整数相加问题的解决

2018/08/26 PHP

Laravel 集成微信用户登录和绑定的实现

2019/12/27 PHP

jQuery+PHP实现图片上传并提交功能

2020/07/27 PHP

可输入的下拉框

2006/06/19 Javascript

JavaScript中的Array对象使用说明

2011/01/17 Javascript

关于Javascript作用域链的八点总结

2013/12/06 Javascript

JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)

2014/10/17 Javascript

浅析JavaScript中的对象类型Object

2016/05/26 Javascript

js删除数组元素、清空数组的简单方法(必看)

2016/07/27 Javascript

详解Javascript中prototype属性(推荐)

2016/09/03 Javascript

js实现移动端编辑添加地址【模仿京东】

2017/04/28 Javascript

让微信小程序支持ES6中Promise特性的方法详解

2017/06/13 Javascript

React Native中Navigator的使用方法示例

2017/10/13 Javascript

layui之table checkbox初始化时选中对应选项的方法

2019/09/02 Javascript

详谈vue中router-link和传统a链接的区别

2020/07/22 Javascript

SpringBoot在yml配置文件中配置druid的操作

2020/11/16 Javascript

[05:10]2014DOTA2国际邀请赛通往胜利之匙赛场探秘之旅

2014/07/18 DOTA

Python中if __name__ == "__main__"详细解释

2014/10/21 Python

python根据出生日期返回年龄的方法

2015/03/26 Python

浅谈Python类的__getitem__和__setitem__特殊方法

2016/12/25 Python

python实现控制COM口的示例

2019/07/03 Python

Python shutil模块用法实例分析

2019/10/02 Python

python 实现视频图像帧提取

2019/12/10 Python

python scrapy重复执行实现代码详解

2019/12/28 Python

使用Django清空数据库并重新生成

2020/04/03 Python

西雅图的买手店：Totokaelo

2019/10/19 全球购物

如果Session Bean得Remove方法一直都不被调用会怎么样

2012/07/14 面试题

高三生物教学反思

2014/01/25 职场文书

个人简历中的自我评价怎么写

2014/01/26 职场文书

小学生竞选班干部演讲稿

2014/04/24 职场文书

工作目标责任书

2014/07/23 职场文书

学生病假条怎么写

2015/08/17 职场文书

2019企业给员工的慰问信

2019/06/24 职场文书