벽돌과 잘 연주 할 부트 스트랩 탭이 있습니다

키 포인트

Bootstrap과 Masonry는 모두 강력한 웹 개발 도구이지만 동시에이를 사용하면 특히 탭을 숨기는 경우 레이아웃 오류가 발생할 수 있습니다. JavaScript 그리드 레이아웃 라이브러리 인 Masonry는 특정 브라우저 호환성 문제가 있더라도 불평등이있는 카드 그리드를 만드는 실행 가능한 솔루션입니다.

부트 스트랩 탭을 벽돌과 통합하는 것은 쉽지 않습니다. 기본 활성 탭 패널 내부의 그리드가 올바르게 나타날 수 있지만 탭 탐색 링크를 클릭하면 숨겨진 패널의 내용을 표시하면 그리드 항목이 잘못 쌓일 수 있습니다.

레이아웃 오류에 대한 솔루션은 각 패널이 표시된 후 석공 라이브러리를 다시 설치하는 것입니다. 이것은 "ship.bs.tab"이벤트를 사용하여 달성 할 수 있습니다. 이 솔루션을 사용하면 훌륭한 타일 레이아웃을 쉽게 만들 수 있습니다.
부트 스트랩은 가장 널리 채택 된 오픈 소스 프론트 엔드 프레임 워크 중 하나입니다. 프로젝트에 부트 스트랩을 포함 시키면 즉시 반응 형 웹 페이지를 만들 수 있습니다. 부트 스트랩 탭 위젯 (부트 스트랩이 제공하는 많은 JavaScript 구성 요소 중 하나)과 함께 벽돌을 사용하려고하면 어떤 종류의 성가신 동작이 발생할 것입니다.
• Masonry 웹 사이트에서 우리는 Masonry가… 라는 것을 읽었습니다
JavaScript 그리드 레이아웃 라이브러리. 사용 가능한 수직 공간을 기반으로 요소를 최적의 위치에 배치하여 벽에 돌을 짓는 메이슨과 비슷합니다.
나는이 문제를 해결 했고이 기사는 문제가있는 위치와 어떤 솔루션을 취할 수 있는지에 중점을 둡니다.
부트 스트랩 탭의 자세한 설명

부트 스트랩 탭 구성 요소에는 탭 탐색 요소와 여러 컨텐츠 패널의 두 가지 주요 관련 부분이 포함되어 있습니다. 페이지가로드되면 첫 번째 패널이 .active 클래스를 적용합니다. 이렇게하면 패널이 기본적으로 표시됩니다. 이 클래스는 JavaScript를 통해 탭 내비게이션 링크 연락처 이벤트를 통해 패널의 가시성을 전환하기 위해 사용됩니다.

한 곳에서 압박을받지 않고 별도의 블록으로 가장 잘 렌더링되는 웹 컨텐츠가있는 경우 부트 스트랩 탭 구성 요소가 편리 할 수 ​​있습니다.

왜 메이슨을 선택합니까?

경우에 따라 각 패널 내의 내용은 반응 형 그리드 레이아웃에 표시하기에 적합합니다. 예를 들어, 다양한 제품, 서비스 및 포트폴리오 프로젝트는 그리드 형식으로 표시 될 수있는 콘텐츠 유형입니다.

그러나 그리드 셀의 높이가 같지 않으면 다음이 발생할 수 있습니다.

두 컨텐츠 라인과 레이아웃이 손상된 것처럼 보이는 큰 차이가 있습니다.

Bootstrap은 Flexbox를 기반으로 새로운 카드 구성 요소로 Monospace 문제를 해결합니다. 카드 덱 클래스를 일련의 카드 구성 요소에 추가하면 Monospace 열을 구현하기에 충분합니다.

카드 길이가 일관되지 않으려면 CSS3 다중 열 레이아웃을 사용할 수 있습니다. (결국 일부 브라우저 호환성 문제가 있어도 전반적으로 꽤 좋습니다.) 이것은 카드 구성 요소와 함께 사용할 수있는 새로운 카드 열 옵션의 기초입니다. 그러나 여전히 Masonry JavaScript 라이브러리 상자에서 아름다운 애니메이션과 광범위한 브라우저 호환성을 좋아한다면 JavaScript는 여전히 실행 가능한 옵션입니다.

데모 페이지를 설정하십시오 데모 페이지를 시작하면 부트 스트랩 탭을 벽돌과 통합하는 것이 예상만큼 간단하지 않음을 설명하는 데 도움이됩니다.

이 기사의 데모 페이지는 부트 스트랩 웹 사이트에 제공된 스타터 템플릿을 기반으로합니다. 다음은 부트 스트랩 탭 구성 요소로 표시된 프레임 워크입니다. Nav Nav-TABS 클래스는 카키에 독특한 외관을 제공 할 책임이 있습니다. HREF 속성의 값은 단일 탭과 해당 탭 내용 사이의 관계를 형성합니다. 예를 들어, https://www.php.cn/link/6fbb2c2ee065c77a193d0057aab8fa11의 href 값은 집의 ID 값을 가진 div에서 탭의 내용과 관계를 설정합니다. .

또한 Bootstrap은 역할, ARIA-Controls 등과 같은 접근성 속성에 어떻게 초점을 맞추는지에 유의하십시오.

다음 코드 스 니펫은 탭 내용의 구조를 보여줍니다.

위에 작성된 탭 요소에 해당하는 각 탭 내용 부분과 유사한 구조를 추가하십시오.

전체 코드의 경우 Codepen 데모를 확인하십시오.

메이슨 라이브러리를 추가하십시오

<code class="language-html"><ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="https://www.php.cn/link/6fbb2c2ee065c77a193d0057aab8fa11" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="https://www.php.cn/link/0bd97cb91b8d57dad18542081fb8f2b1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="https://www.php.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul></code>

"Masonry.pkgd.min.js 다운로드"버튼을 클릭하여 공식 웹 사이트에서 Masonry를 다운로드 할 수 있습니다.

레이아웃 문제를 피하기 위해 라이브러리의 저자는 이미지로드 된 플러그인과 함께 Masonry를 사용하는 것이 좋습니다.

메이슨은 jQuery 라이브러리가 필요하지 않습니다. 그러나 부트 스트랩 JavaScript 구성 요소는 이미 jQuery를 사용하므로 삶을 더 쉽게 만들고 jQuery 방식으로 벽돌을 초기화 할 것입니다.

다음은 jQuery와 ImagesLoaded를 사용하여 벽돌을 초기화하는 스 니펫입니다.

위의 코드는 모든 카드 요소를 $ 컨테이너라는 변수로 랩핑하는 div를 캐시합니다.

다음, 몇 가지 권장 옵션을 사용하여 $ 컨테이너의 석조를 초기화하십시오. columnwidth 옵션은 수평 그리드 열의 너비를 나타냅니다. 여기에서는 클래스 이름을 사용하여 단일 카드 항목의 너비로 설정됩니다. 항목 선거 옵션은 프로젝트 요소로 사용할 어린이 요소를 나타냅니다. 여기에서는 단일 카드 항목으로 설정됩니다.

코드를 테스트 할 시간입니다.

<code class="language-html"><div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <h3>Tab 1 Content</h3>
  <div class="card-group">
    <div class="card">
      <img src="https://img.php.cn/" alt="Getting Bootstrap Tabs to Play Nice with Masonry ">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Card text here.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      </div>
    <div class="card">
      </div>
  </div>
</div></code>

오! 패널을 숨기는 데 무엇이 잘못 되었습니까?

위의 코드는 부트 스트랩 탭을 사용하지 않는 웹 페이지에서 잘 작동합니다. 그러나이 경우, 당신은 곧 이상한 일이 일어날 것이라는 것을 곧 알게 될 것입니다.

우선, 기본 활성 탭 패널 내부의 그리드가 올바르게 표시되기 때문에 꽤 좋아 보입니다.

그러나 탭 내비게이션 링크를 클릭하여 숨겨진 패널의 내용을 표시하면 다음이 발생합니다.

소스 코드를 보면 Masonry가 예상대로 발사되었지만 각 항목의 위치는 잘못 계산됩니다. 그리드 항목은 모두 카드 스택처럼 쌓입니다.

그 이상. 브라우저 창을 조정하면 그리드 항목이 올바르게 배치됩니다.

레이아웃 오류를 수정하자

탭 탐색 링크를 클릭 한 후 예기치 않은 레이아웃 오류가 명백 해지므로 부트 스트랩 탭에서 트리거 된 이벤트를 자세히 살펴 보겠습니다.

이벤트 목록은 매우 짧습니다. 이것이 바로입니다.

show.bs.tab fires 탭이 표시되면 해고가 표시되지만 새 탭이 표시되기 전에 shown.bs.tab 트리거 탭이 표시된 후. hide.bs.tab은 새 탭을 표시 할 때 해고됩니다 (이전 활성 탭이 숨겨져 있음) <.> hidden.bs.tab은 새 탭이 표시된 후 발사됩니다 (이전 활성 탭이 숨겨져 있음).

탭이 표시된 후 벽돌 레이아웃이 지저분 해지므로 show.bs.tab 이벤트를 선택하십시오. 다음은 이전 코드 스 니펫 바로 아래에 넣을 수있는 코드입니다.

다음은 위 코드에서 일어나는 일입니다. 테스트 코드

팔로우 한 경우 브라우저에서 데모를 시작하거나 아래 코드 펜 데모를 시도하여 결과를 확인하십시오. Codepen Demo Link

• 탭 내비게이션 링크를 클릭하고 이번에는 그리드 프로젝트가 각 컨텐츠 패널에 고르게 적용되는 방법에 유의하십시오. 브라우저의 크기를 조정하면 프로젝트가 아름다운 애니메이션 효과로 자체적으로 올바르게 재배치됩니다.
그게 다야, 그 일이 끝났어!
• 결론
• 이 기사에서는 부트 스트랩 탭 구성 요소를 Masonry JavaScript 라이브러리와 통합하는 방법을 시연했습니다.
모두 사용하기 쉽고 강력합니다. 그러나 그것들을 합치면 숨겨진 탭에 영향을 미치는 성가신 레이아웃 오류에 직면하게됩니다. 위에서 볼 수 있듯이 트릭은 각 패널이 보이면 벽돌 라이브러리를 다시 시작하는 것입니다.
• 이 솔루션을 사용하면 훌륭한 타일 레이아웃을 만드는 것이 산들 ​​바람이됩니다.
나는 당신에게 부트 스트랩을 행복하게 사용하기를 바랍니다!

부트 스트랩 탭 및 Masonry 's FAQ (FAQ)

(FAQ 부품은 여기에 삽입되어야합니다. 내용은 원래 FAQ 부품과 일치하며 의미 론적으로 변경되지 않도록 필요에 따라 약간 다시 작성됩니다)

<code class="language-html"><ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="https://www.php.cn/link/6fbb2c2ee065c77a193d0057aab8fa11" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="https://www.php.cn/link/0bd97cb91b8d57dad18542081fb8f2b1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="https://www.php.cn/link/18fb150bb65a5825c83969a59f3febc1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul></code>

.

위 내용은 벽돌과 잘 연주 할 부트 스트랩 탭이 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!