JS | CSS | HTML

63일차 BOOTSTRAP 사용 방법

leo lee 2022. 12. 27. 10:30
반응형

부트스트랩 다운로드

1. 다운로드

아래 링크로 들어가서 부트스트랩 다운로드를 한다.

http://bootstrapk.com/getting-started/#google_vignette

 

시작하기 · 부트스트랩

부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치

bootstrapk.com

 

2. 파일 업로드

다운로드를 하면 아래와 같은 파일을 압축해제하여 

CSS  FONTS JS 3가지 파일을 적용할 파일에 옮겨준다.

 

 

 

3. 제이쿼리 다운로드

아래 링크로 들어가서 jquery 다운로드를 해준다.

https://jquery.com/

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

가장 상위에 있는 파일을 클릭면 아래와 같은 창이 나오고 오른쪽 마우스를 클릭하여 다른 이름으로 저장하여 준다.

 

4. CSS , JQUERY, JS 링크 

아래와 같이 파일들을 링크해서 사용할 수 있도록 처리해주면 완료!

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>

    <!-- css링크 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 제이쿼리 링크 -->
    <script src="jquery/jquery-3.6.3.min.js"></script>
    <!-- 부트스트랩 테마가 필요하면 이쯤 추가.. -->

    <!-- js링크 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    
    <h3>부트스트랩UI적용방법</h3>

</body>
</html>

 

5. 부트 스트랩 적용 

예시1

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>

    <style>
        /*공통디자인*/
        .box{
            width: 100%;
        }

        .box .inner{
            border: 1px solid #777; 
            box-sizing: border-box;
        }

        /*1300px 이상에서 동작하는 디자인*/

        @media(min-width:1300px){
            .box .inner{
                float:left;
                width: 33.333%;
                
            }
        }

        /*1299이하 768이상*/
        @media(max-width:1299px) and (min-width:768px){
            .box .inner{
                float: left;
                width: 50%;
            }
        }
        /*767px아래에서 동작하는 디자인*/
        @media(max-width:767px){
            .box .inner{
                float: left;
                width: 100%;
            }
        }


    </style>
</head>
<body>
    <h3>반응형 디자인</h3>

    <div class="box">
        <div class="inner">박스</div>
        <div class="inner">박스</div>
        <div class="inner">박스</div>
        <div class="inner">박스</div>
        <div class="inner">박스</div>
        <div class="inner">박스</div>
    </div>
</body>
</html>

결과1

 

 

예시2

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

<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">
    <title>Document</title>

    <!-- css링크 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 제이쿼리 링크 -->
    <script src="jquery/jquery-3.6.3.min.js"></script>
    <!-- 부트스트랩 테마가 필요하면 이쯤 추가.. -->

    <!-- js링크 -->
    <script src="js/bootstrap.min.js"></script>


</head>

<body>

    <h3>부트스트랩UI적용방법</h3>

    <h3>반응형 그리드 (float 사용 못해도 할 수 있다)</h3>

    <!-- <div class="container">--> <!-- 컨텐츠너비 -->
    <div class="container-fluid"><!-- 전체너비 -->
        <div class="row">
            <div class="col-md-2 col-sm-3 col-xs-6">md사이즈 2, sm사이즈 3, xs사이즈 6</div>
            <div class="col-md-2 col-sm-3 col-xs-6">md사이즈 2, sm사이즈 3, xs사이즈 6</div>
            <div class="col-md-2 col-sm-3 col-xs-6">md사이즈 2, sm사이즈 3, xs사이즈 6</div>
            <div class="col-md-2 col-sm-3 col-xs-6">md사이즈 2, sm사이즈 3, xs사이즈 6</div>
            <div class="col-md-2 col-sm-3 col-xs-6">md사이즈 2, sm사이즈 3, xs사이즈 6</div>
            <div class="col-md-2 col-sm-3 col-xs-6">md사이즈 2, sm사이즈 3, xs사이즈 6</div>
        </div>
    </div>

</body>

</html>

 

결과2

 

 

예시3

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>

    <!-- css링크 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!-- 제이쿼리 링크 -->
    <script src="jquery/jquery-3.6.3.min.js"></script>
    <!-- 부트스트랩 테마가 필요하면 이쯤 추가.. -->

    <!-- js링크 -->
    <script src="js/bootstrap.min.js"></script>

    <style>
        .mygrid{
            /* border: 1px solid #777; */
            box-shadow: 0 8px 16px rgba(0, 0 , 0 , 0.2);
            
            margin: 0 auto;
            /*  
                부트스트랩의 col-클래스가 float의 영향이 있어서
                1개의 박스를 가운데로 보낼때만 float을 해제하고 margin: 0 auto;
            */

            float: none;

            padding: 20px 10px;
        }

    </style>

</head>
<body>


    <h3>그리드 커스터마이징</h3> 
<div class="container">

    <div class="row">
            <div class="col-md-6 col-xs-12 mygrid "> <!--새로운 클래스를 추가  -->


                    <h3>회원가입</h3>


                <div class="form-group">
                    <label for="usr">아이디:</label>
                    <input type="text" class="form-control" id="usr">
                  </div>
                  <div class="form-group">
                    <label for="pwd">비밀번호:</label>
                    <input type="password" class="form-control" id="pwd">
                  </div>

                  <button type="button" class="btn btn-primary btn-block">Button 1</button>
            </div>

            


    </div>


</div>
</body>

</html>

 

 

결과3

 

 

예시4

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

<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">
  <title>Document</title>

  <!-- css링크 -->
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <!-- 제이쿼리 링크 -->
  <script src="jquery/jquery-3.6.3.min.js"></script>
  <!-- 부트스트랩 테마가 필요하면 이쯤 추가.. -->

  <!-- js링크 -->
  <script src="js/bootstrap.min.js"></script>

</head>

<body>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">모달버튼1</button>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#home">모달버튼2</button>

  <!-- 숨김영역 -->
  <!-- Modal -->
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>첫번째모달</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <!-- 숨김영역 -->
  <!-- Modal -->
  <div id="home" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>두번째모달</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

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

</html>

 

 

결과4

 

반응형