본문 바로가기
Front-end/Web

부트스트랩

by 안녕주 2021. 2. 22.

1. Bootstrap

01. Bootstrap이란?

  • Bootstrap.css를 불러오고, 해당 파일에 정의된 버튼, 레이아웃 등을 가져와서 사용
  • 클래스로 간단하게 불러와서 사용
  • 트위터에서 개발

02. Bootstrap 시작하기

www.bootstrapcdn.com/( 크롬 팁 - Ctrl + f 후 찾고자 하는 키워드 입력해 찾을 수 있음)

<CSS적용하는 법>

1. 파일의 url을 바로 지정

2. 파일을 다운받아 경로 지정

 

03. 버전 3와 4의 차이

  • CSS와 화면 그리드에서 px -> em(버전 4)
  • IE8 이하 버전 지원 종료 (버전 4)

04. 3을 쓰는 이유

아직까지 기반 플러그인들이 3에 있는 경우가 많음

 ex) summernote.org/에서 3버전을 사용

2. 레이아웃

다 더하면 12, 한줄은 12개로 이뤄져 있다.

<div class="container">
        <div class="col-sm-4">첫번째</div>
        <div class="col-sm-4">두번째</div>
        <div class="col-sm-4">세번째</div>
</div>

 

 

화면사이즈 표현
768px보다 클때 col-sm-
970px보다 클때 col-md
1170px보다 클때 col-lg
768px보다 작을때 col-xs-

 

<768px보다 작을 때는 1, 이상에서는 2, 970px 이상에서는 3>

md와 sm을 같이 쓰면된다.

<div class="container">
        <div class="col-sm-6 col-md-4">첫번째</div>
        <div class="col-sm-6 col-md-4">두번째</div>
        <div class="col-sm-6 col-md-4">세번째</div>
    </div>

3. 콤포넌트

-1) 버튼

bootstrapk.com/ --> 컴포넌트

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>

    <div class="container" style="padding-top:50px;">
        <table class="table table-bordered table-hover">
            <tr>
                <th>제목</th>
                <th>작성일</th>
                <th>삭제</th>
            </tr>
            <tr>
                <td>안녕하세요</td>
                <td>2019-03-24</td>
                <td>
                    <a href="#" class="btn btn-danger">삭제</a>
                </td>
            </tr>
            <tr>
                <td>안녕하세요</td>
                <td>2019-03-24</td>
                <td>
                    <a href="#" class="btn btn-danger">삭제</a>
                </td>
            </tr>
        </table>
            <a href="" class="btn btn-default">작성하기</a>
    </div>
    
</body>
</html>

 

-2) 테이블

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>테이블</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>

    <div class="container" style="padding-top:50px;">
        <table class="table table-bordered table-hover">
            <tr>
                <th>제목</th>
                <th>작성일</th>
                <th>삭제</th>
            </tr>
            <tr>
                <td>안녕하세요</td>
                <td>2019-03-24</td>
                <td>
                    <a href="#" class="btn btn-danger">삭제</a>
                </td>
            </tr>
            <tr>
                <td>안녕하세요</td>
                <td>2019-03-24</td>
                <td>
                    <a href="#" class="btn btn-danger">삭제</a>
                </td>
            </tr>
        </table>

    </div>
    
</body>
</html>

 

-3) 패널

bootstrapk.com/components/--> Ctrl + f 를통해 '패널' 입력 후 설명보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container" style="padding-top:100px;">

        <div class="panel panel-default">
            <div class="panel-heading">
                bootstrap 수업
            </div>
            <div class="panel-body">
                안녕하세요 <br />
                안녕하세요 <br />
                안녕하세요 <br />
                안녕하세요 <br />
                안녕하세요 <br />
                안녕하세요
            </div>
        </div>

    </div>
    

</body>
</html>

 

-4) 폼

: 회원가입에서의 입력 양식같은 것

bootstrapk.com/components/--> Ctrl + f 를통해 '입력 그룹' 입력 후 설명보기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>폼</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
li { margin-top:20px; }
</style>
</head>
<body>
    
    <ul>
        <li class="form-inline">
            <label for="">아이디 :</label>
            <input type="text" class="form-control">
        </li>
        <li class="form-inline">
            <label for="">비밀번호 :</label>
            <input type="password" class="form-control">
        </li>
        <li class="form-inline">
            <label for="">생년월일 :</label>
            <select name="" id="" class="form-control">
                <option value="">년도</option>
                <option value="">2000</option>
                <option value="">2001</option>
                <option value="">2002</option>
                <option value="">2003</option>
                <option value="">2004</option>
            </select>
            -
            <select name="" id="" class="form-control">
                <option value="">월</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
                <option value="">6</option>
                <option value="">7</option>
                <option value="">8</option>
                <option value="">9</option>
                <option value="">10</option>
                <option value="">11</option>
                <option value="">12</option>
            </select>
            -
            <select name="" id="" class="form-control">
                <option value="">일</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
                <option value="">6</option>
                <option value="">7</option>
                <option value="">8</option>
                <option value="">9</option>
                <option value="">10</option>
                <option value="">11</option>
                <option value="">12</option>
                <option value="">13</option>
                <option value="">14</option>
                <option value="">15</option>
                <option value="">16</option>
                <option value="">17</option>
                <option value="">18</option>
                <option value="">19</option>
                <option value="">20</option>
                <option value="">21</option>
                <option value="">22</option>
                <option value="">23</option>
                <option value="">24</option>
                <option value="">25</option>
                <option value="">26</option>
                <option value="">27</option>
                <option value="">28</option>
                <option value="">29</option>
                <option value="">30</option>
                <option value="">31</option>
            </select>
        </li>
        <li class="">
            <input type="checkbox">
            <label for="">약관에 동의 하시겠습니까?</label>
        </li>

    </ul>

</body>
</html>

(주석단축키 Ctrl + /)

- form-inline으로 모양 잡아주기! 중요

-5) 네비게이션

: jQuery + bootstrap.min.js 두가지가 필요하다

code.jquery.com/--> 버전3의 minified copy, jQuery가 JS보다 상단에 있어야함

www.bootstrapcdn.com/legacy/bootstrap/--> 버전3의 JS

bootstrapk.com/components/-->Ctrl + f '네비게이션'을 통해 검색

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>네비게이션</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container" style="padding-top: 100px">
        <nav class="navbar navbar-inverse"> <!--bar의 색상 변환-->
            <div class="container-fluid">
                <div class="navbar-header">
                     <!-- 오른쪽 메뉴바 -->
                     <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>  <!--바가 3개짜리-->
                        <span class="icon-bar"></span> 
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="#">
                        bootstrap 강의
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="nav_menu"> <!-- data target : nav_menu-->
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="">HTML</a>
                        </li>
                        <li class="active"> <!--활성화-->
                            <a href="">CSS</a>
                        </li>
                        <li>
                            <a href="">JS</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

    </div>

</body>

</html>

- 창이 축소되었을 때 

4. 실습 - 로그인

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>로그인화면</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container" style="padding-top: 50px;">
  <nav class="navbar navbar-inverse">
    <!--bar의 색상 변환-->
    <div class="container-fluid">
      <div class="navbar-header">
        <!-- 오른쪽 메뉴바 -->
        <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu"
          aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#">
          bootstrap 강의
        </a>
      </div>
      <div class="collapse navbar-collapse" id="nav_menu">
        <!-- data target : nav_menu-->
        <ul class="nav navbar-nav">
          <li>
            <a href="">HTML</a>
          </li>
          <li class="active">
            <!--활성화-->
            <a href="">CSS</a>
          </li>
          <li>
            <a href="">JS</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="col-md-4 col-md-offset-4"> <!--offset으로 중앙정렬-->
    <div class="panel panel-default">
      <div class="panel-heading">
          로그인
      </div>
      <div class="panel-body">
          <input type="text" class="form-control" placeholder="ID">
          <br>
          <input type="text" class="form-control" placeholder="PASSWORD">
          <br>
          <button class="btn btn-lg btn-success btn-block">로그인</button>
      </div>
  </div>
  </div>

  </div>


</body>

</html>

5. 실습 - font awesome

: 아이콘이 필요한 경우

fontawesome 4 cdn --> www.bootstrapcdn.com/fontawesome/--> copy 

fontawesome 4 --> fontawesome.com/v4.7.0/--> icons --> facebook찾기

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>로그인화면</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div class="container" style="padding-top: 50px;">
    <nav class="navbar navbar-inverse">
      <!--bar의 색상 변환-->
      <div class="container-fluid">
        <div class="navbar-header">
          <!-- 오른쪽 메뉴바 -->
          <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu"
            aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="#">
            bootstrap 강의
          </a>
        </div>
        <div class="collapse navbar-collapse" id="nav_menu">
          <!-- data target : nav_menu-->
          <ul class="nav navbar-nav">
            <li>
              <a href="">HTML</a>
            </li>
            <li class="active">
              <!--활성화-->
              <a href="">CSS</a>
            </li>
            <li>
              <a href="">JS</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="col-md-4 col-md-offset-4">
      <!--offset으로 중앙정렬-->
      <div class="panel panel-default">
        <div class="panel-heading">
          로그인
        </div>
        <div class="panel-body">
          <input type="text" class="form-control" placeholder="ID">
          <br>
          <input type="text" class="form-control" placeholder="PASSWORD">
          <br>
          <button class="btn btn-lg btn-success btn-block">로그인</button>
          <br>
          <a href="" class="btn btn-lg btn-primary btn-block">
            <i class="fa fa-facebook" aria-hidden="true"></i>
            페이스북 로그인
          </a>
        </div>
      </div>
    </div>

  </div>

</body>

</html>

6. 실습 - 게시판

Shift + Alt + ↑↓ 로 위의 내용 복사 가능

bootstrapk.com/-->컴포넌트 --> Ctrl + f '페이지네이션'

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>템플릿(js포함)</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container" style="padding-top: 50px">
        <nav class="navbar navbar-inverse">
            <!--bar의 색상 변환-->
            <div class="container-fluid">
                <div class="navbar-header">
                    <!-- 오른쪽 메뉴바 -->
                    <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#nav_menu"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="#">
                        bootstrap 강의
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="nav_menu">
                    <!-- data target : nav_menu-->
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="">HTML</a>
                        </li>
                        <li class="active">
                            <!--활성화-->
                            <a href="">CSS</a>
                        </li>
                        <li>
                            <a href="">JS</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- 왼쪽 게시판 -->
        <div class="col-sm-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    게시판
                </div>
                <div class="panel-body">
                    <a href="">자유게시판</a><br>
                    <a href="">포럼</a><br>
                    <a href="">News</a>
                </div>
            </div>
        </div>

        <!-- 오른쪽 게시판 -->
        <div class="col-sm-10">
            <table class="table table-bordered table-hover">
                <tr>
                    <th>제목</th>
                    <th>작성일</th>
                    <th>삭제</th>
                </tr>
                <tr>
                    <td>안녕하세요</td>
                    <td>2019-03-24</td>
                    <td>
                        <a href="#" class="btn btn-danger">삭제</a>
                    </td>
                </tr>
                <tr>
                    <td>안녕하세요</td>
                    <td>2019-03-24</td>
                    <td>
                        <a href="#" class="btn btn-danger">삭제</a>
                    </td>
                </tr>
                <tr>
                    <td>안녕하세요</td>
                    <td>2019-03-24</td>
                    <td>
                        <a href="#" class="btn btn-danger">삭제</a>
                    </td>
                </tr>
            </table>

            <!-- 페이지네이션 -->
            <nav class="text-center">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- 작성하기 -->
            <a href="" class="btn btn-default">작성하기</a>

        </div>


    </div>
</body>

</html>

7. Bootstrap 활용 - Summernote

:위지윅 에디터 적용해보기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>summernote</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container" style="padding-top:50px">
        <textarea name="" id="myEditor" cols="30" rows="10" class="form-control"></textarea>

    </div>


    <!-- 스타일관련 -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.css" rel="stylesheet">
    <!-- 자바스크립트관련 -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/summernote.js"></script>
    <!-- 한글관련 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.6/lang/summernote-ko-KR.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#myEditor').summernote({
                lang: 'ko-KR',
                height: 300,
            });
        });
    </script>


</body>

</html>

 

8. Bootstrap 활용 - Template

themeforest.net/?gclid=Cj0KCQiApsiBBhCKARIsAN8o_4h1A6pUU-LB4i86ecaZRQjNJTsqRzfgkByWMV-BEEkDzL2qPOFNwggaAsHhEALw_wcB

에서 템플릿을 가져와서 사용할 수 있다.

 

sb admin : startbootstrap.com/theme/sb-admin-2

github.com/parkjunyoung/bootstrap-online

소스코드 

 

부트스트랩 컴포넌트 -->bootstrapk.com/

 

부트스트랩 적용 --> www.bootstrapcdn.com/legacy/bootstrap/

 

테마 --> themeforest.net/?gclid=Cj0KCQiApsiBBhCKARIsAN8o_4h1A6pUU-LB4i86ecaZRQjNJTsqRzfgkByWMV-BEEkDzL2qPOFNwggaAsHhEALw_wcB

 

fontawesome 4 cdn --> www.bootstrapcdn.com/fontawesome/

fontawesome 4 --> fontawesome.com/v4.7.0/--> icon 가져오기

 

sb admin : startbootstrap.com/theme/sb-admin-2

'Front-end > Web' 카테고리의 다른 글

JavaScript 기초 - 조건문, 반복문, 함수  (0) 2021.02.23
JavaScript 기초 - 시작, 변수  (0) 2021.02.23
SCSS 문법 - 확장, 함수, 조건문, 반복문, 내장함수  (0) 2021.02.13
SCSS 문법 - 주석, 데이터종류, 중첩, 변수, 가져오기, 연산, 재활용  (0) 2021.02.13
Sass(SCSS) 개요  (0) 2021.02.13

관련글

댓글

티스토리툴바