Bootstrap 5 칩
15468 단어 bootstraphtmljavascriptwebdev
무엇이 유도 칩입니까?
칩(또는 라벨)은 같은 종류의 다른 문장을 보다 쉽게 분류하고 조회할 수 있다.
부트 레이블 및 칩은 텍스트와 아이콘을 사용하여 컨텐트를 분류합니다.탭과 칩은 전체 문장, 평론, 페이지를 쉽게 훑어볼 수 있게 한다.그들의 주요 목표는 방문객들에게 그들이 원하는 것을 얻을 수 있는 직관적인 방식을 제공하는 것이다.탭 하나만 사용하면 웹 개발과 관련된 모든 글을 찾을 수 있다는 것이 얼마나 편리한지 생각해 보세요.
장치
수동 설치(지퍼 백)
부트 이미지 구성 요소를 프로젝트에서 사용하려면 먼저 설치해야 합니다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>
맞춤형 구성
기본 예
칩은 작은 블록 정보를 표시하는 데 쓸 수 있다.그것들은 연락처나 라벨에 가장 많이 쓰인다.
HTML
<div class="chip" data-mdb-close="true">Text</div>
<div class="chip">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Contact Person" />
John Doe
<i class="close fas fa-times"></i>
</div>
<div class="chip chip-md">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Contact Person" />
John Doe
<i class="close fas fa-times"></i>
</div>
<div class="chip chip-lg">
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-6.jpg" alt="Contact Person" />
John Doe
<i class="close fas fa-times"></i>
</div>
대강
프로파일 스타일을 사용하려면 칩에
btn-outline-color를 추가할 수 있습니다.HTML
<div class="chip chip-outline btn-outline-primary" data-mdb-ripple-color="dark">
Primary
<i class="close fas fa-times"></i>
</div>
<div class="chip chip-outline btn-outline-secondary" data-mdb-ripple-color="dark">
Secondary
<i class="close fas fa-times"></i>
</div>
<div class="chip chip-outline btn-outline-success" data-mdb-ripple-color="dark">
Success <i class="close fas fa-times"></i>
</div>
<div class="chip chip-outline btn-outline-danger" data-mdb-ripple-color="dark">
Danger <i class="close fas fa-times"></i>
</div>
<div class="chip chip-outline btn-outline-warning" data-mdb-ripple-color="dark">
Warning <i class="close fas fa-times"></i>
</div>
<div class="chip chip-outline btn-outline-info" data-mdb-ripple-color="dark">
Info <i class="close fas fa-times"></i>
</div>
<div class="chip chip-outline btn-outline-light" data-mdb-ripple-color="dark">
Light <i class="close fas fa-times"></i>
</div>
<div class="chip chip-outline btn-outline-dark" data-mdb-ripple-color="dark">
Dark <i class="close fas fa-times"></i>
</div>
웹 사이트에서 더 많은 맞춤형 예시를 볼 수 있습니다📄 칩 문서 페이지
주요 리소스
다음은 이 구성 요소를 사용할 수 있도록 저희가 준비한 자원입니다.
관련 컨텐트 및 스타일 옵션 및 기능
Bootstrap 5 를 1.5시간 동안 배우기
추가 자원
학습 로드맵을 사용하여 네트워크 개발 학습:
🎓 Start Learning
저희 메일 리스트에 가입하여 개발자에게 전속 자원을 제공합니다
🎁 Get gifts
우리 개인 식당 단체에 가입하여 영감과 지역사회 체험을 얻다
👨👩👧👦 Ask to join
GitHub에서 STAR가 포함된 오픈 소스 패키지 생성 지원
Reference
이 문제에 관하여(Bootstrap 5 칩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mdbootstrap/bootstrap-5-chips-22fe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
