تۆھپە قوشۇڭ
ھۆججەتلىرىمىزنىڭ قوليازما ۋە سىناقلىرى بىلەن Bootstrap نى تەرەققىي قىلدۇرۇشقا ياردەملىشىڭ.
قورال تەڭشەش
Bootstrap ھۆججەت ياساش ۋە مەنبە ھۆججەتلىرىنى تۈزۈش ئۈچۈن npm قوليازمىسىنى ئىشلىتىدۇ. Package.json كودى تۈزۈش ، ئىجرا قىلىش سىنىقى ۋە باشقىلار ئۈچۈن بۇ ئورگىناللارنى ئۆز ئىچىگە ئالىدۇ . بۇلار بىزنىڭ ئامبىرىمىز ۋە ھۆججەتلىرىمىزنىڭ سىرتىدا ئىشلىتىلمەيدۇ.
قۇرۇش سىستېمىمىزنى ئىشلىتىش ۋە ھۆججەتلىرىمىزنى يەرلىكتە ئىجرا قىلىش ئۈچۈن ، Bootstrap نىڭ ئەسلى ھۆججىتى ۋە Node نىڭ كۆپەيتىلگەن نۇسخىسىغا ئېھتىياجلىق بولىسىز. بۇ باسقۇچلارغا ئەگىشىڭ ، تەۋرىنىشكە تەييارلىق قىلىشىڭىز كېرەك:
- تايىنىشچانلىقىمىزنى باشقۇرۇش ئۈچۈن ئىشلىتىدىغان Node.js نى چۈشۈرۈپ قاچىلاڭ .
- Bootstrap نىڭ مەنبەسىنى چۈشۈرۈڭ ياكى Bootstrap نىڭ ئامبىرىنى تاللاڭ .
- يىلتىز
/bootstrapمۇندەرىجىسىگە يۆتكىلىپ ، pack.jsonnpm installدا كۆرسىتىلگەن يەرلىك تايىنىشچانلىقىمىزنى ئورنىتىڭ .
تاماملانغاندىن كېيىن ، بۇيرۇق قۇرىدا تەمىنلەنگەن ھەر خىل بۇيرۇقلارنى ئىجرا قىلالايسىز.
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 |
ھۆججەتلەرنى يەرلىكتە قۇرۇپ ۋە ئىجرا قىلىدۇ. |
Sass
Bootstrap بىزنىڭ Sass مەنبە ھۆججىتىمىزنى CSS ھۆججىتىگە (بىزنىڭ قۇرۇلۇش جەريانىمىزغا كىرىدۇ) تۈزۈش ئۈچۈن Dart Sass نى ئىشلىتىدۇ ، ئەگەر سىز ئۆزىڭىزنىڭ مۈلۈك تۇرۇبا يولى ئارقىلىق Sass نى تۈزسىڭىز ، شۇنداق قىلىشىڭىزنى تەۋسىيە قىلىمىز. بىز ئىلگىرى Bootstrap v4 ئۈچۈن Node Sass نى ئىشلىتەتتۇق ، ئەمما LibSass ۋە ئۇنىڭ ئۈستىگە ياسالغان Node Sass نى ئۆز ئىچىگە ئالغان ئورالمىلارنىڭ ۋاقتى ئۆتتى .
Dart Sass 10 نىڭ يۇمىلاق ئېنىقلىق دەرىجىسىنى ئىشلىتىدۇ ، ئۈنۈم سەۋەبىدىن بۇ قىممەتنى تەڭشەشكە يول قويمايدۇ. بىز ھاسىل قىلغان CSS نى يەنىمۇ بىر تەرەپ قىلىش جەريانىدا بۇ ئېنىقلىقنى تۆۋەنلەتمەيمىز ، مەسىلەن كىچىكلىتىش جەريانىدا ، ئەمما ئەگەر شۇنداق قىلىشنى تاللىغان بولسىڭىز ، تور كۆرگۈچنىڭ يۇمىلاق ئۈستەل مەسىلىسىدىكى ئالدىنى ئېلىش ئۈچۈن كەم دېگەندە 6 ئېنىقلىقنى ساقلاپ قېلىشنى تەۋسىيە قىلىمىز.
Autoprefixer
Bootstrap Autoprefixer نى ئىشلىتىدۇ (بىزنىڭ ياساش جەريانىمىزغا كىرىدۇ) قۇرۇلۇش ۋاقتىدا بەزى CSS خۇسۇسىيەتلىرىگە ساتقۇچىلارنىڭ ئالدى قوشۇلغۇچىسىنى ئاپتوماتىك قوشىدۇ. بۇنداق قىلىش بىزگە v3 دىكىگە ئوخشاش ساتقۇچىلار ئارىلاشمىسىنىڭ ئېھتىياجىنى يوقىتىش بىلەن بىر ۋاقىتتا ، CSS نىڭ مۇھىم قىسىملىرىنى بىرلا قېتىم يېزىشىمىزغا يول قويۇپ ، ۋاقىت ۋە كودنى تېجەيدۇ.
Autoprefixer ئارقىلىق قوللايدىغان توركۆرگۈچلەرنىڭ تىزىملىكىنى GitHub ئامبىرىمىز ئىچىدىكى ئايرىم ھۆججەتتە ساقلايمىز. تەپسىلاتىنى .browserslistrc دىن كۆرۈڭ.
RTLCSS
Bootstrap تۈزۈلگەن CSS نى بىر تەرەپ قىلىش ۋە RTL غا ئايلاندۇرۇش ئۈچۈن RTLCSSpadding-left نى ئىشلىتىدۇ - ئاساسەن گورىزونتال يۆنىلىشنى بىلىش خۇسۇسىيىتى (مەسىلەن ) نىڭ ئەكسىچە. ئۇ پەقەت CSS نى بىرلا قېتىم يېزىپ ، RTLCSS كونترول ۋە قىممەت كۆرسەتمىسى ئارقىلىق كىچىك ئۆزگەرتىشلەرنى قىلالايدۇ.
يەرلىك ھۆججەتلەر
ھۆججەتلىرىمىزنى يەرلىكتە ئىجرا قىلىش Hugo -bin npm بولىقى ئارقىلىق قاچىلانغان Hugo نى ئىشلىتىشنى تەلەپ قىلىدۇ . Hugo كىشىنى ھەيران قالدۇرىدىغان تېز ۋە بىر قەدەر كېڭەيتكىلى بولىدىغان تۇراقلىق تور بېكەت گېنېراتورى بولۇپ ، ئۇ بىزنى تەمىنلەيدۇ: ئاساسى ، Markdown نى ئاساس قىلغان ھۆججەتلەر ، قېلىپلار ۋە باشقىلار. ئۇنى قانداق باشلاش كېرەك:
- بارلىق قوراللارنى ئورنىتىش ئۈچۈن ئۈستىدىكى قوراللارنى تەڭشەش ئارقىلىق ئىجرا قىلىڭ .
- يىلتىز
/bootstrapمۇندەرىجىسىدىنnpm run docs-serveبۇيرۇق قۇرىدا ئىجرا قىلىڭ. http://localhost:9001/تور كۆرگۈچىڭىزدە ئېچىڭ .
ئۇنىڭ ھۆججەتلىرىنى ئوقۇش ئارقىلىق Hugo نى ئىشلىتىش ھەققىدىكى تەپسىلاتلار .
كاشىلا
بېقىنىش ئورنىتىش مەسىلىسىگە يولۇقسىڭىز ، ئىلگىرىكى بېقىنىش نەشىرىنى (يەرشارى ۋە يەرلىك) ئۆچۈرۈڭ. ئاندىن قايتا قوزغىتىڭ npm install.