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>
    

      

  • 相关阅读:
    idea常用快捷键及操作
    Ubuntu 装nexus
    ubuntu安装gitlab
    ubuntu安装jdk,maven,tomcat
    ubuntu安装gitlab-ci-runner、注册
    ubuntu开启远程shell,开启上传下载
    Ubuntu安装软件提示boot空间不足
    POJ3461 KMP简单变形输出模式串在主串出现的次数
    涨姿势stl map['a']['a']=b;
    对链表的操作(数据结构线性表算法设计练习)
  • 原文地址:https://www.cnblogs.com/ms_senda/p/11503529.html
Copyright © 2011-2022 走看看