.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. iOS项目开发实战——制作视图的缩放动画

    视图的大小应该是随时可控的.今天我们就来实现对一个View的缩放动画.该动画的实现与位移动画,透明度动画稍有不同. 详细实现例如以下: import UIKit class ScaleViewCont ...

  2. 0x32 约数

    bzoj1053: [HAOI2007]反素数ant bzoj1257: [CQOI2007]余数之和sum Hankson的趣味题 暴力枚举..约数 #include<cstdio> # ...

  3. SAN (Storage Attached Network)，即存储区域网络

    NAS和SAN既竞争又合作,很多高端NAS的后端存储就是SAN.NAS和SAN的整合也是存储设备的发展趋势,比如EMC的新产品VNX系列. 关于NAS和SAN的区别,可以列出很多来.比如带宽大小,距离 ...

  4. 【POJ 1704】 Georgia and Bob

    [题目链接] http://poj.org/problem?id=1704 [算法] 阶梯博弈 [代码] #include <algorithm> #include <bitset& ...

  5. TCP/IP协议族简介

    OSI网络分层介绍 网络结构的标准模型是OSI模型,由国际互联网标准化组织定义的网络分层模型.虽然目前没有完全按照这种模型实现的网络协议栈,但是学习这个模型对于我们理解网络协议还是很有帮助的. 1.O ...

  6. CentOS7开启网络配置

    虚拟机在安装时可以开启网络 如果没有开启的话 可以通过以下操作 ip  addr 查看是否开启网络 没有开启的话 cd /etc/sysconfig/network-scripts/ 然后 执行 ls ...

  7. linux服务器卸载本机默认安装的jdk

    1.      查看系统安装的版本情况: rpm -qa | grep jdk rpm -qa | grep gcj 2.      查看并删除 [root@iZ2zeedm3x12d8xb4g15a ...

  8. Spark RDD概念学习系列之Pair RDD的action操作

    不多说,直接上干货! Pair RDD的action操作 所有基础RDD 支持的行动操作也都在pair RDD 上可用

  9. ifame子页实现父页面刷新（或跳转到指定页面）

    <script>parent.location.replace('../D_DailyManager/Add.aspx?id=" + x + "');</scri ...

  10. php配置站点

    第一步:需要打开三个文件 1.C:\wamp\bin\apache\apache2.4.9\conf\httpd.conf 2.C:\wamp\bin\apache\apache2.4.9\conf\ ...