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
Bootstrapの簡単カスタマイズ
Search
Kazunori-Kimura
January 17, 2017
Technology
0
230
Bootstrapの簡単カスタマイズ
Bootstrap-sassをnode-sassを使用して簡単にカスタマイズする方法について
Kazunori-Kimura
January 17, 2017
Tweet
Share
More Decks by Kazunori-Kimura
See All by Kazunori-Kimura
path-parser
kazunorikimura
0
360
objectのcloneを行う/How to clone of the object in js
kazunorikimura
0
360
クライアントサイドで大きなデータを扱うときのお話/Web Worker & IndexedDB
kazunorikimura
0
620
How freelance programmer works
kazunorikimura
0
100
moment.js
kazunorikimura
0
73
sequelize.pdf
kazunorikimura
0
540
Toward the world of "ready player one"
kazunorikimura
0
75
npmの便利なパッケージ: forever, winser
kazunorikimura
0
950
npmの便利なパッケージ: Jest
kazunorikimura
0
120
Other Decks in Technology
See All in Technology
スクラムというコンフォートゾーンから抜け出そう!プロジェクト全体に目を向けるインセプションデッキ / Inception Deck for seeing the whole project
takaking22
3
150
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
300
プロダクト開発者目線での Entra ID 活用
sansantech
PRO
0
130
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
MIMEと文字コードの闇
hirachan
2
1.5k
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
370
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
210
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
380
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
180
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
110
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
810
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.8k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Documentation Writing (for coders)
carmenintech
68
4.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Git: the NoSQL Database
bkeepers
PRO
428
65k
GraphQLとの向き合い方2022年版
quramy
44
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
The Language of Interfaces
destraynor
156
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
660
Adopting Sorbet at Scale
ufuk
75
9.2k
Transcript
Bootstrapͷ ؆୯ΧελϚΠζ ଜ ݑن
ࣗݾհ • ଜ ݑن (͖ΉΒ ͔ͣͷΓ) • ϑϦʔϥϯε5 • ۀΞϓϦ։ൃ
• JavaScript, C#, Java, Objective-C, PHP
Bootstrapͱʁ • Twitter͕ެ։͍ͯ͠ΔCSSϑϨʔϜϫʔΫ • HTMLͰదʹclassࢦఆ͢Δ͜ͱͰWebσβ Πϯͷࣝͳ͠ʹιϨφϦͷݟͨʹͳΔ • http://getbootstrap.com/
ͳΜͰΧελϚΠζ͢Δͷʁ • ૉͷ··Ͱ༻͢ΔͱΈΜͳಉ͡ݟͨʹ
bootstrap-sass • ར༻ऀ͕ΧελϚΠζͰ͖ΔΑ͏ʹɺ.scss ϑΝΠϧΛؚΊͨϓϩδΣΫτ • https://github.com/twbs/bootstrap-sass
Sassͱ • CSSϝλݴޠͷͻͱͭ • http://sass-lang.com/
CSSϝλݴޠͱʁ • ίʔσΟϯάޮΛߴΊΔͨΊɺ௨ৗͷCSS ʹҎԼͷΑ͏ͳػೳΛՃͨ͠ݴޠͷ͜ͱ ม ηϨΫλͷωετ ϑΝΠϧͷׂ ϞδϡʔϧԽJNQPSUػೳ NJYJO ؔͷΑ͏ͳػೳ
࢛ଇԋࢉ ੍ޚߏจ
දతͳCSSϝλݴޠ • Sass (SCSS) • less • Stylus • PostCSS
ΧελϚΠζͷखॱ • Node.jsڥ͕͍ͬͯΕ؆୯
node-sassΛ༻ 1. bootstrap-sassΛμϯϩʔυ npm install bootstrap-sass 2. node-sassΛμϯϩʔυ npm install
-g node-sass 3. scssϑΝΠϧΛϓϦίϯύΠϧ node-sass node_modules/bootstrap-sass/assets/stylesheets/ _bootstrap.scss dist/css/bootstrap.min.css --output-style compressed --source-map dist/css/bootstrap.min.css.map
ΧελϚΠζ༻ϓϩδΣΫτ • https://github.com/Kazunori-Kimura/bootstrap- customize-base 1. ϓϩδΣΫτΛμϯϩʔυ git clone
[email protected]
:Kazunori-Kimura/ bootstrap-customize-base.git
2. ࣮ߦ͢Δ͚ͩ npm start
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ 2017ΑΖ͓͘͠ئ͍͍ͨ͠·͢