티스토리 뷰

└설치 및 환경설정 및 기타

부트스트랩 이용하는 방법

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>

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

 

출력 화면

저작자표시

'└설치 및 환경설정 및 기타' 카테고리의 다른 글

[mysql]다운로드 및 환경설정  (0) 2022.03.02
[Java]이클립스에서 프로젝트 생성하기  (0) 2022.02.13
[JSP]개발환경 구축 및 프로젝트 생성해보기  (0) 2022.02.11
[Java]설치와 환경설정 및 실행(Eclipse)  (0) 2022.01.30
[HTML]실습 환경 구축  (0) 2022.01.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함