부트 스트랩에서 목록을 만드는 방법?

Bootstrap 목록은 순서대로 목록, 주문 목록 및 설명 목록을 포함하여 다양한 목록 스타일을 제공합니다. List-Group 및 List-Group-Item과 같은 클래스 이름을 사용하면 아름답고 일관된 목록을 쉽게 만들 수 있습니다. 또한 Bootstrap은 아이콘, 링크 및 유연한 레이아웃으로 복잡한 목록을 작성하는 것을 지원하지만 성능 문제를 피하고 코드를 간단하고 읽기 쉽게 유지하기 위해 올바르게 사용하도록주의하십시오.

부트 스트랩 목록? 이 질문은 굉장합니다! 많은 초보자들은 부트 스트랩 목록에 의해 혼란 스러울 것이지만, 실제로 상상했던 것만 큼 복잡하지는 않습니다. 이 기사에서는 Bootstrap의 목록을 철저히 이해하고 수년 동안 내가 강타한 함정과 효율적인 코딩 습관에 대해 이야기 해 봅시다. 그것을 읽은 후에는 베테랑처럼 부트 스트랩 목록을 쉽게 제어 할 수 있습니다.

기본 사항에 대해 먼저 이야기 해 봅시다. Bootstrap은 몇 가지 목록 스타일을 제공하며, 가장 일반적으로 가장 일반적인 목록 ( <ul></ul> ), 주문 목록 ( <ol></ol> ) 및 설명 목록 ( <dl></dl> )입니다. 이것이 일반적인 HTML과 다르지 않다고 생각할 수도 있습니다. 그렇습니다. 골격은 실제로 동일하지만 부트 스트랩의 마법은 CSS 스타일에 있습니다. 간단한 클래스 이름으로 아름답고 일관된 목록을 만들 수 있으므로 CSS 작성의 번거 로움을 저장할 수 있습니다.

간단한 예를 살펴보고 부트 스트랩의 매력을 경험해 봅시다.

 <code class="html"><ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> </ul></code>

이 코드는 깨끗하고 깔끔한 목록을 생성 할 수 있으며 스타일은 귀하를 위해 수행되었습니다. 클래스 이름 list-group 핵심이며 목록의 전체 스타일을 정의하며 각 목록 항목은 list-group-item 으로 장식됩니다. 매우 간단하지 않습니까?

물론 부트 스트랩 목록은 그 이상입니다. 다른 클래스 이름을 사용하여 아이콘이있는 목록 또는 링크가있는 목록과 같은 다양한 스타일의 목록을 만들 수 있습니다. 예를 들어, 목록 항목에 아이콘을 추가하려면 다음을 수행 할 수 있습니다.

 <code class="html"><ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> An item <span class="badge bg-primary rounded-pill">14</span> </li> <!-- 其他列表项--> </ul></code>

여기서 우리는 d-flex , justify-content-between 및 align-items-center 와 같은 Flexbox와 관련된 클래스 이름을 사용하므로 목록 항목 및 배지 (작은 태그)의 내용을 아름답게 배열 할 수 있습니다. 이것은 부트 스트랩의 힘을 반영합니다. 간단한 스타일뿐만 아니라 유연한 레이아웃 솔루션도 제공합니다.

더 진보 된 것을 말하십시오. 때로는 중첩 목록과 같은 더 복잡한 목록을 만들어야합니다. 부트 스트랩도 쉽게 처리 할 수 ​​있습니다. HTML 사양에 따라 <ul></ul> 태그를 중첩 한 다음 해당 클래스 이름을 적용하면됩니다. 핵심은 다양한 목록 스타일을 구축하기위한 기초 인 Bootstrap의 클래스 이름 시스템을 이해하는 것입니다.

마지막으로, 성능 및 모범 사례. 부트 스트랩은 편리하지만 남용하지 마십시오. 목록이 매우 간단한 경우 부트 스트랩을 사용할 필요가 없습니다. 기본 HTML 및 CSS를 직접 사용하는 것이 더 가볍고 효율적 일 수 있습니다. 또한 과도한 중첩을 피하고 코드를 간결하고 읽기 쉽게 유지하십시오. 이는 프로젝트의 장기 유지 보수에 매우 중요합니다. 우아한 코드는 모든 놀라운 기술보다 낫습니다. 부트 스트랩 클래스 이름을 과도하게 사용했기 때문에 페이지로드 속도가 느려졌습니다. 나중에 코드를 단순화 한 후 문제가 해결되었습니다. 따라서 올바른 도구를 선택하고 코드를 깔끔하게 유지하는 것이 왕입니다.

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