.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. C语言：一个涉及指针函数返回值与printf乱码、内存堆栈的经典案例

    一个奇怪的C语言问题,涉及到指针.数组.堆栈.以及printf.以下实现: 整数向字符串的转换,返回字符串指针,并在main函数中调用printf显示. #include<stdio.h> ...

  2. SQL语法精讲（包括建库、建表、建视图、查询、增加、删除、)

    SQL语法精讲(包括建库.建表.建视图.查询.增加.删除.修改) SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELE ...

  3. Java之旅--Web.xml解析

    Windows的IIS,是用UI界面进行网站的配置.Linux以下的差点儿全部系统,都是使用配置文件来进行配置,Java容器(JBoss/Tomcat/Jetty/WebSphere/WebLogic ...

  4. Java基础之关键字

    一.Java关键字总览 基本数据类型(9):boolean.char.byte.short.int.long.float.double.null 变量引用(2):super.this 类.方法.变量修 ...

  5. OAuth2建立webapi认证服务供自己的客户端使用--密码模式

    场景:你自己实现了一套webApi,想供自己的客户端调用,又想做认证. 第一步:通过vs2015建立web api项目,Startup.cs,这个类将会作为Owin的启动类. 第二步:在webapi. ...

  6. Memcache 一些经验和技巧

    Memcached一些特性和限制 在Memcache中可以保存的item数据量是没有限制的,只要内存足够. Memcache单进程最大使用内存为2g,要使用更多的内 -存,可以分多个端口开启多个Mem ...

  7. IIS7.0与AP.NET

    IIS7在请求的监听和分发机制上进行了革新性的改进,主要体现在对于Windows进行激活服务(Windows Process Activation Service ,WAS)的引入,将原来的W3SVC ...

  8. Win10 UI入门 pivot multiable DataTemplate

    this is a dynamic pivot with sliderable navigation and multiableDatatemplate Control 看了 alexis 大哥的pi ...

  9. Dynamic programming language

    动态改变运行时结构 Dynamic programming language, in computer science, is a class of high-level programming la ...

  10. ASP版_阿里大于短信API Demo

    阿里大于申请地址:http://www.alidayu.com 阿里大于短信发送Demo: ******index.asp************* <%@LANGUAGE="VBSC ...