<form class="form-horizontal" role="form">

            <fieldset>

                <legend>基础信息</legend>

                <div class="col-md-4">

                    <div class="form-group">

                        <label class="col-sm-3 control-label">标准类别</label>

                        <div class="col-sm-9">

                            <select class="form-control" style="width:60%" autocomplete="off" id="cdd_filetype">

                                <option value="" selected="selected">食品加工产品</option>

                            </select>

                        </div>

                    </div>

                    <div class="form-group">

                        <label class="col-sm-3 control-label">名称</label>

                        <div class="col-sm-9">

                            <input class="form-control" style="width:60%" id="username" type="text" placeholder="" />

                        </div>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="form-group">

                        <label class="col-sm-3 control-label">标准编号</label>

                        <div class="col-sm-9">

                            <input type="text" id="cdd_filename" name="FileName" style="width:60%" value="GB 9681-88" placeholder="标准编号" class="form-control" required="" />

                        </div>

                    </div>

                    <div class="form-group">

                        <label class="col-sm-3 control-label">别名</label>

                        <div class="col-sm-9">

                            <input class="form-control" style="width:60%" id="biename" type="text" placeholder="" />

                        </div>

                    </div>

                </div>

                <div class="col-md-4">

                    <div class="form-group">

                        <label class="col-sm-3 control-label">过期时间</label>

                        <div class="col-sm-9">

                            <input type="text" class="layui-input" id="test1" style="width:auto" placeholder="yyyy-MM-dd">

                        </div>

                    </div>

                </div>

            </fieldset>

</form>

效果图:

bootstrap 3列表单布局的更多相关文章

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

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

  2. Bootstrap常用表单布局

    参考链接: https://blog.csdn.net/shuai_wy/article/details/78978023

  3. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

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

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

  5. Bootstrap CSS 表单

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

  6. bootstrap之表单

    一.表单布局 向父 <form> 元素添加 role="form". 把标签和控件放在一个带有 class .form-group 的 <div> 中.这是 ...

  7. BootStrap 智能表单系列 首页 (持续更新中...)

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  8. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  9. BootStrap 智能表单系列 八 表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...

随机推荐

  1. Newtonsoft.Json添加项

    JObject jo = (JObject)JsonConvert.DeserializeObject(result); ") { string domain=(jo["data& ...

  2. 微信小程序开发(3) 热门电影

    在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及电影主页和详情页页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成, ...

  3. 简单回射程序之处理accept返回EINTR错误的服务器程序版本

    #include <stdio.h> #include <stdlib.h> #include <time.h> #include <errno.h> ...

  4. GCC编译器原理（三）------编译原理三：编译过程（2-1）---编译之词法分析

    二.编译 引用文档:https://blog.csdn.net/chdhust/article/details/9040647 编译过程就是把预处理完的文件进行一系列词法分析.语法分析.语义分析及优化 ...

  5. html去掉滑动条

    实例: .week { /*text-align: left;*/ /*display: inline-table;*/ margin: 0 auto; padding: 0; list-style: ...

  6. Coursera, Big Data 1, Introduction (week 1/2)

    Status: week 2 done. Week 1, 主要讲了大数据的的来源 - 机器产生的数据,人产生的数据(比如社交软件上的update, 一般是unstructed data), 组织产生的 ...

  7. luogu P3295 [SCOI2016]萌萌哒

    传送门 题目条件"两个子串\(S[l_1,r_1],S[l_2,r_2]\)完全相同"等价于\(\forall i \in[0,r_1-l_1+1],S_{l1+i}=S_{l_2 ...

  8. Mysql-5.7.20-winx64绿色版安装步骤

    Mysql-5.7.20-winx64绿色版安装步骤 1. 下载 mysql-5.7.20-winx64.zip 2.解压 解压到指定目录: C:\AppDate\mysql-5.7.20-winx6 ...

  9. var/let/const区别何在？？（转载）

    原文地址:http://www.cnblogs.com/liuhe688/p/5845561.html let和const有很多相似之处,先说一说let吧. 1. let添加了块级作用域 我们知道,J ...

  10. 1259 整数划分 V2

    设dp[n]为整数n的分割函数,由五边形定理得到: dp[n] = dp[n-1] + dp[n-2] - dp[n-5] - dp[n-7]…… 我们将其分为两部分计算 第一部分为 :( dp[n- ...