bootstrap中如何设置表单的宽高


本文摘自PHP中文网,作者尚,侵删。


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

下面的实例演示了这点:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<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>

运行结果如下:

阅读剩余部分

相关阅读 >>

bootstrap有哪些优势

c#如何使用bootstrap模板

bootstrap是哪个组织创立的

bootstrap如何读

为什么前端不用bootstrap

bootstrap里面有什么东西

bootstrap是响应式吗

如何使用bootstrap实现年月日的时间选择

bootstrap轮播太慢怎么设置

bootstrap支持手机吗

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...