האָפּקען צו הויפּט אינהאַלט האָפּקען צו דאָקס נאַוויגאַציע
in English

הקדמה

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

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

שנעל אָנהייב

איר זוכט צו געשווינד לייגן Bootstrap צו דיין פּרויעקט? ניצן jsDelivr, אַ פריי אָפֿן מקור CDN. ניצן אַ פּעקל פאַרוואַלטער אָדער דאַרפֿן צו אָפּלאָדירן די מקור טעקעס? גיין צו די דאַונלאָודז בלאַט .

CSS

נאָכמאַכן און פּאַפּ די סטילעשעעט <link>אין דיין <head>איידער אַלע אנדערע סטיילז צו לאָדן אונדזער CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

פילע פון ​​אונדזער קאַמפּאָונאַנץ דאַרפן די נוצן פון דזשאַוואַסקריפּט צו פונקציאָנירן. ספּעציעל, זיי דאַרפן אונדזער אייגענע דזשאַוואַסקריפּט פּלוגינס און פּאָפּער . שטעלן איינער פון די פאלגענדע <script>s לעבן די סוף פון דיין בלעטער, רעכט איידער די קלאָוזינג </body>קוויטל, צו געבן זיי.

פּעקל

אַרייַננעמען יעדער באָאָטסטראַפּ דזשאַוואַסקריפּט פּלוגין און דעפּענדענסי מיט איינער פון אונדזער צוויי באַנדאַלז. ביידע bootstrap.bundle.jsאון bootstrap.bundle.min.jsאַרייַננעמען פּאָפּער פֿאַר אונדזער מכשירים און פּאָפּאָווערס. פֿאַר מער אינפֿאָרמאַציע וועגן וואָס איז אַרייַנגערעכנט אין Bootstrap, ביטע זען אונדזער אינהאַלט אָפּטיילונג.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

באַזונדער

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

מאָדולעס

אויב איר נוצן <script type="module">, ביטע אָפּשיקן צו אונדזער ניצן Bootstrap ווי אַ מאָדולע אָפּטיילונג.

קאַמפּאָונאַנץ

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

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

סטאַרטער מוסטער

זייט זיכער צו שטעלן דיין בלעטער מיט די לעצטע פּלאַן און אַנטוויקלונג סטאַנדאַרדס. אַז מיטל ניצן אַ HTML5 דאָקטיפּע און אַרייַנגערעכנט אַ וויופּאָרט מעטאַ קוויטל פֿאַר געהעריק אָפּרופיק ביכייוויערז. שטעלן עס אַלע צוזאַמען און דיין בלעטער זאָל קוקן ווי דאָס:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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 און דערגרייכן די קהל מיט די נוציק רעסורסן.

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

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