부트 5 서스펜션 효과

무엇이 정지 유도 효과입니까?

사용자가 컴퓨터 커서를 요소를 활성화하지 않고 요소 위에 놓으면 부트 서스펜션 효과가 나타납니다.정지 효과는 사이트를 더욱 상호작용성을 가지게 한다.

장치

수동 설치(지퍼 백)

이 구성 요소를 사용하려면 먼저 설치해야 합니다MDB 5 Free package.

MDB CLI

Dell Quick Start Tutorial 프로그램을 통해 MDB 5 및 MDB CLI의 잠재력을 파악하고 활용

NPM

선결 조건
프로젝트를 시작하기 전에 설치Node LTS (12.x.x recommended)를 확인하십시오.

장치
프로젝트에 MDB UI KIT를 설치하려면 터미널에서 다음 명령을 쉽게 입력합니다.npm i mdb-ui-kit
JS 모듈 가져오기
전체 라이브러리 또는 개별 모듈을 가져올 수 있습니다.import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module
CSS 파일 가져오기
MDB 스타일시트를 가져오려면 다음 구문을 사용합니다.@import '~mdb-ui-kit/css/mdb.min.css';
SCSS 모듈 가져오기
단일 SCSS 모듈을 가져올 수도 있습니다.이 동작을 정확하게 실행하기 위해서, node modules/mdb ui kit/src/scss 위치에서 프로젝트로 직접 복사하고, CSS 파일과 같은 방식으로 가져오는 것을 권장합니다.

웹 패키지 통합
DellStarter을 사용하면 Webpack을 기반으로 새 프로젝트를 작성하는 과정을 크게 가속화할 수 있습니다.

CDN

CDN 설치는 MDB UI KIT를 프로젝트와 통합하는 가장 간단한 방법 중 하나입니다.최신 컴파일된 JS 스크립트 태그와 CSS 링크 태그를 cdnjs에서 응용 프로그램으로 복사하기만 하면 됩니다.
만약 당신이 필요하다면, 글씨체가 정말 훌륭하고 로보토 글씨체를 추가하는 것을 잊지 마세요.다음은 샘플 코드입니다.

CSS

<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css"
  rel="stylesheet"
/>

JS

<!-- MDB -->
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"
></script>

개시하다

MDB 롤오버 효과는 사용자가 요소를 활성화하지 않고 요소 위에 컴퓨터 커서를 놓으면 발생합니다.정지 효과는 사이트를 더욱 상호작용성을 가지게 한다.
그러나 스톱 효과와 기능 요소(예를 들어 스톱 다운 메뉴나 스톱 후에만 볼 수 있는 숨김 단추)를 혼합해서 사용하는 것은 좋지 않다. 왜냐하면 이런 방법은 이동에 불리하기 때문이다.
MDB는 모바일 우선 순위 프레임워크이기 때문에 모든 구성 요소를 터치스크린에 쉽게 사용할 수 있도록 하는 데 매우 중요합니다.
이것이 바로 우리의 정지 효과가 온화하고 장식적인 이유이다.

맞춤형 구성

기본 예
다음은 정지 효과를 사용하는 가장 흔히 볼 수 있는 예이다. 한 장의 그림이 링크로 바뀌면 클릭할 때 추가적인 파문 효과가 나타난다.
또한 섀도우와 필렛을 추가하고data-mdb-attribute 물결 색상을 조명으로 변경했습니다.

<div
  class="bg-image hover-overlay ripple shadow-1-strong rounded"
  data-mdb-ripple-color="light"
>
  <img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="w-100" />
  <a href="#!">
    <div class="mask" style="background-color: rgba(251, 251, 251, 0.2)"></div>
  </a>
</div>

초점화하다
확대/축소 서스펜션 효과를 적용하려면 약간 다르지만 더 간단한 문법을 사용해야 한다..hover-zoom클래스를 .bg-image원소에 추가하기만 하면 됩니다.

<div class="bg-image hover-zoom">
  <img src="https://mdbootstrap.com/img/new/standard/city/053.jpg" class="w-100" />
</div>

혼합 효과
당신은 모든 효과를 자유롭게 서로 혼합할 수 있습니다.하지만 지나치지 않도록 주의해야 한다.MDB는 심플하고 미묘한 원칙을 고수한다.

<div class="bg-image hover-overlay hover-zoom hover-shadow ripple">
  <img src="https://mdbootstrap.com/img/new/fluid/city/113.jpg" class="w-100" />
  <a href="#!">
    <div class="mask" style="background-color: rgba(57, 192, 237, 0.2)"></div>
  </a>
</div>

웹 사이트에서 더 많은 맞춤형 예시를 볼 수 있습니다📄 서스펜딩 효과 문서 페이지

주요 리소스

다음은 이 구성 요소를 사용할 수 있도록 저희가 준비한 자원입니다.

읽기📄 Hover effects tutorial & documentation<--여기서부터

당신의 프로젝트를 충분히 이용하기 위해서는 정지 효과와 관련된 다른 내용과 스타일 옵션도 알아야 한다.목록을 찾으려면 아래 부분을 참조하십시오.

미리 디자인된 내용과 스타일 요소를 📥 Starter Bootstrap 5 templates에 사용할 수 있습니다.

템플릿은 📦 Free UI Kit for Bootstrap 5의 일부입니다.

프로젝트를 완료하면 CLI를 사용하여 프로젝트를 게시할 수 있습니다💽 Free hosting (beta).

관련 컨텐트 및 스타일 옵션 및 기능

Theme

Animations

Background Image

Colors

Figures

Flags

Icons

Images

Masks

Shadows

Typography

Bootstrap 5 를 1.5시간 동안 배우기

추가 자원

학습 로드맵을 사용하여 네트워크 개발 학습:
🎓 Start Learning
저희 메일 리스트에 가입하여 개발자에게 전속 자원을 제공합니다
🎁 Get gifts
우리 개인 식당 단체에 가입하여 영감과 지역사회 체험을 얻다
👨‍👩‍👧‍👦 Ask to join
GitHub에서 STAR가 포함된 오픈 소스 패키지 생성 지원