코딩/7-부트스트랩 Bootstrap

Bootstrap => 9장 ~ 13장

tree0505 2025. 6. 17. 10:02
반응형

09장_폼_라디오

  • 01_라디오_기본.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
        <!--
            라디오는 name="optradio" 을 일치시켜 하나의 그룹을 만든다.
            name값이 달라지면 라디오기능이 사라진다.
        -->

        <div class="container">
            <div class="form-check">
                <input type="radio" class="form-check-input" id="radio1" name="optradio">  
                <label  for="radio1">Option 1</label>
            </div>
            <div class="form-check">
                <input type="radio" class="form-check-input" id="radio2" name="optradio" >
                <label  for="radio2">Option 2</label>
            </div>
            <div class="form-check">
                <input type="radio" class="form-check-input" id="radio3" name="optradio">
                <label for="radio3">Option 3</label>
            </div>
        </div>

    </body>
    </html>
  • 02_라디오_미리선택.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
        <!--
            checked 를 통해 미리한개를 선택해놓을수있다.
        -->

        <div class="container">
            <div class="form-check">
                <input type="radio" class="form-check-input" id="radio1" name="optradio"  checked>  
                <label  for="radio1">Option 1</label>
            </div>
            <div class="form-check">
                <input type="radio" class="form-check-input" id="radio2" name="optradio" >
                <label  for="radio2">Option 2</label>
            </div>
            <div class="form-check">
                <input type="radio" class="form-check-input" id="radio3" name="optradio">
                <label for="radio3">Option 3</label>
            </div>
        </div>
       
    </body>
    </html>
  • 03_라디오_가로배치.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
        <!--
              <div class="form-check form-check-inline">
                을 통해 가로배치가 가능하다.
        -->
        <div class="container">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1">
                <label class="form-check-label" for="inlineRadio1">1</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2">
                <label class="form-check-label" for="inlineRadio2">2</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3">
                <label class="form-check-label" for="inlineRadio3">3</label>
            </div>
        </div>
       
    </body>
    </html>
  • 10장_폼_셀렉트
  • 01_셀렉트_기본.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>

        <div class="container">
            <select class="form-select" style="width: 300px;">
                <option>Open this select menu</option>
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
            </select>
        </div>
       
    </body>
    </html>
  • 02_셀렉트_미리선택.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>

        <div class="container">
            <select class="form-select" style="width: 300px;">
                <option>One</option>
                <option>Two</option>
                <option selected>Three</option>
            </select>
        </div>
       
    </body>
    </html>

11장_폼_체크박스

  • 01_체크박스_기본.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>

        <div class="container">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="check1">
                <label  for="check1">Option 1</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="check2">
                <label  for="check2">Option 2</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="check3">
                <label for="check3">Option 3</label>
            </div>
        </div>
       
    </body>
    </html>
  • 02_체크박스_미리선택.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
        <!--
            checked 를 통해 미리한개를 선택해놓을수있다.
        -->

        <div class="container">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="check1" checked>
                <label  for="check1">Option 1</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="check2">
                <label  for="check2">Option 2</label>
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="check3">
                <label for="check3">Option 3</label>
            </div>
        </div>
       
    </body>
    </html>
  • 03_체크박스_가로배치.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
        <!--
              <div class="form-check form-check-inline">
                을 통해 가로배치가 가능하다.
        -->
        <div class="container">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox1">
                <label class="form-check-label" for="inlineCheckbox1">1</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox2">
                <label class="form-check-label" for="inlineCheckbox2">2</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="inlineCheckbox3">
                <label class="form-check-label" for="inlineCheckbox3">3 </label>
            </div>
        </div>
       
    </body>
    </html>
  • 04_체크박스_약관동의_.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
        <div class="container">
            <div class="d-flex justify-content-xl-center justify-content-center">
                <form class="mb-5">                
                    <div class="form-check py-3">
                        <input class="form-check-input" type="checkbox" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            전체동의  
                        </label>
                    </div>

                    <ul class="list-group" >
                        <li class="list-group-item py-3" >
                            <input type="checkbox" class="form-check-input me-1" >
                            <label class="" style="font-size:15px; color: rgba(0, 0, 0, 0.973); font-weight: 500;">이용약관 동의</label>
                        </li>
                        <li class="list-group-item py-3">
                            <input type="checkbox" class="form-check-input me-1"> 개인정보취급 동의
                        </li>
                        <li class="list-group-item py-3">
                            <input type="checkbox" class="form-check-input me-1"> 만14세 입니다.
                        </li>
                        <li class="list-group-item py-3">
                            <input type="checkbox" class="form-check-input me-1"> 마케팅 메일 수신 동의(선택)
                        </li>
                    </ul>
                   
                    <button class="btn btn-primary btn-lg mt-3 py-3" style="width: 350px; height: 60px;" type="submit">가입</button>
                </form>
            </div>
        </div>

       
    </body>
    </html>

12장_폼_기타

  • 01_컬러.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
                rel="stylesheet"
                integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
                crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
        <div class="container">
            <label for="exampleColorInput" class="form-label">Color picker</label>
            <input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
        </div>
    </body>
    </html>
  • 02_텍스트에리어.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
                rel="stylesheet"
                integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
                crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
       
        <div class="container" style="width: 500px;">
            <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
        </div>


       
    </body>
    </html>
  • 03_파일.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
                rel="stylesheet"
                integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
                crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
       
        <div class="container" style="width: 800px;">
            <label for="formFile" class="form-label">Default file input example</label>
            <input class="form-control" type="file" id="formFile">
        </div>
       
    </body>
    </html>
  • 04_범위.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
                rel="stylesheet"
                integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
                crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
       
        <div class="container" style="width: 800px;">
            <label for="customRange1" class="form-label">Example range</label>
            <input type="range" class="form-range" id="customRange1">
        </div>
       
    </body>
    </html>
  • 05_날짜.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
                rel="stylesheet"
                integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
                crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
     
        <!-- 부트스트랩은 날짜는 지원하지 않는다. -->
        <div class="container" style="width: 200px;">
            <input type="date">
        </div>
       
    </body>
    </html>
  • 06_시간.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
                rel="stylesheet"
                integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
                crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->      
    </head>
    <body>
       
        <!-- 부트스트랩은 시간은 지원하지 않는다. -->
        <div class="container" style="width: 200px;">
            <input type="time">
        </div>
       
    </body>
    </html>

13장_햄버거내비

  • 01_반응형햄버거_한개.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
          <!-- 부트스트랩 5.2.3 -->
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

                integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
                crossorigin="anonymous"></script>    
            <!-- 부트스트랩 5.2.3 -->    
    </head>
    <body>
        <!--
            반응형 햄버거는 특수한 규칙을따른다.

            [1]     <nav class="navbar navbar-expand-xl bg-light" >
                최상단에 위치한다.
            [2]     <div class="container">
                컨테이너가 두번째온다.

            [3]     <button>  
                버튼속성에 햄버거 버튼을 정의를한다. (아래내용은 전부 필요하다.)

                [3-1]   class="navbar-toggler"
                [3-2]   type="button"    
                [3-3]   data-bs-toggle="collapse"
                [3-4]   data-bs-target="#test"
                            이부분에서 #뒤의내용은 버튼을 눌렀을때 반응하는 영역의 이름과 같아야한다.

                [3-5]   <span class="navbar-toggler-icon"></span>
                            버튼안에 있어야하며 , 햄버거디자인이 표시된다.

            [4]     <div class="collapse navbar-collapse" id="test">
                        버튼을 눌렀을때 나올화면을 표시한다. id 값이 버튼의속성 target과 일치해야한다.
               
        -->
        <nav class="navbar navbar-expand-xl bg-light" >
            <div class="container">

                <button class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#test"
                   
                    >

                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="test">
                    <ul class="navbar-nav">
                        <li class="nav-item"><a class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item"><a class="nav-link" href="">알뜰쇼핑</a></li>                  
                    </ul>
                </div>    
            </div>
        </nav>


    </body>
    </html>
  • 02_반응형햄버거_두개_한쪽배치.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
          <!-- 부트스트랩 5.2.3 -->
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

                integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
                crossorigin="anonymous"></script>    
            <!-- 부트스트랩 5.2.3 -->    
    </head>
    <body>

        <nav class="navbar navbar-expand-xl bg-light" >
            <div class="container">

                <button class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#test"
                    >

                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="test">
                    <ul class="navbar-nav">
                        <li class="nav-item"><a class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item"><a class="nav-link" href="">알뜰쇼핑</a></li>                  
                    </ul>

                    <ul class="nav">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                            <button type="submit" class="btn btn-secondary">검색</button>
                        </div>
                      </ul>
                </div>    
            </div>
        </nav>


    </body>
    </html>
  • 03_반응형햄버거_두개_양쪽배치.html
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
          <!-- 부트스트랩 5.2.3 -->
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

                integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
                crossorigin="anonymous"></script>    
            <!-- 부트스트랩 5.2.3 -->    
    </head>
    <body>

        <nav class="navbar navbar-expand-xl bg-light" >
            <div class="container">

                <button class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#test"
                    >

                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="test">
                    <!--
                        (1) me-auto 속성은 margin end auto 라는 뜻으로 자동으로 양쪽에 배치된다.
                        (2) 여기에서만 사용한다.
                    -->
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item"><a class="nav-link" href="">신상품</a></li>
                        <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                        <li class="nav-item"><a class="nav-link" href="">알뜰쇼핑</a></li>                  
                    </ul>

                    <ul class="nav">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                            <button type="submit" class="btn btn-secondary">검색</button>
                        </div>
                      </ul>
                </div>    
            </div>
        </nav>


    </body>
    </html>
  • 04_반응형햄버거_두개_양쪽배치_드랍다운.html
    <!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">
        <title>Document</title>

        <!-- 부트스트랩 5.2.3 -->
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>    
        <!-- 부트스트랩 5.2.3 -->  
         
    </head>

    <body>
      <nav class="navbar navbar-expand-xl bg-light" >
        <div class="container">

            <button class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#test"
                >

                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="test">
                <ul class="navbar-nav me-auto">
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">전체메뉴</a>
                    <ul class="dropdown-menu" >
                        <li><a class="dropdown-item" href="#">남성의류</a></li>
                        <li><a class="dropdown-item" href="#">여성의류</a></li>
                        <li><a class="dropdown-item" href="#">악세사리</a></li>
                    </ul>
                </li>

                    <li class="nav-item"><a class="nav-link" href="">신상품</a></li>
                    <li class="nav-item"><a class="nav-link" href="">베스트</a></li>
                    <li class="nav-item"><a class="nav-link" href="">알뜰쇼핑</a></li>                  
                </ul>

                <ul class="nav">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="검색어를 입력하세요." style="width: 200px;">
                        <button type="submit" class="btn btn-secondary">검색</button>
                    </div>
                  </ul>
            </div>    
        </div>
    </nav>

       
    </body>

    </html>

 

반응형

'코딩 > 7-부트스트랩 Bootstrap' 카테고리의 다른 글

Bootstrap => 14장 ~ 16장 ~ 프로젝트  (1) 2025.06.17
Bootstrap => 7장 ~ 8장  (0) 2025.06.17
Bootstrap => 4장 ~ 6장  (0) 2025.06.17
Bootstrap => 4장 ~ 6장  (1) 2025.06.17
BOOTSTRAP => 1장 ~ 3장  (0) 2025.06.16

'코딩/7-부트스트랩 Bootstrap'의 다른글

  • 현재글Bootstrap => 9장 ~ 13장

관련글

티스토리툴바