推荐的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>

效果图：

随机推荐

团队项目第六周——Alpha阶段项目复审（盐酸队）
Alpha阶段项目复审小组优点缺点,bug报告名次天冷记得穿秋裤队功能比较新颖,可以离线下载,做的比较完整在下载电影时容易中断 1 只会嘤嘤嘤队游戏和记单词的融合,也比较新颖部分浏览 ...
Swagger中显示注释
Webapi中Swagger中不显示注解的解决方法 1.找见生成项目时候生成的xml文件.查看存放路劲方法: 右键项目-->点击属性-->在属性中选择“生成”就能看见xml文件存放路径: ...
使用FluentScheduler实现定时任务管理
之前定时任务一直用的Windows服务,前段时间发现FluentScheduler这个框架,他跟Quarz.Net,Hangfire一样都是任务调度框架,但是相对使用而言我觉得FluentSchedu ...
Restframework 视图组件与序列号组件的应用.
models from django.db import models # Create your models here. class Course(models.Model): title=mod ...
hdu2829 Lawrence
题目链接:戳我朴素DP:\(dp[i][j]=dp[i-1][k]+cost[k+1][j]\) 其中dp[i][j]表示炸第i次的时候,处理到前j个的最小值是多少.cost[i][j]表示的是i, ...
leetcode 123. 买卖股票的最佳时机 III JAVA
题目: 给定一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成两笔交易. 注意: 你不能同时参与多笔交易(你必须在再次购买前出 ...
关于popup
p1.html:点击添加按钮,开启窗口,打开p2.html,填写数据后返回p3.html,p3.html将数据回传到p1.html,且关闭自己 p1.html: <!DOCTYPE html ...
MySQL(慢日志记录)
day63 参考:https://www.cnblogs.com/wupeiqi/articles/5716963.html
程序猿的日常——Java基础之clone、序列化、字符串、数组
其实Java还有很多其他的基础知识,在日常工作技术撕逼中也是经常被讨论的问题. 深克隆与浅克隆在Java中创建对象有两种方式: 一种是new操作符,它创建了一个新的对象,并把对应的各个字段初始化成默 ...
编写一致的符合习惯的javascript
本文转自我司的编码规范~ ==== 引言将要叙述的这些原则旨对javascript开发的风格做指导,并非指定性的规则需绝对服从.如果需要找出一条必须遵循的原则,应该是保持代码的一致性和风格统一. 除 ...

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

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

随机推荐

热门专题