Bootstrap 4 는 어떻게 자신의 색깔 과 스타일 을 맞 춥 니까?

Bootstrap 은 현재 가장 유행 하 는 CSS 프레임 워 크 로 많은 사이트,백 스테이지 관리 시스템 의 스타일 이 Bootstrap 을 바탕 으로 디자인 되 었 습 니 다.그러나 Bootstrap 은 파란색+옅 은 회색 색채 기 조 를 유지 하고 있 습 니 다.최신 Bootstrap 4 도 마찬가지 입 니 다.오래 보면 심미 적 피 로 를 피하 기 어렵 습 니 다.
Bootstrap 의 색상 테 마 를 어떻게 수정 합 니까?이 편 은 부 트 스 트랩 4 를 어떻게 맞 추 는 지 알려 주 며 페이지 를 더욱 남 다 르 게 만들어 준다.
0.필요 한 도구
Node.js 컴 파일

Bootstrap 4.Bootstrap 의 의존 패 키 지 를 다운로드 하려 면 컴퓨터 에 Node.jsBootstrap 4 소스 코드 를 설치 하고 Boostrap 을 수정 하려 면 소스 코드 가 필요 합 니 다.Bootstrap 공식 사이트(https://getbootstrap.com)를 방문 하면 소스 코드 를 다운로드 할 수 있 습 니 다

일부 지역 에 서 는 Bootstrap 4 홈 페이지 에 접근 할 수 없 을 수도 있 고,소스 코드 를 다운로드 할 수도 있 습 니 다.
1.색상 테마 맞 춤 설정
Bootstrap 은 맞 춤 형 제작 을 편리 하 게 하기 위해 일부 변 수 를 추출 하여 scss/ 에 두 었 습 니 다.varaibles.scss 파일 에 있 습 니 다.
이 파일 을 열 면 설정 이 매우 많 습 니 다.이 단락 을 찾 을 수 있 습 니 다:

$primary:    $blue !default;
$secondary:   $gray-600 !default;
$success:    $green !default;
$info:     $cyan !default;
$warning:    $yellow !default;
$danger:    $red !default;
$light:     $gray-100 !default;
$dark:     $gray-800 !default;

여기 가 바로 Bootstrap 의 기본 색 조 를 설정 하 는 곳 입 니 다.이 색상 값 을 수정 하면 다른 사이트 에서 스타일 이 현저히 달라 보일 수 있 습 니 다.메 인 톤 을 제외 하고 많은 색상 과 관련 된 변 수 를 제어 할 수 있 으 며 입력 상자 의 테두리 까지 가 늘 고 밤 색 도 조절 할 수 있 습 니 다.천천히 해 보 세 요.
예 를 들 어 수정variables.scss 의 이 변수 들:

$primary:    #e95420 !default;
$secondary:   #0e8420 !default;
$success:    #fff !default;
$light:     #e8cd56 !default;
$dark:     #e95420 !default;

$input-bg: #c34113;
$input-border-color: #c34113;
$input-placeholder-color: #ccc;
$input-color: #fff;

$jumbotron-bg: rgb(247, 247, 247);

Ubuntu 사이트 와 유사 한 색채 스타일 을 얻 을 수 있 습 니 다.

2.구성 요소 외관 미세 조정
색상 조정 외 에variables.scss 에는 아직도 많은 변수 가 있 습 니 다.Bootstrap 구성 요소 의 외관 을 미세 조정 할 수 있 습 니 다.예 를 들 어:$enable-shadows팝 업 구성 요소 주위 에 그림자 가 보일 지 여 부 를 제어 합 니 다.
$enable-rounded제어 구성 요소(단추,입력 상자,드 롭 다운 상자 등)주변 이 원 각 으로 표시 되 는 지 여부
$enable-gradients제어 구성 요소 의 배경 이 미약 한 그 라 데 이 션 효 과 를 나타 내 는 지 여부

이 통제 의 변 수 는 아직 많 으 니 일일이 열거 하지 않 겠 다.
4.부 트 스 트랩 컴 파일
변 수 를 수정 하 였 습 니 다.어떻게 자신의 Bootstrap CSS 파일 을 생 성 합 니까?npm 로 컴 파일 해 야 합 니 다.
컴 파일 하기 전에 각종 의존 패 키 지 를 다운로드 하고 인 스타 그램 명령 을 통 해 해결 해 야 합 니 다.

npm install

알림:Node.js 기본 npm 홈 페이지 다운로드 의존 패키지,느 릴 수 있 습 니 다.타 오 바 오 NPM 미 러 에서 다운로드 하 는 것 을 권장 합 니 다.속도 가 빠 릅 니 다.
먼저 집행 하 다.
그리고 npm 명령 을 사용 하 는 모든 곳 에서 cnpm 로 대체 할 수 있 습 니 다.
다운로드 가 끝 난 후에 컴 파일 을 실행 합 니 다:

npm run dist

잠시 만 기 다 려 주세요.컴 파일 된 css 파일 은 dist/css/디 렉 터 리 에 나타 납 니 다.프로젝트 에 복사 해서 사용 할 수 있 습 니 다!
5.웹 팩 프로젝트 에서 Bootstrap 맞 춤 형 제작
위 에서 말 한 내용 은 모두 소스 코드 를 컴 파일 하 는 방식 으로 Bootstrap 4 를 맞 춤 형 으로 만 들 었 습 니 다.Webpack 프로젝트 에서 Bootstrap 4 를 맞 추 려 면 어떻게 해 야 합 니까?
직접 수정 nodemodules 의 Bootstrap 소스 코드 가 맞지 않 습 니 다.공식 적 으로 추천 하 는 방식 은 프로젝트 에 custom.scss 파일 을 새로 만 들 고 수정 하고 싶 은 변 수 를 안에 쓰 는 것 입 니 다.

//       _variables.scss     ，     
$primary:    #e95420 !default;
$secondary:   #0e8420 !default;
...
//           Bootstrap    
@import "~bootstrap/scss/bootstrap";

그리고 웹 팩 을 컴 파일 할 때 custom.scss 도 컴 파일 된 파일 목록 에 추가 합 니 다.프로젝트 의 웹 팩.config.js 설정 을 수정 해 야 합 니 다.
그럼 웹 팩.config.js 는 어떻게 써 야 하나 요?
답 은 Boostrap 4 의 공식 문서 에 있 습 니 다.직접 뒤 져 보 실 수 있 습 니 다.이 마이크로 신 호 를 통 해 1 원 을 후원 할 수도 있 습 니 다.제 가 직접 답 을 드 리 겠 습 니 다.토호 여러분 께 감 사 드 립 니 다.당신 의 지 지 는 제 가 계속 공유 하 는 동력 입 니 다!:-)
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.