אָנהייבן מיט Bootstrap

באָאָצטראַפּ איז אַ שטאַרק, פול-פּאַקט פראָנטענד טאָאָלקיט. בויען עפּעס - פֿון פּראָוטאַטייפּ צו פּראָדוקציע - אין מינוטן.

אויף דעם בלאַט

שנעל אָנהייב

באַקומען סטאַרטעד דורך אַרייַנגערעכנט Bootstrap ס פּראָדוקציע-גרייט CSS און דזשאַוואַסקריפּט דורך CDN אָן די נויט פֿאַר בויען סטעפּס. זען עס אין פיר מיט דעם Bootstrap CodePen דעמאָ .

שאַפֿן אַ נייַע index.htmlטעקע אין דיין פּרויעקט וואָרצל. אַרייַננעמען די <meta name="viewport">קוויטל אויך פֿאַר אַ געהעריק אָפּרופיק נאַטור אין רירעוודיק דעוויסעס.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

אַרייַננעמען Bootstrap's CSS און JS. שטעלן די <link>קוויטל אין די <head>פֿאַר אונדזער CSS, און די <script>קוויטל פֿאַר אונדזער דזשאַוואַסקריפּט פּעקל (אַרייַנגערעכנט פּאָפּער פֿאַר פּאַזישאַנינג דראָפּדאָוונס, פּאָפּערז און טאָאָלטיפּס) איידער די קלאָוזינג </body>. לערן מער וועגן אונדזער CDN פֿאַרבינדונגען .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

איר קענט אויך אַרייַננעמען פּאָפּער און אונדזער JS סעפּעראַטלי. אויב איר טאָן ניט פּלאַנירן צו נוצן דראָפּדאָוונס, פּאָפּאָווערס אָדער טאָאָלטיפּס, שפּאָרן עטלעכע קילאבייט דורך נישט אַרייַנגערעכנט פּאָפּער.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

העלא וועלט! עפֿענען דעם בלאַט אין דיין בלעטערער פון ברירה צו זען דיין באָאָטסטראַפּט בלאַט. איצט איר קענען אָנהייבן בויען מיט Bootstrap דורך קריייטינג דיין אייגענע אויסלייג , אַדינג דאַזאַנז פון קאַמפּאָונאַנץ און ניצן אונדזער באַאַמטער ביישפילן .

CDN לינקס

ווי רעפֿערענץ, דאָ זענען אונדזער ערשטיק CDN לינקס.

באַשרייַבונג	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

איר קענט אויך נוצן די CDN צו ברענגען קיין פון אונדזער נאָך בויען ליסטעד אין די אינהאַלט בלאַט .

ווייַטער טריט

לייענען אַ ביסל מער וועגן עטלעכע וויכטיק גלאבאלע סוויווע סעטטינגס וואָס Bootstrap ניצט.
לייענען וועגן וואָס איז אַרייַנגערעכנט אין Bootstrap אין אונדזער אינהאַלט אָפּטיילונג און די רשימה פון קאַמפּאָונאַנץ וואָס דאַרפן דזשאַוואַסקריפּט אונטן.
דאַרפֿן אַ ביסל מער מאַכט? באַטראַכטן בנין מיט Bootstrap דורך אַרייַנגערעכנט די מקור טעקעס דורך פּעקל פאַרוואַלטער .
איר זוכט צו נוצן Bootstrap ווי אַ מאָדולע מיט <script type="module">? ביטע אָפּשיקן צו אונדזער ניצן Bootstrap ווי אַ מאָדולע אָפּטיילונג.

דזשס קאַמפּאָונאַנץ

טשיקאַווע וואָס קאַמפּאָונאַנץ דאַרפן בפירוש אונדזער דזשאַוואַסקריפּט און פּאָפּער? דריקט דעם ווייַזן קאַמפּאָונאַנץ לינק אונטן. אויב איר זענט נישט זיכער וועגן די אַלגעמיינע בלאַט סטרוקטור, האַלטן לייענען פֿאַר אַ בייַשפּיל בלאַט מוסטער.

ווייַזן קאַמפּאָונאַנץ ריקוויירינג דזשאַוואַסקריפּט

אַלערץ פֿאַר דיסמיסינג
קנעפּלעך פֿאַר טאַגאַלינג שטאַטן און טשעקקבאָקס / ראַדיאָ פאַנגקשאַנאַליטי
קעראַסעל פֿאַר אַלע רוק ביכייוויערז, קאָנטראָלס און ינדאַקייטערז
ייַנבראָך פֿאַר טאַגאַלינג וויזאַביליטי פון אינהאַלט
דראָפּדאָוונס פֿאַר ווייַז און פּאַזישאַנינג (אויך ריקווייערז פּאָפּער )
מאָדעס פֿאַר ווייַז, פּאַזישאַנינג און מעגילע נאַטור
נאַוובאַר פֿאַר יקסטענדינג אונדזער קאַלאַפּס און אָפקאַנוואַס פּלוגינס צו ינסטרומענט אָפּרופיק ביכייוויערז
נאַווס מיט די טאַב פּלוגין פֿאַר טאַגאַלינג אינהאַלט פּאַנעס
אָפקאַנוואַסעס פֿאַר ווייַז, פּאַזישאַנינג און מעגילע נאַטור
סקראָלספּי פֿאַר מעגילע נאַטור און נאַוויגאַציע דערהייַנטיקונגען
טאָסט פֿאַר ווייַזנדיק און דיסמיסינג
מכשירים און פּאָפּאָווערס פֿאַר ווייַז און פּאַזישאַנינג (אויך ריקווייערז פּאָפּער )

וויכטיק גלאָבאַלס

Bootstrap ימפּלויז אַ האַנדפול פון וויכטיק גלאבאלע סטיילז און סעטטינגס, אַלע וואָס זענען כּמעט אויסשליסלעך גירד צו נאָרמאַליזיישאַן פון קרייַז בלעטערער סטיילז. לאָמיר זיך אַרײַנכאַפּן.

HTML5 דאָקטיפּע

באָאָטסטראַפּ ריקווייערז די נוצן פון די HTML5 דאָקטיפּע. אָן עס, איר וועט זען עטלעכע פאַנגקי און דערענדיקט סטילינג.

<!doctype html>
<html lang="en">
  ...
</html>

אָפּרופיק מעטאַ טאַג

באָאָטסטראַפּ איז דעוועלאָפּעד רירעוודיק ערשטער , אַ סטראַטעגיע אין וואָס מיר אַפּטאַמייז קאָד פֿאַר רירעוודיק דעוויסעס ערשטער און דערנאָך פאַרגרעסערן די קאַמפּאָונאַנץ ווי נייטיק מיט CSS מעדיע פֿראגן. צו פאַרזיכערן געהעריק רענדערינג און פאַרבינדן זומינג פֿאַר אַלע דעוויסעס, לייגן די אָפּרופיק וויופּאָרט מעטאַ קוויטל צו דיין <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

איר קענען זען אַ ביישפּיל פון דעם אין קאַמף אין די שנעל אָנהייב .

קעסטל-סייזינג

פֿאַר מער סטרייטפאָרווערד סייזינג אין CSS, מיר באַשטימען די גלאבאלע box-sizingווערט פון content-boxצו border-box. דאָס ינשורז אַז דאָס paddingקען נישט ווירקן די לעצט קאַמפּיוטיד ברייט פון אַן עלעמענט, אָבער עס קען פאַרשאַפן פּראָבלעמס מיט עטלעכע דריט-פּאַרטיי ווייכווארג ווי Google מאַפּס און Google מנהג זוך ענגינע.

אין די זעלטן געלעגנהייט איר דאַרפֿן צו אָווועררייד עס, נוצן עפּעס ווי די פאלגענדע:

.selector-for-some-widget {
  box-sizing: content-box;
}

מיט די אויבן סניפּאַט, נעסטעד עלעמענטן - אַרייַנגערעכנט דזשענערייטאַד אינהאַלט דורך ::beforeאון ::after- וועט אַלע ירשענען די ספּעסיפיעד box-sizingפֿאַר דעם .selector-for-some-widget.

לערן מער וועגן קעסטל מאָדעל און סייזינג ביי CSS טריקס .

רעבאָאָט

פֿאַר ימפּרוווד קרייז-בלעטערער רענדערינג, מיר נוצן רעבאָאָט צו פאַרריכטן ינגקאַנסיסטענסיז צווישן בראַוזערז און דעוויסעס, בשעת מיר צושטעלן אַ ביסל מער ריזעץ צו פּראָסט HTML עלעמענטן.

קהילה

בלייבן דערהייַנטיקט אויף דער אַנטוויקלונג פון Bootstrap און דערגרייכן די קהל מיט די נוציק רעסורסן.

לייענען און אַבאָנירן צו דער באַאַמטער באָאָצטראַפּ בלאָג .
פרעגן און ויספאָרשן אונדזער GitHub דיסקוסיעס .
שמועסן מיט יונגערמאַן באָאָטסטראַפּפּערס אין ירק. אויף די irc.libera.chatסערווער, אין די #bootstrapקאַנאַל.
ימפּלעמענטאַטיאָן הילף קען זיין געפֿונען אין Stack Overflow (טאַגד bootstrap-5).
דעוועלאָפּערס זאָל נוצן די קיווערד bootstrapאויף פּאַקאַדזשאַז וואָס מאָדיפיצירן אָדער לייגן צו די פאַנגקשאַנאַליטי פון Bootstrap ווען דיסטריביוטינג דורך npm אָדער ענלעך עקספּרעס מעקאַניזאַמז פֿאַר מאַקסימום דיסקאַווערד.

איר קענט אויך נאָכפאָלגן @getbootstrap אויף טוויטטער פֿאַר די לעצטע יענטע און אָסאַם מוזיק ווידיאס.