bootstrap学习笔记细化(表单)
主要属性:
class="form-inline" 水平排列
class="form-group" 组键
form-control 圆角方框发光
input-lg 输入框变大
input-sm 输入框变小
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>表单</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head> <body> <form class="form-inline"> <div class="form-group has-success" >
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<label class="control-label" for="">这是一个输入框:</label>
<input type="text" class="form-control" placeholder="这是一个输入框" input-lg>
</div> <div class="form-group">
<label class="form-label" for="">这是一个输入框:</label>
<select class="form-control" name="" id="">
<option value="">北京</option>
<option value="">北京</option>
<option value="">北京</option>
</select>
</div> <div class="form-group has-error" >
<label class="form-label" for="">这是一个输入框:</label>
<textarea class="form-control" name="" id="" cols="30" rows="10"></textarea>
</div>
</form>
</body> </html>
源码
效果图:
bootstrap学习笔记细化(表单)的更多相关文章
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- AngularJS 1.2.x 学习笔记(表单校验篇)
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- Symfony2学习笔记之表单
对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...
- bootstrap学习笔记细化(按钮)
button:btn 圆角灰色按钮 button:btn btn-default 圆角灰色边框按钮 button:btn btn-success 绿色 button:btn btn-primary 蓝 ...
- [学习笔记]--Jfinal 表单提交附件
近期.项目里面用到了Jfinal 里面的上传附件. Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单參数一起提交. 页面类似下图: ...
- 20151223jquery学习笔记--Ajax表单提交
传统的表单提交, 需要多次跳转页面, 极大的消耗资源也缺乏良好的用户体验. 而这款form.js 表单的 Ajax 提交插件将解决这个问题.一. 核心方法官方网站: http://malsup.com ...
- angular2 学习笔记 ( Form 表单 )
refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...
- [知了堂学习笔记]_Jquery_Validate 表单校验的使用
一.效果图: 二.JqueryValidate的好处 在做注册.或者类似以上的表单提交的时候,大家是不是都很烦那种,把数据拿到后台去判断, 可能经过了正则表达式之类的复杂判断,然后发现数据错误.接着通 ...
随机推荐
- git 远程库和url
我们使用 git remote add origin <url> 来关联远程主机,这个origin就是关联的远程主机名,如果我们想同时关联两个远程主机,我们可以用 git remote a ...
- Java8内存结构—永久代(PermGen)和元空间(Metaspace)
本文转载 作者:liuxiaopeng 博客地址:https://www.cnblogs.com/paddix/p/5309550.html 一.JVM 内存结构 根据 JVM 规范,JVM 内存共分 ...
- HDU - 6315 吉司机线段树
题意:给出a,b数组,区间上两种操作,给\(a[L,R]\)+1s,或者求\(\sum_{i=l}^{r}a_i/b_i\) 一看就知道是吉司机乱搞型线段树(低配版),暴力剪枝就好 维护区间a的最大值 ...
- mysql只能本机访问
众所周知的是,mysql默认是listen 0.0.0.0:3306. 大网站的数据库服务器一般都在内网没有外网ip,用默认配置比较省事.但是如果只有一台vps,lnmp全部署在同一vps 上,mys ...
- 网站安全系列:跨站脚本攻击XSS
本篇博文主要从概念和应用上介绍XSS,主要内容来源于<白帽子讲web安全> XSS核心本质 XSS实际上是一种HTML注入,用户输入的数据被当成HTML的一部分来执行.防御方法核心是输入检 ...
- 【JSP】jsp报错:Syntax error, insert "}" to complete MethodBody
使用MyEclipse编写JSP的时候有时会报错误如下 Syntax error, insert "}" to complete MethodBody 大体意思就是说方法体缺少缺少 ...
- WebDriver+TestNG的一个典型例子
想让测试更加灵活,1. 可以配置使用任意支持的浏览器进行测试:2. 配置所有Google的URL:3. 配置搜索的关键字.修改后的代码: public class GoogleTest { WebDr ...
- Cassandra概念学习系列之Windows里下载且安装配置Cassandra(最新的3.11.1版本)(图文详解)
不多说,直接上干货! 最近我开始在windows环境中使用Cassandra,虽然在Cassandra站点的安装命令非常清楚和精简,我仍然在环境配置上遇到一些问题.所以我想为后来者分享下我的经验. ...
- Windows和Ubuntu双系统时间相差8个小时的问题
由于要学编程,在windows 10上安装了Ubuntu16.04双系统.但是却造成windows时间老是比实际时间慢八个小时,Ubuntu会与网络同步时间,但是在程序中调用主板时间时仍然是UTC时间 ...
- 剑指offer(31-35)编程题
整数中1出现的次数(从1到n整数中1出现的次数) 把数组排成最小的数 丑数 第一个只出现一次的字符位置 数组中的逆序 31.求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数 ...