부트스트랩 커스텀 사용 설명


- npx : Node Package eXecute의 약자. 즉, 노드 패키지를 실행하라는 뜻입니다.
- --watch : 소스에 변형이 일어날 때마다 자동으로 컴파일을 시켜주는 명령어입니다.
- css/style.scss css/style.css : 'css폴더 안의 style.scss가 css폴더 안의 style.css파일로'라는 뜻입니다.

커맨드 창에서 다음을 실행
npx sass --watch .\scss\bootstap-custom-5.2.0.scss .\scss\bootstap-custom-5.2.0.css

예) src\main\resources\static> npx sass --watch .\scss\bootstap-custom-5.2.0.scss .\scss\bootstap-custom-5.2.0.css

https://themestr.app/theme


동영상

https://youtu.be/9FX5NgRrdnc


==============================================================================

동영상

부트스트랩 테마 및 색상 사용자 정의 -  쉬운 방법

https://youtu.be/9FX5NgRrdnc


index.html  생성
Album example 소스 참조
https://getbootstrap.com/docs/5.0/examples/album/



1.npm install -g sass

:\IntelliJ IDEA\bootstrap>npm install -g sass

added 17 packages, and audited 18 packages in 2s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


2.npm init

임의 패키지 이름 : custom-bootstrap

다른 것들은 임의 기본값 : 엔터

E:\IntelliJ IDEA\bootstrap\css>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (css) custom-bootstrap
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\IntelliJ IDEA\bootstrap\css\package.json:

{
  "name": "custom-bootstrap",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)



3. npm install --save bootstrap


4. css\bootstap.scss 파일 생성


5. 다음 사이트를 통해 컬러 및 폰트 등 설정
1)https://themestr.app/theme

2)https://huemint.com/bootstrap-basic/
좌측 메뉴에서  Bootstrap 선택후 우측 상단에서 Generate 버튼 클릭
홈페이지 하단에 SCSS code 생성된다.


다음과 같이 작성

/*! `Custom` Bootstrap 5 theme */
@import url(https://fonts.googleapis.com/css?family=Kreon:200,300,400,700);
$headings-font-family:Kreon;

$white: #ffffff;

$theme-colors: (
    "light":      #eee6d2,
    "dark":       #1f9898,
    "primary":    #d2cb03,
    "secondary":  #2c7b66,
    "info":       #0086d4,
    "success":    #43ba00,
    "warning":    #ffc755,
    "danger":     #fc005a,
);



// Add SASS theme customizations here..
//모든 부트스트랩 포함할 경우
@import "node_modules/bootstrap/scss/bootstrap";


#npx sass --watch bootstrap.scss bootstrap.css

부트스트랩 커스텀 사용 설명


- npx : Node Package eXecute의 약자. 즉, 노드 패키지를 실행하라는 뜻입니다.
- --watch : 소스에 변형이 일어날 때마다 자동으로 컴파일을 시켜주는 명령어입니다.
- css/style.scss css/style.css : 'css폴더 안의 style.scss가 css폴더 안의 style.css파일로'라는 뜻입니다.

커맨드 창에서 다음을 실행
npx sass --watch .\scss\bootstap-custom-5.2.0.scss .\scss\bootstap-custom-5.2.0.css

예) src\main\resources\static> npx sass --watch .\scss\bootstap-custom-5.2.0.scss .\scss\bootstap-custom-5.2.0.css

https://themestr.app/theme


동영상

https://youtu.be/9FX5NgRrdnc


==============================================================================

동영상

부트스트랩 테마 및 색상 사용자 정의 -  쉬운 방법

https://youtu.be/9FX5NgRrdnc


index.html  생성
Album example 소스 참조
https://getbootstrap.com/docs/5.0/examples/album/



1.npm install -g sass

:\IntelliJ IDEA\bootstrap>npm install -g sass

added 17 packages, and audited 18 packages in 2s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


2.npm init

임의 패키지 이름 : custom-bootstrap

다른 것들은 임의 기본값 : 엔터

E:\IntelliJ IDEA\bootstrap\css>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (css) custom-bootstrap
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\IntelliJ IDEA\bootstrap\css\package.json:

{
  "name": "custom-bootstrap",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)



3. npm install --save bootstrap


4. css\bootstap.scss 파일 생성


5. 다음 사이트를 통해 컬러 및 폰트 등 설정
1)https://themestr.app/theme

2)https://huemint.com/bootstrap-basic/
좌측 메뉴에서  Bootstrap 선택후 우측 상단에서 Generate 버튼 클릭
홈페이지 하단에 SCSS code 생성된다.


다음과 같이 작성

/*! `Custom` Bootstrap 5 theme */
@import url(https://fonts.googleapis.com/css?family=Kreon:200,300,400,700);
$headings-font-family:Kreon;

$white: #ffffff;

$theme-colors: (
    "light":      #eee6d2,
    "dark":       #1f9898,
    "primary":    #d2cb03,
    "secondary":  #2c7b66,
    "info":       #0086d4,
    "success":    #43ba00,
    "warning":    #ffc755,
    "danger":     #fc005a,
);



// Add SASS theme customizations here..
//모든 부트스트랩 포함할 경우
@import "node_modules/bootstrap/scss/bootstrap";


#npx sass --watch bootstrap.scss bootstrap.css