ביישטייערן
הילף אַנטוויקלען Bootstrap מיט אונדזער דאַקיומענטיישאַן בויען סקריפּס און טעסץ.
מכשירים סעטטינגס
Bootstrap ניצט npm סקריפּס צו בויען די דאַקיומענטיישאַן און צונויפנעמען מקור טעקעס. אונדזער package.json הייזער די סקריפּס פֿאַר קאַמפּיילינג קאָד, פליסנדיק טעסץ און מער. די זענען נישט בדעה פֿאַר נוצן אַרויס אונדזער ריפּאַזאַטאָרי און דאַקיומענטיישאַן.
צו נוצן אונדזער בויען סיסטעם און לויפן אונדזער דאַקיומענטיישאַן לאָוקאַלי, איר דאַרפֿן אַ קאָפּיע פון באָאָטסטראַפּ ס מקור טעקעס און נאָדע. גיי די סטעפּס און איר זאָל זיין גרייט צו שטיין:
- אראפקאפיע און ינסטאַלירן Node.js , וואָס מיר נוצן צו פירן אונדזער דיפּענדאַנסיז.
- אָדער אראפקאפיע Bootstrap ס קוואלן אָדער גאָפּל Bootstrap ס ריפּאַזאַטאָרי .
- נאַוויגירן צו דער וואָרצל
/bootstrapוועגווייַזער און לויפןnpm installצו ינסטאַלירן אונדזער היגע דיפּענדאַנסיז ליסטעד אין package.json .
ווען עס איז געענדיקט, איר קענען לויפן די פאַרשידן קאַמאַנדז צוגעשטעלט פֿון די באַפֿעלן שורה.
ניצן npm סקריפּס
אונדזער package.json כולל פילע טאַסקס פֿאַר דעוועלאָפּינג די פּרויעקט. לויפן npm runצו זען אַלע די npm סקריפּס אין דיין וואָקזאַל. ערשטיק טאַסקס אַרייַננעמען:
| אַרבעט | באַשרייַבונג |
|---|---|
npm start |
קאַמפּיילז CSS און דזשאַוואַסקריפּט, בויען די דאַקיומענטיישאַן און סטאַרץ אַ היגע סערווער. |
npm run dist |
קרעאַטעס די dist/וועגווייַזער מיט קאַמפּיילד טעקעס. ריקוויירז Sass , Autoprefixer און Terser . |
npm test |
לויפט טעסץ לאָוקאַלי נאָך פליסנדיקnpm run dist |
npm run docs-serve |
בויען און לויפט די דאַקיומענטיישאַן לאָוקאַלי. |
סאַס
Bootstrap ניצט Dart Sass פֿאַר קאַמפּיילינג אונדזער סאַסס מקור טעקעס אין CSS טעקעס (אַרייַנגערעכנט אין אונדזער בויען פּראָצעס), און מיר רעקאָמענדירן איר טאָן די זעלבע אויב איר קאַמפּיילינג Sass ניצן דיין אייגענע אַסעט רערנ - ליניע. מיר פריער געוויינט Node Sass פֿאַר Bootstrap v4, אָבער LibSass און פּאַקידזשיז געבויט אויף שפּיץ, אַרייַנגערעכנט Node Sass, זענען איצט דיפּרישיייטיד .
Dart Sass ניצט אַ ראַונדינג פּינטלעכקייַט פון 10 און פֿאַר עפעקטיווקייַט סיבות קען נישט אַדזשאַסטיד דעם ווערט. מיר טאָן ניט נידעריקער דעם פּינטלעכקייַט בעשאַס ווייַטער פּראַסעסינג פון אונדזער דזשענערייטאַד CSS, אַזאַ ווי בעשאַס מיניפיקאַטיאָן, אָבער אויב איר האָט אויסדערוויילט צו טאָן דאָס, מיר רעקאָמענדירן צו האַלטן אַ פּינטלעכקייַט פון לפּחות 6 צו פאַרמייַדן ישוז מיט בלעטערער ראַונדינג.
אַוטאָפּרעפיקסער
Bootstrap ניצט Autoprefixer (אַרייַנגערעכנט אין אונדזער בויען פּראָצעס) צו אויטאָמאַטיש לייגן פאַרקויפער פּרעפיקסיז צו עטלעכע CSS פּראָפּערטיעס אין די בויען צייט. טאן אַזוי סאַוועס אונדז צייט און קאָד דורך אַלאַוינג אונדז צו שרייַבן שליסל פּאַרץ פון אונדזער CSS אַ איין מאָל און ילימאַנייטינג די נויט פֿאַר פאַרקויפער מיקסינס ווי די געפֿונען אין וו3.
מיר האַלטן די רשימה פון בראַוזערז געשטיצט דורך Autoprefixer אין אַ באַזונדער טעקע אין אונדזער GitHub ריפּאַזאַטאָרי. זען .browserslistrc פֿאַר פרטים.
RTLCSS
באָאָטסטראַפּ ניצט RTLCSS צו פּראָצעס קאַמפּיילד CSS און גער זיי צו RTL - בייסיקלי ריפּלייסינג האָריזאָנטאַל ריכטונג אַווער פּראָפּערטיעס (למשל padding-left) מיט זייער פאַרקערט. עס אַלאַוז אונדז בלויז שרייַבן אונדזער CSS אַ איין מאָל און מאַכן מינערווערטיק טוויקס ניצן RTLCSS קאָנטראָל און ווערט דיירעקטיווז.
לאקאלע דאקומענטאציע
לויפן אונדזער דאַקיומענטיישאַן לאָוקאַלי ריקווייערז די נוצן פון Hugo, וואָס איז אינסטאַלירן דורך די Hugo-bin npm פּעקל. הוגאָ איז אַ בלייזינגלי שנעל און גאַנץ עקסטענסיבלע סטאַטיק פּלאַץ גענעראַטאָר וואָס גיט אונדז: יקערדיק ינקלודז, מאַרקדאָוון-באזירט טעקעס, טעמפּלאַטעס, און מער. דאָ ס ווי צו באַקומען עס סטאַרטעד:
- לויפן דורך די מכשירים סעטאַפּ אויבן צו ינסטאַלירן אַלע דיפּענדאַנסיז.
- פֿון דער וואָרצל
/bootstrapוועגווייַזער, לויפןnpm run docs-serveאין די באַפֿעלן שורה. - עפֿענען
http://localhost:9001/אין דיין בלעטערער, און voilà.
לערנען מער וועגן ניצן Hugo דורך לייענען זיין דאַקיומענטיישאַן .
טראָובלעשאָאָטינג
אויב איר טרעפן פּראָבלעמס מיט ינסטאָלינג דיפּענדאַנסיז, נעם אַוועק אַלע פרייַערדיק דעפּענדענסי ווערסיעס (גלאבאלע און היגע). דערנאָך, ריראַנז npm install.