Source

הקדמה

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

שנעל אָנהייב

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

CSS

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

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

JS

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

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

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

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

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

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

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

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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, shrink-to-fit=no">

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

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

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

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

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