Bootstrap 사용하기

08 Aug 2018 html/css

1. Bootstrap

  • 웹사이트 제작시에 많이 사용 되는 요소들을 모아놓은 오픈소스
  • 반응형 웹페이지를 손쉽게 만들 수 있다.
  • 수많은 유, 무료 테마

2. 사용해보기

1) js, css

  • cdn 링크 : http://getbootstrap.com/docs/4.1/getting-started/introduction/ 참고

image

  • 다운로드 : http://getbootstrap.com 참고

3. 샘플

1) BUTTON

  • http://getbootstrap.com/docs/4.1/components/buttons/
  • 샘플코드 ```html 


- 결과

![image](https://user-images.githubusercontent.com/13219787/61306598-e32bcc00-a827-11e9-92fc-4e9d07139b6a.png)

## 2) input
- http://getbootstrap.com/docs/4.1/components/input-group/
- 샘플소스
```html
기본 <input type="text">

<input type="text" class="form-control" placeholder="GEUN.kr">


<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="addon1">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="addon1">
</div>

<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Username" aria-describedby="addon2">
    <div class="input-group-append">
        <span class="input-group-text" id="addon2">@geun.kr</span>
    </div>
</div>
  • 결과

image

3) NavBar

  • https://getbootstrap.com/docs/4.1/components/navbar/
  • 샘플코드 ```html

- 결과

![image](https://user-images.githubusercontent.com/13219787/61306765-1706f180-a828-11e9-9432-eb9911ff8383.png)

## 4) Table
- https://getbootstrap.com/docs/4.1/content/tables/
- 샘플소스

```html
<table>
    <thead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    </thead>
    <tbody>
    <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
    </tr>
    <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
    </tr>
    </tbody>
</table>

<table class="table table-striped table-bordered">
    <thead>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
    </thead>
    <tbody>
    <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
    </tr>
    <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
    </tr>
    <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
    </tr>
    <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
    </tr>
    </tbody>
</table>
  • 결과

image

5) Pagination

  • https://getbootstrap.com/docs/4.1/components/pagination/
  • 샘플소스
<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
  • 결과

image

6) Modal

  • https://getbootstrap.com/docs/4.1/components/modal/
  • 샘플소스
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
  • 결과

image

7) containers

  • https://getbootstrap.com/docs/4.0/layout/overview/#containers
  • 샘플소스
<div class="container">

</div>
  • 결과

image

  • 샘플소스
<div class="container-fluid">

</div>
  • 결과

image

8) Grid 시스템

  • https://getbootstrap.com/docs/4.1/layout/grid/
  • 참고 : http://shoelace.io/
  • 브라우저 크기에 따라 최대 12개의 컬럼을 어떻게 배치할 건지에 대한 정의
  • 샘플코드
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
    <div class="col-sm-6" style="background-color:yellow;">50%</div>
    <div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<br>

<div class="row">
    <div class="col-sm-4" style="background-color:yellow;">33.33%</div>
    <div class="col-sm-4" style="background-color:orange;">33.33%</div>
    <div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>
<br>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
    <div class="col-sm" style="background-color:yellow;">25%</div>
    <div class="col-sm" style="background-color:orange;">25%</div>
    <div class="col-sm" style="background-color:yellow;">25%</div>
    <div class="col-sm" style="background-color:orange;">25%</div>
</div>
<br>

<div class="row">
    <div class="col" style="background-color:yellow;">25%</div>
    <div class="col" style="background-color:orange;">25%</div>
    <div class="col" style="background-color:yellow;">25%</div>
    <div class="col" style="background-color:orange;">25%</div>
</div>

PC

image

태블릿

image

폰

image

추가적으로 아래 사이트를 가시면 커스텀한 Bootstrap compenent를 사용할 수 있습니다.

  • https://bootsnipp.com/

Related Posts