[HTML,CSS기초]11-2.Bootstrap 사용해보기

결과물

설명

bootstrap을 사용하면 이미 만들어진 디자인 요소를 웹사이트상 링크와 코드를 통해 쉽게 불러와 사용할 수 있는 사이트이다.

주요 코드

  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>

:먼저 bootstrap을 사용하고 싶으면 head태그안에 link태그 부분을 그대로 써줘야한다.

    <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
      <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
      <label class="btn btn-outline-primary" for="btncheck1">치킨</label>

      <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
      <label class="btn btn-outline-primary" for="btncheck2">피자</label>

      <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
      <label class="btn btn-outline-primary" for="btncheck3">햄버거</label>
    </div>

: 버튼3개가 붙어있는 코드

    <div class="card" style="width: 18rem;">
      <img src="코뮤니티.png" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">코뮤니티</h5>
        <p class="card-text">#파이썬#C언어#웹개발#앱 등등<br>모두를 위한 코딩 커뮤니티</p>
        <a href="https://cafe.naver.com/codeuniv" class="btn btn-primary">코뮤니티로 바로가기 Click!</a>
      </div>
    </div>

: 카드를 만드는 코드

Author And Source

이 문제에 관하여([HTML,CSS기초]11-2.Bootstrap 사용해보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sue06004/HTMLCSS기초11-2.Bootstrap-사용해보기

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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