​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap3 表单控件大小 - 迹忆客(jiyik.com)</title>
6
    <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
7
    <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
8
    <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
9
</head>
10
<body>
11
​
12
<form role="form">
13
    <div class="form-group">
14
        <input class="form-control input-lg" type="text" placeholder=".input-lg">
15
    </div>
16
    <div class="form-group">
17
        <input class="form-control" type="text" placeholder="默认输入">
18
    </div>
19
    <div class="form-group">
20
        <input class="form-control input-sm" type="text" placeholder=".input-sm">
21
    </div>
22
    <div class="form-group">
23
    </div>
24
    <div class="form-group">
25
        <select class="form-control input-lg">
26
            <option value="">.input-lg</option>
27
        </select>
28
    </div>
29
    <div class="form-group">
30
        <select class="form-control">
31
            <option value="">默认选择</option>
32
        </select>
33
    </div>
34
    <div class="form-group">
35
        <select class="form-control input-sm">
36
            <option value="">.input-sm</option>
37
        </select>
38
    </div>
39
​
40
    <div class="row">
41
        <div class="col-lg-2">
42
            <input type="text" class="form-control" placeholder=".col-lg-2">
43
        </div>
44
        <div class="col-lg-3">
45
            <input type="text" class="form-control" placeholder=".col-lg-3">
46
        </div>
47
        <div class="col-lg-4">
48
            <input type="text" class="form-control" placeholder=".col-lg-4">
49
        </div>
50
    </div>
51
</form>
52
​
53
</body>
54
</html>

Design By 迹忆客 © 2023 jiyik.com ALL RIGHT RESERVED 冀ICP备15007416号-2