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
390
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
96
npmの便利なパッケージ: forever, winser
kazunorikimura
0
1k
npmの便利なパッケージ: Jest
kazunorikimura
0
140
Other Decks in Technology
See All in Technology
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
170
Kubernetes self-healing of your workload
hwchiu
0
530
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
590
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
240
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
180
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
1
470
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.1k
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
7
3.4k
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
470
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Fireside Chat
paigeccino
41
3.7k
Making Projects Easy
brettharned
120
6.4k
Code Reviewing Like a Champion
maltzj
526
40k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
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ͷΧελϚΠζ