부트 스트랩 목록에 아이콘을 추가하는 방법?

부트 스트랩 목록에 아이콘을 추가하는 방법 : 아이콘을 목록 항목

<li>에 직접 밀고 아이콘 라이브러리에서 제공 한 클래스 이름 (예 : Font Awesome)을 사용하십시오. 아이콘과 텍스트를 부트 스트랩 클래스와 정렬합니다 (예 : D-Flex, 정당화 컨텐츠 중간, 정렬 중심). 부트 스트랩 태그 구성 요소 (배지)를 사용하여 숫자 또는 상태를 표시하십시오. 아이콘 위치를 조정하십시오 (Flex Direction : Row-Reverse;), 스타일을 제어 (CSS 스타일). 일반적인 오류 : 아이콘이 표시되지 않습니다 (아이콘 라이브러리 또는 클래스 이름은 소개되지 않습니다.

부트 스트랩 목록 + 아이콘? 이 질문은 굉장합니다! 이 시점에서 많은 초보자가 갇힐 것입니다. 실제로, 그것은 그렇게 복잡하지는 않지만 실제로 그것을 잘 사용하려면 약간의 기술이 필요합니다.

이 기사에서는 아이콘을 Bootstrap 목록에 우아하게 채우고 채팅하는 방법에 대해 이야기하고, 내가 밟은 몇 가지 함정과 팁을 공유해 봅시다. 그것을 읽은 후에는 목록 아이콘을 쉽게 얻고 부트 스트랩 기술을 향상 시키며 코드를 더 아름답고 쉽게 작성할 수 있습니다.

토대를 마련한 기본 지식 : 부트 스트랩 및 아이콘 라이브러리를 알아야합니다.

Bootstrap은 프론트 엔드 프레임 워크의 리더 인 오늘날 사용합시다. 아이콘 라이브러리는 일반적으로 Font Awesome 또는 Bootstrap 아이콘으로 사용되며 둘 다 매우 유용합니다. 나는 아이콘이 많고 빠르게 업데이트되기 때문에 개인적으로 Font Awesome을 선호합니다. 하나를 선택할 수 있습니다. 열쇠는 먼저 프로젝트에 소개하는 것입니다. 그렇지 않으면 사용할 아이콘이 없습니다!

핵심 : 아이콘과 목록의 조합

부트 스트랩 목록은 <ul></ul> 와 <ol></ol> 아이콘을 추가하려면 가장 직접적인 방법은 아이콘을 <li> 항목에 직접 채우는 것입니다.

예를 들어, 글꼴을 사용하십시오.

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awoome/6.0.0/css/all.min.css" integrity="sha512-9usaa10iro0hhonpyaivpjrylpvodwikdwkdwkdwkdwkdwkdwkdwkdwkdwkdwkdwkdwikdwkdwkdwkdwikdwikdwikdwikdwikdwikdwikdwikdwikdwicd ri4autropropr5aqvxu9xc6qopnzfeg == " crossorigin="익명 " referrerpolicy="no-Referrer ">

• 작업이 완료되었습니다 1
• 보류 작업 2

이 코드에서는 d-flex , justify-content-between 및 align-items-center 와 같은 부트 스트랩 클래스를 사용하여 아이콘과 텍스트를 정렬하여보다 편안하게 보이게했습니다. badge 는 부트 스트랩과 함께 제공되는 태그 구성 요소로 숫자 또는 상태를 표시하는 데 사용됩니다.

고급 : 아이콘 위치의 조정 및 스타일 제어

위의 예에서는 아이콘이 왼쪽에 있습니다. 위치를 변경하려면 justify-content-between 하거나 flex-direction: row-reverse; 아이콘의 색상과 크기를 변경하고 싶습니까? 예를 들어 CSS 스타일을 사용하여 다음과 같습니다.

 .list-Group-item i {
  색상 : #007bff; / * 파란색 아이콘 */
  마진 오른쪽 : 10px; / * 아이콘 및 텍스트 간격 */
  글꼴 크기 : 1.2EM; / * 아이콘 크기 */
}

일반적인 오류 및 디버깅 팁

가장 일반적인 실수는 아이콘이 표시되지 않는다는 것입니다. 그 이유는 아이콘 라이브러리가 소개되지 않았거나 클래스 이름이 잘못 쓰여지거나 코드를주의 깊게 확인하거나 브라우저의 개발자 도구를 사용하여 CSS 스타일 충돌이 있는지 확인하기 때문일 수 있습니다.

성능 최적화 및 모범 사례

성능을 위해 경량 아이콘 라이브러리를 사용하거나 필요한 아이콘 만 소개하고 모두 소개하지 마십시오. 코드 측면에서, 그것은 명확한 주석으로 간단하고 읽기 쉽게 유지하여 향후 쉽게 유지할 수 있습니다.

부트 스트랩은 유연성과 확장 성입니다. 프레임 워크에 의해 제한되지 말고 대담하게 시도하고 진정으로 마스터하기 위해 더 많은 연습을하십시오. 코드를 작성할 때는 실행할 수있을뿐만 아니라 아름답고 우아하게 글을 쓸 수 있어야합니다! 이것은 프로그래밍 마스터의 영역입니다, 하하!

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