zoukankan      html  css  js  c++  java
  • Bootstrap 表单布局示例

    <html>
    
    <head>
    
        <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
            h4 {
                margin-top: 25px;
            }
    
            .row {
                margin-bottom: 20px;
            }
    
            .row .row {
                margin-top: 10px;
                margin-bottom: 0;
            }
    
            [class*="col-"] {
                padding-top: 15px;
                padding-bottom: 15px;
                /* background-color: #eee; */
                /* background-color: rgba(86,61,124,.15); */
                /* border: 1px solid #ddd; */
                border: 1px solid rgba(86, 61, 124, .2);
            }
    
            hr {
                margin-top: 40px;
                margin-bottom: 40px;
            }
        </style>
    </head>
    
    <body>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">Panel heading</div>
            <div class="panel-body">
                <!-- <div class="form-inline"></form> -->
                <div class="form-inline">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail3">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword3">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default">Sign in</button>
                    </form>
                </div>
    
                <!-- Table -->
                <table class="table">
                </table>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-6"><label>工单号:</label>8794949</div>
                        <div class="col-xs-6"><label>制造订单:</label>8794949</div>
                    </div>
                </div>
            </div>
    </body>
    
    </html>
    

      

  • 相关阅读:
    perl 调短信接口
    MySQL处理千万级数据查询、分页
    tomcat 设置path 访问路径
    Tomcat 设置内存大小
    Tomcat 80端口启动 必须是root
    tomcat server.xml配置解析
    Perl 发送邮件
    单身北漂生活二、三事(上)——北漂18年(8)
    tomcat 应用访问
    Perl 采集监控日志插入数据库
  • 原文地址:https://www.cnblogs.com/ms_senda/p/11503529.html
Copyright © 2011-2022 走看看