모래알 반응형웹

Bootstrap(부트스트랩) 시작, 필수 요소 본문

부트스트랩

Bootstrap(부트스트랩) 시작, 필수 요소

전상하 2018. 3. 28. 14:05


부트스트랩의 기능을 웹페이지에 적용하려면 반드시 그 페이지에 포함되어야 하는 것이 3가지 있다.


  1. bootstrap.css : 부트스트랩의 스타일. 압축된 형태이인 bootstrap.min.css가 포함되어도 좋다.
  2. jquery : jquery library. jquery 없이 bootstrap은 돌아가지 않는다. https://jquery.com/
  3. popper.js : 이 또한 jquery와 같이 웹어플리케이션을 만들 때 사용되는 라이브러리이다. https://popper.js.org/


Bootstrao 3.0 시절만해도 popper.js가 굳이 필요없었지만 Bootstrap 4.0부터는 꼭 포함되어야 한다.


아래와 같이  폴더를 구성하고 "working folder"에서 연습을 해보자.


working folder/bootstrap/ 

                         ├── dist/ 

                                    ├── css/ 

                                    └── js/ 

                         ├── js/

                         └── scss/



Bootstrap 첫번째 페이지를 다음과 같이 만들어보자.


<!DOCTYPE html>  

<html lang="ko">  

  <head>  

    <meta charset="utf-8">  

    <meta http-equiv="X-UA-Compatible" content="IE=edge">  

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  


    <title>Bootstrap Test</title>  


    <!-- Bootstrap CSS --> 

    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css"/> 


  </head>  

  <body>  

    <div class="container"> <!-- bootstrap 페이지 요소를 사용할 때 필수요소 -->

      <div class="row"> <!-- bootstrap 페이지 요소를 사용할 때 필수요소 -->

            <div class="col-sm-6" style="background:#999;">  

                <!-- style="background:#999;" : 영역을 눈으로 확인하기 위해 배경색을 적용했다 -->

                bootstrap left 50% 

             </div>  


            <div class="col-sm-6" style="background:#ccc;">  

                <!-- style="background:#ccc;" : 영역을 눈으로 확인하기 위해 배경색을 적용했다 -->

                bootstrap right 50% 

            </div>  

        </div> <!-- row --> 

    </div> <!-- container --> 


    <!-- jQuery first, then Popper.js, then Bootstrap JS --> 

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 

    <!-- jquery 를 호스팅서버에 두고 직접 링크해도 되고 위와 같이 외부링크를 걸어도 된다 -->


    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> 

    <!-- popper 를 호스팅서버에 두고 직접 링크해도 되고 위와 같이 외부링크를 걸어도 된다 -->


    <script src="bootstrap/dist/js/bootstrap.js"></script> 

  </body>  

</html>


파일로 저장하고 서버에 올려 실행시켜보자.

브라우저에 아래와 같이 보이면 성공. 

브라우저의 너비를 줄이고 늘여가며 반응형이 되고 있는 지도 살펴보자.



'부트스트랩' 카테고리의 다른 글

Bootstrap 4 (부트스트랩) 구성요소, Alert  (0) 2018.04.19
Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (2/2)  (0) 2018.03.30
Bootstrap 4 (부트스트랩), 반응형 레이아웃, 격자형 레이아웃시스템 (1/2)  (0) 2018.03.29
Bootstrap 4 (부트스트랩), 지원 브라우저와 디바이스  (0) 2018.03.29
Bootstrap(부트스트랩) 4.0 소개, 다운로드 및 파일 구성  (0) 2018.03.28
'부트스트랩' Related Articles more
Comments