Materialize는 고전적인 원칙을 사용하고 이를 혁신 및 기술과 결합하는 디자인용 CSS 프레임워크입니다. Materialise의 창시자는 사용하는 플랫폼에 관계없이 모든 사용자에게 모든 유형의 제품에서 통일된 사용자 경험을 제공하는 디자인 시스템을 개발한 Google입니다. 탐색경로(Breadcrumbs)는 Materialise CSS에 내장된 구성 요소로, 웹 사이트나 웹 애플리케이션에서 여러 레벨이 있을 때 사용자의 현재 위치를 표시하는 데 주로 사용됩니다.
이 글에서는 구체화 CSS의 탐색경로 클래스를 살펴보겠습니다.
이동 경로를 쉽게 생성할 수 있도록 Materialise CSS에 CSS 클래스가 있습니다. 사용된 클래스는 다음과 같습니다 -
Breadcrumbs − 이동 경로는 마지막 앵커 태그가 활성화되어 있고 나머지는 회색으로 표시되어 있음을 표시하는 데 사용됩니다.
nav-wrapper class − 이 클래스는 탐색 구성 요소를 이동 경로로 설정하는 데 사용됩니다.
Materialize CSS에서 탐색경로를 생성하는 구문을 살펴보겠습니다
위의 예에서는 먼저 탐색 태그를 연 다음 nav-wrapper 클래스를 만든 다음 3개의 서로 다른 앵커 태그를 만들고 이동 경로 클래스를 제공한 것을 볼 수 있습니다.
탐색경로 탐색의 개념을 더 잘 이해하기 위해 예를 살펴보겠습니다
예제에서 우리가 취할 접근 방식은 간단한 탐색경로를 만드는 것입니다. 즉, HTML이 탐색경로 페이지를 가리킵니다. 코드를 살펴보겠습니다
으아악위 예에서는 "nav" 요소 내부에 있는 요소를 고정하는 데 도움이 되는 "breadcrumb" 클래스를 사용했습니다. 사용자는 "청록색" 또는 "밝은 파란색"과 같은 다른 클래스를 사용하여 이동 경로의 색상을 변경할 수 있습니다. 또는 사용자가 이동 경로의 위치를 오른쪽으로 변경하려는 경우 "right" 클래스를 사용할 수 있습니다.
Note − 구체화 CSS를 설치하는 방법에는 여러 가지가 있습니다. 한 가지 방법은 구체화 CSS의 공식 웹사이트로 이동하여 최신 버전을 다운로드하는 것입니다. 여기서 Materialize.min.js를 다운로드하고 구체화해야 합니다. 프로젝트가 저장된 디렉토리의 min.css.
materialize CSS를 설치하거나 사용하는 두 번째 방법은 CDN 버전을 사용한 다음 스크립트 태그 내에 이러한 CDN 링크를 포함시키는 것입니다. 그러면 구체화 CSS의 모든 기능을 사용할 수 있습니다.
Materialize CSS의 탐색경로 카테고리를 이해하는 또 다른 예를 살펴보겠습니다
이 예에서는 활성 상태인 탐색경로의 현재 위치를 사용하여 간단한 탐색경로를 생성하겠습니다.
이동 경로를 만드는 코드는 다음과 같습니다.
으아악위 코드에서는 먼저 구체화 CSS CDN과 일부 외부 글꼴을 추가한 다음 HTML 코드를 시작하고 거기에 이동 경로 클래스를 사용하고 세 개의 링크를 추가한 다음 탐색 래퍼를 변경했습니다.
Materialize CSS는 머티리얼 디자인을 기반으로 하고 개발자가 사용자 정의 구성 요소와 애니메이션 및 전환을 사용할 수 있으므로 반응성이 뛰어난 프런트 엔드 프레임워크입니다. 그런 다음 프레임워크가 사용자에게 모든 플랫폼에 걸쳐 반응형 시스템을 제공하므로 사용자 경험에 중점을 둡니다. 사용자가 사용할 수 있습니다.
CSS를 구현하는 데 사용할 수 있는 다양한 테마가 있으며, 자세한 예제를 통해 쉽게 사용할 수 있습니다.
Materialize CSS는 모든 플랫폼에 세련된 사용자 경험을 제공하기 위해 Google이 디자인과 혁신 및 기술을 결합한 언어입니다. 이동 경로는 Materialise CSS에 내장된 구성 요소입니다. 콘텐츠의 양이 많은 경우, 다양한 클래스를 활용하여 탐색경로를 쉽게 생성할 수 있습니다.
이 글에서 우리는 구체화 CSS의 탐색경로 클래스와 구체화 CSS가 무엇인지 살펴보았습니다.
위 내용은 Materialise CSS에는 탐색경로에 어떤 카테고리가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!