본문 바로가기
Programming/Website

[Website] 컴포넌트 (Component) (1)

by goatlab 2023. 6. 5.
728x90
반응형
SMALL

컴포넌트 (Component)

 

부트스트랩 컴포넌트는 웹 페이지의 디자인과 기능을 향상시키는 데 도움이 되는 미리 만들어진 요소들이다.

 

Buttons 다양한 스타일, 크기 및 상태를 가진 버튼을 만들 수 있다.
Navbar 웹 페이지의 상단에 탐색 링크를 배치하는 반응형 네비게이션 헤더이다. 부트스트랩의 Navbar는 브랜드 로고 및 탐색 링크, 검색 폼, 드롭다운 메뉴 등을 지원한다.
Alerts Alerts 컴포넌트는 사용자에게 피드백을 제공하는 데 사용되는 스타일이 있는 경고 메시지이다. 간단한 경고부터 닫기 버튼이 있는 경고 메시지까지 다양한 유형의 알림을 만들 수 있다.
Cards 이미지, 텍스트, 링크 등의 콘텐츠를 그룹화하는 유연한 컨테이너이다. 카드는 블로그 게시물, 프로필 정보, 이미지 갤러리 등 다양한 용도로 사용할 수 있다.
Forms 사용자의 입력을 받기 위한 다양한 폼 요소를 제공한다. 텍스트 입력, 라디오 버튼, 체크박스, 셀렉트 박스, 버튼 등의 폼 요소를 스타일링하고 폼 레이아웃을 구성할 수 있다. 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
        <title>부트스트랩 그리드</title>
    </head>
    <body>
        <!-- Navbar -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler"
                type="button" 
                data-bs-toggle="collapse"
                data-bs-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">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- Alerts -->
    <div class="container mt-4">
        <div class="alert alert-success" role="alert">
            A simple success alert—check it out!
        </div>
    </div>
    
    <!-- Buttons -->
    <div class="container mt-4">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
    </div>
    
    <!-- Cards -->
    <div class="container mt-4">
        <div class="row">
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">
                            Some quick example text to build on the card title and make up
                            the bulk of the card's content.
                        </p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">
                            Some quick example text to build on the card title and make up
                            the bulk of the card's content.
                        </p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Forms -->
    <div class="container mt-4">
        <form>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label"
                >Email address</label
                >
                <input
                type="email"
                class="form-control"
                id="exampleInputEmail1"
                aria-describedby="emailHelp"
                />
                <div id="emailHelp" class="form-text">
                    We will never share your email with anyone else.
                </div>
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">Password</label>
                <input
                type="password"
                class="form-control"
                id="exampleInputPassword1"
                />
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"crossorigin="anonymous"></script>
    </body>
</html>

728x90
반응형
LIST
저작자표시 비영리 변경금지

'Programming > Website' 카테고리의 다른 글

[Website] 컴포넌트 (Component) (2)  (0) 2023.06.05
[Website] 레이아웃 / 그리드 시스템  (0) 2023.06.05
[Website] 부트스트랩 (Bootstrap)  (0) 2023.06.01
[Website] Columns / TextBox / Flexbox  (0) 2023.05.26
[Website] 트랜지션 (Transition)  (0) 2023.05.26

관련글

티스토리툴바