<!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. Java并发基础——Thread

    并发编程可以使我们将程序划分为多个分离的,独立运行的任务.通过多线程机制,这些独立任务都将由执行线程来驱动.在使用线程时,CPU将轮流给每个任务分配占用时间,每个任务都觉得自己在占用CPU,但实际上C ...

  2. BotVS配置托管者-基于阿里云

    1. 上传Linux 64位 托管者并解压在 https://www.botvs.com/m/add-node 上下载Linux 64位 托管者, 当前下载地址 https://dn-botvs.qb ...

  3. 关于xmlHttp.status最新统计

    AJAX中请求远端文件.或在检测远端文件是否掉链时,都需要了解到远端服务器反馈的状态以确定文件的存在与否. Web服务器响应浏览器或其他客户程序的请求时,其应答一般由以下几个部分组成:一个状态行,几个 ...

  4. 权限大全-linux基础

    一.文件权限 (1)文件的权限主要针对三类对象定义: u:属主,owner    g:属组,group    o:其他,other    权限有三种:    r:可读    w:可写    x:可执行 ...

  5. thinkjs 文件上传

    采用thinkjs框架写前后端 let formdata = new FormData($('form')[0]); $('#fileUpload').submit(function (e) { e. ...

  6. PhoneGap + Dreamweaver 5.5 无法在模拟器中打开的问题

    版权声明:本文为博主原创文章,未经博主允许不得转载. 原博客地址为:http://blog.csdn.net/dupang/article/details/8248335 按照网上的教程搭建Dream ...

  7. mybatis的延迟加载

    1. 什么是延迟加载 举个例子: 如果查询订单并且关联查询用户信息.如果先查询订单信息即可满足要求,当我们需要查询用户信息时再查询用户信息.把对用户信息的按需去查询就是延迟加载. 所以延迟加载即先从单 ...

  8. C# 爬虫 抓取小说

    心血来潮,想研究下爬虫,爬点小说. 通过百度选择了个小说网站,随便找了一本小书http://www.23us.so/files/article/html/13/13655/index.html. 1. ...

  9. 【BUG】插入或者更新超过限制后写入数据库失败

      Error Code: 1064 - You have an error in your SQL syntax; check the manual that corresponds to your ...

  10. 【搬运工】之YSlow安装教程

    YSlow安装教程(我只是搬运工,推荐好用的地址) 地址: https://devework.com/yslow.html YSlow (解析为 why slow)是雅虎基于网站优化规则推出的工具,帮 ...