.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. Django学习笔记（一）——安装，创建项目,配置

    疯狂的暑假学习之 Django学习笔记(一) 教材  书<The Django Book> 视频:csvt Django视频 1.创建项目 django‐admin.py startpro ...

  2. Qt Installer Framework的学习（三）

    Qt Installer Framework的学习(三) Qt Installer Framework的样例中.通常是这种:config目录一般放了一个config.xml文件,包括的是安装配置xml ...

  3. CSDN的技术问题

    说CSDN是国内最大最好的技术论坛.预计不会有人反对,可是...CSDN的人,如管理员懂技术吗? 假设您长期在CSDN混.您就会发现他们相当懂得......强奸技术!

  4. 蓝桥杯--算法提高 排列数 （简单dfs）

    算法提高 排列数   时间限制:1.0s   内存限制:256.0MB      问题描述 0.1.2三个数字的全排列有六种,按照字母序排列如下: 012.021.102.120.201.210 输入 ...

  5. 32.QT绘图

    widget.h #ifndef WIDGET_H #define WIDGET_H #include <QWidget> #include <QPainter> #inclu ...

  6. BroadcastReceiver register 广播的动态注册方式

    1.动态注册方式特点:在代码中进行注册后,当应用程序关闭后,就不再进行监听. 下面是具体的例子: BroadcastTest.java package com.czz.test; import and ...

  7. python爬虫：爬取医药数据库drugbank

    这个是帮朋友做的,难点就是他们有一个反爬虫机制,用request一直不行,后面我就用selenium直接把网页copy下来,然后再来解析本地的html文件,就木有问题啦. 现在看来,写得有点傻,多包涵 ...

  8. HDU 1257 最少拦截系统【最长上升子序列】

    解题思路:可以转化为求最长上升子序列来做,还是可以用an与按升序排列后的an求LCS来做,为防止超时,用滚动数组优化一下就可以了. 最少拦截系统 Time Limit: 2000/1000 MS (J ...

  9. UIView 绘制渲染机制

    #前言 APP页面优化对小编来说一直是难题,最近一直在不断的学习和总结 ,发现APP页面优化说到底离不开view的绘制和渲染机制.网上有很多精彩的博客,小编借鉴之前N多大牛研究成果,同时结合自己遇到的 ...

  10. javascript: 基于原型的面向对象编程

    Douglas Crockford指出javascript是世界上最被误解的编程语言.由于javascript缺少常见的面向对象概念,许多程序猿认为javascript不是一个合适的语言.我在做第一个 ...