<!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. 第一天的Python之路 笔记

     打了***号的都是老师要求明天早上默写的  编程语言的作用(程序员使用的编程语言达到命令电脑工作的目的)及与操作系统和硬件的关系(编程 语言用来开发软件,软件基于操作系统之上,操作系统又基于硬件之上 ...

  2. Yii2 在模块modules间跳转时，url自动加模块名

    如目的地址product/detail, 当前模块是admin, 访问时如果目的url'product/detail',会变成'admin/product/detail'. 解决方法:url改成'/p ...

  3. php ddos 安全处理代码

    <?php//查询禁止IP$ip =$_SERVER['REMOTE_ADDR'];$fileht=".htaccess2";if(!file_exists($fileht) ...

  4. [读书笔记] 四、SpringBoot中使用JPA 进行快速CRUD操作

    通过Spring提供的JPA Hibernate实现,进行快速CRUD操作的一个栗子~. 视图用到了SpringBoot推荐的thymeleaf来解析,数据库使用的Mysql,代码详细我会贴在下面文章 ...

  5. [2017-08-25]100行CSharp代码利用dynamic写个DSL(特定领域语言)

    最近看<CLR via C#(第4版)> 读到第五章末尾dynamic基元类型时,看了下作者的一个利用dynamic动态调用string类型的Contains方法(静态方法)的实现,突然发 ...

  6. java使用字节流和字符流实现文件复制

    大家在Java开发中都会遇到文件复制的文件,众所周知,需要通过文件输入输出流实现. 那究竟该怎么做那,话不多说,直接上代码: 一,使用字节流复制文件 public class FileByteCopy ...

  7. 浅析多线程 对象锁和Class锁

    一.前言 本来想在另外一篇文章说的,发现可能篇幅有点大,所以还是另开一篇博文来说好了.知识参考<Java多线程编程核心技术>,评价下这本书吧——大量的代码,简单的说明,真像在看博客.不过这 ...

  8. Selenium八种基本定位方式---基于python

    from selenium import  webdriver driver=webdriver.Firefox() driver.get("https://www.baidu.com&qu ...

  9. poj3463 最短路和比最短路长1的路径数

    这题需要很好的理解Dij. 在Dij的基础上,每个点多一个次短路的长度和数量进行控制. 那么在队列中,最短路控制时出现n次,次短路控制出现n次.注意松弛条件中val值和最短路.次短路的关系. 这题需要 ...

  10. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...