正文

bootstrap学习笔记<五>（表单一）

IP云
IP云V管理员/6 阅读
08/13
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

表单

bootstrap为表单提供三种样式：默认表单，水平表单，内联表单。

<form class="form-horizontal" role="form">
<!--默认表单-->
</form>
<!--分割线-->
<form class="form-horizontal" role="form">
<!--水平表单-->
</form>
<!--分割线-->
<form class="form-inline" role="form">
<!--内联表单-->
</form>

水平表单效果图（ps：bootstrap默认表单是label标签和表单元素上下排列）

内联表单效果图（ps：内联表单就是把垂直排列的表单元素水平排列）

<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">邮箱：</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>

表单元素

下拉框<select></select>

bootstrap除了传统的单选下拉框外，还新增了多选下拉框。

<form role="form">
<!--单选下拉框-->
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<!--多选下拉框-->
<div class="form-group">
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</div>
</form>

单选下拉框效果图

多选下拉框效果图

单选，复选框

bootstrap对checkbox和radio做了一些优化。用<div></div>包裹一组checkbox或者radio元素。用class="checkbox"或者class="radio"赋值div样式。

<form role="form">
<h2>选择框<small>案例</small></h2>
<!--复选框-->
<div class="checkbox">
<label>
<input type="checkbox" value="">
复选
</label>
</div>
<!--单选框-->
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
单选1
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
单选2
</label>
</div>
</form>

优化后的checkbox选择框和文本对齐更完美。

水平选择框

一组checkbox或radio呈横向水平排列

class="checkbox-inline"

<form role="form">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="option1">游戏
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option2">摄影
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option3">旅游
</label>
</div>
<div class="form-group">
<label class="radio-inline">
<input type="radio" value="option1" name="sex">男性
</label>
<label class="radio-inline">
<input type="radio" value="option2" name="sex">女性
</label>
<label class="radio-inline">
<input type="radio" value="option3" name="sex">保密
</label>
</div>
</form>

按钮

bootstrap的按钮更漂亮直接看看效果吧

class="btn"，基本按钮样式。

class="btn btn-info(primary,success,warning,danger)"，带颜色的按钮样式。

<button class="btn btn-primary">按钮</button>
<a class="btn btn-info">超链接</a>
<input type="submit" class="btn btn-success"/>
<input type="text" value="输入框" class="btn btn-danger"/>

效果图

调整表单元素尺寸

元素尺寸调节：

class="input input-lg"（大号）

class="input"（普通）

class="input input-sm"（小号）

（ps：input也可以替换其他元素，如：btn，text）

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件大小</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<h1>案例1</h1>
<form role="form">
<div class="form-group">
<label class="control-label">控件变大</label>
<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
</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 input-sm" type="text" placeholder="添加.input-sm，控件变小">
</div>
<button class="btn btn-lg">btn-lg</button>
<button class="btn">默认</button>
<button class="btn btn-sm">btn-sm</button>
</form>
</body>
</html>

效果图

表单控件禁用

bootstrap禁用表单控件仅仅需要一个属性：disabled(任何表单元素都有disabled属性)

<h3>示例1</h3>
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-xs-6">
<input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
</div>
<div class="col-xs-6">
<input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
</div>
</div>
</form>
<br>
<h3>示例2</h3>
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">禁用的输入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>不可选择</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 无法选择
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</form>
<br>
<form role="form">
<fieldset disabled>
<legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下" /></legend>
<div class="form-group">
<label for="disabledTextInput">禁用的输入框</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
<div class="form-group">
<label for="disabledSelect">禁用的下拉框</label>
<select id="disabledSelect" class="form-control">
<option>不可选择</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 无法选择
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</fieldset>
</form>

表单提示消息

配合表单元素显示提示消息：class="help-block"

<h3>示例1</h3>
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="help-block">你输入的信息是正确的</span>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="help-block">请输入正确信息</span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="help-block">你输入的信息是错误的</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
<br>
<form role="form">
<div class="form-group">
<label class="control-label" for="inputSuccess1">成功状态</label>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
</div>
<span class="col-xs-6 help-block">你输入的信息是正确的</span>
</div>
</div>
</form>

效果图

bootstrap学习笔记<五>（表单一）的更多相关文章

  1. Bootstrap学习笔记&lpar;二&rpar; 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  2. bootstrap学习笔记细化&lpar;表单&rpar;

    主要属性: class="form-inline" 水平排列 class="form-group" 组键 form-control 圆角方框发光 input-l ...

  3. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  4. （转）Qt Model&sol;View 学习笔记 &lpar;五&rpar;——View 类

    Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...

  5. java之jvm学习笔记五&lpar;实践写自己的类装载器&rpar;

    java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...

  6. C&plus;&plus;基础 学习笔记五：重载之运算符重载

    C++基础 学习笔记五:重载之运算符重载 什么是运算符重载 用同一个运算符完成不同的功能即同一个运算符可以有不同的功能的方法叫做运算符重载.运算符重载是静态多态性的体现. 运算符重载的规则 重载公式 ...

  7. C&num;可扩展编程之MEF学习笔记&lpar;五&rpar;：MEF高级进阶

    好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...

  8. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http&colon;&sol;&sol;www&period;imooc&period;com&sol;code&sol;3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  9. bootstrap学习笔记之基础导航条 http&colon;&sol;&sol;www&period;imooc&period;com&sol;code&sol;3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

  1. Android 字体相关总结

    1.Android系统默认支持三种字体,分别为:“sans”, “serif”,  “monospace“  系统缺省方式(经试验缺省采用采用sans): 2.在Android中可以引入其他字体 3. ...

  2. Untracked files不想add

    $ git status On branch feature/20160420_complain_630222 Untracked files: (use "git add <file ...

  3. codeforces 725&sol;C

    Hidden Word time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  4. 怎么限制Google自动调整字体大小

    Google默认的字体大小是12px,当样式表中font-size<12px时,或者没有明确指定字体大小,则在chrome浏览器里字体显示是12px. 最近在写代码玩的时候,我也碰到了 在FF和 ...

  5. dwz分页实现分析

    dwz给我们提供了一个很好的列表UI 我对它的分析后将页面分为四个部分 <form id="pagerForm" method="post" action ...

  6. tomcat解析之简单web服务器&lpar;图&rpar;

    链接地址:http://gogole.iteye.com/blog/587163 之前有javaeyer推荐了一本书<how tomcat works>,今天晚上看了看,确实不错,第一眼就 ...

  7. 破译情报-NOIP2016提高组复赛模拟试题

    [题目描述] 最近国安人员截获了一份 RB 国的秘密情报, 全文都是经过加密的,每个单 词都很长.破译人员想到先把单词化简一下,方法是把每个单词尽量取短些的前 缀,但所取的前缀不能是其他单词的前缀. ...

  8. Eclipse 安装最新SVN插件

    本文来源:http://liujianqiao398.blog.163.com/blog/static/181827257201331194610634/ Eclipse 安装最新SVN插件 2013 ...

  9. &lbrack;转&rsqb; ES6 import&sol;export&colon;模块导入导出方式

    export导出语法 // default exports export default 42; export default {}; export default []; export defaul ...

  10. Oracle 基础学习笔记

    知识点 一.登陆数据库: 登陆数据库: sqlplus system/oracle123456 二.新建用户.授权(连接数据库.创建表.表空间.查询某用户下的表) 语法: create user [用 ...