간단한 부트스트랩 카드

11336 단어 beginnerstutorialcsswebdev
다음은 간단한 부트스트랩 카드를 만드는 방법입니다.

더 많은 부트스트랩 카드 예제를 보려면 여기를 방문하십시오 - Bootstrap Card Examples

먼저 새 index.html 파일에서 기본 html 형식을 만들고 부트스트랩 스타일시트를 연결합니다.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Cat Bootstrap Card</title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
</head>
<body>
</body>
</html>


카드용 컨테이너 만들기



이제 카드의 모든 요소를 ​​포함할 html 컨테이너를 만듭니다. 컨테이너에는 상단 이미지, 제목, 설명 및 더 읽기 버튼이 있습니다.

  <div class="container">
      <div class="row mt-5 justify-content-center">
        <div class="col">
          <div class="card custom-card border-0" style="width: 20rem;">
            <img
              src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
              class="card-img-top"
              alt="cat-image"
            />
            <div class="card-body">
              <h5 class="card-title font-weight-bold">
                Thinking of getting cat ?
              </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>
              <a href="#" class="btn my-btn">Read more</a>
            </div>
          </div>
        </div>
      </div>
    </div>


컨테이너를 만든 후 스타일을 지정할 시간입니다.

전체 카드 스타일 지정




.custom-card {
  margin: 0px auto;
  box-shadow: 0px 0px 50px rgba(165, 165, 165, 0.4);
  cursor: pointer;
}


제목 및 설명 스타일 지정




.custom-card .card-title {
  font-size: 1.4rem;
}
.custom-card .card-text {
  color: #696969;
}


버튼 스타일 지정 및 간단한 호버 효과 추가




.custom-card .my-btn {
  background: #ba7b43;
  color: white;
}
.custom-card .my-btn:hover {
  color: white;
  background: #885427;
}


스타일 지정은 여기까지입니다. 이제 모든 css와 html을 결합합니다.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<style>
.custom-card {
  margin: 0px auto;
  box-shadow: 0px 0px 50px rgba(165, 165, 165, 0.4);
  cursor: pointer;
}
.custom-card .card-title {
  font-size: 1.4rem;
}
.custom-card .card-text {
  color: #696969;
}
.custom-card .my-btn {
  background: #ba7b43;
  color: white;
}
.custom-card .my-btn:hover {
  color: white;
  background: #885427;
}
</style>
</head>
<body>
  <div class="container">
      <div class="row mt-5 justify-content-center">
        <div class="col">
          <div class="card custom-card border-0" style="width: 20rem;">
            <img
              src="https://images.pexels.com/photos/57416/cat-sweet-kitty-animals-57416.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
              class="card-img-top"
              alt="cat-image"
            />
            <div class="card-body">
              <h5 class="card-title font-weight-bold">
                Some text here?
              </h5>
              <p class="card-text">
                You can enter a simple description here.
              </p>
              <a href="#" class="btn my-btn">Read more</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>


다음은 출력입니다.

Go Course: 유용한 명령
더 이상 Makefile을 사용하지 않습니다! 대신 나는 bake-cli를 사용합니다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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