视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >Bootstrap教程 > 正文

    bootstrap中如何设置表单的宽高

    原创2019-07-27 15:41:582518 关注公众号:每天精选资源文章推送

    您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度。

    下面的实例演示了这点:

    <form role="form">
      <div class="form-group">
        <input class="form-control input-lg" type="text" placeholder=".input-lg">
      </div>
      <div class="form-group">
        <input class="form-control" type="text" placeholder="默认输入">
      </div>
      <div class="form-group">
        <input class="form-control input-sm" type="text" placeholder=".input-sm">
      </div>
      <div class="form-group"></div>
      <div class="form-group">
        <select class="form-control input-lg">
          <option value="">.input-lg</option>
        </select>
      </div>
      <div class="form-group">
        <select class="form-control">
          <option value="">默认选择</option>
        </select>
      </div>
      <div class="form-group">
        <select class="form-control input-sm">
          <option value="">.input-sm</option>
        </select>
      </div>
      <div class="row">
        <div class="col-lg-2">
          <input type="text" class="form-control" placeholder=".col-lg-2">
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder=".col-lg-3">
        </div>
        <div class="col-lg-4">
          <input type="text" class="form-control" placeholder=".col-lg-4">
        </div>
      </div></form>

    运行结果如下:

    1.jpg

    推荐:bootstrap入门教程

    以上就是bootstrap中如何设置表单的宽高的详细内容,更多请关注php中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:bootstrap 表单
  • 推荐:PHP从基础到实战教程视频

    相关文章

    相关视频


    专题推荐