1850
No
부트스트랩 커스텀 사용 설명
- 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
댓글 ( 4)
댓글 남기기