Աջակցել
Օգնեք զարգացնել Bootstrap-ը մեր փաստաթղթերի ստեղծման սցենարների և թեստերի միջոցով:
Գործիքների տեղադրում
Bootstrap-ն օգտագործում է npm սկրիպտներ ՝ փաստաթղթերը ստեղծելու և սկզբնաղբյուր ֆայլերը կազմելու համար: Մեր package.json- ը պարունակում է այս սկրիպտները՝ կոդ կազմելու, թեստեր գործարկելու և այլն: Դրանք նախատեսված չեն մեր պահոցից և փաստաթղթերից դուրս օգտագործման համար:
Մեր կառուցման համակարգը օգտագործելու և մեր փաստաթղթերը տեղում գործարկելու համար ձեզ հարկավոր է Bootstrap-ի սկզբնաղբյուր ֆայլերի և Node-ի պատճենը: Հետևեք այս քայլերին և պետք է պատրաստ լինեք ռոքի.
- Ներբեռնեք և տեղադրեք Node.js- ը, որը մենք օգտագործում ենք մեր կախվածությունները կառավարելու համար:
- Կամ ներբեռնեք Bootstrap-ի աղբյուրները կամ ներբեռնեք Bootstrap- ի պահոցը :
- Նավարկեք դեպի արմատային
/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-ն օգտագործում է 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-ի վրա հիմնված ֆայլեր, ձևանմուշներ և այլն: Ահա թե ինչպես սկսել այն.
- Անցեք վերը նշված գործիքակազմի կարգավորումը ՝ բոլոր կախվածությունները տեղադրելու համար:
- Արմատային
/bootstrapգրացուցակից գործարկեքnpm run docs-serveհրամանի տողում: - Բացեք
http://localhost:9001/ձեր բրաուզերում և voilà:
Իմացեք ավելին Hugo-ի օգտագործման մասին՝ կարդալով դրա փաստաթղթերը :
Անսարքությունների վերացում
Եթե կախվածության տեղադրման հետ կապված խնդիրների հանդիպեք, ապատեղադրեք կախվածության բոլոր նախորդ տարբերակները (գլոբալ և տեղական): Այնուհետև կրկնել npm install: