Bootstrap

2023. 12. 15. 15:32
728x90

Bootstrap이란?

: 미리 만들어진 CSS와 JavaScript를 통해 > CSS속성을 쉽게 적용할 수 있게 해주며,

표, 목록, 양식 등의 요소를 예쁘게 만들어주고,  이미 만들어진 다양한 UI를 활용할 수 있다.

 

1. Bootstrap 기본

1) Bootstrap을 HTML에 포함하기

- 본질은 CSS와 JS

- 홈페이지에서 다운로드 받거나

- CDN(Content Delivery Network)을 통해서 바로 받아온다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> //head에 적용
</head>
<body>
    <h1>Hello, world</h1>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> //body 끝자락에 적용
</body>
</html>

 

2) Text

- CSS 속성을 class로 적용할 수 있게 만들어져 있다  !! 

- text-start : text-align: start; 적용 가능

    <p class="text-start">text-start 적용</p>
    <p class="text-center">text-center 적용</p>
    <p class="text-end">text-end 적용</p>

- fw-(굵기) : 굵기 조정 가능

- fst-italic : 기울임 적용 가능

** 매우 다양하기 때문에 직접 찾아보며 적용해보기

Get started with Bootstrap · Bootstrap v5.3 (getbootstrap.com)

 

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

 

3) Color

- 몇 종류의 색상을 미리 정해두고, 글자와 배경에 쉽게 적용할 수 있도록 만들어져 있다.

- 글자에 적용할 때에는 text-* 클래스 

- 요소의 배경에 적용할 때에는 bg-* 클래스 활용

- 배경색에 적절한  글자색을 적용할 때에는 text-bg-* 클래스 활용

<!-- text 색상 설정-->
	<p class="text-primary">text-primary</p>
    <p class="text-secondary">text-secondary</p>
    <p class="text-success">text-success</p>
    <p class="text-danger">text-danger</p>
    <p class="text-warning">text-warning</p>
    <p class="text-info">text-info</p>
    <p class="text-light bg-dark">text-light</p>
    <p class="text-dark">text-dark</p>
    
<!-- bg 색상 설정 -->
    <p class="bg-primary">bg-primary</p>
    <p class="bg-secondary">bg-secondary</p>
    <p class="bg-success">bg-success</p>
    <p class="bg-danger">bg-danger</p>
    <p class="bg-warning">bg-warning</p>
    <p class="bg-info">bg-info</p>
    <p class="bg-light">bg-light</p>
    <p class="bg-dark text-light">bg-dark</p>

<!--text-bg 설정-->
    <p class="text-bg-primary">text-bg-primary</p>
    <p class="text-bg-secondary">text-bg-secondary</p>
    <p class="text-bg-success">text-bg-success</p>
    <p class="text-bg-danger">text-bg-danger</p>
    <p class="text-bg-warning">text-bg-warning</p>
    <p class="text-bg-info">text-bg-info</p>
    <p class="text-bg-light">text-bg-light</p>
    <p class="text-bg-dark">text-bg-dark</p>

 

+ 그라데이션 적용 bg-gradient 클래스 활용

 

4) Box Model

- 부모 요소를 기준으로 너비와 높이를 지정 

- w-* h-*

- 25~100%까지 25% 간격으로 사용 가능

<div style="width: 500px; height: 500px;">
        <div class="w-50 h-50 bg-primary">
            <div class="w-25 h-25 bg-secondary">helloe</div>
        </div>
</div>

- margin & padding 도 정의되어 있다.

- {m/p}{방향} - {크기(0~5또는 auto)}

- 방향 : t, b, s, e, x(좌우), y(상하), 생략(네방향 모두)

ex. px-3 : 좌우 방향으로 padding 3만큼

     mb-4 : 아래 방향으로 margin 4만큼

 

5) Flex

- d-flex 를 적용하면 Flex Container가 된다.

- 축의 방향 조절은 flex-* 형태로 정의한다. (flex-column, row, row-reverse, column-reverse)

- flex-wrap / flex-nowrap 사용가능

- justify-content-* 모두 적용 가능 (start, end, center, between, evenly, around)

- align-items-* 모두 가능 (start, end, center)

- align-content-* 모두 가능 (start, end, center, between, around)

 

 

2. Bootstrap Grid System

 

1) Container

- container : 화면의 크기에 따라 너비가 바뀜

- container-fluid : 화면의 너비 전체를 차지

    <div class="container-fluid fs-2 bg-primary-subtle"></div>
    <div class="container fs-2 bg-secondary"></div>

 

2) Row & Columns

- container 안에 row 와 col을 만들어 넣는다.

- row는 12칸으로 이뤄져있다. 

- col-*을 통해서 12칸 중에 몇칸을 차지할지 결정할 수 있음. (12넘으면 다음줄로 간다)

- 줄이 늘어난다면 gy-* 통해 줄 간격 조절이 가능.

-  gx-*로 좌우 간격 조절 가능.

    <div class="container-fluid bg-primary-subtle">
        <div class="row">
            <div class="col">col1</div>
            <div class="col">col2</div>
            <div class="col">col3</div>
        </div>
    </div>
    
    <div class="container bg-secondary">
        <div class="row">
            <div class="col">col1</div>
            <div class="col">col2</div>
            <div class="col">col3</div>
        </div>
    </div>
    
    
    <div class="container-fluid bg-primary-subtle">
        <div class="row">
            <div class="col-4">col1</div>
            <div class="col-6">col2</div>
            <div class="col-1">col3</div>
            <div class="col-2">col4</div>
        </div>
    </div>

 

3) Breakpoints

 

: Column의 칸의 갯수를 화면의 사이즈에 따라 다르게 만들 수 있다. (이때 화면의 사이즈의 기준점이 breakpoint)

- col-{breakpoint}-{크기} 

<!--여기 요소들은 무조건 4칸씩(화면의 사이즈와 무관)-->
	<div class="container-fluid">
        <div class="row">
            <div class="col-4 bg-secondary p-1">col-4</div>
            <div class="col-4 bg-warn p-1">col-4</div>
            <div class="col-4 bg-secondary p-1">col-4</div>
        </div>
    </div>
<!--여기 요소들은 sm(576px)이상에서 4칸씩 (화면이 더작아지면 요소배치가 달라짐) -->
    <div class="row">
        <div class="col-sm-4 bg-primary p-1">col-sm-4</div>
        <div class="col-sm-4 bg-black text-white p-1">col-sm-4</div>
        <div class="col-sm-4 bg-primary p-1">col-sm-4</div>
    </div>
<!--여기 요소들은 sm(576px)이상에서 4칸씩, 미만에서는 6칸씩-->
    <div class="row">
        <div class="col-6 col-sm-4 bg-secondary p-1">col-sm-4</div>
        <div class="col-6 col-sm-4 bg-warning text-white p-1">col-sm-4</div>
        <div class="col-6 col-sm-4 bg-secondary-subtle p-1">col-sm-4</div>
    </div>

 

728x90
저작자표시

'Programming > Frontend (HTML, CSS)' 카테고리의 다른 글

부트스트랩에서 팝오버 data-content 개행 넣기  (1) 2024.05.10
CSS Flexbox  (0) 2023.12.15
CSS Box Model  (0) 2023.12.14
CSS  (0) 2023.12.13
HTML  (2) 2023.12.12

BELATED ARTICLES

more

티스토리툴바