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
230
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
670
How freelance programmer works
kazunorikimura
0
130
moment.js
kazunorikimura
0
100
sequelize.pdf
kazunorikimura
0
590
Toward the world of "ready player one"
kazunorikimura
0
95
npmの便利なパッケージ: forever, winser
kazunorikimura
0
1k
npmの便利なパッケージ: Jest
kazunorikimura
0
130
Other Decks in Technology
See All in Technology
AWSにおけるTrend Vision Oneの効果について
shimak
0
120
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
100
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
330
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
170
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
200
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
110
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.3k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Rails Girls Zürich Keynote
gr2m
95
14k
Side Projects
sachag
455
43k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Become a Pro
speakerdeck
PRO
29
5.5k
The Cult of Friendly URLs
andyhume
79
6.6k
Embracing the Ebb and Flow
colly
88
4.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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ͷΧελϚΠζ