Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
in English

Changia

Saidia kukuza Bootstrap na hati zetu za kuunda hati na majaribio.

Katika ukurasa huu

Mpangilio wa zana

Bootstrap hutumia hati za npm kuunda hati na kukusanya faili za chanzo. Kifurushi chetu.json huhifadhi hati hizi za kuunda nambari, kufanya majaribio na zaidi. Hizi hazikusudiwa kutumiwa nje ya hazina yetu na hati.

Ili kutumia mfumo wetu wa ujenzi na kuendesha hati zetu ndani ya nchi, utahitaji nakala ya faili chanzo za Bootstrap na Node. Fuata hatua hizi na unapaswa kuwa tayari kutikisa:

  1. Pakua na usakinishe Node.js , ambayo tunaitumia kudhibiti utegemezi wetu.
  2. Pakua vyanzo vya Bootstrap au hazina ya Bootstrap ya uma .
  3. /bootstrapNenda kwenye saraka ya mizizi na ukimbie npm installkusakinisha vitegemezi vyetu vya ndani vilivyoorodheshwa katika package.json .

Ikikamilika, utaweza kutekeleza amri mbalimbali zinazotolewa kutoka kwa mstari wa amri.

Kutumia maandishi ya npm

Kifurushi chetu.json kinajumuisha kazi nyingi za kuunda mradi. Endesha npm runili kuona hati zote za npm kwenye terminal yako. Kazi kuu ni pamoja na:

Kazi Maelezo
npm start Hukusanya CSS na JavaScript, huunda hati, na kuanzisha seva ya ndani.
npm run dist Huunda dist/saraka na faili zilizokusanywa. Hutumia Sass , Autoprefixer , na terser .
npm test Hufanya majaribio ndani ya nchi baada ya kukimbianpm run dist
npm run docs-serve Huunda na kuendesha hati ndani ya nchi.
Anza na Bootstrap kupitia npm na mradi wetu wa kuanzisha! Nenda kwenye hazina ya kiolezo cha twbs/bootstrap-npm-starter ili kuona jinsi ya kuunda na kubinafsisha Bootstrap katika mradi wako wa npm. Inajumuisha mkusanyaji wa Sass, Kiambishi Kiotomatiki, Stylelint, PurgeCSS, na Aikoni za Bootstrap.

Sass

Bootstrap hutumia Dart Sass kuunda faili zetu za chanzo cha Sass katika faili za CSS (zilizojumuishwa katika mchakato wetu wa uundaji), na tunapendekeza ufanye vivyo hivyo ikiwa unatayarisha Sass kwa kutumia bomba la kipengee chako mwenyewe. Hapo awali tulitumia Node Sass kwa Bootstrap v4, lakini LibSass na vifurushi vilivyojengwa juu yake, ikiwa ni pamoja na Node Sass, sasa havitumiki .

Dart Sass hutumia usahihi wa mzunguko wa 10 na kwa sababu za ufanisi hairuhusu marekebisho ya thamani hii. Hatupunguzi usahihi huu wakati wa uchakataji zaidi wa CSS yetu iliyotolewa, kama vile wakati wa kupunguza, lakini ukichagua kufanya hivyo, tunapendekeza udumishe usahihi wa angalau 6 ili kuzuia matatizo ya kuzungusha kivinjari.

Kiambishi kiambishi otomatiki

Bootstrap hutumia Autoprefixer (iliyojumuishwa katika mchakato wetu wa ujenzi) kuongeza kiambishi awali cha muuzaji kwa baadhi ya mali za CSS kwa wakati wa ujenzi. Kufanya hivyo hutuokoa wakati na msimbo kwa kuturuhusu kuandika sehemu muhimu za CSS yetu mara moja huku tukiondoa hitaji la michanganyiko ya wachuuzi kama ile inayopatikana katika v3.

Tunadumisha orodha ya vivinjari vinavyotumika kupitia Autoprefixer katika faili tofauti ndani ya hazina yetu ya GitHub. Tazama .browserslistrc kwa maelezo.

RTLCSS

Bootstrap hutumia RTLCSS kuchakata CSS iliyokusanywa na kuibadilisha kuwa RTL - kimsingi ikibadilisha sifa za ufahamu wa mwelekeo mlalo (km padding-left) na kinyume chake. Inaturuhusu tu kuandika CSS yetu mara moja na kufanya marekebisho madogo kwa kutumia udhibiti wa RTLCSS na maagizo ya thamani .

Nyaraka za ndani

Kuendesha hati zetu ndani ya nchi kunahitaji matumizi ya Hugo, ambayo husakinishwa kupitia kifurushi cha hugo-bin npm. Hugo ni jenereta ya tovuti tuli yenye kasi ya ajabu na inayoweza kupanuka kabisa ambayo hutupatia: msingi ni pamoja na, faili zinazotegemea Markdown, violezo, na zaidi. Hivi ndivyo jinsi ya kuianzisha:

  1. Tembea kupitia usanidi wa zana hapo juu ili kusakinisha vitegemezi vyote.
  2. /bootstrapKutoka kwenye saraka ya mizizi , endesha npm run docs-servekwenye mstari wa amri.
  3. Fungua http://localhost:9001/katika kivinjari chako, na voilà.

Jifunze zaidi kuhusu kutumia Hugo kwa kusoma hati zake .

Utatuzi wa shida

Ukikumbana na matatizo ya kusakinisha vitegemezi, sanidua matoleo yote ya awali ya utegemezi (ya kimataifa na ya ndani). Kisha, rudia npm install.