부트 스트랩은 어떤 목록 스타일을 지원합니까?

Bootstrap은 4 가지 목록 스타일을 지원합니다. 불완전한 목록, 주문 목록, 비정규 목록 (모두 기본 스타일) 및 수평 내비게이션 메뉴 및 태그 구름을 생성하는 데 사용할 수있는 인라인 목록이 지원됩니다. 또한 Bootstrap은 프로젝트 목록 또는 내비게이션 메뉴를 표시하기위한 둥근 모서리, 테두리 및 배경색으로 목록을 만드는 강력한 목록 그룹 클래스를 제공합니다.

부트 스트랩은 어떤 목록 스타일을 지원합니까? 이 질문은 굉장합니다! 표면에서는 단순 해 보이지만 더 깊이 파고 들면 부트 스트랩 핸들이 생각보다 유연한 목록을 찾을 수 있습니다. 단순한 스타일 조정 일뿐 만 아니라 다양한 목록 구조를 구축하기위한 강력한 도구를 제공하며 예상치 못한 트릭을 가지고 놀 수 있습니다.

먼저, 부트 스트랩의 핵심 아이디어를 이해해야합니다. 사전 정의 된 CSS 클래스를 통해 페이지 요소를 빠르게 구축하십시오. 따라서 목록과 관련하여 새로운 목록 유형을 발명하지는 않았지만 CSS 클래스를 영리하게 적용하여 HTML 표준 목록 요소 <ul></ul> , <ol></ol> 및 <dl></dl> 의 외관과 동작을 수정했습니다.

가장 기본적인 Bootstrap은 분리되지 않은 목록, 순서 목록 및 정렬되지 않은 목록에 대한 기본 스타일을 제공합니다. 간단하지만 이러한 스타일은 복잡한 목록을 구축하기위한 기초입니다. <ul></ul> 및 <ol></ol> 태그를 직접 사용할 수 있으며 Bootstrap은 기본 스타일을 자동으로 적용합니다.

그러나 흥미로운 점은 Bootstrap list-inline 과 list-group 두 가지 강력한 클래스를 제공한다는 것입니다. 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 과 함께 사용됩니다. 목록 항목에 마진과 다른 스타일 조정을 자동으로 추가하여 목록 항목 사이에 적절한 간격이 있는지 확인합니다. 간격을 더 세밀하게 제어하려면 CS를 직접 조정할 수 있습니다. Bootstrap은 프레임 워크 일 뿐이며 궁극적 인 스타일 컨트롤은 여전히 ​​당신의 손에 있습니다.

list-group 클래스는 더 강력하며 둥근 모서리, 테두리 및 배경색으로 목록을 만들 수 있으며, 일반적으로 항목 목록, 내비게이션 메뉴 또는 사이드 바를 표시하는 데 사용됩니다.

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

이 예제는 list-group 과 list-group-item 의 조합을 보여줍니다. active , disabled 등을 추가하여 목록 항목의 상태를 변경할 수 있으며 다른 클래스의 부트 스트랩을 결합하여보다 복잡한 스타일 효과를 달성 할 수도 있습니다. 예를 들어, list-group-flush 목록 항목 사이의 분배기를 제거 할 수 list-group-horizontal 목록 항목을 가로로 정렬 할 수 있습니다.

그러나 <dl></dl> 태그를 잊지 마십시오! 설명 목록을 정의하는 <dl></dl> , <dt></dt> 및 <dd></dd> 태그도 수정할 특별 클래스가 없다는 점을 제외하고는 부트 스트랩에도 적용됩니다. 이를 위해서는 CSS를 사용하여 스타일을 직접 조정하거나 부트 스트랩에서 제공하는 다른 도구 클래스를 사용하여 더 풍부한 효과를 달성해야합니다.

마지막으로, Bootstrap의 버전 업데이트가 약간의 미묘한 변경을 가져올 수 있음을 상기시키고 싶습니다. 따라서 최신 정보를 얻기 위해 공식 문서를 참조하는 것이 가장 좋습니다. 오래된 튜토리얼이나 블로그에 대해 미신적이지 말고 변화를 받아들이고 항상 배우는 개발자가 되십시오! 결국, 기술은 끊임없이 변화하고 있으며 지속적인 학습만으로는 무적 일 수 있습니다. 코드는 정적이 아니며 유연한 응용 프로그램이 가장 좋은 방법이라는 것을 기억하십시오.

위 내용은 부트 스트랩은 어떤 목록 스타일을 지원합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!