SASS로 부트스트랩 5를 사용자 지정하기 위한 초보자 가이드

6623 단어 webdevcsstutorialbeginners
부트스트랩 CSS는 웹 페이지를 보기 좋게 만드는 훌륭한 프레임워크입니다. 하지만 어떻게 고유한 느낌을 주나요?

프로젝트 설정



이 가이드는 부트스트랩으로 SASS 설정이 작동하는 프로젝트가 있다고 가정합니다. 그렇지 않은 경우 ProductDiv Bootstrap Starter 프로젝트here를 복제합니다. ProductDiv를 사용하면 유틸리티 클래스로 부트스트랩 애플리케이션을 쉽게 개발할 수 있습니다! 자세한 내용은 tutorial 을 확인하십시오.

npm과 git이 설치되어 있는지 확인한 후 다음을 실행합니다.

git clone https://github.com/awestbro/productdiv-bootstrap-starter-free.git
cd productdiv-bootstrap-starter-free
npm i


앱을 시작하려면 npm run dev를 실행하고 http://localhost:3000/을 방문하세요! 이제 앱의 모양과 느낌을 맞춤설정할 수 있습니다.

부트스트랩 커스터마이징 작동 방식



Bootstrap 5는 SASS를 사용하여 변수 및 믹스인을 사용하여 CSS 파일을 컴파일합니다. SASS 변수의 멋진 기능 중 하나는 !default 속성입니다. $white: #fff !default; 와 같은 변수를 정의하면 변수$white가 이미 정의되지 않은 경우 이름이 #fff인 변수를 $white로 설정하도록 SASS 컴파일러에 지시합니다.

다행스럽게도 Bootstrap's variables은 모두 !default로 정의되어 라이브러리를 컴파일하기 전에 덮어쓸 수 있습니다.

예를 들어 Bootstrap 라이브러리를 가져오는 줄 앞에 $primary: blue; 파일에 theme.scss 줄을 추가해 보십시오. 저장한 다음 브라우저에서 앱을 확인하십시오. navbar와 기본 버튼은 이제 파란색이어야 합니다! 부트스트랩을 가져오기 전에 변수를 재정의하여 모든 변수를 덮어쓸 수 있습니다. 이 기능을 사용하면 정확한 스타일과 필요에 맞게 라이브러리를 변경할 수 있습니다!

나만의 색상 추가


$primary 와 같이 부트스트랩에서 원하는 색상을 재정의할 수 있습니다. 재정의할 모든 기본 색상에 대한 colors documentation을 확인하십시오.

작업할 주요 색상 변수는 다음과 같습니다.
  • $기본
  • 보조 $
  • $성공
  • $정보
  • $경고
  • $위험한
  • 라이트
  • $어두운

    • 이 중 하나를 덮어쓰면 이미 앱에 사용자 지정 느낌을 줄 수 있습니다! 부트스트랩은 $theme-colors 변수에서 이를 정의합니다. 해당 맵을 재정의하면 원하는 색상을 부트스트랩에 추가할 수 있습니다. 예를 들어 $theme-colors 맵에 $tertiary 변수를 추가하면 어떻게 될까요? Bootstrap은 bg-tertiary , btn-tertiary 등과 같은 유틸리티 클래스를 생성합니다.

    새 글꼴 가져오기



    글꼴을 변경하는 것만큼 간단하게 앱에 맞춤형 모양과 느낌을 줄 수 있습니다. 부트스트랩은 글꼴에 대한 변수도 제공하므로 덮어쓰기가 쉽지만 주의해야 할 몇 가지 문제가 있습니다.

    부트스트랩에는 글꼴에 대한 유틸리티 클래스가 내장되어 있습니다. 이러한 클래스를 사용하면 라이트, 볼드 등과 같은 글꼴에 다양한 가중치를 적용할 수 있습니다. 기본적으로 작동하는 글꼴을 얻으려면 부트스트랩이 지원하는 가중치를 알아야 합니다. 변수 파일에서 Bootstrap은 다음을 정의합니다.

    $font-weight-lighter:         lighter !default;   
$font-weight-light:           300 !default;   
$font-weight-normal:          400 !default;   
$font-weight-semibold:        600 !default;   
$font-weight-bold:            700 !default;   
$font-weight-bolder:          bolder !default;


    더 가볍고 대담한 무게를 수용하려면 100 및 900 무게도 포함해야 합니다.

    맞춤 글꼴을 가져오려면 여기에서 Google 글꼴을 사용할 수 있습니다: https://fonts.google.com/ . 필요한 모든 가중치가 있으므로 Lato 글꼴을 사용합니다! 이를 가져오려면 다음과 같이 SASS에서 @import 지시문을 사용하십시오.

    @import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
$font-family-sans-serif: "Lato", -apple-system, system-ui, BlinkMacSystemFont,
 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;

    $font-family-serif 변수를 덮어쓰면 부트스트랩이 가져온 Lato 글꼴을 사용합니다. 이제 우리의 응용 프로그램에는 아름다운 기본 글꼴이 있습니다!

    글꼴을 가져와서 특정 요소에만 적용할 수도 있습니다!

    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700;900&display=swap");
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.btn,
.card-header {
 font-family: "Poppins";
}

    $font- 변수를 사용하여 글꼴을 추가로 변경합니다. 예를 들어 $font-size-base를 1.2rem로 변경하면 모든 요소에서 글꼴 크기가 커집니다.

    글꼴은 방문자를 위한 분위기를 설정하고 기본 느낌에서 맞춤형으로 사이트를 변경할 수 있습니다!

    다음은?



    이제 변수를 덮어쓰는 방법을 잘 이해했으므로 원하는 대로 변경할 수 있습니다! 테두리 반경, 상자 그림자, 간격 변수를 변경하여 아름다운 맞춤 테마를 만들어 보세요!

    다음 지원서를 미리 시작하고 싶다면 ProductDiv's Bootstrap PRO starter kit을 확인하십시오! 사용자 지정 SASS 테마 및 예제가 포함되어 있으며 고품질 HTML 템플릿과 함께 시작할 수 있습니다!
    코드 냄새 162 - 너무 많은 괄호
    Paracetamol.js💊| #120: 자바스크립트 코드 설명

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage