<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>

　　

Bootstrap 表单布局示例的更多相关文章

  1. Bootstrap表单布局样式

    1.并排和下拉选项 <form class="form-horizontal" role="form"> <fieldset> < ...

  2. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  3. Bootstrap -- 表格样式、表单布局

    Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...

  4. Bootstrap 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

  5. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  6. Bootstrap~表单Form

    回到目录 在进行自己的后台改版时,大体布局都使用了bootstrap,剩下的表单部分没理由不去使用它,对于表单的美化和布局,bootstrap做的也是很不错的,有大气的边框,多功能的按钮及宏观的表单布 ...

  7. 【原创】bootstrap框架的学习 第八课 -[bootstrap表单]

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 吹着表单或基本表单 向父 <form> 元素添加 role="form". 把标签 ...

  8. [WPF自定义控件库]简单的表单布局控件

    1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...

  9. 测开之路一百一十一：bootstrap表单

    bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...

随机推荐

  1. Spring之2：HierarchicalBeanFactory接口

    HierarchicalBeanFactory:HierarchicalBeanFactory继承BeanFactory并扩展使其支持层级结构.getParentBeanFactory()方法或者父级 ...

  2. JDBC缓冲池配置druid.properties

    driverClassName=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/mytest?characterEncoding=UTF-8 ...

  3. session和cookie有什么区别?

    1.存储位置不同 cookie的数据信息存放在客户端浏览器上. session的数据信息存放在服务器上. 2.存储容量不同 单个cookie保存的数据<=4KB,一个站点最多保存20个Cooki ...

  4. Java8新特性 - 方法引用与构造器引用

    方法引用 若Lambda体中的内容有方法已经实现了,我们可以使用"方法应用",可以理解为方法引用是Lambda表达式的另外一种表现形式. 使用操作符"::"将方 ...

  5. vijo 1456最小总代价

    题意:中文题... 题解:状态比较多,可以说是状压的基础题吧,我们定义dp[i][j],j为一个二进制数,每位0表示接触过该物品,1表示没有接触过;j表示当前物品在谁手上.递推的顺序注意一下就好 ac ...

  6. RabbitMQ集群部署、高可用和持久化

    RabbitMQ 安装和使用 1.安装依赖环境 在 http://www.rabbitmq.com/which-erlang.html 页面查看安装rabbitmq需要安装erlang对应的版本 在 ...

  7. Java QuickSelect

    Java QuickSelect /** * <html> * <body> * <P> Copyright 1994-2018 JasonInternationa ...

  8. 解读生命密码的基本手段 ——DNA测序技术的前世今生

    解读生命密码的基本手段 ——DNA测序技术的前世今生 任鲁风  于军 (中国科学院基因组科学及信息重点实验室,北京基因组研究所) DNA(脱氧核糖核酸)和RNA(核糖核酸)是生命体的两种最基本组成物质 ...

  9. 【转载】Asp.Net中应用程序的事件响应次序

    Asp.Net应用程序事件响应次序是指Application事件的相应次序,涉及到的事件包括Application_Start事件.BeginRequest事件.AuthenticateRequest ...

  10. 【转载】程序设计过程中SQL语句Where 1=1的作用

    在Asp.Net网站或者Java网站的程序设计的过程中,很多时候我们可以看到拼接SQL语句的写法的时候都可以看到最前面有个Where 1=1这个条件,其实Where 1=1这是个恒等式,SQL语句写成 ...