.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. 从头认识java-13.5 利用泛型构建复杂模型

    这一章节我们来展示一下如何利用泛型构建复杂模型? 1.元组列表 我们之前已经说过元组是一个复杂的模型,能够返回多对象. package com.ray.ch11; import java.util.A ...

  2. 【UML】UML世界的构成

    UML概述 全名:Unified Modeling Language 中文名:统一建模语言 发展历程:"始于1997年一个OMG标准.它是一个支持模型化和软件系统开发的图形化语言,为软件开发 ...

  3. ios-UI-汤姆猫德游戏实现

    // //  ViewController.m //  UI-猜拳游戏 // //  Created by jzq_mac on 15/7/15. //  Copyright (c) 2015年 jz ...

  4. HDOJ 题目3518 Boring counting（后缀数组，求不重叠反复次数最少为2的子串种类数）

    Boring counting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  5. 7.matlab字符串分析

    1 字符串处理函数 clc; clear all; str='My name is Robin.'; disp(str); %字符串的输出 str_size=size(str) %字符串的长度 str ...

  6. mybatis的二级缓存的使用

    1.引入ehcache的jar包和mybatis整合ehcache的jar包: <!-- ehchache --> <dependency> <groupId>ne ...

  7. Java高级——交通灯管理系统

    本方法模拟了现实生活中的交通信号灯的情况 1.先构建Road类,此类可以创建12个方向的路 代码如下: package com.springtie.traffic; import java.util. ...

  8. Android DrawerLayout设置左右侧滑菜单为全屏

    我们可以在MainActivity中获取屏幕宽度后动态赋值给侧滑菜单. 在oncreate时 DisplayMetrics metric = new DisplayMetrics(); getWind ...

  9. 『转』Writing Well

    这是前辈Julie Zhuo的最新关于写作的文章,昨天写下-进行总结和阅读思考 这是一篇关于提笔写作的文章,首发在The looking glass...前辈每周都会回答一个读者的问题耶--This ...

  10. 带你学C带你飞！

    C语言免费课程推荐:带你学C带你飞! 想学习C语言,首先就要了解什么是C语言: C语言是一门通用计算机编程语言,应用广泛.C语言的设计目标是提供一种能以简易的方式编译.处理低级存储器.产生少量的机器码 ...