[javascript] Isotope과 Bootstrap 그리드 시스템을 함께 사용하는 방법은 무엇인가요?

01 Dec 2023

javascript

Bootstrap 파일 및 Isotope 라이브러리 파일을 다운로드하고 HTML 문서에 추가합니다. 다음은 예시입니다:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="path/to/bootstrap.css">
  <link rel="stylesheet" href="path/to/isotope.css">
</head>
<body>
  <!-- HTML content here -->
  
  <script src="path/to/jquery.js"></script>
  <script src="path/to/bootstrap.js"></script>
  <script src="path/to/isotope.js"></script>
</body>
</html>

그리드 레이아웃을 구성하기 위해 Bootstrap의 그리드 시스템을 사용합니다. 예를 들어, 다음과 같이 Bootstrap의 그리드 클래스를 사용하여 4개의 열로 구성된 그리드를 생성할 수 있습니다:

<div class="container">
  <div class="row">
    <div class="col-md-3">Content 1</div>
    <div class="col-md-3">Content 2</div>
    <div class="col-md-3">Content 3</div>
    <div class="col-md-3">Content 4</div>
  </div>
</div>

Isotope을 초기화하고 그리드 레이아웃에 적용합니다. JavaScript를 사용하여 다음과 같이 Isotope을 초기화할 수 있습니다:

$(document).ready(function() {
  // Isotope 초기화
  $('.row').isotope({
    itemSelector: '.col-md-3',
    layoutMode: 'fitRows',
  });
});

위 코드는 .row 클래스의 자식 요소 중 .col-md-3 클래스를 가진 요소를 그리드 아이템으로 설정하고, fitRows 레이아웃 모드를 사용하는 Isotope 그리드를 초기화합니다.

Isotope과 Bootstrap 그리드 시스템을 함께 사용하려면 Bootstrap 그리드 클래스를 사용하여 HTML 구조를 정의하고, Isotope을 초기화하여 그리드 아이템을 설정하고 레이아웃을 적용해야 합니다. 이렇게 하면 Isotope의 강력한 그리드 기능을 Bootstrap의 반응형 그리드와 함께 사용할 수 있습니다.

참고문서:

Isotope: https://isotope.metafizzy.co/
Bootstrap Grid System: https://getbootstrap.com/docs/4.5/layout/grid/