编程 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 事件执行检测代码

Dec 09 Javascript

各情景下元素宽高的获取实现代码

Sep 13 Javascript

JavaScript回调(callback)函数概念自我理解及示例

Jul 04 Javascript

IE及IE6浏览器中判断JS文件加载成功失败的方法

Feb 18 Javascript

JS+DIV+CSS实现仿表单下拉列表效果

Aug 18 Javascript

jQuery实现的简单百分比进度条效果示例

Aug 01 Javascript

JavaScript动态数量的文件上传控件

Nov 18 Javascript

微信小程序封装http访问网络库实例代码

May 24 Javascript

浅谈angular4 ng-content 中隐藏的内容

Aug 18 Javascript

Node.js搭建WEB服务器的示例代码

Aug 15 Javascript

简述ES6新增关键字let与var的区别

Aug 23 Javascript

在vue中使用eslint,配合vscode的操作

Nov 09 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 HandlerSocket的使用

2011/05/02 PHP

PHP 多维数组的排序问题根据二维数组中某个项排序

2011/11/09 PHP

Yii入门教程之Yii安装及hello world

2014/11/25 PHP

PHP运行模式汇总

2016/11/06 PHP

jquery 元素相对定位代码

2010/10/15 Javascript

js禁止小键盘输入数字功能代码

2011/08/01 Javascript

javascript获得服务器端控件的ID的实现代码

2011/12/28 Javascript

c#和Javascript操作同一json对象的实现代码

2012/01/17 Javascript

利用JQuery动画制作滑动菜单项效果实现步骤及代码

2013/02/07 Javascript

node.js中的querystring.escape方法使用说明

2014/12/10 Javascript

百度地图API之本地搜索与范围搜索

2015/07/30 Javascript

详解javascript遍历方式

2015/11/11 Javascript

js判断输入字符串是否为空、空格、null的方法总结

2016/06/14 Javascript

详解js中==与===的区别

2017/01/08 Javascript

Angular在一个页面中使用两个ng-app的方法(二)

2017/02/20 Javascript

通过vue-cli来学习修改Webpack多环境配置和发布问题

2017/12/22 Javascript

jQuery中内容过滤器简单用法示例

2018/03/31 jQuery

20个最常见的jQuery面试问题及答案

2018/05/23 jQuery

Vue+mui实现图片的本地缓存示例代码

2018/05/24 Javascript

基于vue实现一个禅道主页拖拽效果

2019/05/27 Javascript

Vue2.0实现简单分页及跳转效果

2019/07/29 Javascript

itchat和matplotlib的结合使用爬取微信信息的实例

2017/08/25 Python

将string类型的数据类型转换为spark rdd时报错的解决方法

2019/02/18 Python

Selenium向iframe富文本框输入内容过程图解

2020/04/10 Python

PyCharm2019 安装和配置教程详解附激活码

2020/07/31 Python

美国最大婚纱连锁店运营商：David’s Bridal

2019/03/12 全球购物

美国在线购买和出售礼品卡网站：EJ Gift Cards

2019/06/09 全球购物

个人简历的自荐信

2013/10/23 职场文书

保安队长职务说明书

2014/02/23 职场文书

师德师风事迹材料

2014/12/20 职场文书

药店收银员岗位职责

2015/04/07 职场文书

少年派的奇幻漂流观后感

2015/06/08 职场文书

python glom模块的使用简介

2021/04/13 Python

springboot+VUE实现登录注册

2021/05/27 Vue.js

python的netCDF4批量处理NC格式文件的操作方法

2022/03/21 Python

DQL数据查询语句使用示例

2022/12/24 MySQL