부트 스트랩에서 카드를 만드는 방법

부트 스트랩 카드를 만들려면 .card 클래스 컨테이너 및 하위 요소를 사용해야합니다. 1. 기본 구조에는 그림, 제목, 텍스트 및 버튼이 포함됩니다. 2. 머리와 바닥을 달성하기 위해 .card-header 및 .card-footer를 추가 할 수 있습니다. 3. .List-Group을 사용하여 목록 그룹 카드를 만듭니다. 4. 이미지 오버레이 텍스트 효과를 달성하기 위해 .card-img-overlay를 사용하십시오. 5. 스타일 최적화를 위해 .w-100, .shadow 및 .bg-와 같은 실제 클래스를 사용하십시오. 6. 다중 카드 레이아웃은 .row-col-와 결합하여 반응 형 그리드를 달성 할 수 있습니다. 7. 정상적인 기능을 보장하기 위해 Bootstrap 5의 CSS 파일이 도입되고 카드 구성 요소가 유연하고 다양한 장치에 적합해야합니다.

Bootstrap의 내장 카드 구성 요소 덕분에 부트 스트랩에서 카드를 만드는 것은 간단하고 유연합니다. 카드는 깨끗하고 경계 컨테이너의 이미지, 텍스트 및 링크와 같은 관련 컨텐츠를 그룹화하는 데 사용됩니다. Bootstrap 5를 사용하여 기본 카드를 만드는 방법은 다음과 같습니다.

기본 부트 스트랩 카드 구조

카드는 .card 클래스를 컨테이너로 사용하고 컨텐츠의 선택적 자식 요소를 사용하여 구축됩니다. 최소 예는 다음과 같습니다.

 <div class = "card"style = "width : 18rem;">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175702316553312.jpeg"  class="lazy"  src = "image.jpg"class = "card-img-top"alt = "card image">
  <div class = "card-body">
    <h5 class = "card-title"> 카드 제목 </h5>
    <p class = "card-text"> 카드 제목을 빌드 할 빠른 예제 텍스트. </p>
    <a href = "#"class = "btn btn-primary"> 어딘가로 이동 </a>
  </div>
</div>

주요 구성 요소 및 옵션

다양한 부트 스트랩 클래스를 사용하여 카드를 사용자 정의 할 수 있습니다.

• 헤더와 바닥 글이있는 카드

   <div class = "card">
    <div class = "Card-Header">
      추천
    </div>
    <div class = "card-body">
      <h5 class = "card-title"> 특별 제목 </h5>
      <p class = "card-text"> 아래에 지원 텍스트가 포함되어 있습니다. </p>
      <a href = "#"class = "btn btn-primary"> 버튼 </a>
    </div>
    <div class = "Card-fooger text-muted">
      최근에 업데이트되었습니다
    </div>
  </div>

• 목록 그룹이있는 카드

  

   <div class = "card"style = "width : 18rem;">
    <ul class = "List-Group List-Group-Flush">
      <li class = "list-group-item"> cras justo odio </li>
      <li class = "list-group-item"> dapibus ac facilisis </li>
      <li class = "list-group-item"> Eros의 Vestibulum </li>
    </ul>
  </div>

• 오버레이가있는 카드 (이미지 캡션)

   <div class = "card bg-dark text-white">
    <img src = "image.jpg"class = "card-img"alt = "...">
    <div class = "Card-Img-Overlay">
      <h5 class = "card-title"> 카드 제목 </h5>
      <p class = "card-text"> 오버레이 텍스트가 여기로 이동합니다. </p>
    </div>
  </div>

스타일링 및 레이아웃을위한 팁

• 응답 크기를 위해 w-100 또는 mx-auto 와 같은 유틸리티 클래스를 사용하십시오.
• 카드 그리드의 .row 및 .col-* 레이아웃의 카드를 결합하십시오.
• .bg-primary , .text-white to 스타일의 배경 및 텍스트와 같은 상황에 맞는 클래스를 사용하십시오.
• 깊이에 대해 .shadow-sm , .shadow 또는 .shadow-lg 로 그림자를 추가하십시오.

여러 카드의 경우 플렉스 또는 그리드 컨테이너로 마무리하십시오.

 <div class = "row">
  <div class = "col-md-4">
    <div class = "card">
      <!-카드 컨텐츠->
    </div>
  </div>
  <div class = "col-md-4">
    <div class = "card">
      <!-카드 컨텐츠->
    </div>
  </div>
  <div class = "col-md-4">
    <div class = "card">
      <!-카드 컨텐츠->
    </div>
  </div>
</div>

부트 스트랩 CSS가 HTML 파일에 포함되어 있는지 확인하십시오.

 <link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"rel = "스타일 시트">

그게 다야. 카드는 매우 재사용 가능하며 장치에서 잘 작동합니다. 콘텐츠를 구성하고 올바른 클래스를 적용하십시오.

위 내용은 부트 스트랩에서 카드를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!