dtcms 模板下载 单例模式 less winforms layout Vanilla JS 百度seo关键词优化 建筑资质 后台管理ui bootstrap后台管理模板 h5表格模板 php零基础入门视频 jq获取元素宽度 arduino程序 查看rabbitmq版本 python刷题 安卓虚拟机运行windows python面向对象 java字符串 java中string java多态 搭建java环境 java重写和重载 javapattern java文件重命名 java命令 java怎么学 java分布式开发 网络克隆 虚拟打印机安装 批处理if 数组删除指定元素 有线网卡驱动下载 linux安卓模拟器 quickchm android下载文件 卸载mysql 女圣骑 失心迷宫怎么打 苹果x怎么用
当前位置: 首页 > 学习教程  > 

Bootstrap中的水平排列的表单

2020/10/16 17:43:19 文章标签: bootstrap文本框

水平排列的表单通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就…

 

水平排列的表单

通过为表单添加 

.form-horizontal
 类,并联合使用 Bootstrap 预置的栅格类,可以将 
label
 标签和控件组水平并排布局。这样做将改变 
.form-group
 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 
.row
 了。

Email
Password
Remember me
复制
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>



本文链接: http://www.dtmao.cc/news_show_300029.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?