编程 Javascript

Bootstrap简单表单显示学习笔记

Posted in Javascript onNovember 15, 2016

表单布局

垂直或基本表单

基本的表单结构时BootStrap自带的，创建基本表单的步骤如下：

1、向父<form>元素添加role = “form”；
2、为了获取最佳的间距，把标签和控件放在一个div.form-group中,div放在父form下；
3、向所有的文本元素<input>、<textarea>和<select>添加.form-control

<!DOCTYPE html>
<html>
 <head>
 <title>Bootstrap 模板</title>
 <meta charset="utf-8">
 <!-- 引入 Bootstrap -->
 <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>

 <form role="form">
 <div class="form-group">
 <label for="name">名称</label>
 <input type="text" class="form-control" id="name" name="name-text" placeholder="请输入你的名称">
 </div>
 </form>

 <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <!-- 包括所有已编译的插件 -->
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </body>
</html>

添加了form-controlClass的input会和label分为两行，并且获得焦点时会有蓝色的边框样式。

内联表单

内联表单中所有的元素都是内联的，标签都是并排的

1、向<form>标签中添加classfrom-inline;
2、每个表单需要被包含在div.form-group，checkbox可以包含在div.checkbox,radio可以包含在div.radio;
3、默认情况下，bootstrap中的input、select和textarea有100%宽度，使用内联表单时，可以设置表单控件的宽度来设置;
4、对标签描述添加sr-only可以隐藏标签描述。

<!DOCTYPE html>
<html>
 <head>
 <title>Bootstrap 模板</title>
 <meta charset="utf-8">
 <!-- 引入 Bootstrap -->
 <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>

 <form class="form-inline" role="form">
 <div class="form-group">
 <label class = "sr-only" for="name">名称</label>
 <input type="text" class="form-control" id="name" name="name-text" placeholder="请输入你的名称" style="width: 170px">
 </div>
 <div class="form-group">
 <input type="file" name="inputfile" style="width: 170px">
 </div>
 <label>
 <input type="checkbox" class="checkbox">请打勾 
 </label> 
 </form>

 <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <!-- 包括所有已编译的插件 -->
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </body>
</html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap简单表单显示学习笔记

- Author -

帆帆帆

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

firefox firebug中文入门教程脚本之家新年特别版

Jan 02 Javascript

基于jquery封装的一个js分页

Nov 15 Javascript

javascript学习(二)javascript常见问题总结

Jan 02 Javascript

JS比较两个时间大小的简单示例代码

Dec 20 Javascript

前台js对象在后台转化java对象的问题探讨

Dec 20 Javascript

Javascript的表单验证-初识正则表达式

Mar 18 Javascript

使用base64对图片的二进制进行编码并用ajax进行显示

Jan 03 Javascript

详解从Node.js的child_process模块来学习父子进程之间的通信

Mar 27 Javascript

Vue工程模板文件 webpack打包配置方法

Dec 26 Javascript

详解extract-text-webpack-plugin 的使用及安装

Jun 12 Javascript

vue实现倒计时获取验证码效果

Apr 17 Javascript

JavaScript写个贪吃蛇小游戏(超详细)

Mar 17 Javascript

JS实现根据用户输入分钟进行倒计时功能

Nov 14 #Javascript

js调用屏幕宽度的简单方法

Nov 14 #Javascript

jquery心形点赞关注效果的简单实现

Nov 14 #Javascript

JS实现自动阅读单词(有道单词本添加功能)

Nov 14 #Javascript

9个让JavaScript调试更简单的Console命令

Nov 14 #Javascript

Node.js中路径处理模块path详解

Nov 14 #Javascript

JavaScript队列、优先队列与循环队列

Nov 14 #Javascript

You might like

PHP中的串行化变量和序列化对象

2006/09/05 PHP

PHP递归删除目录几个代码实例

2014/04/21 PHP

smarty缓存用法分析

2014/12/16 PHP

php使用curl获取https请求的方法

2015/02/11 PHP

php简单实现发送带附件的邮件

2015/06/10 PHP

PHP命令行执行整合pathinfo模拟定时任务实例

2016/08/12 PHP

js利用Array.splice实现Array的insert/remove

2009/01/13 Javascript

编写Js代码要注意的几条规则

2010/09/10 Javascript

兼容IE、firefox以及chrome的js获取时间(getFullYear)

2014/07/04 Javascript

原生js和jQuery随意改变div属性style的名称和值

2014/10/22 Javascript

如何编写高质量JS代码

2014/12/28 Javascript

javascript实现简单的分页特效

2015/08/12 Javascript

原生js实现放大镜

2017/02/20 Javascript

jQuery+pjax简单示例汇总

2017/04/21 jQuery

Vue.js 2.0 移动端拍照压缩图片预览及上传实例

2017/04/27 Javascript

JS 实现banner图片轮播效果(鼠标事件)

2017/08/04 Javascript

微信小程序动画的简单实例

2017/10/12 Javascript

Vue前端开发规范整理(推荐)

2018/04/23 Javascript

浅析微信扫码登录原理(小结)

2018/10/29 Javascript

解决vue+router路由跳转不起作用的一项原因

2020/07/19 Javascript

Python多进程并发(multiprocessing)用法实例详解

2015/06/02 Python

详解Python中使用base64模块来处理base64编码的方法

2016/07/01 Python

Python实现购物程序思路及代码

2017/07/24 Python

python 定时修改数据库的示例代码

2018/04/08 Python

python3 实现对图片进行局部切割的方法

2018/12/05 Python

欧舒丹英国官网：购买欧舒丹护手霜等明星产品

2017/01/17 全球购物

苏格兰销售女装、男装和童装的连锁店：M&Co

2018/03/16 全球购物

阿里巴巴英国：Alibaba英国

2019/12/11 全球购物

交通安全寄语大全

2014/04/08 职场文书

小学教师读书活动总结

2014/07/08 职场文书

反四风对照检查材料思想汇报

2014/09/16 职场文书

2014年办公室主任工作总结

2014/11/12 职场文书

2015年学校远程教育工作总结

2015/07/20 职场文书

python实现自动化群控的步骤

2021/04/11 Python

Java无向树分析实现最小高度树

2022/04/09 Javascript

小程序实现侧滑删除功能

2022/06/25 Javascript