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

safari,opera嵌入iframe页面cookie读取问题解决方法

Jun 23 Javascript

jQuery - css() 方法示例详解

Jan 16 Javascript

Node.js实现简单聊天服务器

Jun 20 Javascript

在Linux上用forever实现Node.js项目自启动

Jul 09 Javascript

Bootstrap 粘页脚效果

Mar 28 Javascript

jquery获取复选框的值的简单实例

May 26 Javascript

JS中IP地址与整数相互转换的实现代码

Apr 10 Javascript

vue-cli中的webpack配置详解

Sep 25 Javascript

基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能

May 16 Javascript

详解vuex中action何时完成以及如何正确调用dispatch的思考

Jan 21 Javascript

vue-cli脚手架打包静态资源请求出错的原因与解决

Jun 06 Javascript

使用原生JS实现滚轮翻页效果的示例代码

May 31 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翻页类

2009/06/01 PHP

PHP实现的连贯操作、链式操作实例

2014/07/08 PHP

分享别人写的一个小型js框架

2007/08/13 Javascript

Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例

2013/08/28 Javascript

鼠标拖动实现DIV排序示例代码

2013/10/14 Javascript

简介JavaScript中toUpperCase()方法的使用

2015/06/06 Javascript

JavaScript中数据结构与算法(三)：链表

2015/06/19 Javascript

JavaScript通过HTML的class来获取HTML元素的方法总结

2016/05/24 Javascript

清除js缓存的多种方法总结

2016/12/09 Javascript

EditPlus 正则表达式实战(3)

2016/12/15 Javascript

浅谈JavaScript的函数及作用域

2016/12/30 Javascript

微信小程序登录态控制深入分析

2017/04/12 Javascript

Vue2.0 实现移动端图片上传功能

2018/05/30 Javascript

React 组件间的通信示例

2018/06/14 Javascript

JavaScript根据json生成html表格的示例代码

2018/10/24 Javascript

简谈创建React Component的几种方式

2019/06/15 Javascript

微信小程序批量监听输入框对按钮样式进行控制的实现代码

2019/10/12 Javascript

JavaScript 自定义html元素鼠标右键菜单功能

2019/12/02 Javascript

python制作websocket服务器实例分享

2016/11/20 Python

django admin后台添加导出excel功能示例代码

2019/05/15 Python

Python基础学习之函数方法实例详解

2019/06/18 Python

Python socket 套接字实现通信详解

2019/08/27 Python

Django中的FBV和CBV用法详解

2019/09/15 Python

解决python 读取excel时日期变成数字并加.0的问题

2019/10/08 Python

css3实现简单的白云飘动背景特效

2020/10/28 HTML / CSS

乐高官方旗舰店：LEGO积木玩具

2019/04/06 全球购物

Molton Brown美国官网：奢华美容、香水、沐浴和身体护理

2020/09/02 全球购物

eHarmony英国：全球领先的认真恋爱约会平台之一

2020/11/16 全球购物

2014年入党积极分子学习三中全会思想汇报

2014/09/13 职场文书

教师“一帮一”结对子活动总结

2015/05/07 职场文书

关于空气污染危害的感想

2015/08/11 职场文书

小学秋季运动会通讯稿

2015/11/25 职场文书

创业计划书之闲置物品置换中心

2019/12/25 职场文书

如何理解Vue简单状态管理之store模式

2021/05/15 Vue.js

JavaScript事件的委托(代理)的用法示例详解

2022/02/18 Javascript

MySQL控制流函数(-if ,elseif,else,case...when)

2022/07/07 MySQL