编程 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中的作用域scope介绍

Dec 28 Javascript

jquery实现的3D旋转木马特效代码分享

Aug 25 Javascript

jQuery实现查找链接文字替换属性的方法

Jun 27 Javascript

基于js实现二级下拉联动

Dec 17 Javascript

js实现3D图片展示效果

Mar 09 Javascript

JavaScript判断浏览器和hack滚动条的写法

Jul 23 Javascript

使用Node.js实现RESTful API的示例

Aug 01 Javascript

完美解决手机网页中输入框被输入法遮挡的问题

Dec 19 Javascript

vue-router命名视图的使用讲解

Jan 19 Javascript

JS html事件冒泡和事件捕获操作示例

May 01 Javascript

vue中使用echarts的示例

Jan 03 Vue.js

JavaScript 数组去重详解

Sep 15 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 Cookie学习笔记

2016/08/23 PHP

js 自制滚动条的小例子

2013/03/16 Javascript

location.href用法总结(最主要的)

2013/12/27 Javascript

node.js中的fs.closeSync方法使用说明

2014/12/17 Javascript

javascript基于DOM实现权限选择实例分析

2015/05/14 Javascript

jQuery 3 中的新增功能汇总介绍

2016/06/12 Javascript

js简单时间比较的方法

2016/08/02 Javascript

Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法

2017/08/22 Javascript

Vue实现点击时间获取时间段查询功能

2020/08/21 Javascript

关于微信公众号开发无法支付的问题解决

2018/12/28 Javascript

vue开发环境配置跨域的方法步骤

2019/01/16 Javascript

微信小程序实现简单表格

2019/02/14 Javascript

JS数组的常用10种方法详解

2020/05/08 Javascript

[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局

2016/03/05 DOTA

[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18

2018/08/19 DOTA

[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士

2020/07/16 DOTA

python读取浮点数和读取文本文件示例

2014/05/06 Python

Python编程中实现迭代器的一些技巧小结

2016/06/21 Python

[原创]使用豆瓣提供的国内pypi源

2017/07/02 Python

python 数字类型和字符串类型的相互转换实例

2018/07/17 Python

程序员写Python时的5个坏习惯，你有几条？

2018/11/26 Python

10个顶级Python实用库推荐

2021/03/04 Python

详解CSS3 rem(设置字体大小) 教程

2017/11/21 HTML / CSS

html5 canvas简单封装一个echarts实现不了的饼图

2018/06/12 HTML / CSS

美国花园雕像和家居装饰网上商店：Design Toscano

2019/03/09 全球购物

美国摩托车头盔、零件、齿轮及配件商店：Cycle Gear

2019/06/12 全球购物

售后服务科岗位职责范文

2013/11/13 职场文书

电信营业员自我评价分享

2014/01/17 职场文书

捐献物资倡议书范文

2014/05/19 职场文书

党员创先争优心得体会

2014/09/11 职场文书

就业协议书范本

2014/10/08 职场文书

2015年党建工作目标责任书

2015/05/08 职场文书

居安思危观后感

2015/06/11 职场文书

党员读书活动心得体会

2016/01/14 职场文书

CSS布局之浮动(float)和定位(position)属性的区别

2021/09/25 HTML / CSS

Python 数据可视化之Seaborn详解

2021/11/02 Python