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

表单

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标签和表单元素上下排列）

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

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

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

<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学习笔记<五>（表单一）

多选下拉框效果图

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

单选，复选框

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"/>

效果图

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

调整表单元素尺寸

元素尺寸调节：

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学习笔记<五>（表单一）

表单控件禁用

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>

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

表单提示消息

配合表单元素显示提示消息：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学习笔记<五>（表单一）

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

Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
bootstrap学习笔记细化(表单)
主要属性: class="form-inline" 水平排列 class="form-group" 组键 form-control 圆角方框发光 input-l ...
Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
（转）Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类概念在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
java之jvm学习笔记五(实践写自己的类装载器)
java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...
C++基础学习笔记五：重载之运算符重载
C++基础学习笔记五:重载之运算符重载什么是运算符重载用同一个运算符完成不同的功能即同一个运算符可以有不同的功能的方法叫做运算符重载.运算符重载是静态多态性的体现. 运算符重载的规则重载公式 ...
C&num;可扩展编程之MEF学习笔记(五)：MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http&colon;//www&period;imooc&period;com/code/3120
为导航条添加标题.二级菜单及状态加入导航条标题在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
bootstrap学习笔记之基础导航条 http&colon;//www&period;imooc&period;com/code/3111
基础导航条在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

ListView 刷新加载控件
1.MaterialRefreshLayout刷新加载: 导入依赖: compile 'com.cjj.materialrefeshlayout:library:1.3.0' 布局 <com.c ...
通过MSSQl作业定时执行批处理BAT文件
前言有些时候,我们可能会需要定时执行一下批处理来达到一定的目的,比如Oracle数据库的定时备份,当然Oracle也可以通过Rman实现定时备份.我们大多数的时候是通过操作系统的计划任务实现定时执行 ...
Codevs 1507 酒厂选址
1507 酒厂选址时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 传送门题目描述 Description Abstinence(戒酒)岛的居民们酷爱一种无酒精啤酒 ...
FineUI&lowbar;动态绑定Grid
private void InitGrid() { string _sql = GetSql().ToLower().Replace("select", "") ...
SQL SERVER表不能修改表结构的处理方法
SQL SERVER表提示不能修改表结构,这究竟是什么原因呢?下面就为您介绍处理该问题的方法,如果您在SQL SERVER表修改方面遇到过问题,不妨一看. 新装的SQL SERVER 2008,打开原 ...
iframe中父页面和子页面查找元素的方法
从父页面中查找iframe子页面中对象的方法:JS: document.getElementById('iframe').contentWindow //查找iframe加载的页面的window对象 ...
关于eclipse创建web工程没有生成webapp文件夹的解决方案
先看工程建立的是不是配置的打成War包,然后按下图所示
Node&period;js ECONNREFUSED错误
1 现象 node服务器遇见此错误,如下:events.js:71throw arguments[1]; // Unhandled 'error' event^Error: connect ECON ...
Luogu T24242 购物券Ⅰ（数据已加强）
这是一道比赛时的题目,但由于我没报名,所以浪费了一个大好的切水题的机会. 是经典的meet in middle(折半搜索)的模板题,但是之前一直没找到这种题目,今天终于看到了. 由于m的范围极大,因此 ...
ReactNative WebView组件详解
在开发Android的时候,一般我们会有一些加载网页的需求,或者执行一些JavaScript,我们都知道在Android中实现这个功能的控件是WebView,在ReactNative中也有实现此类需求 ...