Javascript & JQuery&Ajax/bootstrap

input-group.html

CitronLemon 2019. 2. 25. 11:22

bs3-input-group-addon:text


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <div class="container">
        <div class="page-header">
            <h2>bs3-input-group-addon-text</h2>
        </div>
 
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" placeholder="Amount">
        </div>
 
        <div class="input-group">
            <input type="text" class="form-control" placeholder="금액을 입력하세요">
            <div class="input-group-addon">원</div>
        </div>
 
        <div class="input-group">
                <div class="input-group-addon">A</div>
                <input type="text" class="form-control" placeholder="Amount">
                <div class="input-group-addon">B</div>
        </div>
    </div>
cs


<결과물>





bs3-input-group-text-btn

1
2
3
4
5
6
7
8
9
10
11
12
    <div class="container">
        <div class="page-header">
            <h1>bs3-input-group-text-btn</h1>
        </div>
        
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search">
            <span class="input-group-btn">
                <button type="button" class="btn btn-default">Go!</button>
            </span>
        </div>
    </div>
cs



<결과물>




bs3-input-group-text-btn에서 button을 select로 변경


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <div class="container">
        <div class="page-header">
            <h1>bs3-input-group-text-btn에서 button을 select로 변경<br/>
            </h1>
        </div>
 
        <div class="input-group">
            <span class="input-group-btn">
                <!-- 추가적인 style 적용 필요함-->
                <select name='choose' class="form-control" style="width: auto; margin-right: -1px">
                    <option value="">item 01</option>
                    <option value="">item 02</option>
                    <option value="">item 03</option>
                </select>
            </span>
            <input type="text" class="form-control" placeholder="Search">
            <span class="input-group-btn">
                <button type="button" class="btn btn-default">Go!</button>
            </span>
        </div>
    </div>
cs


<결과물>






저작자표시 비영리 변경금지