> 웹 프론트엔드 > HTML 튜토리얼 > Materialise CSS에는 탐색경로에 어떤 카테고리가 있습니까?

Materialise CSS에는 탐색경로에 어떤 카테고리가 있습니까?

PHPz
풀어 주다: 2023-08-19 20:17:10
앞으로
761명이 탐색했습니다.

Materialize CSS中的面包屑有哪些类别?

Materialize는 고전적인 원칙을 사용하고 이를 혁신 및 기술과 결합하는 디자인용 CSS 프레임워크입니다. Materialise의 창시자는 사용하는 플랫폼에 관계없이 모든 사용자에게 모든 유형의 제품에서 통일된 사용자 경험을 제공하는 디자인 시스템을 개발한 Google입니다. 탐색경로(Breadcrumbs)는 Materialise CSS에 내장된 구성 요소로, 웹 사이트나 웹 애플리케이션에서 여러 레벨이 있을 때 사용자의 현재 위치를 표시하는 데 주로 사용됩니다.

이 글에서는 구체화 CSS의 탐색경로 클래스를 살펴보겠습니다.

Materialize CSS의 탐색경로 카테고리

이동 경로를 쉽게 생성할 수 있도록 Materialise CSS에 CSS 클래스가 있습니다. 사용된 클래스는 다음과 같습니다 -

Breadcrumbs − 이동 경로는 마지막 앵커 태그가 활성화되어 있고 나머지는 회색으로 표시되어 있음을 표시하는 데 사용됩니다.

nav-wrapper class − 이 클래스는 탐색 구성 요소를 이동 경로로 설정하는 데 사용됩니다.

Materialize CSS에서 탐색경로를 생성하는 구문을 살펴보겠습니다

구문

으아악

위의 예에서는 먼저 탐색 태그를 연 다음 nav-wrapper 클래스를 만든 다음 3개의 서로 다른 앵커 태그를 만들고 이동 경로 클래스를 제공한 것을 볼 수 있습니다.

탐색경로 탐색의 개념을 더 잘 이해하기 위해 예를 살펴보겠습니다

Example

의 중국어 번역은 다음과 같습니다:

Example

예제에서 우리가 취할 접근 방식은 간단한 탐색경로를 만드는 것입니다. 즉, HTML이 탐색경로 페이지를 가리킵니다. 코드를 살펴보겠습니다

으아악

위 예에서는 "nav" 요소 내부에 있는 요소를 고정하는 데 도움이 되는 "breadcrumb" 클래스를 사용했습니다. 사용자는 "청록색" 또는 "밝은 파란색"과 같은 다른 클래스를 사용하여 이동 경로의 색상을 변경할 수 있습니다. 또는 사용자가 이동 경로의 위치를 ​​오른쪽으로 변경하려는 경우 "right" 클래스를 사용할 수 있습니다.

Note − 구체화 CSS를 설치하는 방법에는 여러 가지가 있습니다. 한 가지 방법은 구체화 CSS의 공식 웹사이트로 이동하여 최신 버전을 다운로드하는 것입니다. 여기서 Materialize.min.js를 다운로드하고 구체화해야 합니다. 프로젝트가 저장된 디렉토리의 min.css.

materialize CSS를 설치하거나 사용하는 두 번째 방법은 CDN 버전을 사용한 다음 스크립트 태그 내에 이러한 CDN 링크를 포함시키는 것입니다. 그러면 구체화 CSS의 모든 기능을 사용할 수 있습니다.

Materialize CSS의 탐색경로 카테고리를 이해하는 또 다른 예를 살펴보겠습니다

Example

의 중국어 번역은 다음과 같습니다:

Example

이 예에서는 활성 상태인 탐색경로의 현재 위치를 사용하여 간단한 탐색경로를 생성하겠습니다.

이동 경로를 만드는 코드는 다음과 같습니다.

으아악

위 코드에서는 먼저 구체화 CSS CDN과 일부 외부 글꼴을 추가한 다음 HTML 코드를 시작하고 거기에 이동 경로 클래스를 사용하고 세 개의 링크를 추가한 다음 탐색 래퍼를 변경했습니다.

Materialize CSS란 무엇인가요?

Materialize CSS는 머티리얼 디자인을 기반으로 하고 개발자가 사용자 정의 구성 요소와 애니메이션 및 전환을 사용할 수 있으므로 반응성이 뛰어난 프런트 엔드 프레임워크입니다. 그런 다음 프레임워크가 사용자에게 모든 플랫폼에 걸쳐 반응형 시스템을 제공하므로 사용자 경험에 중점을 둡니다. 사용자가 사용할 수 있습니다.

CSS를 구현하는 데 사용할 수 있는 다양한 테마가 있으며, 자세한 예제를 통해 쉽게 사용할 수 있습니다.

결론

Materialize CSS는 모든 플랫폼에 세련된 사용자 경험을 제공하기 위해 Google이 디자인과 혁신 및 기술을 결합한 언어입니다. 이동 경로는 Materialise CSS에 내장된 구성 요소입니다. 콘텐츠의 양이 많은 경우, 다양한 클래스를 활용하여 탐색경로를 쉽게 생성할 수 있습니다.

이 글에서 우리는 구체화 CSS의 탐색경로 클래스와 구체화 CSS가 무엇인지 살펴보았습니다.

위 내용은 Materialise CSS에는 탐색경로에 어떤 카테고리가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:tutorialspoint.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿