<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. STC等单片机一开机就停电模式烧写程序办法

    为了测试一个低功耗程序,程序一开机就进入停机模式,结果刷不回来了,经过两个小时的试验,必须4个线同时插拔vcc,rxd,txd,gnd.如果只断开vcc是不行的.

  2. Win10下Prolific USB-to-Serial Comm Port驱动提示不能使用

    选择从计算机的设备驱动程序列表中选取 选择第一个安装即可.

  3. 10.tesseract

    1.Tesseract-OCR简介  一个Google支持的开源的OCR图文识别开源项目.支持多种语言(我使用的是3.02 版本,支持包括英文,简体中文,繁体中文),支持Windows,Linux,M ...

  4. Lua Doc生成工具

    Luadoc http://keplerproject.github.io/luadoc/ Overview LuaDoc is a documentation generator tool for ...

  5. promise.all方法合并请求接口的两个值

    function promise1 = new Promise((resolve,reject)=>{ return result1 }) function promise2 = new Pro ...

  6. Linux之备份(tar)/解压与压缩（gzip,bzip2,xz）【待完善】

    [本博文,待完善] 以data原始文件为例,同tar备份,用xz压缩,实现备份->压缩整个过程的正向过程(生成.tar.xz)与其逆过程(先解压,后还原备份文件) 1.备份(tar) tar - ...

  7. JavaScript面试技巧（二）：JS-Web-API

    1.从基础知识到JSWebAPI 2.DOM 本质 节点操作 结构操作 3.BOM 4.事件 5.Ajax XMLHttpRequst 跨域 6.存储

  8. Unsupervised Domain Adaptation Via Domain Adversarial Training For Speaker Recognition

    年域适应挑战(DAC)数据集的实验表明,所提出的方法不仅有效解决了数据集不匹配问题,而且还优于上述无监督域自适应方法.        

  9. C 捕获 lua 异常错误

    参考文章https://blog.codingnow.com/2015/05/lua_c_api.html , , )) { printf("file=%s, func=%s, line=% ...

  10. vue通俗易懂的子组件向父组件传值

    不多BB直接上图: 如上图:为子组件绑定点击事件 如上图:send方法触发父组件绑定的事件 如上图:为父组件绑定触发事件@myEvent="aa" aa方法接受子组件传过来的值