<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. impala系列:impala特有的操作符

    --=======================Impala 特有的操作符--=======================ILIKE 操作符, 忽略大小写的 like 操作符.REGEXP 操作符 ...

  2. 二.LinkedList原理及实现学习总结

    一.LinkedList实现原理概述 LinkedList 和 ArrayList 一样,都实现了 List 接口,但其内部的数据结构有本质的不同.LinkedList 是基于链表实现的(通过名字也能 ...

  3. EF 复杂语句的使用

    //EF多重排序 context.Serials .Where(s => ("," + s.VideoGenreIds + ",").Contains(& ...

  4. 基于Django框架对MongoDB实现增删改查

    在上一篇中,咱们已经实现了Scrapy框架爬取数据,并且存储到Mongodb数据库, 接下来呢,,,,,,,,,,,,, 咱们就要对这些数据进行操作. 目标:从Mongodb数据库取出数据,通过Dja ...

  5. npm 常用命令详解（转载）

    学习gulp的使用时,对npm的掌握是必不可少的,经常到npm官网查询文档让我感到不爽,还不如整理了一些常用的命令博客上,于是根据自己的理解简单翻译过来,终于有点输出,想学习npm这块的朋友不可错过这 ...

  6. #6278. 数列分块入门 2（询问区间内小于某个值 xx 的元素个数）

    题目链接:https://loj.ac/problem/6278 题目大意:中文题目 具体思路:数列分块模板题,对于更新的时候,我们通过一个辅助数组来进行,对于原始的数组,我们只是用来加减,然后这个辅 ...

  7. android4.4之后的HttpUrlConnection的实现是基于okhttp

    首先看HttpUrlConnection使用 URL url = new URL("http://www.baidu.com"); HttpURLConnection urlCon ...

  8. C中的malloc/free与C++中的new/delete的用法与区别

    1.先介绍malloc/free的用法: 原型函数: void *malloc(long NumBytes); 该函数分配了NumBytes个字节的内容,分配的空间是堆空间 malloc()根据用户所 ...

  9. 【NLP CS224N笔记】Lecture 3 GloVe： Global Vectors for Word Representation

    I. 复习word2vec的核心思路 1. Skip-gram 模型示意图: 2.word vectors的随机梯度 假设语料库中有这样一行句子: I love deep learning and N ...

  10. 论文笔记：Rich feature hierarchies for accurate object detection and semantic segmentation

    在上计算机视觉这门课的时候,老师曾经留过一个作业:识别一张 A4 纸上的手写数字.按照传统的做法,这种手写体或者验证码识别的项目,都是按照定位+分割+识别的套路.但凡上网搜一下,就能找到一堆识别的教程 ...