<!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. 关于php中的include html文件的问题,为什么html可以在php中执行

    之前在w3shXXl看的教程,上面对include的解释是把指定的文件复制到这条指令执行的地方. 这真是坑到我了..... 在了解mvc的时候,控制器显示视图时需要用include包含html视图文件 ...

  2. python+selenium自动化软件测试（第4章）：场景判断与封装

    4.1 显示等待WebDriverWait 前言:在脚本中加入太多的sleep后会影响脚本的执行速度,虽然implicitly_wait()这种隐式等待在一定程度上节省了很多时间.但是一旦页面上某些j ...

  3. Day-1: Python准备知识

    python简介 不同于c语言这种贴近硬件的言语,Python是用来编写应用程序的高级编程语言.Python是一款开源软件,所以它有非常完善的代码库,宝库内置的基本库和众多开发者提供的第三方库.这就允 ...

  4. DB Error || Warning

    数据库在进行增删改查时有时候会发生错误,当在程序中一个操作总是不起作用的时候,我们可以尝试如下方法: 1.输出sql语句,有的sql语句可能是通过一些字符拼接完成的,这时候可能会发生'', +之类的混 ...

  5. python程序之profile分析

    操作系统 : CentOS7.3.1611_x64 python版本:2.7.5 问题描述 1.Python开发的程序在使用过程中很慢,想确定下是哪段代码比较慢: 2.Python开发的程序在使用过程 ...

  6. C++类静态成员与类静态成员函数

       当将类的某个数据成员声明为static时,该静态数据成员只能被定义一次,而且要被同类的所有对象共享.各个对象都拥有类中每一个普通数据成员的副本,但静态数据成员只有一个实例存在,与定义了多少类对象 ...

  7. java的jar包加密

    由于项目要求(虽然我觉得代码没什么机密可言...),写好的jar包需要做一定加密处理 这里提供两种办法,一种奇葩,一种通用 1. 直接修改jar文件: 具体步骤: 在代码中插入一段不会运行的到的代码 ...

  8. Redis在java中的使用

    1.首先安装Redis环境.可以在Windows.linux.别的服务器上搭建Redis环境 2.在java工程中导入必须的jar包 如maven上导入两个jar] <!-- Redis必须包 ...

  9. MySQL （九）-- 代码执行结构、函数、存储过程

    1 代码执行结构 代码执行结构有三种:顺序结构.分支结构和循环结构. 1.1 分支结构 分支结构:实现准备多个代码块,按照条件选择性执行某段代码. 在MySQL中只有if分支. 基本语法 if 条件判 ...

  10. Python并发编程协程(Coroutine)之Gevent

    Gevent官网文档地址:http://www.gevent.org/contents.html 基本概念 我们通常所说的协程Coroutine其实是corporate routine的缩写,直接翻译 ...