bootstrap 表单类
bootstrap 表单类
表单美化
用法: 向父元素 <form role="form"></form> 添加 role="form"
把标签和控件放在 .form-control 类的div里面
向所有的文本元素 input textarea seclect 添加类 .form-control
三种表单布局类: 垂直表单(默认) 内联表单 水平表单
摘自菜鸟教程
默认表单
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile">
<p class="help-block">这里是块级帮助文本的实例。</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">请打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form> 内联表单 需要对里面的元素宽度进行设置
bootstrap 表单类的更多相关文章
- 详解Bootstrap表单组件
表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss boot ...
- 第二百三十四节,Bootstrap表单和图片
Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表单 Bootstrap ...
- Bootstrap表单
Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...
- bootstrapValidator.js,最好用的bootstrap表单验证插件
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- bootstrap表单带验证
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- bootstrap 表单控件 控件状态 控件大小 help-block
bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...
- 基于Bootstrap表单验证
基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...
- web(四)html表单类标签
表单类标签 操作者用于输入信息,并将信息提交给服务器的标签集合. 表单标签介绍 form标签:表单元素(其余标签)标签的容器标签 input标签:用于用户信息输入的标签. button标签:按钮标签. ...
- Python的Django框架中forms表单类的使用方法详解
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...
随机推荐
- VS Code配置C/C++环境
VS Code配置C/C++环境 一.下载和安装VS Code 1.访问VS Code官网下载安装包 2.安装VS Code 3. 安装后, 打开VS Code是英文,按住Ctrl+shift+x进入 ...
- 你真的看懂Android事件分发了吗?
引子 Android事件分发其实是老生常谈了,但是说实话,我觉得很多人都只是懂其大概,模棱两可.本文的目的就是再次从源码层次梳理一下,重点放在ViewGroup的dispatchTouchEvent方 ...
- 侠说java8--Stream流操作学习笔记,都在这里了
前言 首次接触到Stream的时候以为它是和InputStream.OutputStream这样的输入输出流的统称. 流和集合的前世今生 概念的差异 在开发中,我们使用最多的类库之一就是集合.集合是一 ...
- js 鼠标位置
1.clientX.clientY 光标位置——>距离当前body可视区域的x,y坐标 2.pageX.pageY 光标位置——> 对于整个页面来说,包括了被卷去的body ...
- Linux查看端口监听占用
# 查看所有 netstat -ntlp # 过滤PORT8080 netstat -ntlp | grep 8080 -t # 仅显示tcp相关选项 -u # 仅显示udp相关选项 -n # 拒绝显 ...
- win10关闭系统更新 (转载)
一.关闭Windows10系统的自动更新服务 1:使用快捷键Win+R,打开运行 2:输入命令:services.msc,打开系统服务界面 找到Windows Update双击 将启动类型改为[禁用] ...
- 01-web自动化基础篇
1.搭建环境 需要的环境 浏览器(Firefox/Chrome/IE…)-----选择Chrome Python Selenium Selenium IDE(如果用Firefox) FireBug.F ...
- Activiti定时任务
Activiti定时任务 作者:Jesai 傻逼一样的去坚持,就会有牛逼的结果 情景: 某公司有一个OA系统,审批环节是经理.有一天,经理出差了,然后下面突然有一份决定公司某个重大项目是否能顺利中标的 ...
- 一图胜千言elasticsearch(lucene)的内存管理
- CTF中关于XXE(XML外部实体注入)题目两道
题目:UNCTF-Do you like xml? 链接:http://112.74.37.15:8008/ hint:weak password (弱密码) 1.观察后下载图片拖进WINHEX发现提 ...