부트스트랩 카드 구성요소

1픽셀 위로 768로 올라가면 반대 방향으로 바뀝니다.

카드 하위 구성요소

이제 모든 하위 구성 요소를 시험해 보고 카드의 모든 기능을 활용해 보겠습니다.

머리글과 바닥글이 있는 카드

<div class="card">
            <div class="card-header text-center p-4">I'm a header</div>
            <div class="card-body">
              <p class="card-text">
                first paragraph
              </p>
              <p class="card-text">
                second paragraph
              </p>
              <a href="#" class="card-link">Link 1</a>
              <a href="#" class="card-link">Link 2</a>
              <a href="#" class="card-link">Link 3</a>
            </div>
            <div class="card-footer">
              Footer of a Bootstrap card
            </div>
          </div>

테두리와 밝은 회색 배경이 있는 중앙 카드 헤더와 그 아래에 약간의 패딩을 제공하는 카드 본문이 있는 카드를 만들었습니다.

본문에는 정렬을 위해 CARD-TEXT가 있는 단락이 몇 개 있고 CARD-LINK가 있는 링크가 몇 개 있으므로 파란색으로 표시되고 서로 옆에 배치됩니다.

마지막으로 머리글과 같은 스타일의 카드 바닥글을 만들었지만 이번에는 텍스트를 가운데에 맞추지 않았습니다.

이미지 캡이 있는 카드

이번에는 카드에 이미지 캡을 추가하고 카드 본문에 제목과 부제를 추가하고 목록 항목으로 링크가 있는 목록 그룹을 추가합니다.

<div class="card">
            <img
              src="https://via.placeholder.com/100"
              alt=""
              class="card-img-top"
            />
            <div class="card-body">
              <h3 class="card-title">card title in the card's body</h3>
              <h4 class="card-subtitle mb-4">card subtitle</h4>
 
              <p>list group with links inside:</p>
              <ul class="list-group">
                <li class="list-group-item">
                  <a href="#" class="card-link">List link 1</a>
                </li>
                <li class="list-group-item">
                  <a href="#" class="card-link">List link 2</a>
                </li>
                <li class="list-group-item">
                  <a href="#" class="card-link">List link 3</a>
                </li>
              </ul>
            </div>
          </div>

저는 플레이스홀더라고 불리는 편리한 이미지 도구를 사용하고 있습니다. 끝에 있는 숫자는 이미지의 픽셀 너비 x 높이이지만 CARD-IMG-TOP이 이미지를 카드의 전체 너비로 늘리거나 줄이므로 여기서는 무시됩니다. 제목과 부제목에 멋진 형식이 지정되었으며 패딩 및 여백에 Bootstrap의 방향 유틸리티 중 하나를 사용했습니다. 자막에 보이는 MB-4는 마진 바텀을 의미합니다.

부트스트랩 패딩 및 여백 방향:

• pt/mt – 패딩/마진 상단
• pb/mb – 패딩/여백 하단
• pl/ml – 왼쪽 여백/여백
• pr/mr – 오른쪽 여백/여백
• py/my – 패딩/여백 y축(상단 및 하단)
• px/mx – 패딩/여백 x 축(왼쪽 및 오른쪽)

그런 다음 목록을 다시 캡슐화하는 목록 그룹이 있으며 가볍고 둥근 테두리가 있는 개별 요소입니다. 결과는 다음과 같습니다.

하단 이미지 캡

부트스트랩에는 CARD-IMG-BOTTOM이 없지만 카드 하단에 div를 만들고 그 안에

<div class="card">
            <div class="card-body">
              <p class="card-text">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
                unde corporis sed nam ad eius, pariatur, consectetur modi
                asperiores dolorem id quaerat eos quod nesciunt repudiandae aut
                temporibus rerum possimus.
              </p>
            </div>
            <img
              src="https://via.placeholder.com/100"
              alt=""
              class="card-img-top"
            />
          </div>

나는 또한 좋은 측정을 위해 좋은 오래된 lorem ipsum을 추가했습니다.

측면 이미지 캡

카드 내부에 ROW 래퍼를 추가하여 가로로 배치한 다음 COL을 사용하여 이미지의 크기와 카드의 나머지 부분을 정의하여 가로로 만들 수도 있습니다.

<div class="card">
            <div class="row">
              <img
                src="https://via.placeholder.com/100"
                alt=""
                class="card-img-top col-6"
              />
              <div class="card-body col-6">
                <h3 class="card-title">card title in the card's body</h3>
                <h4 class="card-subtitle mb-4">card subtitle</h4>
 
                <p>list group with links inside:</p>
                <ul class="list-group">
                  <li class="list-group-item">
                    <a href="#" class="card-link">List link 1</a>
                  </li>
                  <li class="list-group-item">
                    <a href="#" class="card-link">List link 2</a>
                  </li>
                  <li class="list-group-item">
                    <a href="#" class="card-link">List link 3</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

카드의 모든 내용을

로 래핑했습니다.

이미지와 카드 본문 모두에 COL-6을 추가하여 카드를 50-50으로 만듭니다.

배경으로 카드 이미지

우리는 또한 전체 카드에 이미지를 확장하고 그 위에 텍스트, 목록, 링크 등을 배치할 수 있습니다. 우리는 단순히 클래스에 CARD-IMG 클래스를 제공하고 다른 모든 것을 CARD-IMG-OVERLAY 클래스와 함께

에 배치합니다. 내부에서 원하는 대로 요소를 구성합니다.

<div class="card">
            <img
              src="https://via.placeholder.com/100"
              alt=""
              class="card-img"
            />
            <div class="card-img-overlay">
              <h4 class="card-title">Overlay Title</h4>
              <p class="card-text">
                Image text overlay
              </p>
              <p>second paragraph</p>
              <p>third paragraph</p>
              <p>fourth paragraph</p>
              <div class="btn-group w-100">
                <button class="btn btn-primary">blue</button>
                <button class="btn btn-info">teal</button>
                <button class="btn btn-danger">red</button>
                <button class="btn btn-dark">black</button>
                <button class="btn btn-success">green</button>
              </div>
            </div>
          </div>

여기에서 처음으로 너비 유틸리티를 사용했습니다. BTN-GROUP의 W-100.

부트스트랩 너비 및 높이 유틸리티:

w/h-25/50/75/100 – 너비/높이 25%/50%/75%/100%

우리의 경우 100%에서 CARD-BODY가 적용하는 패딩과 동일한 패딩을 뺀 값입니다. 이는 CARD-IMG-OVERLAY에 의해 여기에 적용됩니다.

카드 열

카드가 위에서 아래로 먼저 이동하고 열이 채워진 경우에만 새 카드에서 시작하도록 열에 카드를 배치하는 이 옵션도 있습니다.

<div class="card-columns">
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 1</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 2</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 3</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
        <div class="card">
          <h3 class="card-title text-center p-2">Title of card 4</h3>
          <div class="card-body">
            <p class="card-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam,
              rerum excepturi voluptate...
            </p>
          </div>
        </div>
      </div>

우리는 단순히 모든 카드를

로 포장하고 다음을 얻습니다.

부트스트랩 카드 스타일링

부트스트랩 카드 스타일 지정과 관련하여 배경 및 텍스트 색상은 물론 테두리 색상과 모양도 변경할 수 있습니다.

스타일은 전체 카드, 별도의 하위 구성 요소 또는 둘 다에 적용할 수 있습니다. 다음은 확인해야 할 몇 가지 스타일 카드입니다.

<div class="card bg-primary">
          <div class="card-header"><h3>Header 1</h3></div>
          <div class="card-body">
            <p>Body 1</p>
          </div>
          <div class="card-footer"><p>Footer 1</p></div>
        </div>
        <div class="card bg-success text-white">
          <div class="card-header"><h3>Header 2</h3></div>
          <div class="card-body">
            <p>Body 2</p>
          </div>
          <div class="card-footer text-danger"><p>Footer 2</p></div>
        </div>
        <div class="card bg-info text-dark border-danger">
          <div class="card-header"><h3>Header 3</h3></div>
          <div class="card-body">
            <p>Body 3</p>
          </div>
          <div class="card-footer"><p>Footer 3</p></div>
        </div>
        <div class="card border-primary bg-dark text-white">
          <div class="card-header border-success"><h3>Header 4</h3></div>
          <div class="card-body text-danger">
            <p>Body 4</p>
          </div>
          <div class="card-footer bg-warning text-info"><p>Footer 4</p></div>
        </div>

첫 번째 카드는 카드 자체에 파란색 배경(BG-PRIMARY)이 있어 전체 카드의 스타일을 지정합니다.

두 번째 카드에는 전체 카드에 녹색 배경(BG-SUCCESS)과 흰색 텍스트(TEXT-WHITE)가 있지만 바닥글에는 빨간색 텍스트(TEXT-DANGER)가 있어 상위 요소의 TEXT-WHITE를 무시합니다.

세 번째 카드에는 진한 파란색 배경(BG-INFO), 검정색 텍스트(TEXT-DARK) 및 빨간색 테두리(BORDER-DANGER)가 있습니다.

마지막으로 네 번째 카드는 전체 카드에 파란색 테두리(BORDER-PRIMARY), 검정색 배경(BG-DARK), 흰색 텍스트(TEXT-WHITE)가 있습니다.

머리글에 녹색 테두리(BORDER-SUCCESS), 본문에 빨간색 텍스트(TEXT-DANGER), 바닥글에 노란색 배경(BG-WARNING) 및 진한 파란색 텍스트(TEXT-INFO).

레인보우 카드는 다음과 같습니다.

요약

Bootstrap 카드는 많은 옵션이 있는 매우 강력한 구성 요소입니다. 그것들은 분리되고 응집력 있는 전체를 위한 카드 데크로 그룹화되거나 단일 개체로 융합하기 위해 카드 그룹으로 그룹화될 수 있습니다. 그들은 연속으로 흩어져 있거나 다른 모양을 위해 카드 열에 펼칠 수 있습니다.

다양한 레이아웃으로 이미지, 목록 및 링크를 호스팅할 수 있습니다.

그들은 또한 미리 설정된 스타일과 서식이 있는 고유한 머리글과 바닥글을 가질 수 있지만 사용자 정의할 수 있도록 열려 있습니다.

매우 유연하며 이전 설정이 거의 없이 짧은 시간에 Bootstrap으로 얼마나 많은 작업을 수행할 수 있는지 보여주는 가장 좋은 예 중 하나일 것입니다.