부트스트랩 (13) 카드 (프로필 꾸미기)

Frameworks/Bootstrap 2019. 7. 10. 12:23
728x90
728x90

사진과 글, 버튼이 혼합된 프로필 카드 형식

  <div class="card m-3">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div> 
    <div class="card-footer">Footer</div>
  </div>

카드 윗부분 그림 => .card-img-top ( img 태그를 .card-body 보다 위쪽에 위치)
카드 아래부분 그림 => .card-img-bottom ( img 태그를 .card-body 아래쪽 위치)
 .stretched-link => 카드 전체 클릭가능

 

카드레이아웃

 <div class="card text-white bg-primary m-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

 

 

실습하기

 

 

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 카드</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

  <div class="container">
    <div class="row">
      <div class="card m-3" style="width: 350px">
        <img src="img/adult-art-artwork-1081685.jpg" class="card-img-top" alt="프로그래머">
        <!-- <div class="card-header">Header</div> -->
        <div class="card-body">
          <h4 class="card-title">programmer</h4>
          <p class="card-text">hello, it is sample. today is 10th July.</p>
          <a href="#" class="btn btn-primary stretched-link">see profile</a>
          <!-- stretched-link : 사진전체클릭 -->
        </div>
        <!-- <div class="card-footer">Footer</div> -->
      </div>
      <div class="card m-3" style="width: 350px">
        <div class="card-body">
          <h4 class="card-title">programmer</h4>
          <p class="card-text">hello, it is sample. today is 10th July.</p>
          <a href="#" class="btn btn-primary">see profile</a>
        </div>
        <img src="img/img_avatar1.png" class="card-img-bottom" alt="프로그래머">
        <!-- <div class="card-header">Header</div> -->
      </div>
      <div class="card m-3" style="width:400px">
        <img class="card-img-top" src="img/adult-art-artwork-1081685.jpg" alt="Card image">
        <div class="card-img-overlay">
          <h4 class="card-title">John Doe</h4>
          <p class="card-text">Some example text.</p>
          <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
</body>

</html>

 

 

사진소스 다운로드 페이지 : Pexels

 

Free stock photos · Pexels

Photo And Video Challenge Animal Kingdom Share your best animal photography for a chance to win!

www.pexels.com

 

 

컬러 그리드


코드는?

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 카드</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

  <div class="container">
    <div class="row">
      <div class="card m-3" style="width: 350px">
        <img src="img/adult-art-artwork-1081685.jpg" class="card-img-top" alt="프로그래머">
        <!-- <div class="card-header">Header</div> -->
        <div class="card-body">
          <h4 class="card-title">programmer</h4>
          <p class="card-text">hello, it is sample. today is 10th July.</p>
          <a href="#" class="btn btn-primary stretched-link">see profile</a>
          <!-- stretched-link : 사진전체클릭 -->
        </div>
        <!-- <div class="card-footer">Footer</div> -->
      </div>
      <div class="card m-3" style="width: 350px">
        <div class="card-body">
          <h4 class="card-title">programmer</h4>
          <p class="card-text">hello, it is sample. today is 10th July.</p>
          <a href="#" class="btn btn-primary">see profile</a>
        </div>
        <img src="img/img_avatar1.png" class="card-img-bottom" alt="프로그래머">
        <!-- <div class="card-header">Header</div> -->
      </div>
      <div class="card m-3" style="width:400px">
        <img class="card-img-top" src="img/adult-art-artwork-1081685.jpg" alt="Card image">
        <div class="card-img-overlay">
          <h4 class="card-title">John Doe</h4>
          <p class="card-text">Some example text.</p>
          <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
      <div class="container-fluid">
        <div class="row justify-content-center">
          <div class="card text-white bg-primary m-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            </div>
          </div>
          <div class="card text-white bg-success m-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
              <h5 class="card-title">Success card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            </div>
          </div>
          <div class="card text-white bg-danger m-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
              <h5 class="card-title">Danger card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            </div>
          </div>
          <div class="card text-white bg-warning m-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
              <h5 class="card-title">Warning card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            </div>
          </div>
        </div>
      </div>
    
  
</body>

</html>
728x90
728x90
저작자표시 비영리 변경금지

'Frameworks > Bootstrap' 카테고리의 다른 글

부트스트랩 (15) 구글폰트를 이용한 예제  (0) 2019.07.10
부트스트랩 (14) Carousel 슬라이드쇼  (2) 2019.07.10
부트스트랩 (12) Collapse 메소드  (0) 2019.07.10
부트스트랩 (11) onload 이벤트  (0) 2019.07.10
부트스트랩 (10) hidden, block, display:none 비교  (0) 2019.07.10
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,
250x250
250x250
English Korean
04-20 09:27

티스토리툴바

v