<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">

    <style>

        .form-control-feedback{right:15px;}

        @media (min-width: 768px) {

            .flabel{text-align: right;line-height: 30px;}

            .finput{padding:;}

            .form-control-feedback{right:0px;}

        }

    </style>

</head>

<body>

    <div class="container">

        <div>

            <form>

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

                    <div class="col-sm-2 flabel">

                        <label for="">标签:</label>

                    </div>

                    <div class="col-sm-6 finput">

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

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

                    </div>

                    <div class="col-sm-4 ftips">

                        <div class="help-block">提示</div>

                    </div>

                </div>

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

                    <div class="col-sm-2 flabel">

                        <label for="">标签:</label>

                    </div>

                    <div class="col-sm-6 finput">

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

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

                    </div>

                    <div class="col-sm-4 ftips">

                        <div class="help-block">提示</div>

                    </div>

                </div>

            </form>

        </div>

    </div>

</body>

</html>

bootstrap 表单样式的更多相关文章

  1. Bootstrap表单样式

    <form class="form-horizontal" role="form"> <fieldset> <legend> ...

  2. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  3. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  4. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  5. 基于Bootstrap表单验证

    基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...

  6. 第二百三十四节，Bootstrap表单和图片

    Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表单 Bootstrap ...

  7. bootstrapValidator.js，最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  8. html5 表单样式 表单验证1 2 3

    html5 表单样式 ie9以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. HTML表单样式

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

随机推荐

  1. C#打印九九乘法表

    C#打印九九乘法表... ---------------------------------- using System; using System.Collections.Generic; usin ...

  2. python的while嵌套 99乘法表 三角形和正方形

    python的99乘法表 num1=1 while num1<=9 : num2 = 1 while num2 <=num1 : print (str(num2)+"X" ...

  3. 安装python+setuptools+pip+nltk

    环境:Win10 64 + python 2.7 32 bit Source installation (for 32-bit or 64-bit Windows) 1.Install Python: ...

  4. 【Java学习笔记之三十二】浅谈Java中throw与throws的用法及异常抛出处理机制剖析

    异常处理机制 异常处理是对可能出现的异常进行处理,以防止程序遇到异常时被卡死,处于一直等待,或死循环. 异常有两个过程,一个是抛出异常:一个是捕捉异常. 抛出异常 抛出异常有三种形式,一是throw, ...

  5. Linux和win7(win10)双系统时间错误问题 时间相差8小时

    转载自 http://m.2cto.com/os/201204/126212.html 有修改 前一段时间刚装了centos 5.4和win7的双系统.发现win7的系统时间不对,机子没上网,每天开机 ...

  6. spring mvc:注解@ModelAttribute妙用

    在Spring mvc中,注解@ModelAttribute是一个非常常用的注解,其功能主要在两方面: 运用在参数上,会将客户端传递过来的参数按名称注入到指定对象中,并且会将这个对象自动加入Model ...

  7. js学习--变量作用域和作用域链

    作为一名菜鸟的我,每天学点的感觉还是不错的.今天学习闭包的过程中看到作用域与作用域链这两个概念,我觉得作为一名有追求的小白,有必要详细了解下. 变量的作用域 就js变量而言,有全局变量和局部变量.这里 ...

  8. 操作系统：ucore的部分Bug&挑战练习

    ucore是清华大学提供的一个学习操作系统的平台.ucore有完整的mooc视频与说明文档. https://objectkuan.gitbooks.io/ucore-docs/content/# 本 ...

  9. tkinter第二章(添加图片，背景图片)

    #插入文件图片import tkinter as tk root = tk.Tk() #创建一个标签类, [justify]:对齐方式textLabel = tk.Label(root,text=&q ...

  10. 【★】深入BGP原理和思想【第…

    前言:学思科技术我想说,浅尝辄止,不是天才千万别深钻.和我研究高等数学一样,越深入就会发现越多的问题与不合理之处.尤其对于IT界,算法的最终解释权还是掌握在老外手中,所以对于有些细节,我们" ...