<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. HanLP 关键词提取算法分析

    HanLP 关键词提取算法分析 参考论文:<TextRank: Bringing Order into Texts> TextRank算法提取关键词的Java实现 TextRank算法自动 ...

  2. C++ vector和list的主要用法区别

    vector可以直接通过下标访问,list不可以 1.vector ; i < userTypes.size(); i++) { str = userTypes[i].typeName; } 2 ...

  3. Spring IoC 依赖注入的方法大全 XML配置方式

    Spring 依赖注入 构造方法注入 ①   根据索引注入 <bean name="student" class="cn.bdqn.SpringDI.Student ...

  4. JS算法练习四

    JS算法练习 1.将使用空格分隔单词使用驼峰命名连接起来: var str="HELLO world welcome to my hometown"; /*--先输入一个有空格分隔 ...

  5. 使用Hexo在github上搭建个人博客

    最近正好在学习前端开发,想着搭建一个属于自己的个人博客,把自己的技能树整理整理,温故而知新. 如果你有前端开发经验,那么搭建这样的博客就很简单了. 一 什么是Hexo     Hexo 是一个快速.简 ...

  6. 关于Sublime Text 3的几个问题总结

    问题1:Sublime Text 3的注册码. 注册码网上搜有很多,所以可以去网上找.我现在给的可能以后就不能用了,而且我也是网上找的... 这个现在最新版本是可用的. —– BEGIN LICENS ...

  7. Android小知识汇总

    1.Android Studio 将module编译打包成aar文件,module依赖的 (例如 compile 'com.zhy:autolayout:1.4.3' )不会被打包进入aar文件,应用 ...

  8. ASP.NET MVC - XML节点查找

    Jquery操作Xml Jquery1.2开始不再支持XPath表达式. <?xml version="1.0" encoding="utf-8" ?&g ...

  9. c/C++编译的程序占用的内存分为以下几个部分

    首先要搞清楚编译程序占用的内存的分区形式:一.预备知识—程序的内存分配一个由c/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)—由编译器自动分配释放,存放函数的参数值,局部变量的值等 ...

  10. Deep Learning(花书)教材笔记-Math and Machine Learning Basics(线性代数拾遗)

    I. Linear Algebra 1. 基础概念回顾 scalar: 标量 vector: 矢量,an array of numbers. matrix: 矩阵, 2-D array of numb ...