[CSS] Bootstrap

Bootstrap

• html 코드 자동생성
  • ! 누르고 엔터
• 부트스트랩 적용하기
  • head 태그 블록 안에 title 태그 바로 밑에 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 붙여 넣기
  • body 태그 끝나는 줄 바로 위에 아래 코드넣기
    •  
    • ... <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> </body>
  • 부트스트랩의 모든 속성은 클래스 예약어(class=” “)로 지정된다.
• 버튼
  • <button class="btn btn-primary">버튼</button>
  • 종류

    •     <button type="button" class="btn btn-primary">Primary</button>
          <button type="button" class="btn btn-secondary">Secondary</button>
          <button type="button" class="btn btn-success">Success</button>
          <button type="button" class="btn btn-danger">Danger</button>
          <button type="button" class="btn btn-warning">Warning</button>
          <button type="button" class="btn btn-info">Info</button>
          <button type="button" class="btn btn-light">Light</button>
          <button type="button" class="btn btn-dark">Dark</button>
          <button type="button" class="btn btn-link">Link</button>

• 레이아웃
  • 화면 너비에 따른 중단점
    • xs - 576px미만
    • sm - 576px이상
    • md - 786px이상
    • lg - 992px이상
    • xl - 1200px이상
    • 예시

      •     <div class="container-sm">100% 너비: small 중단점까지</div>
            <div class="container-md">100% 너비: medium 중단점까지</div>
            <div class="container-lg">100% 너비: large 중단점까지</div>
            <div class="container-xl">100% 너비: extra large 중단점까지</div>

  • 레이아웃은 12 그리드 시스템 사용
    • 내부적으로 flex를 기본으로 사용
    • 화면의 한줄을 12칸으로 구분한다. (12가 넘으면 다음줄로 가버린다)
      • col-12
      • col-6 col-6
      • col-4 col-4 col-4
    • 예시

    •     <div class="container">
              <div class="row">
                  <div class="col-12">
                      col-12
                  </div>
              </div>
          </div>
          <div class="container-fluid">
              <div class="row">
                  <div class="col-12">
                      col-12
                  </div>
              </div>
          </div>
          <div class="container">
              <div class="row">
                  <div class="col-6">
                      col-6
                  </div>
                  <div class="col-6">
                      col-6
                  </div>
              </div>
          </div>
          <div class="container">
              <div class="row">
                  <div class="col-4">
                      col-4
                  </div>
                  <div class="col-4">
                      col-4
                  </div>
                  <div class="col-4">
                      col-4
                  </div>
              </div>
          </div>

  • container
    • 반응형으로 관리하는 부트스트랩 예약어 (창을 늘리면 같이 작아지거나 커지는)
    • 화면너비가 중단점에 따라 나누어 떨어진다.
  • container-fluid
    • 화면너비에 따라서 같이 커지나 작아진다. (창을 늘려도 고정되는 )
  • row
    • 12그리드에서 1행을 의미한다.
  • display
    • none
      • d-none
        • 해당 자리가 옆의 값으로 대체
      • invisible
        • 내용만 보이지 않는다.
    • block
      • d-sm-block
        • sm 사이즈 일때만 보이도록 한다.
    • inline
    • inline-block
• 아코디언
  • 내용 접기/펼치기 가능
• 캐러셀
  • 이미지, 텍스트 슬라이드