Bootstrap 5 레이아웃
10332 단어 bootstraphtmljavascriptwebdev
무엇이 조판을 안내하는 것입니까?
Bootstrap 레이아웃은 웹 사이트의 텍스트를 처리하는 데 도움을 줄 수 있는 내용 요소입니다. 전역 설정, 제목, 본문, 목록 등을 포함합니다.
장치
수동 설치(지퍼 백)
이 구성 요소를 사용하려면 먼저 MDB 5 Free package을 설치해야 합니다.
MDB CLI
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 파일과 같은 방식으로 가져오는 것을 권장합니다.
웹 패키지 통합
Starter을 사용하면 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는 기본 글로벌 디스플레이, 레이아웃 및 링크 스타일을 설정합니다.더 많은 제어가 필요할 때 텍스트 유틸리티 종류를 보십시오.
font-size(보통 16px)이라고 가정하기 때문에 방문자는 필요에 따라 브라우저의 기본값을 사용자 정의할 수 있습니다.$font-family-base, $font-size-base과 $line-height-base의 속성을 사용하여 <body>에 응용되는 인쇄의 기초로 한다.$link-color을 통해 글로벌 링크 색상을 설정합니다.$body-bg을 사용하여 <body>에 배경색을 설정합니다(기본값은 #fff)._reboot.scss에서 찾을 수 있고 전역 변수는 _variables.scss에서 정의할 수 있다.rem에 $font-size-base을 설치해야 합니다.맞춤형 구성
인도하다
.lead을 추가하여 단락을 돋보이게 합니다.<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est
non commodo luctus.
</p>
스타일 제목
.h1에서 .h6 클래스도 사용할 수 있으며 제목의 글꼴 스타일과 일치하지만 연결된 HTML 요소를 사용할 수 없는 경우에도 사용할 수 있습니다.<p class="h1">h1. MDB heading</p>
<p class="h2">h2. MDB heading</p>
<p class="h3">h3. MDB heading</p>
<p class="h4">h4. MDB heading</p>
<p class="h5">h5. MDB heading</p>
<p class="h6">h6. MDB heading</p>
웹 사이트에서 더 많은 맞춤형 예시를 볼 수 있습니다📄 문서 페이지 레이아웃
주요 리소스
다음은 이 구성 요소를 사용할 수 있도록 저희가 준비한 자원입니다.
관련 컨텐트 및 스타일 옵션 및 기능
Bootstrap 5 를 1.5시간 동안 배우기
추가 자원
학습 로드맵을 사용하여 네트워크 개발 학습:
🎓 Start Learning
저희 메일 리스트에 가입하여 개발자에게 전속 자원을 제공합니다
🎁 Get gifts
우리 개인 식당 단체에 가입하여 영감과 지역사회 체험을 얻다
👨👩👧👦 Ask to join
GitHub에서 STAR가 포함된 오픈 소스 패키지 생성 지원
Reference
이 문제에 관하여(Bootstrap 5 레이아웃), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mdbootstrap/bootstrap-5-typography-2f36텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
