Bootstrap Components

Posted on by

부트스트랩 구성 요소 (Bootstrap Components)

버튼 (Buttons)

부트스트랩은 다양한 스타일의 버튼을 제공합니다. 버튼의 주요 클래스는 .btn이며, 추가 클래스를 사용하여 버튼의 색상, 크기 등을 변경할 수 있습니다.

  • 기본 버튼 (Basic Buttons): .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark 클래스를 사용하여 버튼의 색상을 지정할 수 있습니다.
  • 크기 조절 (Button Sizes): .btn-lg, .btn-sm 클래스를 사용하여 버튼의 크기를 조절할 수 있습니다.
  • 버튼 활성화 상태 (Button States): .active 클래스를 사용하여 활성화된 버튼을 만들 수 있으며, disabled 속성을 사용하여 비활성화된 버튼을 만들 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 버튼 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-primary">기본 버튼</button>
        <button type="button" class="btn btn-secondary btn-lg">큰 버튼</button>
        <button type="button" class="btn btn-success btn-sm">작은 버튼</button>
        <button type="button" class="btn btn-danger" disabled>비활성화 버튼</button>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

카드 (Cards)

부트스트랩의 카드 컴포넌트는 다양한 콘텐츠를 담을 수 있는 유연한 컨테이너입니다.

  • 기본 카드 (Basic Card): .card 클래스를 사용하여 기본 카드를 생성할 수 있습니다.
  • 카드 이미지 (Card Images): .card-img-top, .card-img-bottom 클래스를 사용하여 카드의 상단 또는 하단에 이미지를 추가할 수 있습니다.
  • 카드 본문 (Card Body): .card-body 클래스를 사용하여 카드의 본문을 정의할 수 있습니다.
  • 카드 그룹 (Card Groups): .card-group 클래스를 사용하여 카드들을 그룹으로 묶을 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 카드 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="card" style="width: 18rem;">
            <img src="example.jpg" class="card-img-top" alt="카드 이미지">
            <div class="card-body">
                <h5 class="card-title">카드 제목</h5>
                <p class="card-text">카드 본문 텍스트입니다.</p>
                <a href="#" class="btn btn-primary">버튼</a>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

드롭다운 (Dropdowns)

부트스트랩의 드롭다운 메뉴는 다양한 옵션을 선택할 수 있는 인터페이스를 제공합니다.

  • 기본 드롭다운 (Basic Dropdown): .dropdown, .dropdown-toggle, .dropdown-menu 클래스를 사용하여 기본 드롭다운을 생성할 수 있습니다.
  • 드롭다운 아이템 (Dropdown Items): .dropdown-item 클래스를 사용하여 드롭다운 메뉴의 항목을 정의할 수 있습니다.
  • 드롭다운 분할 버튼 (Split Button Dropdowns): .dropdown-toggle-split 클래스를 사용하여 분할 드롭다운 버튼을 생성할 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 드롭다운 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                드롭다운 버튼
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">액션</a>
                <a class="dropdown-item" href="#">다른 액션</a>
                <a class="dropdown-item" href="#">무언가</a>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

네비게이션 (Navigation)

부트스트랩은 다양한 네비게이션 스타일을 제공합니다.

  • 네비게이션 바 (Navbar): .navbar, .navbar-expand-lg, .navbar-light, .navbar-dark, .bg-light, .bg-dark 클래스를 사용하여 네비게이션 바를 생성할 수 있습니다.
  • 탭 네비게이션 (Nav Tabs): .nav, .nav-tabs 클래스를 사용하여 탭 스타일의 네비게이션을 생성할 수 있습니다.
  • 필 네비게이션 (Nav Pills): .nav, .nav-pills 클래스를 사용하여 필 스타일의 네비게이션을 생성할 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 네비게이션 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">네비게이션 바</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">홈 <span class="sr-only">(current)</span></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>
    </nav>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

폼 (Forms)

부트스트랩의 폼 컴포넌트는 다양한 입력 요소를 스타일링합니다.

  • 기본 폼 (Basic Form): .form-group, .form-control 클래스를 사용하여 기본 폼을 생성할 수 있습니다.
  • 폼 레이아웃 (Form Layouts): .form-inline, .form-row 클래스를 사용하여 폼 레이아웃을 조정할 수 있습니다.
  • 폼 유효성 검사 (Form Validation): .is-valid, .is-invalid 클래스를 사용하여 폼 유효성 검사를 표시할 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 폼 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">이메일 주소</label>
                <input type

="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                <small id="emailHelp" class="form-text text-muted">이메일을 다른 사람과 공유하지 않습니다.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">비밀번호</label>
                <input type="password" class="form-control" id="exampleInputPassword1">
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">기억하기</label>
            </div>
            <button type="submit" class="btn btn-primary">제출</button>
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

배지 (Badges)

부트스트랩의 배지는 숫자나 텍스트를 강조하여 표시할 때 사용됩니다.

  • 기본 배지 (Basic Badges): .badge, .badge-primary, .badge-secondary, .badge-success, .badge-danger, .badge-warning, .badge-info, .badge-light, .badge-dark 클래스를 사용하여 배지를 생성할 수 있습니다.
  • 배지와 링크 (Badge with Links): 배지에 링크를 추가할 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 배지 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>제목 <span class="badge badge-secondary">New</span></h1>
        <button type="button" class="btn btn-primary">
            알림 <span class="badge badge-light">4</span>
        </button>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

알림 (Alerts)

부트스트랩의 알림은 중요한 메시지를 표시할 때 사용됩니다.

  • 기본 알림 (Basic Alerts): .alert, .alert-primary, .alert-secondary, .alert-success, .alert-danger, .alert-warning, .alert-info, .alert-light, .alert-dark 클래스를 사용하여 알림을 생성할 수 있습니다.
  • 알림 닫기 버튼 (Dismissible Alerts): .alert-dismissible, .close 클래스를 사용하여 닫기 버튼이 있는 알림을 생성할 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 알림 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>경고!</strong> 이 알림은 경고 메시지를 나타냅니다.
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

진행 바 (Progress Bars)

부트스트랩의 진행 바는 작업의 진행 상황을 시각적으로 표시합니다.

  • 기본 진행 바 (Basic Progress Bar): .progress, .progress-bar 클래스를 사용하여 기본 진행 바를 생성할 수 있습니다.
  • 다양한 색상의 진행 바 (Colored Progress Bars): .bg-success, .bg-info, .bg-warning, .bg-danger 클래스를 사용하여 진행 바의 색상을 변경할 수 있습니다.
  • 스트라이프 진행 바 (Striped Progress Bars): .progress-bar-striped 클래스를 사용하여 스트라이프가 있는 진행 바를 생성할 수 있습니다.
  • 애니메이션 진행 바 (Animated Progress Bars): .progress-bar-animated 클래스를 사용하여 애니메이션이 있는 진행 바를 생성할 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 진행 바 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

리스트 그룹 (List Groups)

부트스트랩의 리스트 그룹은 아이템 목록을 스타일링하는 데 사용됩니다.

  • 기본 리스트 그룹 (Basic List Group): .list-group, .list-group-item 클래스를 사용하여 기본 리스트 그룹을 생성할 수 있습니다.
  • 활성화된 리스트 아이템 (Active List Item): .active 클래스를 사용하여 활성화된 리스트 아이템을 표시할 수 있습니다.
  • 비활성화된 리스트 아이템 (Disabled List Item): .disabled 클래스를 사용하여 비활성화된 리스트 아이템을 표시할 수 있습니다.
  • 색상 있는 리스트 아이템 (Colored List Items): .list-group-item-primary, .list-group-item-secondary, .list-group-item-success, .list-group-item-danger, .list-group-item-warning, .list-group-item-info, .list-group-item-light, .list-group-item-dark 클래스를 사용하여 리스트 아이템의 색상을 변경할 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 리스트 그룹 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <ul class="list-group">
            <li class="list-group-item">첫 번째 아이템</li>
            <li class="list-group-item">두 번째 아이템</li>
            <li class="list-group-item list-group-item-primary">세 번째 아이템</li>
            <li class="list-group-item list-group-item-success">네 번째 아이템</li>
            <li class="list-group-item list-group-item-danger">다섯 번째 아이템</li>
        </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

모달 (Modals)

부트스트랩의 모달은 사용자와 상호작용할 수 있는 대화 상자를 제공합니다.

  • 기본 모달 (Basic Modal): .modal, .modal-dialog, .modal-content 클래스를 사용하여 기본 모달을 생성할 수 있습니다.
  • 모달 크기 (Modal Sizes): .modal-lg, .modal-sm 클래스를 사용하여 모달의 크기를 조절할 수 있습니다.
  • 모달 위치 (Modal Position): .modal-dialog-centered 클래스를 사용하여 모달을 화면 중앙에 배치할 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 모달 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            모달 열기
        </button

>

        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">모달 제목</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        모달 본문 내용입니다.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
                        <button type="button" class="btn btn-primary">저장하기</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

토글 버튼 (Toggle Buttons)

부트스트랩의 토글 버튼은 클릭하여 상태를 변경할 수 있는 버튼입니다.

  • 기본 토글 버튼 (Basic Toggle Button): .btn-toggle 클래스를 사용하여 기본 토글 버튼을 생성할 수 있습니다.
  • 상태 기반 토글 버튼 (State-Based Toggle Button): .active, .disabled 클래스를 사용하여 토글 버튼의 상태를 표시할 수 있습니다.

예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>부트스트랩 토글 버튼 예제</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
            토글 버튼
        </button>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>

이상으로 부트스트랩의 다양한 구성 요소를 살펴보았습니다. 각 컴포넌트는 다양한 옵션과 기능을 제공하며, 이를 활용하여 더욱 풍부한 웹 페이지를 개발할 수 있습니다.

Post Views: 223

Leave a Reply

Your email address will not be published. Required fields are marked *