in English

הקדמה

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

שנעל אָנהייב

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

CSS

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

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

JS

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

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

פּעקל

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

באַזונדער

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

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

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

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

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

זייט זיכער צו שטעלן דיין בלעטער מיט די לעצטע פּלאַן און אַנטוויקלונג סטאַנדאַרדס. אַז מיטל ניצן אַ 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" 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 און דערגרייכן די קהל מיט די נוציק רעסורסן.

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

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

CSPs און עמבעדיד SVGs

עטלעכע באָאָטסטראַפּ קאַמפּאָונאַנץ אַרייַננעמען עמבעדיד SVGs אין אונדזער CSS צו סטיל קאַמפּאָונאַנץ קאַנסיסטאַנטלי און לייכט אַריבער בראַוזערז און דעוויסעס. פֿאַר אָרגאַנאַזיישאַנז מיט מער שטרענג CSP קאַנפיגיעריישאַנז , מיר האָבן דאַקיומענטאַד אַלע ינסטאַנסיז פון אונדזער עמבעדיד SVGs (אַלע פון ​​וואָס זענען געווענדט דורך background-image) אַזוי איר קענען מער ונ דורך אָפּשאַצן דיין אָפּציעס.

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