Gina kayan aikin
Koyi yadda ake amfani da rubutun npm na Bootstrap da aka haɗa don gina takaddun mu, tattara lambar tushe, gudanar da gwaje-gwaje, da ƙari.
Saitin kayan aiki
Bootstrap yana amfani da rubutun npm don tsarin ginin sa. Kunshin mu.json ya haɗa da hanyoyin dacewa don aiki tare da tsarin, gami da haɗa lamba, gwaje-gwaje masu gudana, da ƙari.
Don amfani da tsarin ginin mu da gudanar da takaddunmu a gida, kuna buƙatar kwafin fayilolin tushen Bootstrap da Node. Bi waɗannan matakan kuma yakamata ku kasance cikin shiri don girgiza:
- Zazzage kuma shigar Node.js , wanda muke amfani da shi don sarrafa abubuwan dogaronmu.
- Ko dai zazzage tushen Bootstrap ko ma'ajiyar cokali mai yatsa ta Bootstrap .
- Kewaya zuwa tushen
/bootstrapdirectory kuma gudunpm installdon shigar da abubuwan dogaronmu na gida da aka jera a cikin kunshin.json .
Lokacin da aka gama, zaku iya aiwatar da umarni daban-daban da aka bayar daga layin umarni.
Yin amfani da rubutun npm
Kunshin mu.json ya ƙunshi ayyuka da yawa don haɓaka aikin. Gudu npm rundon ganin duk rubutun npm a cikin tashar ku. Ayyukan farko sun haɗa da:
| Aiki | Bayani |
|---|---|
npm start |
Yana tattara CSS da JavaScript, yana gina takaddun, kuma ya fara sabar gida. |
npm run dist |
Yana ƙirƙirar kundin dist/adireshi tare da haɗa fayilolin. Yana buƙatar Sass , Autoprefixer , da terser . |
npm test |
Yana gudanar da gwaje-gwaje a gida bayan gudunpm run dist |
npm run docs-serve |
Gina da gudanar da takaddun a cikin gida. |
Sass
Bootstrap yana amfani da Dart Sass don tattara fayilolin tushen mu na Sass cikin fayilolin CSS (wanda aka haɗa cikin tsarin ginin mu), kuma muna ba da shawarar ku yi haka idan kuna haɗa Sass ta amfani da bututun kadara. A baya mun yi amfani da Node Sass don Bootstrap v4, amma LibSass da fakitin da aka gina a kai, gami da Node Sass, yanzu sun ƙare .
Dart Sass yana amfani da madaidaicin zagaye na 10 kuma saboda ingantattun dalilai baya bada izinin daidaita wannan ƙimar. Ba mu rage wannan madaidaicin yayin ci gaba da sarrafa CSS ɗinmu da aka ƙirƙira, kamar lokacin ragewa, amma idan kun zaɓi yin haka muna ba da shawarar kiyaye daidaiton aƙalla 6 don hana al'amura tare da zagayawa mai bincike.
Autoprefixer
Bootstrap yana amfani da Autoprefixer (wanda aka haɗa a cikin tsarin ginin mu) don ƙara prefixes na tallace-tallace ta atomatik zuwa wasu kaddarorin CSS a lokacin ginawa. Yin haka yana ceton mu lokaci da lamba ta hanyar ba mu damar rubuta mahimman sassan CSS ɗin mu lokaci guda yayin kawar da buƙatar haɗaɗɗun masu siyarwa kamar waɗanda aka samu a v3.
Muna kula da jerin masu binciken da aka tallafa ta hanyar Autoprefixer a cikin wani fayil daban a cikin ma'ajin GitHub. Duba .browslistrc don cikakkun bayanai.
RTLCSS
Bootstrap yana amfani da RTLCSS don aiwatar da haɗawar CSS da canza su zuwa RTL - ainihin maye gurbin kaddarorin sane na madaidaiciya (misali padding-left) tare da kishiyarsu. Yana ba mu damar rubuta CSS ɗin mu sau ɗaya kawai kuma mu yi ƙananan tweaks ta amfani da sarrafa RTLCSS da umarnin ƙima .
Takardun gida
Gudanar da takaddun mu a cikin gida yana buƙatar amfani da Hugo, wanda ake shigar da shi ta kunshin hugo-bin npm. Hugo babban janareta ne mai saurin gaske kuma mai saurin gaske wanda ke ba mu: asali ya haɗa da, fayilolin Markdown, samfura, da ƙari. Ga yadda za a fara shi:
- Shiga cikin saitin kayan aikin da ke sama don shigar da duk abin dogaro.
- Daga tushen
/bootstrapdirectory, gudunpm run docs-servea cikin layin umarni. - Bude
http://localhost:9001/a cikin burauzar ku, kuma voilà.
Ƙara koyo game da amfani da Hugo ta karanta takaddun sa .
Shirya matsala
Idan kun haɗu da matsaloli tare da shigar da abubuwan dogaro, cire duk nau'ikan dogaro da suka gabata (na duniya da na gida). Sa'an nan, sake yi npm install.