<!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. 7.31.2 this关键字

    this用在所有方法中:    用来区分局部变量和成员变量的名字二义性! 如:在set方法中这样写:name = name; 则java会遵循"谁近谁优先"的规则,会给局部变量赋值 ...

  2. hdu 5040 Instrusive

    Instrusive Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Tota ...

  3. JSP的getRequestDispatcher()与sendRedirect()的区别

    getRequestDispatcher()与sendRedirect()的区别   1.request.getRequestDispatcher()是请求转发,前后页面共享一个request ; r ...

  4. 又一流氓推广Microsoft Edge，我勒个去

    最新的Windows10 的升级也是醉了,不得不吐槽一个非常流氓的浏览器推广:Microsoft Edge(这小婊砸). 为了将之前的历史包袱IE干掉,这次微软也是蛮拼的,直接把IE从电脑里干掉了,你 ...

  5. 进程管理之system

    system定义 #include<stdlib.h> int system(const char *command); 首先要知道,system函数是c库中的函数,而不是系统调用.其实s ...

  6. el-input监听不了回车事件

    vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-inp ...

  7. vue 父子组件传参

    父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...

  8. MySQL（四）--蠕虫复制、查询

    1 蠕虫复制 蠕虫复制:从已有的数据中去获取数据,然后将数据又进行新增操作,数据成倍增加. 表创建高级操作:从已有创建新表(复制表结构) create table 表名 like 数据库.表名; 蠕虫 ...

  9. 结对编程1---基于Flask的四则运算题目生成器

    项目代码地址 / WEB应用地址 / 合作伙伴iFurySt博文链接 需求分析 本次程序是基于原有的控制台四则运算器的基础上,改成WEB的形式,同时还增加了一些新的功能.同时因为交互方式的改变,代码也 ...

  10. 个人作业3——个人总结（Alpha阶段）。

    一:个人总结: 陆续几周以及加上上上一周的Alpha冲刺阶段,完成了实验室故障报修系统的基础框架以及内容.这个过程苦中有乐,或许苦中寻乐更加恰当,以一个小组团队的形式来完成这个项目,我们大家就变成了一 ...