Pab txhawb

Pab tsim Bootstrap nrog peb cov ntaub ntawv tsim cov ntawv sau thiab cov ntawv xeem.

Ntawm nplooj ntawv no

Kev teeb tsa cuab yeej

Bootstrap siv npm scripts los tsim cov ntaub ntawv thiab sau cov ntaub ntawv. Peb package.json tsev cov ntawv sau no rau kev sau cov lej, kev xeem khiav, thiab lwm yam. Cov no tsis yog tsim los siv sab nraum peb lub chaw cia khoom thiab cov ntaub ntawv.

Txhawm rau siv peb cov txheej txheem tsim thiab khiav peb cov ntaub ntawv hauv zos, koj yuav xav tau ib daim qauv ntawm Bootstrap cov ntaub ntawv thiab Node. Ua raws li cov kauj ruam no thiab koj yuav tsum npaj kom pob zeb:

Download tau thiab nruab Node.js , uas peb siv los tswj peb cov kev vam meej.
Txawm hais tias rub tawm Bootstrap qhov chaw lossis fork Bootstrap's repository .
Coj mus rau hauv paus /bootstrapdirectory thiab khiav npm installmus rau nruab peb lub zos dependencies teev nyob rau hauv package.json .

Thaum ua tiav, koj yuav muaj peev xwm khiav ntau yam lus txib muab los ntawm kab hais kom ua.

Siv npm scripts

Peb package.json suav nrog ntau txoj haujlwm los tsim qhov project. Khiav npm runkom pom tag nrho npm scripts hauv koj lub davhlau ya nyob twg. Cov haujlwm tseem ceeb suav nrog:

Ua haujlwm	Kev piav qhia
`npm start`	Compiles CSS thiab JavaScript, tsim cov ntaub ntawv, thiab pib ib lub zos server.
`npm run dist`	Tsim cov `dist/`directory nrog compiled ntaub ntawv. Yuav tsum tau Sass , Autoprefixer , thiab terser .
`npm test`	Khiav kev xeem hauv zos tom qab khiav`npm run dist`
`npm run docs-serve`	Tsim thiab khiav cov ntaub ntawv hauv zos.

Pib nrog Bootstrap ntawm npm nrog peb txoj haujlwm pib! Lub taub hau mus rau twbs/bootstrap-npm-starter template repository saib yuav ua li cas tsim thiab kho Bootstrap hauv koj tus kheej npm project. Xws li Sass compiler, Autoprefixer, Stylelint, PurgeCSS, thiab Bootstrap Icons.

Sass

Bootstrap siv Dart Sass los sau peb cov ntaub ntawv Sass rau hauv CSS cov ntaub ntawv (nrog rau hauv peb cov txheej txheem tsim), thiab peb xav kom koj ua tib yam yog tias koj sau Sass siv koj tus kheej cov khoom vaj khoom tsev pipeline. Peb yav dhau los tau siv Node Sass rau Bootstrap v4, tab sis LibSass thiab pob khoom tsim los rau saum nws, suav nrog Node Sass, tam sim no deprecated .

Dart Sass siv qhov sib npaug ntawm qhov tseeb ntawm 10 thiab rau qhov laj thawj kev ua haujlwm tsis tso cai rau kev hloov pauv ntawm tus nqi no. Peb tsis txo qis qhov kev txiav txim siab no thaum lub sijhawm ua haujlwm ntxiv ntawm peb cov CSS tsim, xws li thaum lub sijhawm minification, tab sis yog tias koj xaiv ua li ntawd, peb pom zoo kom tswj xyuas qhov tseeb ntawm tsawg kawg 6 txhawm rau tiv thaiv teeb meem nrog browser puag ncig.

Autoprefixer

Bootstrap siv Autoprefixer (suav nrog hauv peb cov txheej txheem tsim) kom tau txais kev ntxiv cov neeg muag khoom ua ntej rau qee cov khoom CSS thaum tsim lub sijhawm. Ua li ntawd txuag peb lub sijhawm thiab cov lej los ntawm kev tso cai rau peb sau qhov tseem ceeb ntawm peb CSS ib zaug thaum tshem tawm qhov xav tau ntawm cov neeg muag khoom mixins zoo li cov pom hauv v3.

Peb tuav cov npe ntawm cov browsers txhawb nqa los ntawm Autoprefixer hauv cov ntaub ntawv sib cais hauv peb qhov chaw cia GitHub. Saib .browserslistrc kom paub meej.

RTLCSS

Bootstrap siv RTLCSS los ua cov txheej txheem sau ua ke CSS thiab hloov lawv mus rau RTL - pib hloov cov kab rov tav kev paub txog cov khoom (xws li. padding-left) nrog lawv cov lus rov qab. Nws tso cai rau peb tsuas yog sau peb CSS ib zaug thiab ua me ntsis tweaks siv RTLCSS tswj thiab cov lus qhia muaj nuj nqis .

Cov ntaub ntawv hauv zos

Kev khiav peb cov ntaub ntawv hauv zos yuav tsum tau siv Hugo, uas tau teeb tsa ntawm lub pob hugo-bin npm. Hugo yog lub tshuab hluav taws xob zoo li qub thiab nthuav dav heev uas muab rau peb: cov ntsiab lus suav nrog, Markdown-raws li cov ntaub ntawv, cov qauv, thiab ntau dua. Nov yog yuav ua li cas pib nws:

Khiav los ntawm cov cuab yeej teeb tsa saum toj no txhawm rau txhim kho txhua qhov kev vam meej.
Los ntawm lub hauv paus /bootstrapdirectory, khiav npm run docs-servehauv kab hais kom ua.
Qhib http://localhost:9001/koj lub browser, thiab voilà.

Kawm paub ntxiv txog kev siv Hugo los ntawm kev nyeem nws cov ntaub ntawv .

Kev daws teeb meem

Yog tias koj ntsib teeb meem nrog kev txhim kho kev vam khom, tshem tawm tag nrho cov kev vam meej yav dhau los (ntiaj teb thiab hauv zos). Tom qab ntawd, rov ua dua npm install.