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

js版本A*寻路算法

Dec 22 Javascript

QUnit jQuery的TDD框架

Nov 04 Javascript

node.js中的socket.io入门实例

Apr 26 Javascript

封装好的js判断操作系统与浏览器代码分享

Jan 09 Javascript

在jQuery中处理XML数据的大致方法

Aug 14 Javascript

jQuery 1.9.1源码分析系列（十五)之动画处理

Dec 03 Javascript

javascript表达式和运算符详解

Feb 07 Javascript

使用vue制作FullPage页面滚动效果

Aug 21 Javascript

微信小程序实现YDUI的ScrollNav组件

Feb 02 Javascript

详解微信小程序开发用户授权登陆

Apr 24 Javascript

Angular8 Http拦截器简单使用教程

Aug 20 Javascript

JavaScript事件概念详解(区分静态注册和动态注册)

Feb 05 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后退一页表单内容保存实现方法

2012/06/17 PHP

php中Ctype函数用法详解

2014/12/09 PHP

php截取指定2个字符之间字符串的方法

2015/04/15 PHP

php 生成签名及验证签名详解

2016/10/26 PHP

Laravel学习笔记之Artisan命令生成自定义模板的方法

2018/11/22 PHP

分享8个Laravel模型时间戳使用技巧小结

2020/02/12 PHP

理解JavaScript中的事件

2006/09/23 Javascript

jQuery EasyUI API 中文文档 - NumberBox数字框

2011/10/13 Javascript

JS性能优化笔记搜索整理

2013/08/21 Javascript

jquery实现checkbox 全选/全不选的通用写法

2014/02/22 Javascript

SeaJS入门教程系列之SeaJS介绍（一）

2014/03/03 Javascript

alert和confirm功能介绍

2014/05/21 Javascript

javascript数组详解

2014/10/22 Javascript

jQuery中 prop() attr()使用详解

2015/05/19 Javascript

JavaScript Math.round() 方法

2015/12/18 Javascript

解决Angular.js中使用Swiper插件不能滑动的问题

2018/02/26 Javascript

8个有意思的JavaScript面试题

2019/07/30 Javascript

Angular6使用forRoot() 注册单一实例服务问题

2019/08/27 Javascript

JavaScript indexOf()原理及使用方法详解

2020/07/09 Javascript

[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17

2018/08/18 DOTA

利用Python求阴影部分的面积实例代码

2018/12/05 Python

基于python实现破解滑动验证码过程解析

2020/05/28 Python

html5与css3小应用

2013/04/03 HTML / CSS

澳大利亚最超值的自行车之家：Reid Cycles

2019/03/24 全球购物

杭州-DOTNET笔试题集

2013/09/25 面试题

How to spawning asynchronous work in J2EE

2016/08/29 面试题

公务员年总结的自我评价

2013/10/25 职场文书

销售员个人求职的自我评价

2014/02/10 职场文书

买卖合同协议书范本

2014/10/18 职场文书

仓库保管员岗位职责

2015/02/09 职场文书

幼儿园家长工作总结2015

2015/04/25 职场文书

胡桃夹子观后感

2015/06/11 职场文书

准备去美国留学，那么大学申请文书应该怎么写？

2019/08/12 职场文书

mysql批量新增和存储的方法实例

2021/04/07 MySQL

python实现进度条的多种实现

2021/04/29 Python

Python中的 No Module named ***问题及解决

2022/07/23 Python