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个精彩的专题:

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

Javascript 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
理解Javascript图片预加载
Feb 23 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
使用Python开发windows GUI程序入门实例
2014/10/23 Python
Python中运行并行任务技巧
2015/02/26 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
python在控制台输出进度条的方法
2015/06/20 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
python3 读写文件换行符的方法
2018/04/09 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
Pycharm安装python库的方法
2020/11/24 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
会计毕业自我鉴定
2014/02/05 职场文书
网络管理专业求职信
2014/03/15 职场文书
欢迎家长标语
2014/10/08 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书