Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
in English

Կառուցեք գործիքներ

Իմացեք, թե ինչպես օգտագործել Bootstrap-ի ընդգրկված npm սկրիպտները՝ մեր փաստաթղթերը ստեղծելու, սկզբնաղբյուրը կազմելու, թեստերն իրականացնելու և այլնի համար:

Այս էջում

Գործիքների տեղադրում

Bootstrap-ն օգտագործում է npm սկրիպտներ իր կառուցման համակարգի համար: Մեր package.json- ը ներառում է շրջանակի հետ աշխատելու հարմար մեթոդներ, այդ թվում՝ կոդ կազմելը, թեստերը և այլն:

Մեր կառուցման համակարգը օգտագործելու և մեր փաստաթղթերը տեղում գործարկելու համար ձեզ հարկավոր է Bootstrap-ի սկզբնաղբյուր ֆայլերի և Node-ի պատճենը: Հետևեք այս քայլերին և պետք է պատրաստ լինեք ռոքի.

  1. Ներբեռնեք և տեղադրեք Node.js- ը, որը մենք օգտագործում ենք մեր կախվածությունները կառավարելու համար:
  2. Կամ ներբեռնեք Bootstrap-ի աղբյուրները կամ ներբեռնեք Bootstrap- ի պահոցը :
  3. Նավարկեք դեպի արմատային /bootstrapգրացուցակ և գործարկեք npm install՝ տեղադրելու մեր տեղական կախվածությունները, որոնք նշված են package.json- ում :

Ավարտելուց հետո դուք կկարողանաք գործարկել հրամանի տողից տրամադրված տարբեր հրամաններ:

Օգտագործելով npm սցենարներ

Մեր package.json- ը ներառում է բազմաթիվ առաջադրանքներ՝ նախագիծը մշակելու համար: Գործարկեք npm run՝ ձեր տերմինալի բոլոր npm սկրիպտները տեսնելու համար: Առաջնային խնդիրները ներառում են.

Առաջադրանք Նկարագրություն
npm start Կազմում է CSS և JavaScript, կառուցում է փաստաթղթերը և գործարկում տեղական սերվեր:
npm run dist Ստեղծում է dist/գրացուցակը կազմված ֆայլերով: Պահանջվում է Sass , Autoprefixer և Terser :
npm test Վազքից հետո թեստեր է անցկացնում տեղումnpm run dist
npm run docs-serve Ստեղծում և վարում է փաստաթղթերը տեղում:
Սկսեք Bootstrap-ով npm-ի միջոցով մեր մեկնարկային նախագծով: Գնացեք twbs/bootstrap-npm-starter ձևանմուշների պահոց՝ տեսնելու, թե ինչպես կառուցել և հարմարեցնել Bootstrap-ը ձեր սեփական npm նախագծում: Ներառում է Sass կոմպիլյատոր, Autoprefixer, Stylelint, PurgeCSS և Bootstrap պատկերակներ:

Սաս

Bootstrap-ն օգտագործում է Dart Sass- ը մեր Sass սկզբնաղբյուր ֆայլերը CSS ֆայլերի մեջ (ներառված է մեր կառուցման գործընթացում) կազմելու համար, և մենք խորհուրդ ենք տալիս անել նույնը, եթե Sass-ը կազմում եք ձեր սեփական ակտիվների խողովակաշարով: Մենք նախկինում օգտագործում էինք Node Sass-ը Bootstrap v4-ի համար, սակայն LibSass-ը և դրա վրա կառուցված փաթեթները, ներառյալ Node Sass-ը, այժմ հնացած են :

Dart Sass-ը օգտագործում է 10-ի կլորացման ճշգրտություն և արդյունավետության նկատառումներից ելնելով թույլ չի տալիս ճշգրտել այս արժեքը: Մենք չենք նվազեցնում այս ճշգրտությունը մեր ստեղծած CSS-ի հետագա մշակման ժամանակ, օրինակ՝ փոքրացման ժամանակ, բայց եթե դուք որոշել եք դա անել, խորհուրդ ենք տալիս պահպանել առնվազն 6 ճշգրտություն՝ զննարկիչի կլորացման հետ կապված խնդիրները կանխելու համար:

Ավտոնախդիր

Bootstrap-ն օգտագործում է Autoprefixer (ներառված է մեր կառուցման գործընթացում)՝ կառուցման պահին վաճառողի նախածանցները որոշ CSS հատկություններին ավտոմատ կերպով ավելացնելու համար: Դրանով մենք խնայում ենք մեզ ժամանակ և կոդը՝ թույլ տալով մեզ գրել մեր CSS-ի հիմնական մասերը մեկ անգամ՝ միաժամանակ վերացնելով վաճառողների միքսների կարիքը, ինչպիսիք են v3-ում:

Մենք պահպանում ենք Autoprefixer-ի միջոցով աջակցվող բրաուզերների ցանկը առանձին ֆայլում մեր GitHub պահեստում: Մանրամասների համար տե՛ս .browserslistrc :

RTLCSS

Bootstrap-ն օգտագործում է RTLCSS ՝ մշակված CSS-ների մշակման և դրանք RTL-ի փոխակերպելու համար՝ հիմնականում փոխարինելով հորիզոնական ուղղության իմացվող հատկությունները (օրինակ. padding-left) իրենց հակադիրով: Այն թույլ է տալիս մեզ միայն մեկ անգամ գրել մեր CSS-ը և փոքր փոփոխություններ կատարել՝ օգտագործելով RTLCSS կառավարման և արժեքային հրահանգները:

Տեղական փաստաթղթեր

Մեր փաստաթղթերը տեղական գործարկելու համար պահանջվում է Hugo-ի օգտագործումը, որը տեղադրվում է hugo-bin npm փաթեթի միջոցով: Hugo-ն ահավոր արագ և բավականին ընդարձակվող ստատիկ կայքերի գեներատոր է, որը մեզ տրամադրում է հիմնական ընդգրկումներ, Markdown-ի վրա հիմնված ֆայլեր, ձևանմուշներ և այլն: Ահա թե ինչպես սկսել այն.

  1. Անցեք վերը նշված գործիքակազմի կարգավորումը ՝ բոլոր կախվածությունները տեղադրելու համար:
  2. Արմատային /bootstrapգրացուցակից գործարկեք npm run docs-serveհրամանի տողում:
  3. Բացեք http://localhost:9001/ձեր բրաուզերում և voilà:

Իմացեք ավելին Hugo-ի օգտագործման մասին՝ կարդալով դրա փաստաթղթերը :

Անսարքությունների վերացում

Եթե ​​կախվածության տեղադրման հետ կապված խնդիրների հանդիպեք, ապատեղադրեք կախվածության բոլոր նախորդ տարբերակները (գլոբալ և տեղական): Այնուհետև կրկնել npm install: