Dzᴐ nu
Kpe asi ɖe Bootstrap wɔwɔ ŋu kple míaƒe nuŋlɔɖiwo tutu ŋɔŋlɔdzesiwo kple dodokpɔwo.
Dɔwɔnuwo ƒe ɖoɖowɔwɔ
Bootstrap zãa npm ŋɔŋlɔdzesiwo tsɔ tua nuŋlɔɖiawo eye wòƒoa dzɔtsoƒe faɛlwo nu ƒu. Míaƒe package.json la me ŋɔŋlɔdzesi siawo le hena kɔpiwo nuƒoƒoƒu, dodokpɔwo wɔwɔ, kple bubuwo. Menye ɖe woɖo esiawo be woazã le míaƒe nudzraɖoƒe kple nuŋlɔɖiwo godo o.
Be nàzã míaƒe xɔtuɖoɖoa eye nàwɔ míaƒe nuŋlɔɖiwo le mia gbɔ la, àhiã Bootstrap ƒe dzɔtsoƒe faɛlwo kple Node ƒe kɔpi. Wɔ ɖe afɔɖeɖe siawo dzi eye ele be nànɔ klalo be yeaʋuʋu:
- Wɔ Node.js , si míezãna tsɔ kpɔa míaƒe nusiwo dzi míenɔa te ɖo dzi la ƒe kɔpi eye nàdae ɖe wò kɔmpiuta dzi.
- Ðe Bootstrap ƒe dzɔtsoƒewo ƒe kɔpi alo fork Bootstrap ƒe nudzraɖoƒe .
- Yi root
/bootstrap
directory la me eye nàƒu dunpm install
aɖo míaƒe local dependencies siwo woŋlɔ ɖe package.json me la ɖe wò kɔmpiuta dzi .
Ne èwu enu la, àte ŋu awɔ sedede vovovo siwo wona tso sededea ƒe fli dzi la.
npm ŋɔŋlɔdzesiwo zazã
Míaƒe package.json la me dɔ gbogbo aɖewo le hena dɔa wɔwɔ. Du npm run
be nàkpɔ npm ŋɔŋlɔdzesiwo katã le wò terminal me. Dɔ vevi siwo woawɔ dometɔ aɖewoe nye:
Dɔ | Nuɖᴐɖᴐ |
---|---|
npm start |
Eƒoa CSS kple JavaScript nu ƒu, tua nuŋlɔɖiawo, eye wòdzea nutoa me dɔdzikpɔla gɔme. |
npm run dist |
Wɔa dist/ agbalẽdzraɖoƒea kple faɛl siwo woƒo ƒu. Ebia Sass , Autoprefixer , kple terser . |
npm test |
Ewɔa dodokpɔwo le nutoa me le duƒuƒu vɔ megbenpm run dist |
npm run docs-serve |
Tua nuŋlɔɖiawo eye wòwɔa dɔ le nutoa me. |
Sass ƒe nyawo
Bootstrap zãa Dart Sass hena míaƒe Sass dzɔtsoƒe faɛlwo nuƒoƒoƒu ɖe CSS faɛlwo me (siwo le míaƒe xɔtutu ƒe ɖoɖoa me), eye míele aɖaŋu ɖom be nàwɔ nenema ke ne èle Sass ƒom ƒu to wò ŋutɔ wò nunɔamesiwo ƒe mɔ̃ zazã me. Míezãa Node Sass tsã na Bootstrap v4, gake LibSass kple package siwo wotu ɖe edzi, siwo dome Node Sass hã le, megale dɔ wɔm fifia o .
Dart Sass zãa ƒoƒo ƒe pɛpɛpɛ si nye 10 eye le dɔwɔwɔ nyuie ta meɖe mɔ ɖe asitɔtrɔ le asixɔxɔ sia ŋu o. Míeɖea nyateƒetoto sia dzi kpɔtɔna le míaƒe CSS si míewɔ la ƒe dɔwɔwɔ bubuwo me o, abe le nu suesuesuewo me ene o, gake ne ètiae be yeawɔe la, míeɖo aɖaŋu be nàlé nu pɛpɛpɛ si nye 6 ya teti me ɖe asi be nàxe mɔ ɖe kuxi siwo le web-browser ƒe ƒoƒo ɖekae ŋu nu.
Autoprefixer ƒe ŋgɔdonya
Bootstrap zãa Autoprefixer (si le míaƒe xɔtutu ƒe ɖoɖoa me) tsɔ tsɔa nudzralawo ƒe ŋgɔdonyawo kpena ɖe CSS ƒe nɔnɔme aɖewo ŋu le eɖokui si le xɔtutuɣi. Esia wɔwɔ ɖea ɣeyiɣi kple kɔdawo dzi kpɔtɔna na mí to mɔɖeɖe na mí be míaŋlɔ míaƒe CSS ƒe akpa veviwo zi ɖeka me esime wòɖea nudzralawo ƒe mixins abe esiwo wokpɔna le v3 me ene ƒe hiahiã ɖa me.
Míeléa web-browser siwo wodoa alɔ to Autoprefixer dzi ƒe xexlẽdzesiwo me ɖe asi le faɛl bubu aɖe me le míaƒe GitHub nudzraɖoƒea me. Kpɔ .browserslistrc hena numeɖeɖe bubuwo.
RTLCSS ƒe ƒuƒoƒo
Bootstrap zãa RTLCSS tsɔ wɔa dɔ tso CSS siwo woƒo ƒu ŋu eye wòtrɔa wo ɖe RTL ŋu – vevietɔ eɖɔlia horizontal direction aware properties (eg. padding-left
) kple woƒe tsitretsiɖeŋu. Eɖea mɔ na mí be míaŋlɔ míaƒe CSS zi ɖeka ko eye míawɔ asitɔtrɔ suesuesuewo to RTLCSS ƒe dziɖuɖu kple asixɔxɔ ƒe mɔfiamewo zazã me.
Nutoa me nuŋlɔɖiwo
Míaƒe nuŋlɔɖiwo wɔwɔ le nutoa me bia be woazã Hugo, si xɔa ɖoɖo to hugo-bin npm package dzi. Hugo nye blazingly kabakaba kple ŋutɔ kekeɖenu static nyatakakadzraɖoƒe generator si naa mí: gɔmedzedzewo dometɔ aɖewoe nye, Markdown-si wotu ɖe faɛlwo, templates, kple bubuwo. Ale si nàwɔ adze egɔmee nye esi:
- Ƒu du to dɔwɔnu ƒe ɖoɖo si le etame la me be nàde nusiwo katã dzi woanɔ te ɖo la ɖe wò kɔmpiuta dzi.
- Tso ke
/bootstrap
ƒe nuŋlɔɖiwo me la, ƒu dunpm run docs-serve
le sedede fli me. - Ʋu
http://localhost:9001/
le wò web-browser me, eye voilà.
Srɔ̃ nu geɖe tso Hugo zazã ŋu to eƒe nuŋlɔɖiwo xexlẽ me .
Kuxiwo Gbɔkpɔkpɔ
Ne èdo go kuxiwo le dependencies ɖoɖo me la, ɖe dependency ƒe tɔtrɔ siwo katã nɔ anyi tsã (global kple local) la ɖa. Emegbe, gbugbɔ wɔe npm install
.