编程 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的实现简单的表格中增加或删除下一行

Aug 01 Javascript

常用的jquery模板插件——jQuery Boilerplate介绍

Sep 23 Javascript

javascript表格隔行变色加鼠标移入移出及点击效果的方法

Apr 10 Javascript

即将发布的jQuery 3 有哪些新特性

Apr 14 Javascript

全面解析JavaScript的Backbone.js框架中的Router路由

May 05 Javascript

Vue 仿百度搜索功能实现代码

Feb 16 Javascript

js学习总结之DOM2兼容处理this问题的解决方法

Jul 27 Javascript

React-Native中props具体使用详解

Sep 04 Javascript

p5.js入门教程之平滑过渡(Easing)

Mar 16 Javascript

JS实现的点击按钮图片上下滚动效果示例

Jan 28 Javascript

JavaScript编码小技巧分享

Sep 17 Javascript

ES6字符串的扩展实例

Dec 21 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

对盗链说再见...

2006/10/09 PHP

Ajax和PHP正则表达式验证表单及验证码

2016/09/24 PHP

PHP实现Unicode编码相互转换的方法示例

2020/11/17 PHP

解析 thinkphp 框架中的部分方法

2017/05/07 PHP

JQuery 学习笔记选择器之四

2009/07/23 Javascript

javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现

2013/01/23 Javascript

一个JavaScript函数把URL参数解析成Json对象

2014/09/24 Javascript

nodejs爬虫抓取数据乱码问题总结

2015/07/03 NodeJs

jQuery带时间的日期控件代码分享

2015/08/26 Javascript

JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法

2016/01/12 Javascript

轻松实现JavaScript图片切换

2016/01/12 Javascript

js当前页面登录注册框,固定div,底层阴影的实例代码

2016/10/04 Javascript

Javascript 获取鼠标当前的位置实现方法

2016/10/27 Javascript

详解使用webpack构建多页面应用

2017/12/21 Javascript

vue select二级联动第二级默认选中第一个option值的实例

2018/01/10 Javascript

vscode 开发Vue项目的方法步骤

2018/11/25 Javascript

在Vue项目中取消ESLint代码检测的步骤讲解

2019/01/27 Javascript

微信小程序返回箭头跳转到指定页面实例解析

2019/10/08 Javascript

python计算牛顿迭代多项式实例分析

2015/05/07 Python

最大K个数问题的Python版解法总结

2016/06/16 Python

Python模糊查询本地文件夹去除文件后缀的实例(7行代码)

2017/11/09 Python

Python Django框架url反向解析实现动态生成对应的url链接示例

2019/10/18 Python

Python用input输入列表的实例代码

2020/02/07 Python

Python scrapy爬取小说代码案例详解

2020/07/09 Python

详解Pandas 处理缺失值指令大全

2020/07/30 Python

金士达面试非笔试

2012/03/14 面试题

优秀中专生推荐信

2013/11/17 职场文书

医学院学生的自我评价分享

2013/11/19 职场文书

初二政治教学反思

2014/01/12 职场文书

上班玩游戏检讨书

2014/02/07 职场文书

高中军训感想300字

2014/03/04 职场文书

产品质量承诺范本

2014/03/31 职场文书

学校工会工作总结2015

2015/05/19 职场文书

golang DNS服务器的简单实现操作

2021/04/30 Golang

Golang全局变量加锁的问题解决

2021/05/08 Golang

浅谈为什么我的 z-index 又不生效了

2022/07/15 HTML / CSS