부트 스트랩 사용법

Jan 31, 2024

부트 스트랩 사용법 [ bootstrap 5 version ]


https://getbootstrap.com/


부트 스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 프레임워크
부트 스트랩을 쓴다 = 다른 사람이 만들어놓은 css를 쓴다


이렇게 다른 사람이 예쁘게 만들어놓은 걸 가져가서 쓸 수 있다

💡

부트 스트랩과 겸용해서 쓸 때면, -을 쓰지 않기 (우리의 컨벤션) (부트 스트랩이 -를 쓰는 클래스가 많기 때문에…)

💡

색깔 추가하고 싶으면 클래스 이름을 직접 만들어서 추가하기! text-primary 파랑 text-success 초록 text-danger 빨강

💡

개발자는 문서를 보고 일한다 이런 문서를 보고, 간단한 토이 프로젝트를 만들어본다. (토이 프로젝트 = 엄청 단순한 프로젝트!) 문서를 보면서 전부 다 하나씩 만져보는게 (실행 해 보는게) 중요

부트 스트랩 주로 사용하는 것


https://www.w3schools.com/bootstrap/bootstrap_ver.asp


* 부트 스트랩 쓸려면 이거 2개는 무조건 있어야함 
* 부트스트랩은 화면을 12분할 해서 사용한다

[ 컨테이너 ]


https://www.w3schools.com/bootstrap5/bootstrap_containers.php

💡

flex는 w3school 에서 뽑아서 쓰고, grid는 w3school 쓰지 말고 직접 적기.

💡

우린 디자인을 container로 할 것. 가운데 정렬을 할 거면 컨테이너를!

[ 백그라운드 컬러 / 텍스트 컬러 ]


https://www.w3schools.com/bootstrap5/bootstrap_colors_bg.php
https://www.w3schools.com/bootstrap5/bootstrap_colors.php

[ 테이블 디자인 ]


https://www.w3schools.com/bootstrap5/bootstrap_tables.php


크기 줄이고 싶으면 이렇게... div 박스를 새로 하나 더 만들어서 적용시키자!

[ 이미지 ]


https://www.w3schools.com/bootstrap5/bootstrap_images.php


이미지 모서리 동그랗게
https://getbootstrap.kr/docs/5.2/utilities/borders/

[ 버튼 ]


https://www.w3schools.com/bootstrap5/bootstrap_buttons.php

[ 페이지 네이션 ]


https://www.w3schools.com/bootstrap5/bootstrap_pagination.php

[ 리스트 그룹 ]


https://www.w3schools.com/bootstrap5/bootstrap_list_groups.php

[ 카드 ]


https://www.w3schools.com/bootstrap5/bootstrap_cards.php

[ 네브 바 ]


https://www.w3schools.com/bootstrap5/bootstrap_navbar.php

💡

창 줄이면 햄버거 버튼으로 바뀌는 걸 ‘붕괴 된 네브 바’ 라고 한다.

[ Flex ]


https://www.w3schools.com/bootstrap5/bootstrap_flex.php


플렉스가 되고 싶으면 d-flex justify-content-center 클래스 걸면 된다

[ 검색 버튼 ]


1.
<form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>

2.
<div class="d-flex justify-content-end mt-3 mb-3">
            <form class="d-flex" style="width: 300px;">
                <input class="form-control me-2" type="text" placeholder="Search">
                <button class="btn btn-primary" type="button">Search</button>
            </form>
        </div>

💡

* form-control을 지우면 본연의 input 태그로 돌아간다 * 근데 2번째 방법을 쓰는게 더 예쁘다… justify 달아서 꾸며주자

[ Input 관련 디자인 ]

[ Grid 디자인 - 사용 XXX ]

💡

그 외 나머지 것들은 시간 날 때, 한 번만 실행해보기

HTML-CSS 전체 코드 - 디자인 끝!


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

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <style>
        .card_box {
            margin-top: 10px;
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 10px;
        }
    </style>

</head>

<body>

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">홈</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <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>

    <div class="container">

        <div class="d-flex justify-content-end mt-3 mb-3">
            <form class="d-flex" style="width: 300px;">
                <input class="form-control me-2" type="text" placeholder="Search">
                <button class="btn btn-primary" type="button">Search</button>
            </form>
        </div>

        <div class="card_box">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text.</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text.</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>


            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text.</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>


            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text.</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>


            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text.</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text.</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text.</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>

        </div>

        <ul class="pagination d-flex justify-content-center">
            <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>

    </div>


    <div class="bg-light p-5 text-center">
        <h4>Created by Metacoding</h4>
        <h5>☎ 010-2222-7777</h5>
        <button class="btn btn-outline-primary">고객센터</button>
        <button class="btn btn-outline-primary">오시는길</button>
    </div>
</body>

</html>

</body>

</html>

[ 부트 스트랩을 활용해서 만든 결과 화면 ]

form-control 이란?

💡

form-control (Bootstrap 프레임워크에서 제공되는 클래스 중 하나) * 폼 요소를 끝까지 늘리는 데 사용되는 클래스 * 마치 block처럼 동작하며, 가로 폭을 부모 요소의 가로 폭에 맞게 늘릴 수 있다 * CSS를 별도로 작성하지 않고도 폼 요소를 균일하게 스타일링할 수 있다.

disable 속성이란?


"disable" 속성은 HTML 요소를 비활성화 상태로 만드는 속성. 
비활성화된 요소는 사용자가 상호작용할 수 없고, 편집이 불가능한 상태가 된다. 
주로 폼 요소나 버튼과 같은 상호작용 가능한 요소에 적용 됨.

ex) <input>은 사용자가 텍스트를 입력할 수 있는 입력 필드. 
    하지만 "disable" 속성을 추가하면 사용자는 해당 입력 필드에 텍스트를 입력할 수 없고, 
    내용을 변경할 수 없다.

💡

프런트 공부는 w3school ~

See more posts