.form-control——将单独的表单控件赋予一些全局样式，如默认宽度width:100%。

.form-group——包裹表单控件，获得最好的排列；

.form-inline——将表单设置为内联表单，仅仅适用于视口（viewport）至少在 768px 宽度时；

.sr-only——将label标签隐藏；

.help-block——用于设置提示文本；

.form-horizontal——能够将label标签和控件组水平并排布局；

.radio-inline、.checkbox-inline——将对应控件水平排列。

.form-control-static——将p元素设置为静态控件。

.has-error、.has-warning、has-success——分别相应校验状态。

.has-feedback——为控件加入辅助图标（与图标引用类联合使用）；

.input-lg——创建大一些的表单控件。

.input-sm——创建小一些的表单控件；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>CSS全局样式_栅格系统</title>

    <!--

    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">

    -->

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <style type="text/css">

    </style>

</head>

<body>

<div class="container">

    <form role="form" class="form-inline">

        <div class="form-group">

            <label class="sr-only">username</label>

            <input type="text" class="form-control" placeholder="username/邮箱/手机号"/>

        </div>

        <div class="form-group">

            <label class="sr-only">password</label>

            <input type="password" class="form-control" placeholder="输入6-14位英文和数字组合password"/>

        </div>

        <div class="form-group">

            <label class="sr-only">生日</label>

            <input type="date" class="form-control" placeholder="出生年月"/>

        </div>

        <div class="form-group">

            <label class="sr-only">上传头像</label>

            <input type="file" class="form-control input-lg"/>

            <p class="help-block">选择您须要的头像文件</p>

        </div>

    </form>

    <form role="form" class="form-horizontal">

        <div class="form-group">

            <label class="col-sm-4 control-label">username</label>

            <div class="col-sm-8">

                <input type="text" class="form-control" placeholder="username/邮箱/手机号"/>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-4 control-label">password</label>

            <div class="col-sm-8">

                <input type="password" class="form-control" placeholder="输入6-14位英文和数字组合password"/>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-4 control-label">生日</label>

            <div class="col-sm-8">

                <input type="date" class="form-control" placeholder="出生年月"/>

            </div>

        </div>

        <div class="form-group">

            <div class="col-sm-offset-4 col-sm-8">

                <div class="checkbox">

                    <label>

                        <input type="checkbox"/>记住password

                    </label>

                </div>

            </div>

        </div>

        <div class="form-group">

            <div class="col-sm-offset-4 col-sm-8">

                <button class="btn btn-default">登录</button>

            </div>

        </div>

    </form>

    <form role="form" class="form-horizontal">

        <div class="form-group">

           <label>喜欢的球队</label>

            <div class="checkbox">

                <label>

                    <input type="checkbox"/>广州恒大

                </label>

                <label>

                    <input type="checkbox"/>上海上港

                </label>

                <label>

                    <input type="checkbox"/>北京国安

                </label>

            </div>

        </div>

        <div class="form-group">

           <label>性别</label>

            <div class="radio">

                <label>

                    <input type="radio" checked name="gender"/>男

                </label>

                <label>

                    <input type="radio" name="gender"/>女

                </label>

            </div>

        </div>

        <div class="form-group">

            <label>所属城市</label>

            <select class="form-control" multiple>

                <option>北京</option>

                <option>上海</option>

                <option>广州</option>

            </select>

        </div>

        <div class="form-group">

            <label class="sr-only"></label>

            <textarea class="form-control" rows="5" placeholder="请文明用语"></textarea>

        </div>

        <p class="form-control-static">请依照邮箱格式输入：hello@163.com</p>

        <div class="form-group">

            <label>password</label>

            <input class="form-control" type="password"  disabled/>

        </div>

        <div class="form-group">

            <label>昵称</label>

            <input class="form-control" type="text" placeholder="胖虎" readonly/>

        </div>

        <div class="form-group has-error has-feedback">

            <label>username</label>

            <input class="form-control" type="text" />

            <span class="glyphicon glyphicon-remove form-control-feedback"></span>

        </div>

        <div class="form-group has-success has-feedback">

            <label>username</label>

            <input class="form-control" type="text" />

            <span class="glyphicon glyphicon-ok form-control-feedback"></span>

        </div>

        <div class="form-group has-warning has-feedback">

            <label>username</label>

            <input class="form-control" type="text" />

            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>

        </div>

    </form>

</div>

</body>

</html>

Bootstrap全局CSS样式之表单的更多相关文章

  1. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  2. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  3. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  4. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  5. Bootstrap--全局css样式之表单

    单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input>.<textarea> 和 <select> 元素都将被默认设置 ...

  6. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

  7. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

  8. Bootstrap - 全局css样式类

    状态类 通过这些状态类可以为行或单元格设置颜色. .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning ...

  9. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

随机推荐

  1. XML系统学习

    参考:W3School XML基本概念 1.XML是eXtensible Markup Language,使用DTD(Document Type Definition)来描述数据,主要是为传输和存储数 ...

  2. 浅谈cocos2dx(17) 中单例管理模式

    ----我的生活,我的点点滴滴!. 首先明白一个问题.什么是管理者模式,管理类是用来管理一组相关对象的类,他提供了訪问对象的接口,假设这么说比較抽象的话.我们来看下cocos2dx中都有哪些类是管理类 ...

  3. Spark RDD概念学习系列之RDD的本质特征

    不多说,直接上干货!

  4. SQLSERVER 链接服务器

    1. 执行代码 EXEC sp_addlinkedserver @server='XLZFSqlServer', --链接服务器别名 @srvproduct='', @provider='SQLOLE ...

  5. 什么是CNN--Convolutional Neural Networks

    是近些年在机器视觉领域很火的模型,最先由 Yan Lecun 提出. 如果想学细节可以看 Andrej Karpathy 的 cs231n . How does it work? 给一张图片,每个圆负 ...

  6. Java对象、Json、Xml转换工具Jackson使用

    在Java项目中將一个对象转换成一段Json格式的字符串是非常常见的,能够实现这种需求的工具包也比较多,例如Gson.JSON-lib.Jackson等等.本文主要介绍Jackson的使用,Jacks ...

  7. 【SQL优化】SQL优化工具

    SQLAdvisor 是由美团点评公司北京DBA团队开发维护的 SQL 优化工具:输入SQL,输出索引优化建议. 它基于 MySQL 原生词法解析,再结合 SQL 中的 where 条件以及字段选择度 ...

  8. GRpc-Go使用笔记

      linux下配置GRpc-golang 1.git中下载protobuf包 2.解压(/usr/local/protobuf) unzip protobuf-cpp-3.0.0-alpha-3.z ...

  9. performSelector与objc_msgSend

    - perform:(SEL)aSelector { if (aSelector) return objc_msgSend(self, aSelector); else return [self er ...

  10. to_string函数（将数字转换成字符串）

    一般常用的转换字符串的方法std::stringstream,但是效率较低;目前C ++11提供了std::to_string 效率方面:C风格的sprintf()没有动态分配内存效率最高;std:: ...