Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Bootstrap4のカスタマイズ
Search
Kazunori-Kimura
March 17, 2018
Technology
0
220
Bootstrap4のカスタマイズ
Bootstrap4の紹介とCSS、JSのカスタマイズ方法について
Kazunori-Kimura
March 17, 2018
Tweet
Share
More Decks by Kazunori-Kimura
See All by Kazunori-Kimura
path-parser
kazunorikimura
0
380
objectのcloneを行う/How to clone of the object in js
kazunorikimura
0
400
クライアントサイドで大きなデータを扱うときのお話/Web Worker & IndexedDB
kazunorikimura
0
660
How freelance programmer works
kazunorikimura
0
120
moment.js
kazunorikimura
0
95
sequelize.pdf
kazunorikimura
0
580
Toward the world of "ready player one"
kazunorikimura
0
89
npmの便利なパッケージ: forever, winser
kazunorikimura
0
1k
npmの便利なパッケージ: Jest
kazunorikimura
0
130
Other Decks in Technology
See All in Technology
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
280
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
410
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
810
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
4
340
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
400
robocopy の怖い話/scary-story-about-robocopy
emiki
0
440
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
410
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
640
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
200
AIエージェントを支える設計
tkikuchi1002
12
3k
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
520
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing Experiences People Love
moore
142
24k
Building Adaptive Systems
keathley
43
2.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
A better future with KSS
kneath
238
17k
The Invisible Side of Design
smashingmag
301
51k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Embracing the Ebb and Flow
colly
86
4.8k
Scaling GitHub
holman
461
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Transcript
Bootstrap4ͷΧελ ϚΠζ 2018-03-17 ଜ ݑن
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
2018-01-18ʹBootstrap4͕ϦϦʔε
લόʔδϣϯͱൺֱͯ͠ ΧελϚΠζ͕ඇৗʹΓ͘͢ͳͬͨ • Sassͷ࠾༻ • JSϑΝΠϧͷػೳ͝ͱͷׂ ʢ͜Εલ͔Βʁʣ
Πϯετʔϧํ๏ $ npm install --save-dev bootstrap
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
CSSͷΧελϚΠζ SassʹΑͬͯॻ͔Ε͍ͯΔ લόʔδϣϯlessͩͬͨͷͰΫη͕͋ͬͨ
Sassͱ http://sass-lang.com/ Sass is the most mature, stable, and powerful
professional grade CSS extension language in the world. ˠ$44֦ுݴޠ
SassͱSCSS 4BTT DTTͰසग़͢Δηϛίϩϯׅހ ͳͲΛলུ 4$44 DTTͷߏจͦͷ··ʹɺηϨΫλʔ ͷೖΕࢠมͳͲͷػೳΛՃ
SassͱSCSS 4BTT DTTͰසग़͢Δηϛίϩϯׅހ ͳͲΛলུ 4$44 DTTͷߏจͦͷ··ʹɺηϨΫλʔ ͷೖΕࢠมͳͲͷػೳΛՃ
Πϯετʔϧ Node.js൛Λ༻͢Δ $ npm install --save-dev node-sass
ϑΥϧμߏ
ΧελϚΠζͷྫ ༻͢Δ߲ͷΈΠϯϙʔτ src/custom.scss
SCSSΛCSSʹม SCSSϒϥβ͕ղऍͰ͖ͳ͍ͷͰCSSʹม $ npx node-sass src/custom.scss docs/bundle.css
αΠζൺֱ ϑΝΠϧαΠζ͕60KBݮ
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ
JavaScriptͷΧελϚΠζ node_module/bootstrap/js/srcʹػೳ͝ͱʹ ׂͯ͠ଘࡏ ECMAScript2017Ͱهड़ jQuery, popper.jsʹґଘ ݁߹ͱτϥϯεύΠϧ͕ඞཁ
ϑΥϧμߏ
ΧελϚΠζྫ src/index.js ඞཁͳػೳͷΈimport
docs/bundle.jsੜͷྲྀΕ WebPackͰෳͷϑΝΠϧΛ݁߹ʢόϯυϧʣ babelͰ݁߹ͨ͠ϑΝΠϧΛτϥϯεύΠϧ
WebPackͷΠϯετʔϧ $ npm install --save-dev webpack webpack-cli
WebPackͷ࣮ߦ $ npx webpack src/index.js --output-path="./tmp" --output-filename="bundle.js" --mode=production tmp/bundle.js͕ੜ
babelͷΠϯετʔϧ $ npm install --save-dev babel-cli babel-preset- env babel-plugin-transform-object-rest-spread
babelͷઃఆ { "presets": ["env"], "plugins": ["transform-object-rest-spread"] } .babelrc
babelͷ࣮ߦ $ npx babel tmp/bundle.js -o docs/bundle.js docs/bundle.js͕ੜ
αΠζൺֱ ϑΝΠϧαΠζ͕86KBݮ
#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ