Bootstrap의 목록 스타일을 사용하는 방법?

Bootstrap은 세 가지 핵심 목록 스타일을 제공합니다. .list-unstyled : 스타일 목록 없음, 총알 또는 숫자 제거. .list-inline : 목록 항목을 가로로 정렬하여 .list-inline-item 클래스와 함께 사용하십시오. 그리드 시스템 레이아웃 목록과 결합하여보다 복잡한 레이아웃을 생성합니다.

부트 스트랩에 대한 스타일을 목록 하시겠습니까? 이 질문은 굉장합니다! 많은 초보자들은 Bootstrap의 목록이 사용하기가 번거 롭다고 생각하지만 실제로 핵심은 디자인 개념을 이해하는 것입니다. Bootstrap은 목록 스타일을 공상으로 만들려고하지 않으며 단순성, 일관성 및 반응 형 디자인에 더 중점을 둡니다. 신속하게 시작하려면 대부분의 시나리오를 처리하기 위해 몇 가지 핵심 범주 만 마스터하면됩니다.

기본 사항에 대해 먼저 이야기 해 봅시다. 부트 스트랩은 CSS 프레임 워크를 기반으로한다는 것을 알아야합니다. 사전 정의 된 스타일 세트를 제공합니다. 이러한 스타일을 적용하려면 적절한 클래스 이름 만 사용하면됩니다. 목록의 경우, 부트 스트랩은 주로 세 가지 유형의 목록을 제공합니다 : ul ), 주문 목록 ( ol ) 및 설명 목록 ( dl ). 이 세 목록은 기본 HTML로 제공되며 Bootstrap은 추가 스타일 클래스를 추가합니다.

핵심은 Bootstrap에서 제공하는 몇 가지 주요 클래스를 이해하는 데 있습니다. 가장 일반적으로 사용되는 것은 .list-unstyled 입니다. 이 클래스는 목록 항목 전에 총알 ( • 또는 숫자)과 같은 기본 목록 스타일을 제거합니다. 단순하고 수정되지 않은 목록을 원한다면이 일은 단순히 마법의 도구입니다. Code example:

 <code class="html"><ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul></code>

그런 다음 .list-inline 있으므로 목록 항목을 수평으로 배열 할 수 있으며 종종 탐색 메뉴 또는 태그 구름에 사용됩니다. 예를 참조하십시오 :

 <code class="html"><ul class="list-inline"> <li class="list-inline-item">Item 1</li> <li class="list-inline-item">Item 2</li> <li class="list-inline-item">Item 3</li> </ul></code>

list-inline-item 클래스는 list-inline 과 함께 사용되므로 각 목록 항목에 일부 여백이 추가되어보다 편안해 보입니다.

보다 진보 되려면 Bootstrap의 그리드 시스템을 결합하여 목록을 레이아웃 할 수 있습니다. 예를 들어, 목록 항목을 다른 열에 배치하여 더 복잡한 레이아웃을 만들 수 있습니다. 이것은 더 유연하며 실제 요구에 따라 조정해야합니다. 이 측면에는 고정 된 패턴이 없으며 전적으로 디자인 의미에 따라 다릅니다.

물론주의를 기울여야 할 함정이 있습니다. 예를 들어, .list-inline 사용하지만 각 목록 항목에 대해 list-inline-item 클래스를 추가하지 않으면이 클래스가 실제로 작동하기 때문에 목록 항목이 수평으로 정렬되지 않을 수 있습니다. 예를 들어, 목록 항목이 매우 길고 수평 배열이 레이아웃에서 혼란을 일으킬 수있는 경우. 현재 응답 디자인 또는 다른 레이아웃 방법을 사용하는 것을 고려해야합니다.

성능 최적화 측면에서 부트 스트랩 자체는 많은 최적화를 수행했으며 일반적으로 추가 최적화를 수행 할 필요가 없습니다. 그러나 목록 항목이 많으면 가상 스크롤 기술을 사용하여 성능을 향상시키는 것이 좋습니다. 이것은 개요를 넘어서서 높은 수준의 주제입니다. 코드의 가독성과 유지 가능성은 약간의 성능 향상보다 항상 더 중요합니다. 코드를 작성하는 것은시를 쓰는 것과 같습니다. 예술적 개념에주의를 기울이고 우아해야합니다. 극단적 인 성능을 추구 할 때 코드 가독성을 희생하지 마십시오. 명확하고 간결한 코드는 왕입니다!

위 내용은 Bootstrap의 목록 스타일을 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!