推荐的bootstrap之 formgroup表单布局样式

一直没能找到比较好的Form Group样式，直到找到如下样式

转自 https://www.cnblogs.com/jokerjason/p/5721349.html

其他：https://blog.csdn.net/xiaoxiaohai0000/article/details/86719988

https://blog.csdn.net/weixin_38134491/article/details/86420147

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

                    <fieldset>

                        <legend>配置数据源</legend>

                       <div class="form-group">

                          <label class="col-sm-2 control-label" for="ds_host">主机名</label>

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

                             <input class="form-control" id="ds_host" type="text" placeholder="192.168.1.161"/>

                          </div>

                          <label class="col-sm-2 control-label" for="ds_name">数据库名</label>

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

                             <input class="form-control" id="ds_name" type="text" placeholder="msh"/>

                          </div>

                       </div>

                       <div class="form-group">

                          <label class="col-sm-2 control-label" for="ds_username">用户名</label>

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

                             <input class="form-control" id="ds_username" type="text" placeholder="root"/>

                          </div>

                          <label class="col-sm-2 control-label" for="ds_password">密码</label>

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

                             <input class="form-control" id="ds_password" type="password" placeholder="123456"/>

                          </div>

                       </div>

                    </fieldset>

                    <fieldset>

                         <legend>选择相关表</legend>

                        <div class="form-group">

                           <label for="disabledSelect"  class="col-sm-2 control-label">表名</label>

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

                              <select id="disabledSelect" class="form-control">

                                 <option>禁止选择</option>

                                 <option>禁止选择</option>

                              </select>

                           </div>

                        </div>

                    </fieldset>

                       <fieldset>

                         <legend>字段名</legend>

                        <div class="form-group">

                           <label for="disabledSelect"  class="col-sm-2 control-label">表名</label>

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

                              <select id="disabledSelect" class="form-control">

                                 <option>禁止选择</option>

                                 <option>禁止选择</option>

                              </select>

                           </div>

                        </div>

                    </fieldset>

                </form>

效果图：

随机推荐

STS中配置MyBatis代码生成器
1.STS工具菜单项Help > Eclipse Marketplace... 2.输入“mybatis”关键字搜索 3.选择MyBatis Generator 1.3.7进行安装 4.安装成功 ...
【转一篇出处不明的文章】 Windows多线程通信方式
多线程通信的方法主要有以下三种: 1.全局变量进程中的线程间内存共享,这是比较常用的通信方式和交互方式.注:定义全局变量时最好使用volatile来定义,以防编译器对此变量进行优化. 2.Messa ...
反射导出 Excel
/// <summary> /// List 数据导出Excel /// </summary> /// <param name="list">数 ...
MVVM Light 新手入门（2）：ViewModel / Model 中定义“属性” ，并在View中调用
今天学习MVVM架构中“属性”的添加并调用,特记录如下,学习资料均来自于网络,特别感谢翁智华的利刃 MVVMLight系列. 一个窗口的基本模型如下: View(视图) -> ViewModel ...
Wpf中显示Unicode字符
1. 引言今天在写一个小工具,里面有些字符用Unicode字符表示更合适.但是一时之间却不知道怎么写了.经过一番查找,终于找到了办法.记到这里,一是加深印象,二则以备查询. 2. C#中使用Unic ...
Day 12 作业.(完成)
1,将装饰器的所有知识点总结完成,将这几天的作业再整理一遍,还是不会的,就抄代码,一遍不行就三遍,直到所有知识点,所有题都整明白. 2,有时间就画流程图,梳理知识点. 3,上面两项完成的写以下作业. ...
FFmpeg软硬解和多线程解码
一. AVCodecContext解码上下文 1.avcodec_register_all() : 注册所有的解码器 2.AVCodec *avcodec_find_decoder(enum AVCo ...
838. Push Dominoes
There are N dominoes in a line, and we place each domino vertically upright. In the beginning, we si ...
jzoj5894
先前綴和一發,問題表示求[0-l2][0-r2]滿足條件的數的個數假設可以把某一個數拆分成[前面任意個數][00-0-11-1(個數相同)]的區間那麼問題會簡單的多,因為任意一個a位的整數分別xo ...
前端入门html（标签介绍）
day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html # web本质示例 import socket sk = socket.socke ...

推荐的bootstrap之 formgroup表单布局样式

推荐的bootstrap之 formgroup表单布局样式的更多相关文章

随机推荐

热门专题