案例:Bootstrap案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8"> 
5
    <title>Bootstrap 实例 - 表单控件大小</title>
6
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">  
7
    <script src="/js/bootstrap/jquery.min.js"></script>
8
    <script src="/js/bootstrap/bootstrap3.3.7.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">