부트스트랩 이용하는 방법

└설치 및 환경설정 및 기타

부트스트랩 이용하는 방법

onlyun 2022. 1. 5. 09:29

이미 만들어져 있는 구조, 스타일 등을 이용하는 것.

이용하려면 부트스트랩에서 제공하는 CSS 파일 참조(외부 스타일 시트 링크)

-다운로드 : 네트워크 불안정 등의 상황에서도 쓸 수 있음. 다운된 파일 보관해야함.

-코드 복사 : 간편하게 쓸 수 있음.

w3school.com : 관련 튜토리얼 참고!!

Bootstrap5 → 각종 메뉴 설명과 예제 코드 참고!

부트스트랩 용어

pt-5 : padding top 5

부트스트랩 적용한 예)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2022.01.04_Bootstrap</title>

    <!-- CSS only -->                <!--min : 압축 버전(용량 작게하기 위해 코드 가독성 별로.)-->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->

    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <div class="container">
        <h1>My First Bootstrap Page</h1>
        <p>This is some text.</p>
    </div>
    <div class="container">
        <div class="row">
            <div class="col"><button type="button" class="btn btn-primary">Primary</button></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
    </div>
    <div class="container"></div>
</body>
</html>

기본적으로 제공되는 것들 이용해 작성

출력 화면

저작자표시 (새창열림)