一步一步学习Bootstrap系列--表单布局
前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳
Bootstrap 提供了下列类型的表单布局:
- 垂直表单(默认)
- 内联表单
- 水平表单
基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤:
- 向父 <form> 元素添加 role="form"。
- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。
一、效果预览
二、垂直表单(默认表单)
代码如下:
<div>
<div class="form-group">
<label class="control-label">名称</label>
<input class="form-control" type="text" placeholder="请输入用户名" />
</div>
<div class="form-group">
<label class="control-label">密码</label>
<input class="form-control" type="password" placeholder="请输入密码" />
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-default">提交</button>
</div>
</div>
效果:
这种表单不用给form(本文先用DIV代替)添加任何class通过.from-control设置width为100%所以一个控件占满了一行
三、内联表单
代码如下:
<div class="form-inline">
<div class="form-group">
<label class="sr-only">名称</label>
<input style="width:200px" class="form-control" type="text" placeholder="请输入用户名" />
</div>
<div class="form-group">
<label class="sr-only">密码</label>
<input class="form-control" type="password" placeholder="请输入密码" />
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="button" class="btn btn-default">提交</button>
</div>
效果:
这种表单的布局是内联样式就是所有控件都在同一行,在项目开发过程中一半用于快速查询的环境下,如果想改变控件的长度也是容易做到的,当前样式控件width为auto可以用style控制或者在form-group中设置,值得一提的是当lable想隐藏可以
使用.sr-only样式
四、水平表单
代码:
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-1">名称</label>
<div class="col-sm-5">
<input class="form-control" type="text" placeholder="请输入用户名" />
</div>
<label class="control-label col-sm-1">密码</label>
<div class="col-sm-5">
<input class="form-control" type="password" placeholder="请输入密码" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1 sr-only">名称</label>
<div class="col-sm-5">
<div class="checkbox">
<label>
<input type="checkbox"> 请打勾
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-7 col-sm-6">
<button type="button" class="btn btn-default">提交</button>
</div>
</div>
</div>
这种布局方式是最常用的一种,在开发中广泛应用并且支持各种设备自适应,可以根据需求选择不同的表单布局方式
五、Bootstrap要点
使用bootstrap对前端页面的布局,container、row、col-xs-4等css样式的使用,使网页的布局更漂亮,值得一提的而是在使用container容器时,给内容一个15的内边距,此时如果想布局的合理需要给内容一个.row样式,在谷歌浏览器下我们可以看见
.container的 padding-left:15px 、 padding-right:15px 和 .row的 margin-left:-15px 、margin-right:-15px刚好抵消占满了整个屏幕
所以在实际项目开发中二者都嵌套使用。
一步一步学习Bootstrap系列--表单布局的更多相关文章
- Bootstrap常用表单布局
参考链接: https://blog.csdn.net/shuai_wy/article/details/78978023
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- SpringMVC学习系列- 表单验证
本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...
- BootStrap 智能表单系列 首页 (持续更新中...)
背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...
- BootStrap 智能表单系列 十一 级联下拉的支持
像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...
- BootStrap 智能表单系列 十 自动完成组件的支持
web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...
- BootStrap 智能表单系列 九 表单图片上传的支持
本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...
- BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
- BootStrap 智能表单系列 八 表单配置json详解
本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...
随机推荐
- Neutron 理解 (2): 使用 Open vSwitch + VLAN 组网 [Netruon Open vSwitch + VLAN Virutal Network]
学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...
- CSS的一些零碎总结
1.CSS 伪元素用于向某些选择器设置特殊效果(用来当作一个东西的,跟一个元素差不多,但不是元素). ① :frist-line伪元素:用于向文本首行设置特殊样式,但是只能用于块级元素. 以下属性可应 ...
- Zip加密
http://www.cnblogs.com/kgdxpr/archive/2013/08/01/3230174.html
- 使用scrollpagination实现页面底端自动加载无需翻页功能
当阅读到页面最底端的时候,会自动显示一个"加载中"的功能,并自动从服务器端无刷新的将内容下载到本地浏览器显示. 这样的自动加载功能是如何实现的?jQuery的插件 ScrollPa ...
- jenkins 入门教程(中)
接上回继续,本文以我托管在bitbucket上的一个开源项目spring-boot-rest-framework做为演示,讲解如何创建自动化部署. 一.创建item 点击ok继续,item的详情页面很 ...
- css设置select高度(IE,FF,Chrome)[转]
大家都知道select是无法设置高度和边框颜色等等的在ie67下面,其他的都是可以的,所以有时候为了在所有的浏览器下显示都一致,就使用了 js的模拟,这个是大家经常碰到的,js不光要模拟外观还有模拟事 ...
- 使用PhpDocumentor生成文档
一,网站根目录执行 $ composer require --dev phpdocumentor/phpdocumentor 二,进入vendor/bin/目录执行 $phpdoc -d D:\ser ...
- go 数组(array)、切片(slice)、map、结构体(struct)
一 数组(array) go语言中的数组是固定长度的.使用前必须指定数组长度. go语言中数组是值类型.如果将数组赋值给另一个数组或者方法中参数使用都是复制一份,方法中使用可以使用指针传递地址. 声明 ...
- php根据地址的经纬度查询周围的城市例子
目前的工作是需要对用户的一些数据进行分析,每个用户都有若干条记录,每条记录中有用户的一个位置,是用经度和纬度表示的.还有一个给定的数据库,存储的是一些已知地点以及他们的经纬度,内有43W多条的数据.现 ...
- linux基础知识与技能2
3.编辑器vi的使用(vi和vim的联系)什么是编辑器?编辑器就是一款软件,它的主要作用就是用来编辑.譬如编写文件,编写代码.Windows中的常用编辑器,如自带的notepad.比较好用的notep ...