Day 2 부트스트랩 5 기본 레이아웃 및 컨테이너

3930 단어 beginnerswebdevbootstrap5tutorial
Bootstrap 5를 도입하고 설치한 후 기본 레이아웃으로 전환합니다. 레이아웃 섹션에는 다음이 포함됩니다.

• 컨테이너

• 그리드

• 홈통

• 열

이것이 부트스트랩 5의 가장 필수적인 레이아웃입니다. 이 튜토리얼에서는 부트스트랩 컨테이너에 대해 간략하게 설명합니다.

컨테이너



컨테이너는 레이아웃의 반응 동작을 처리하는 콘텐츠의 여백을 설정하는 데 사용됩니다. 여기에는 행 요소가 포함되며 행 요소는 열의 컨테이너입니다(그리드 시스템이라고 함).

컨테이너 작동 방식:

컨테이너는 부트스트랩에서 가장 기본적인 레이아웃 요소이며 기본 그리드 시스템을 사용할 때 필요합니다.

컨테이너는 콘텐츠를 포함, 패딩 및 (때로는) 중앙에 배치하는 데 사용됩니다. 컨테이너는 중첩될 수 있지만 대부분의 레이아웃에는 중첩된 컨테이너가 필요하지 않습니다.

컨테이너는 내부 콘텐츠를 채우는 데 사용되며 두 가지 컨테이너 클래스를 사용할 수 있습니다.

.container 클래스는 반응이 빠른 고정 너비 컨테이너를 제공합니다.

.container-fluid 클래스는 뷰포트의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를 제공합니다.

1) 고정용기

.container 클래스를 사용하여 응답성이 뛰어난 고정 너비 컨테이너를 만듭니다.

다음은 고정 컨테이너의 예입니다.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>My First Bootstrap Page</h1>
        <p>This part is inside a .container class.</p>
        <p>The .container class provides a responsive fixed width container.</p>
        <p>Resize the browser window to see that its width (max-width) will change at different breakpoints.</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
        crossorigin="anonymous"></script>
</body>

</html>


출력은 아래와 같습니다.



2) 유체 용기

.container-fluid 클래스를 사용하여 항상 화면의 전체 너비에 걸쳐 있는 전체 너비 컨테이너를 만듭니다(너비는 항상 100%).

다음은 유체 컨테이너의 예입니다.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>

<body>
    <div class="container-fluid">
        <h1>My First Bootstrap Page</h1>
        <p>This part is inside a .container-fluid class.</p>
        <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>           
      </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
        crossorigin="anonymous"></script>
</body>

</html>


코드 출력은 다음과 같습니다.



다음 장에서는 그리드 시스템에 대해 설명합니다.
Github Repos를 포트폴리오 웹사이트로 변환
환경 변수를 사용하지 않는 4가지 이유

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage