zoukankan      html  css  js  c++  java
  • bootstrap 表单样式

    <!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- 768px) {
                .flabel{text-align: right;line-height: 30px;}
                .finput{padding:0;}
                .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>
  • 相关阅读:
    小程序开发经验分享汇总
    VUE插件总结
    前端开发中一些好用的chrome插件总结
    Vue-meta
    element-ui Cascader 级联选择器 点击label选中
    盘点一些跨端框架
    vue 组件自定义v-model
    mac更新node,npm版本
    数组/对象数组去重
    基于vue和svg的树形UI
  • 原文地址:https://www.cnblogs.com/tonghaolang/p/5997401.html
Copyright © 2011-2022 走看看