גליפיקאָנס

בנימצא גליפס

כולל איבער 250 גליפס אין שריפֿט פֿאָרמאַט פֿון די Glyphicon Halflings שטעלן. Glyphicons Halflings זענען נאָרמאַלי ניט בנימצא פֿאַר פריי, אָבער זייער באשעפער האט געמאכט זיי בנימצא פֿאַר Bootstrap פריי. ווי אַ דאַנקען דיר, מיר נאָר בעטן אַז איר אַרייַן אַ לינק צוריק צו Glyphicons ווען מעגלעך.

  • גליפיקאָן גליפיקאָן-אַסטעריסק
  • גליפיקאָן גליפיקאָן-פּלוס
  • גליפיקאָן גליפיקאָן-יוראַ
  • גליפיקאָן גליפיקאָן-עור
  • גליפיקאָן גליפיקאָן-מינוס
  • גליפיקאָן גליפיקאָן-וואָלקן
  • גליפיקאָן גליפיקאָן-קאָנווערט
  • גליפיקאָן גליפיקאָן-בלייַער
  • גליפיקאָן גליפיקאָן-גלאז
  • גליפיקאָן גליפיקאָן-מוזיק
  • גליפיקאָן גליפיקאָן-זוכן
  • גליפיקאָן גליפיקאָן-האַרץ
  • גליפיקאָן גליפיקאָן-שטערן
  • גליפיקאָן גליפיקאָן-שטערן-ליידיק
  • גליפיקאָן גליפיקאָן-באַניצער
  • גליפיקאָן גליפיקאָן-פילם
  • גליפיקאָן גליפיקאָן-טה-גרויס
  • גליפיקאָן גליפיקאָן-טה
  • גליפיקאָן גליפיקאָן-טה-רשימה
  • גליפיקאָן גליפיקאָן-גוט
  • גליפיקאָן גליפיקאָן-נעם אַוועק
  • גליפיקאָן גליפיקאָן-זאָאָם-אין
  • גליפיקאָן גליפיקאָן-פארגרעסער-אויס
  • גליפיקאָן גליפיקאָן-אַוועק
  • גליפיקאָן גליפיקאָן סיגנאַל
  • גליפיקאָן גליפיקאָן-קאָג
  • גליפיקאָן גליפיקאָן-אָפּפאַל
  • גליפיקאָן גליפיקאָן-היים
  • גליפיקאָן גליפיקאָן-טעקע
  • גליפיקאָן גליפיקאָן-צייַט
  • גליפיקאָן גליפיקאָן-וועג
  • glyphicon glyphicon-download-alt
  • גליפיקאָן גליפיקאָן-אָפּלאָדירן
  • גליפיקאָן גליפיקאָן-ופּלאָאַד
  • גליפיקאָן גליפיקאָן-ינבאָקס
  • גליפיקאָן גליפיקאָן-שפּיל-קרייַז
  • גליפיקאָן גליפיקאָן - איבערחזרן
  • גליפיקאָן גליפיקאָן-דערפרישן
  • glyphicon glyphicon-list-alt
  • גליפיקאָן גליפיקאָן-שלאָס
  • גליפיקאָן גליפיקאָן-פלאַך
  • גליפיקאָן גליפיקאָן-כעדפאָונז
  • גליפיקאָן גליפיקאָן-באַנד-אַוועק
  • גליפיקאָן גליפיקאָן-באַנד אַראָפּ
  • גליפיקאָן גליפיקאָן-באַנד-אַרויף
  • גליפיקאָן גליפיקאָן-קרקאָדע
  • גליפיקאָן גליפיקאָן-באַרקאָדע
  • גליפיקאָן גליפיקאָן-טאָג
  • גליפיקאָן גליפיקאָן-טאַגס
  • גליפיקאָן גליפיקאָן-בוך
  • גליפיקאָן גליפיקאָן-בוקמאַרק
  • גליפיקאָן גליפיקאָן-דרוקן
  • גליפיקאָן גליפיקאָן-אַפּאַראַט
  • גליפיקאָן גליפיקאָן-שריפֿט
  • גליפיקאָן גליפיקאָן-דרייסט
  • גליפיקאָן גליפיקאָן-יטאַליק
  • גליפיקאָן גליפיקאָן-טעקסט-הייך
  • גליפיקאָן גליפיקאָן-טעקסט-ברייט
  • glyphicon glyphicon-align-left
  • גליפיקאָן גליפיקאָן-אַליינ-צענטער
  • glyphicon glyphicon-align-right
  • גליפיקאָן גליפיקאָן-align-justify
  • גליפיקאָן גליפיקאָן רשימה
  • גליפיקאָן גליפיקאָן-ינדענט-לינקס
  • גליפיקאָן גליפיקאָן-ינדענט-רעכט
  • גליפיקאָן גליפיקאָן-פאַסעטימע-ווידעאָ
  • גליפיקאָן גליפיקאָן-בילד
  • גליפיקאָן גליפיקאָן-מאַפּע-מאַרקער
  • גליפיקאָן גליפיקאָן-אַדזשאַסטיד
  • גליפיקאָן גליפיקאָן-טינט
  • גליפיקאָן גליפיקאָן-רעדאַגירן
  • גליפיקאָן גליפיקאָן-ייַנטיילן
  • גליפיקאָן גליפיקאָן טשעק
  • גליפיקאָן גליפיקאָן-מאָווע
  • גליפיקאָן גליפיקאָן-שריט-צוריק
  • גליפיקאָן גליפיקאָן-שנעל-צוריק
  • גליפיקאָן גליפיקאָן-צוריק
  • גליפיקאָן גליפיקאָן-שפּיל
  • גליפיקאָן גליפיקאָן-פּויזע
  • גליפיקאָן גליפיקאָן-האַלטן
  • גליפיקאָן גליפיקאָן-פאָרויס
  • גליפיקאָן גליפיקאָן-שנעל-פאָרויס
  • גליפיקאָן גליפיקאָן-שריט-פאָרויס
  • גליפיקאָן גליפיקאָן-אַרויסוואַרפן
  • גליפיקאָן גליפיקאָן-טשעווראָן-לינקס
  • גליפיקאָן גליפיקאָן-טשעווראָן-רעכט
  • גליפיקאָן גליפיקאָן-פּלוס-צייכן
  • גליפיקאָן גליפיקאָן-מינוס-צייכן
  • גליפיקאָן גליפיקאָן-אַראָפּנעמען-צייכן
  • גליפיקאָן גליפיקאָן-גוט-צייכן
  • גליפיקאָן גליפיקאָן-פראַגע-צייכן
  • glyphicon glyphicon-info-sign
  • גליפיקאָן גליפיקאָן-סקרעענשאָט
  • גליפיקאָן גליפיקאָן-אַראָפּנעמען-קרייַז
  • גליפיקאָן גליפיקאָן-גוט-קרייַז
  • גליפיקאָן גליפיקאָן-באַן-קרייַז
  • גליפיקאָן גליפיקאָן-פייַל-לינקס
  • גליפיקאָן גליפיקאָן-פייַל-רעכט
  • גליפיקאָן גליפיקאָן-פייַל-אַרויף
  • גליפיקאָן גליפיקאָן-פייַל-אַראָפּ
  • גליפיקאָן גליפיקאָן-שאַרע-אַלט
  • גליפיקאָן גליפיקאָן-רעסיזע-פול
  • גליפיקאָן גליפיקאָן-גרייס-קליין
  • גליפיקאָן גליפיקאָן-יקסקלאַמיישאַן-צייכן
  • גליפיקאָן גליפיקאָן-טאַלאַנט
  • גליפיקאָן גליפיקאָן-בלאַט
  • גליפיקאָן גליפיקאָן-פייַער
  • גליפיקאָן גליפיקאָן-אויג-עפענען
  • גליפיקאָן גליפיקאָן-אויג-נאָענט
  • גליפיקאָן גליפיקאָן-ווארענונג-צייכן
  • גליפיקאָן גליפיקאָן פלאַך
  • גליפיקאָן גליפיקאָן-קאַלענדאַר
  • גליפיקאָן גליפיקאָן-ראַנדאָם
  • גליפיקאָן גליפיקאָן-באַמערקונג
  • גליפיקאָן גליפיקאָן-מאַגנעט
  • גליפיקאָן גליפיקאָן-טשעווראָן-אַרויף
  • גליפיקאָן גליפיקאָן-טשעווראָן-אַראָפּ
  • גליפיקאָן גליפיקאָן-רעטוועעט
  • גליפיקאָן גליפיקאָן-שאַפּינג וואָגן
  • גליפיקאָן גליפיקאָן-טעקע-נאָענט
  • גליפיקאָן גליפיקאָן-טעקע-עפענען
  • גליפיקאָן גליפיקאָן-גרייס-ווערטיקאַל
  • גליפיקאָן גליפיקאָן-רעדאַגירן-האָריזאָנטאַל
  • גליפיקאָן גליפיקאָן-הדד
  • גליפיקאָן גליפיקאָן-בולהאָרן
  • גליפיקאָן גליפיקאָן-גלאָק
  • גליפיקאָן גליפיקאָן-סערטיפיקאַט
  • גליפיקאָן גליפיקאָן-טהומבס-אַרויף
  • גליפיקאָן גליפיקאָן-טהומבס-אַראָפּ
  • גליפיקאָן גליפיקאָן-האַנט-רעכט
  • גליפיקאָן גליפיקאָן-האַנט-לינקס
  • גליפיקאָן גליפיקאָן-האַנד-אַרויף
  • גליפיקאָן גליפיקאָן-האַנד-אַראָפּ
  • גליפיקאָן גליפיקאָן-קרייַז-פייַל-רעכט
  • גליפיקאָן גליפיקאָן-קרייַז-פייַל-לינקס
  • גליפיקאָן גליפיקאָן-קרייַז-פייַל-אַרויף
  • גליפיקאָן גליפיקאָן-קרייַז-פייַל-אַראָפּ
  • גליפיקאָן גליפיקאָן-גלאָבוס
  • גליפיקאָן גליפיקאָן-מוריק
  • גליפיקאָן גליפיקאָן-טאַסקס
  • גליפיקאָן גליפיקאָן-פילטער
  • גליפיקאָן גליפיקאָן-שעטעך
  • גליפיקאָן גליפיקאָן-פוללסקרעען
  • גליפיקאָן גליפיקאָן-דאַשבאָרד
  • גליפיקאָן גליפיקאָן-פּאַפּערקליפּ
  • גליפיקאָן גליפיקאָן-האַרץ-ליידיק
  • גליפיקאָן גליפיקאָן-לינק
  • גליפיקאָן גליפיקאָן-פאָן
  • גליפיקאָן גליפיקאָן-פּושפּין
  • גליפיקאָן גליפיקאָן-וסד
  • גליפיקאָן גליפיקאָן-גבפּ
  • גליפיקאָן גליפיקאָן-סאָרט
  • גליפיקאָן גליפיקאָן-סאָרט-דורך-אלפאבעט
  • גליפיקאָן גליפיקאָן-סאָרט-דורך-אלפאבעט-אַלט
  • גליפיקאָן גליפיקאָן-סאָרט-דורך-סדר
  • גליפיקאָן גליפיקאָן-סאָרט-דורך-סדר-אַלט
  • גליפיקאָן גליפיקאָן-סאָרט-דורך-אַטטראַביוץ
  • glyphicon glyphicon-sort-by-attributes-alt
  • גליפיקאָן גליפיקאָן-ונטשעקקעד
  • גליפיקאָן גליפיקאָן-עקספּאַנד
  • גליפיקאָן גליפיקאָן-ייַנבראָך-אַראָפּ
  • גליפיקאָן גליפיקאָן-ייַנבראָך-אַרויף
  • גליפיקאָן גליפיקאָן-לאָג-אין
  • גליפיקאָן גליפיקאָן-בליץ
  • גליפיקאָן גליפיקאָן-לאָג-אויס
  • glyphicon glyphicon-new-window
  • גליפיקאָן גליפיקאָן-רעקאָרד
  • גליפיקאָן גליפיקאָן-היט
  • גליפיקאָן גליפיקאָן-עפענען
  • גליפיקאָן גליפיקאָן-געראטעוועט
  • גליפיקאָן גליפיקאָן-אַרייַנפיר
  • גליפיקאָן גליפיקאָן-עקספּאָרט
  • גליפיקאָן גליפיקאָן-שיקן
  • גליפיקאָן גליפיקאָן-פלאָפּפּי-דיסק
  • גליפיקאָן גליפיקאָן-פלאָפּפּי-געראטעוועט
  • גליפיקאָן גליפיקאָן-פלאָפּפּי-נעם אַוועק
  • גליפיקאָן גליפיקאָן-פלאָפּפּי-היט
  • גליפיקאָן גליפיקאָן-פלאָפּפּי-עפענען
  • גליפיקאָן גליפיקאָן-קרעדיט-קאַרטל
  • גליפיקאָן גליפיקאָן-אַריבערפירן
  • גליפיקאָן גליפיקאָן-גאָפּל - לעפל
  • גליפיקאָן גליפיקאָן-כעדער
  • גליפיקאָן גליפיקאָן-קאָמפּרעסט
  • גליפיקאָן גליפיקאָן ירפאָון
  • גליפיקאָן גליפיקאָן-פאָון-אַלט
  • גליפיקאָן גליפיקאָן-טורעם
  • גליפיקאָן גליפיקאָן-סטאַטוץ
  • glyphicon glyphicon-sd-video
  • גליפיקאָן גליפיקאָן-הד-ווידעאָ
  • גליפיקאָן גליפיקאָן-סובטיטלעס
  • גליפיקאָן גליפיקאָן-געזונט-סטערעאָ
  • גליפיקאָן גליפיקאָן-סאָונד-דאָלבי
  • גליפיקאָן גליפיקאָן-סאָונד-5-1
  • גליפיקאָן גליפיקאָן-סאָונד-6-1
  • גליפיקאָן גליפיקאָן-סאָונד-7-1
  • glyphicon glyphicon-copyright-mark
  • גליפיקאָן גליפיקאָן-רעגיסטראַציע-מאַרק
  • glyphicon glyphicon-cloud-download
  • גליפיקאָן גליפיקאָן-וואָלקן-ופּלאָאַד
  • גליפיקאָן גליפיקאָן-בוים-קאַניפער
  • גליפיקאָן גליפיקאָן-בוים-דיסידזשואַס
  • גליפיקאָן גליפיקאָן-סי.די
  • גליפיקאָן גליפיקאָן-היט-טעקע
  • גליפיקאָן גליפיקאָן-עפענען-טעקע
  • גליפיקאָן גליפיקאָן-מדרגה-אַרויף
  • גליפיקאָן גליפיקאָן-קאָפּי
  • גליפיקאָן גליפיקאָן-פּאַסטע
  • גליפיקאָן גליפיקאָן-פלינק
  • גליפיקאָן גליפיקאָן-יקוואַליזער
  • גליפיקאָן גליפיקאָן-מלך
  • גליפיקאָן גליפיקאָן-מלכּה
  • גליפיקאָן גליפיקאָן-פּיאָן
  • גליפיקאָן גליפיקאָן-בישאָפּ
  • גליפיקאָן גליפיקאָן-ריטער
  • גליפיקאָן גליפיקאָן-בעיבי-פאָרמולע
  • גליפיקאָן גליפיקאָן-געצעלט
  • גליפיקאָן גליפיקאָן-בלאַקבאָרד
  • גליפיקאָן גליפיקאָן-בעט
  • גליפיקאָן גליפיקאָן-עפּל
  • גליפיקאָן גליפיקאָן-מעקן
  • גליפיקאָן גליפיקאָן-אַורגלאַס
  • גליפיקאָן גליפיקאָן-לאָמפּ
  • גליפיקאָן גליפיקאָן-דופּליקאַט
  • גליפיקאָן גליפיקאָן-פּיגי-באַנק
  • גליפיקאָן גליפיקאָן-שער
  • גליפיקאָן גליפיקאָן-ביטקאָין
  • גליפיקאָן גליפיקאָן-בטק
  • glyphicon glyphicon-xbt
  • גליפיקאָן גליפיקאָן-יען
  • glyphicon glyphicon-jpy
  • גליפיקאָן גליפיקאָן-רובל
  • גליפיקאָן גליפיקאָן-רייַבן
  • גליפיקאָן גליפיקאָן-וואָג
  • גליפיקאָן גליפיקאָן-אייז-לאָללי
  • גליפיקאָן גליפיקאָן-אייז-לאָללי-געזוכט
  • גליפיקאָן גליפיקאָן-בילדונג
  • גליפיקאָן גליפיקאָן-אָפּציע-האָריזאָנטאַל
  • גליפיקאָן גליפיקאָן-אָפּציע-ווערטיקאַל
  • גליפיקאָן גליפיקאָן-מעניו-האַמבורגער
  • גליפיקאָן גליפיקאָן-מאָדאַל-פֿענצטער
  • גליפיקאָן גליפיקאָן-בוימל
  • גליפיקאָן גליפיקאָן-קערל
  • גליפיקאָן גליפיקאָן-זונברילן
  • גליפיקאָן גליפיקאָן-טעקסט-גרייס
  • גליפיקאָן גליפיקאָן-טעקסט-קאָליר
  • גליפיקאָן גליפיקאָן-טעקסט-הינטערגראָונד
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • גליפיקאָן גליפיקאָן-אָבדזשעקט-ייַנרייען-האָריזאָנטאַל
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • גליפיקאָן גליפיקאָן-דרייַעק-רעכט
  • גליפיקאָן גליפיקאָן-דרייַעק-לינקס
  • גליפיקאָן גליפיקאָן-דרייַעק-דנאָ
  • גליפיקאָן גליפיקאָן-דרייַעק-שפּיץ
  • גליפיקאָן גליפיקאָן קאַנסאָול
  • גליפיקאָן גליפיקאָן-סופּערסקריפּט
  • גליפיקאָן גליפיקאָן-אַבאָנענט
  • גליפיקאָן גליפיקאָן-מעניו-לינקס
  • glyphicon glyphicon-menu-right
  • גליפיקאָן גליפיקאָן-menu-down
  • glyphicon glyphicon-menu-up

וויאזוי צו ניצן

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

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

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

בלויז פֿאַר נוצן אויף ליידיק עלעמענטן

ייקאַן קלאסן זאָל זיין געוויינט בלויז אויף עלעמענטן וואָס אַנטהאַלטן קיין טעקסט אינהאַלט און האָבן קיין קינד עלעמענטן.

טשאַנגינג די ייקאַן שריפֿט אָרט

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

  • טוישן די @icon-font-pathאון / אָדער @icon-font-nameוועריאַבאַלז אין די מקור ווייניקער טעקעס.
  • ניצן די קאָרעוו URL ס אָפּציע צוגעשטעלט דורך די ווייניקער קאַמפּיילער.
  • טוישן די url()פּאַטס אין די קאַמפּיילד CSS.

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

צוטריטלעך ייקאַנז

מאָדערן ווערסיעס פון אַסיסטיוו טעקנאַלאַדזשיז וועט מעלדן CSS דזשענערייטאַד אינהאַלט, ווי געזונט ווי ספּעציפיש אוניקאָד אותיות. צו ויסמיידן אַנינטענדיד און קאַנפיוזינג רעזולטאַט אין פאַרשטעלן לייענער (ספּעציעל ווען ייקאַנז זענען געניצט בלויז פֿאַר באַפּוצונג), מיר באַהאַלטן זיי מיט די aria-hidden="true"אַטריביוט.

אויב איר נוצן אַ ייקאַן צו יבערגעבן טייַטש (אלא ווי בלויז ווי אַ דעקאָראַטיווע עלעמענט), ענשור אַז די טייַטש איז אויך קאַנווייד צו אַסיסטיוו טעקנאַלאַדזשיז - פֿאַר בייַשפּיל, אַרייַננעמען נאָך אינהאַלט, וויזשוואַלי פאַרבאָרגן מיט די .sr-onlyקלאַס.

אויב איר שאַפֿן קאָנטראָלס אָן קיין אנדערע טעקסט (אַזאַ ווי אַ <button>וואָס בלויז כּולל אַ ייקאַן), איר זאָל שטענדיק צושטעלן אָלטערנאַטיוו אינהאַלט צו ידענטיפיצירן די ציל פון די קאָנטראָל, אַזוי אַז עס וועט זיין זינען פֿאַר יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז. אין דעם פאַל, איר קענען לייגן אַן aria-labelאַטריביוט אויף די קאָנטראָל זיך.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

ביישפילן

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

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

אַן ייקאַן געניצט אין אַ פלינק צו יבערגעבן אַז עס איז אַ טעות אָנזאָג, מיט נאָך .sr-onlyטעקסט צו יבערגעבן דעם אָנצוהערעניש צו יוזערז פון אַסיסטאַטיוו טעקנאַלאַדזשיז.

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

דראָפּדאָוונס

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

ייַנוויקלען די צינגל פון די דראָפּדאָוון און די דראָפּדאָוון מעניו אין .dropdown, אָדער אן אנדער עלעמענט וואָס דערקלערט position: relative;. דערנאָך לייג די HTML פון די מעניו.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

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

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

דורך פעליקייַט, אַ דראָפּדאָוון מעניו איז אויטאָמאַטיש פּאַזישאַנד 100% פון די שפּיץ און צוזאמען די לינקס זייַט פון זיין פאָטער. לייג .dropdown-menu-rightצו אַ .dropdown-menuרעכט ייַנרייען די דראָפּדאָוון מעניו.

קען דאַרפן נאָך פּאַזישאַנינג

דראָפּדאָוונס זענען אויטאָמאַטיש פּאַזישאַנד דורך CSS אין דער נאָרמאַל לויפן פון דעם דאָקומענט. דעם מיטל דראָפּדאָוונס קענען זיין קראַפּט דורך עלטערן מיט זיכער overflowפּראָפּערטיעס אָדער דערשייַנען אויס פון די גווול פון די וויופּאָרט. אַדרעס די ישוז אויף דיין אייגן ווי זיי שטייען.

דיפּרישיייטיד .pull-rightאַליינמאַנט

זינט וו3.1.0, מיר האָבן דיפּרישיייטיד .pull-rightדי דראָפּדאָוון מעניוז. צו רעכט ייַנרייען אַ מעניו, נוצן .dropdown-menu-right. רעכט-אַליינד נאַוו קאַמפּאָונאַנץ אין די נאַוובאַר נוצן אַ מיקסין ווערסיע פון ​​​​דעם קלאַס צו אויטאָמאַטיש ייַנרייען די מעניו. צו אָווועררייד עס, נוצן .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

לייג אַ דיווידער צו באַזונדער סעריע פון ​​​​לינקס אין אַ דראָפּדאָוון מעניו.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

לייג .disabledצו אַ <li>אין די דראָפּדאָוון צו דיסייבאַל די לינק.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

קנעפּל גרופּעס

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

טאָאָלטיפּס און פּאָפּאָווערס אין קנעפּל גרופּעס דאַרפן ספּעציעל באַשטעטיקן

ווען איר נוצן טאָאָלטיפּס אָדער פּאָפּאָווערס אויף עלעמענטן אין אַ .btn-group, איר וועט האָבן צו ספּעציפיצירן די אָפּציע container: 'body'צו ויסמיידן אַנוואָנטיד זייַט יפעקץ (אַזאַ ווי דער עלעמענט וואַקסן ברייטער און / אָדער פאַרלירן זיין ראַונדיד עקן ווען די טאָאָלטיפּ אָדער פּאָפּאָווער איז טריגערד).

פאַרזיכערן ריכטיק roleאון צושטעלן אַ פירמע

כּדי אַסיסטיוו טעקנאַלאַדזשיז - אַזאַ ווי פאַרשטעלן לייענער - צו קאַנוויי אַז אַ סעריע פון ​​קנעפּלעך איז גרופּט, אַ צונעמען roleאַטריביוט דאַרף זיין צוגעשטעלט. פֿאַר קנעפּל גרופּעס, דאָס וואָלט זיין role="group", בשעת טאָאָלבאַרס זאָל האָבן אַ role="toolbar".

איין ויסנעם זענען גרופּעס וואָס אַנטהאַלטן בלויז איין קאָנטראָל (פֿאַר בייַשפּיל די דזשאַסטאַפייד קנעפּל גרופּעס מיט <button>עלעמענטן) אָדער אַ דראָפּדאָוון.

אין אַדישאַן, גרופּעס און מכשירים זאָל זיין געגעבן אַ יקספּליסאַט פירמע, ווייַל רובֿ אַסיסטאַנץ טעקנאַלאַדזשיז אַנדערש וועט נישט מעלדן זיי, טראָץ דעם בייַזייַן פון די ריכטיק roleאַטריביוט. אין די ביישפילן צוגעשטעלט דאָ, מיר נוצן aria-label, אָבער אַלטערנאַטיוועס אַזאַ ווי aria-labelledbyקענען אויך זיין געוויינט.

יקערדיק בייַשפּיל

ייַנוויקלען אַ סעריע פון ​​קנעפּלעך מיט .btnאין .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

קנעפּל מכשיר

קאַמביין שטעלט פון <div class="btn-group">אין אַ <div class="btn-toolbar">פֿאַר מער קאָמפּליצירט קאַמפּאָונאַנץ.

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

סייזינג

אַנשטאָט אַפּלייינג קלאסן פֿאַר די גרייס פון קנעפּלעך צו יעדער קנעפּל אין אַ גרופּע, נאָר לייגן .btn-group-*צו יעדער .btn-group, אַרייַנגערעכנט ווען נעסטינג קייפל גרופּעס.




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

נעסטינג

שטעלן אַ .btn-groupין אנדערן .btn-groupווען איר ווילן דראָפּדאָוון מעניוז געמישט מיט אַ סעריע פון ​​קנעפּלעך.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

ווערטיקאַל ווערייישאַן

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

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

גערעכטפארטיקט קנעפּל גרופּעס

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

האַנדלינג געמארקן

רעכט צו דער ספּעציפיש HTML און CSS געניצט צו באַרעכטיקן קנעפּלעך (ניימלי display: table-cell), די געמארקן צווישן זיי זענען דאַבאַלד. אין רעגולער קנעפּל גרופּעס, margin-left: -1pxאיז געניצט צו אָנלייגן די געמארקן אַנשטאָט פון רימוווינג זיי. אָבער, marginעס טוט נישט אַרבעטן מיט display: table-cell. ווי אַ רעזולטאַט, דיפּענדינג אויף דיין קוסטאָמיזאַטיאָנס צו Bootstrap, איר קען וועלן צו באַזייַטיקן אָדער שייַעך-קאָליר די געמארקן.

IE8 און געמארקן

Internet Explorer 8 טוט נישט גרענעצן אויף קנעפּלעך אין אַ גערעכטפארטיקט קנעפּל גרופּע, צי עס איז אויף <a>אָדער <button>עלעמענטן. צו באַקומען אַרום דעם, ייַנוויקלען יעדער קנעפּל אין אנדערן .btn-group.

זען #12476 פֿאַר מער אינפֿאָרמאַציע.

מיט <a>עלעמענטן

נאָר ייַנוויקלען אַ סעריע פון .btn​​s אין .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

לינקס אַקטינג ווי קנעפּלעך

אויב די <a>עלעמענטן זענען גענוצט צו שפּילן ווי קנעפּלעך - טריגערינג אין-בלאַט פאַנגקשאַנאַליטי, אלא ווי נאַוואַגייטינג צו אן אנדער דאָקומענט אָדער אָפּטיילונג אין דעם קראַנט בלאַט - זיי זאָל אויך באַקומען אַ צונעמען role="button".

מיט <button>עלעמענטן

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

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

קנעפּל דראָפּדאָוונס

ניצן קיין קנעפּל צו צינגל אַ דראָפּדאָוון מעניו דורך פּלייסינג עס אין אַ .btn-groupאון צושטעלן די געהעריק מעניו מאַרקאַפּ.

פּלוגין אָפענגיקייַט

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

איין קנעפּל דראָפּדאָוונס

קער אַ קנעפּל אין אַ דראָפּדאָוון טאַגאַל מיט עטלעכע יקערדיק מאַרקאַפּ ענדערונגען.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

שפּאַלטן קנעפּל דראָפּדאָוונס

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

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

סייזינג

קנעפּל דראָפּדאָוונס אַרבעט מיט קנעפּלעך פון אַלע סיזעס.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

דראָפּופּ ווערייישאַן

צינגל דראָפּדאָוון מעניוז אויבן עלעמענטן דורך אַדינג .dropupצו דער פאָטער.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

אַרייַנשרייַב גרופּעס

פאַרברייטערן פאָרעם קאָנטראָלס דורך אַדינג טעקסט אָדער קנעפּלעך איידער, נאָך אָדער אויף ביידע זייטן פון קיין טעקסט-באזירט <input>. ניצן .input-groupמיט אַן .input-group-addonאָדער .input-group-btnצו פאַרלייגן אָדער צוגעבן עלעמענטן צו אַ איין .form-control.

<input>בלויז טעקסט

ויסמיידן די נוצן פון <select>עלעמענטן דאָ ווייַל זיי קענען נישט זיין גאָר סטיילד אין וועבקיט בראַוזערז.

ויסמיידן ניצן <textarea>עלעמענטן דאָ ווייַל זייער rowsאַטריביוט וועט נישט זיין רעספּעקטעד אין עטלעכע קאַסעס.

מכשירים און פּאָפּאָווערס אין אַרייַנשרייַב גרופּעס דאַרפן ספּעציעל באַשטעטיקן

ווען איר נוצן טאָאָלטיפּס אָדער פּאָפּאָווערס אויף עלעמענטן אין אַן .input-group, איר וועט האָבן צו ספּעציפיצירן די אָפּציע container: 'body'צו ויסמיידן אַנוואָנטיד זייַט יפעקץ (אַזאַ ווי דער עלעמענט וואַקסן ברייטער און / אָדער פאַרלירן זיין ראַונדיד עקן ווען די טאָאָלטיפּ אָדער פּאָפּאָווער איז טריגערד).

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

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

שטענדיק לייגן לאַבעלס

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

די פּינטלעך טעכניק צו זיין געוויינט (קענטיק <label>עלעמענטן, <label>עלעמענטן פאַרבאָרגן ניצן די .sr-onlyקלאַס, אָדער נוצן פון די aria-label, aria-labelledby, aria-describedby, titleאָדער placeholderאַטריביוט) און וואָס נאָך אינפֿאָרמאַציע וועט זיין קאַנווייד וועט בייַטן דיפּענדינג אויף די פּינטלעך טיפּ פון צובינד ווידזשיט איר ימפּלאַמענינג. די ביישפילן אין דעם אָפּטיילונג צושטעלן אַ ביסל סאַגדזשעסטיד, פאַל-ספּעציפיש אַפּראָוטשיז.

יקערדיק בייַשפּיל

שטעלן איין אַדישאַן אָדער קנעפּל אויף יעדער זייַט פון אַ אַרייַנשרייַב. איר קענט אויך שטעלן איינער אויף ביידע זייטן פון אַ אַרייַנשרייַב.

מיר טאָן ניט שטיצן קייפל אַד-אָנס ( .input-group-addonאָדער .input-group-btn) אויף איין זייַט.

מיר טאָן ניט שטיצן קייפל פאָרעם-קאָנטראָלס אין אַ איין אַרייַנשרייַב גרופּע.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

סייזינג

לייג די קאָרעוו פאָרעם סייזינג קלאסן צו די .input-groupזיך און אינהאַלט ין וועט אויטאָמאַטיש רעסיזע - ניט דאַרפֿן צו ריפּיטינג די פאָרעם קאָנטראָל גרייס קלאסן אויף יעדער עלעמענט.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

טשעקקבאָקסעס און ראַדיאָ אַדדאָנס

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

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

קנעפּל אַדדאָנס

קנעפּלעך אין אַרייַנשרייַב גרופּעס זענען אַ ביסל אַנדערש און דאַרפן אַן עקסטרע מדרגה פון נעסטינג. אַנשטאָט .input-group-addon, איר וועט דאַרפֿן .input-group-btnצו ייַנוויקלען די קנעפּלעך. דאָס איז פארלאנגט ווייַל פון פעליקייַט בלעטערער סטיילז וואָס קענען ניט זיין אָווועררייד.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

קנעפּלעך מיט דראָפּדאָוונס

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

סעגמענטעד קנעפּלעך

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

קייפל קנעפּלעך

כאָטש איר קענען נאָר האָבן איין אַדישאַן פּער זייַט, איר קענען האָבן קייפל קנעפּלעך אין אַ איין .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navs

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

ניצן נאַווס פֿאַר קוויטל פּאַנאַלז ריקווייערז דזשאַוואַסקריפּט טאַבס פּלוגין

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

מאַכן נאַווס געניצט ווי נאַוויגאַציע צוטריטלעך

אויב איר נוצן נאַוויגאַציע צו צושטעלן אַ נאַוויגאַציע באַר, זיין זיכער צו לייגן אַ role="navigation"צו די מערסט לאַדזשיקאַל פאָטער קאַנטיינער פון די <ul>, אָדער ייַנוויקלען אַ <nav>עלעמענט אַרום די גאנצע נאַוויגאַציע. דו זאלסט נישט לייגן די ראָלע צו די <ul>זיך, ווייַל דאָס וואָלט פאַרמייַדן עס צו זיין אַנאַונסט ווי אַ פאַקטיש רשימה דורך אַסיסטיוו טעקנאַלאַדזשיז.

באַמערקונג די .nav-tabsקלאַס ריקווייערז די .navבאַזע קלאַס.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

נעמען די זעלבע HTML, אָבער נוצן .nav-pillsאַנשטאָט:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

פּילז זענען אויך ווערטיקלי סטאַקקאַבלע. נאָר לייגן .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

לייכט מאַכן טאַבס אָדער פּילז גלייַך ווידטס פון זייער פאָטער ביי סקרינז ברייט ווי 768 פּקס מיט .nav-justified. אויף קלענערער סקרינז, די נאַוו לינקס זענען סטאַקט.

גערעכטפארטיקט נאַוובאַר נאַוו פֿאַרבינדונגען זענען דערווייַל נישט געשטיצט.

סאַפאַרי און אָפּרופיק גערעכט נאַוויגאַציע

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

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

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

לינק פאַנגקשאַנאַליטי איז נישט ימפּאַקטיד

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

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

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

טאַבס מיט דראָפּדאָוונס

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

פּילז מיט דראַפּדאַונז

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

נאַוובאַר

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

גערעכטפארטיקט נאַוובאַר נאַוו פֿאַרבינדונגען זענען דערווייַל נישט געשטיצט.

איבערגעבליבענע תוכן

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

  1. רעדוצירן די סומע אָדער ברייט פון נאַוובאַר זאכן.
  2. באַהאַלטן זיכער נאַוובאַר זאכן אין זיכער פאַרשטעלן סיזעס ניצן אָפּרופיק נוצן קלאסן .
  3. טוישן די פונט אין וואָס דיין נאַוובאַר סוויטשיז צווישן קאַלאַפּסט און האָריזאָנטאַל מאָדע. קאַסטאַמייז די @grid-float-breakpointבייַטעוודיק אָדער לייגן דיין אייגענע מעדיע אָנפֿרעג.

ריקוויירז דזשאַוואַסקריפּט פּלוגין

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

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

טשאַנגינג די קאַלאַפּסט רירעוודיק נאַוובאַר ברייקפּוינט

די נאַוובאַר קאַלאַפּסיז אין זיין ווערטיקאַל רירעוודיק מיינונג ווען די וויופּאָרט איז נעראָוער ווי @grid-float-breakpoint, און יקספּאַנדז אין זיין האָריזאָנטאַל ניט-רירעוודיק מיינונג ווען די וויופּאָרט איז לפּחות @grid-float-breakpointאין ברייט. סטרויערן דעם בייַטעוודיק אין די ווייניקער מקור צו קאָנטראָלירן ווען די נאַוובאַר קאַלאַפּס / יקספּאַנדז. די פעליקייַט ווערט איז 768px(דער קלענסטער "קליין" אָדער "טאַבלעט" פאַרשטעלן).

מאַכן נאַוובאַרס צוטריטלעך

זייט זיכער צו נוצן אַ <nav>עלעמענט אָדער, אויב איר נוצן אַ מער דזשאַנעריק עלעמענט אַזאַ ווי אַ <div>, לייגן אַ role="navigation"צו יעדער נאַוובאַר צו בפירוש ידענטיפיצירן עס ווי אַ לאַנדמאַרק געגנט פֿאַר יוזערז פון אַסיסטיוו טעקנאַלאַדזשיז.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

פאַרבייַטן די נאַוובאַר סאָרט מיט דיין אייגענע בילד דורך ויסבייַטן דעם טעקסט פֿאַר אַ <img>. זינט די .navbar-brandהאט זיין אייגענע וואַטן און הייך, איר קען דאַרפֿן צו אָווועררייד עטלעכע CSS דיפּענדינג אויף דיין בילד.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

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

ווי אַ קאָפּ אַרויף, .navbar-formשאַרעס פיל פון זיין קאָד מיט .form-inlineדורך מיקסין. עטלעכע פאָרעם קאָנטראָלס, ווי אַרייַנשרייַב גרופּעס, קען דאַרפן פאַרפעסטיקט ווידטס צו זיין געוויזן רעכט אין אַ נאַוובאַר.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

קייוויאַץ פֿאַר רירעוודיק מיטל

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

שטענדיק לייגן לאַבעלס

סקרין לייענער וועט האָבן קאָנפליקט מיט דיין פארמען אויב איר טאָן ניט אַרייַננעמען אַ פירמע פֿאַר יעדער אַרייַנשרייַב. פֿאַר די ינלינע פארמען, איר קענען באַהאַלטן די לאַבעלס ניצן די .sr-onlyקלאַס. עס זענען נאָך אָלטערנאַטיוו מעטהאָדס צו צושטעלן אַ פירמע פֿאַר אַסיסטיוו טעקנאַלאַדזשיז, אַזאַ ווי די aria-label, aria-labelledbyאָדער titleאַטריביוט. אויב גאָרניט פון די איז פאָרשטעלן, די פאַרשטעלן לייענער קענען נוצן דעם placeholderאַטריביוט, אויב עס איז פאָרשטעלן, אָבער טאָן placeholderניט רעקאָמענדירן צו נוצן עס ווי אַ פאַרבייַט פֿאַר אנדערע לייבלינג מעטהאָדס.

לייג די .navbar-btnקלאַס צו <button>עלעמענטן וואָס ניט וווינען אין אַ <form>צו ווערטיקלי צענטער זיי אין די נאַוובאַר.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

קאָנטעקסט-ספּעציפיש באַניץ

ווי די נאָרמאַל קנעפּל קלאסן , .navbar-btnקענען זיין געוויינט אויף <a>און <input>עלעמענטן. אָבער, ניט .navbar-btnאָדער די נאָרמאַל קנעפּל קלאסן זאָל זיין געוויינט אויף <a>עלעמענטן אין .navbar-nav.

ייַנוויקלען סטרינגס פון טעקסט אין אַן עלעמענט מיט .navbar-text, יוזשאַוואַלי אויף אַ <p>קוויטל פֿאַר געהעריק לידינג און קאָלירן.

<p class="navbar-text">Signed in as Mark Otto</p>

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

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

ייַנרייען נאַוו לינקס, פארמען, קנעפּלעך אָדער טעקסט, ניצן די .navbar-leftאָדער .navbar-rightנוצן קלאסן. ביידע קלאסן וועט לייגן אַ CSS לאָזנ שווימען אין די ספּעסיפיעד ריכטונג. פֿאַר בייַשפּיל, צו ייַנרייען נאַוו לינקס, שטעלן זיי אין אַ באַזונדער <ul>מיט די ריספּעקטיוו נוצן קלאַס געווענדט.

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

רעכט אַליינינג קייפל קאַמפּאָונאַנץ

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

מיר וועלן איבערחזרן דעם ווען מיר קענען רירייט דעם קאָמפּאָנענט אין וו4.

לייג צו .navbar-fixed-topאון אַרייַננעמען אַ .containerאָדער .container-fluidצו צענטער און בלאָק נאַוובאַר אינהאַלט.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

גוף וואַטן פארלאנגט

די פאַרפעסטיקט נאַוובאַר וועט אָוווערליי דיין אנדערע אינהאַלט, סייַדן איר לייגן paddingצו די שפּיץ פון די <body>. פּרוּווט דיין אייגענע וואַלועס אָדער נוצן אונדזער סניפּאַט אונטן. עצה: דורך פעליקייַט, די נאַוובאַר איז 50 פּקס הויך.

body { padding-top: 70px; }

מאַכן זיכער צו אַרייַננעמען דעם נאָך די האַרץ Bootstrap CSS.

לייג צו .navbar-fixed-bottomאון אַרייַננעמען אַ .containerאָדער .container-fluidצו צענטער און בלאָק נאַוובאַר אינהאַלט.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

גוף וואַטן פארלאנגט

די פאַרפעסטיקט נאַוובאַר וועט אָוווערליי דיין אנדערע אינהאַלט, סייַדן איר לייגן paddingצו די דנאָ פון די <body>. פּרוּווט דיין אייגענע וואַלועס אָדער נוצן אונדזער סניפּאַט אונטן. עצה: דורך פעליקייַט, די נאַוובאַר איז 50 פּקס הויך.

body { padding-bottom: 70px; }

מאַכן זיכער צו אַרייַננעמען דעם נאָך די האַרץ Bootstrap CSS.

שאַפֿן אַ פול-ברייט נאַוובאַר וואָס סקראָללס אַוועק מיט די בלאַט דורך אַדינג .navbar-static-topאון אַרייַננעמען אַ .containerאָדער .container-fluidצו צענטער און בלאָק נאַוובאַר אינהאַלט.

ניט ענלעך די .navbar-fixed-*קלאסן, איר טאָן ניט דאַרפֿן צו טוישן קיין וואַטן אויף די body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

מאָדיפיצירן די קוק פון די נאַוובאַר דורך אַדינג .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

ברעאַדקרומבס

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

סעפּאַראַטאָרס זענען אויטאָמאַטיש צוגעגעבן אין CSS דורך :beforeאון content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

פּאַginיישאַן

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

פעליקייַט פּאַדזשאַניישאַן

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

לייבלינג די פּאַדזשאַניישאַן קאָמפּאָנענט

די פּאַדזשאַניישאַן קאָמפּאָנענט זאָל זיין אלנגעוויקלט אין אַ <nav>עלעמענט צו ידענטיפיצירן עס ווי אַ נאַוויגאַציע אָפּטיילונג צו פאַרשטעלן לייענער און אנדערע אַסיסטיוו טעקנאַלאַדזשיז. אין אַדישאַן, ווי אַ בלאַט איז מסתּמא צו האָבן מער ווי איין אַזאַ נאַוויגאַציע אָפּטיילונג (אַזאַ ווי די ערשטיק נאַוויגאַציע אין די כעדער, אָדער אַ סיידבאַר נאַוויגאַציע), עס איז קעדייַיק צו צושטעלן אַ דיסקריפּטיוו aria-labelוואָס <nav>ריפלעקס זיין ציל. פֿאַר בייַשפּיל, אויב די פּאַדזשאַניישאַן קאָמפּאָנענט איז געניצט צו נאַוויגירן צווישן אַ גאַנג פון זוכן רעזולטאַטן, אַ צונעמען פירמע קען זיין aria-label="Search results pages".

פאַרקריפּלט און אַקטיוו שטאַטן

לינקס זענען קוסטאָמיזאַבלע פֿאַר פאַרשידענע צושטאנדן. ניצן .disabledפֿאַר ונקליקקאַבלע לינקס און .activeצו אָנווייַזן דעם קראַנט בלאַט.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

מיר רעקאָמענדירן אַז איר ויסבייַטן אַקטיוו אָדער פאַרקריפּלט אַנגקערז פֿאַר <span>, אָדער פאַרלאָזן די אַנקער אין די פאַל פון די פריערדיקע / ווייַטער אַראָוז, צו באַזייַטיקן קליק פאַנגקשאַנאַליטי בשעת איר האַלטן די בדעה סטיילז.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

סייזינג

צי איר ווילט אַ גרעסערע אָדער קלענערער פּאַדזשאַניישאַן? לייג .pagination-lgאָדער .pagination-smפֿאַר נאָך סיזעס.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager

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

פעליקייַט בייַשפּיל

דורך פעליקייַט, די פּאַדזשער סענטערס לינקס.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

אַלטערנאַטיוועלי, איר קענען ייַנרייען יעדער לינק צו די זייטן:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

אָפּטיאָנאַל פאַרקריפּלט שטאַט

פּאַגער פֿאַרבינדונגען אויך נוצן די אַלגעמיינע .disabledנוצן קלאַס פון די פּאַדזשאַניישאַן.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

לאַבעלס

בייַשפּיל

בייַשפּיל כעדינג New

בייַשפּיל כעדינג New

בייַשפּיל כעדינג New

בייַשפּיל כעדינג New

בייַשפּיל כעדינג New
בייַשפּיל כעדינג New
<h3>Example heading <span class="label label-default">New</span></h3>

בנימצא ווערייישאַנז

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

דיפאָלט ערשטיק הצלחה אינפֿאָרמאַציע ווארענונג געפאַר
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

האָבן טאָנס פון לאַבעלס?

רענדערינג פּראָבלעמס קענען אויפשטיין ווען איר האָבן דאַזאַנז פון ינלינע לאַבעלס אין אַ שמאָל קאַנטיינער, יעדער מיט זיין אייגענע inline-blockעלעמענט (ווי אַ ייקאַן). דער וועג אַרום דעם איז באַשטעטיקן display: inline-block;. פֿאַר קאָנטעקסט און אַ בייַשפּיל, זען #13219 .

באַדזשיז

לייכט הויכפּונקט נייַ אָדער אַנריד ייטאַמז דורך אַדינג אַ <span class="badge">צו פֿאַרבינדונגען, Bootstrap נאַוויגאַציע און מער.

ינבאָקס42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

זיך קאַלאַפּסינג

ווען עס זענען קיין נייַע אָדער אַנריד ייטאַמז, באַדזשיז וועט פשוט ייַנבראָך (דורך די :emptyסעלעקטאָר פון CSS) אויב קיין אינהאַלט יגזיסץ ין.

קרייַז בלעטערער קאַמפּאַטאַבילאַטי

באַדזשיז וועט נישט זיך ייַנבראָך אין Internet Explorer 8 ווייַל עס פעלן שטיצן פֿאַר די :emptyסעלעקטאָר.

אַדאַפּט זיך צו אַקטיוו נאַוו שטאַטן

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

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

דזשאַמבאָטראָן

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

העלא וועלט!

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

לערן מער

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

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

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

בלאַט כעדער

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

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

טהומבנאַילס

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

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

פעליקייַט בייַשפּיל

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

מנהג אינהאַלט

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

100% קס 200

טאַמנייל פירמע

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

קנעפּל קנעפּל

100% קס 200

טאַמנייל פירמע

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

קנעפּל קנעפּל

100% קס 200

טאַמנייל פירמע

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

קנעפּל קנעפּל

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

אַלערץ

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

ביישפילן

ייַנוויקלען קיין טעקסט און אַ אַפּשאַנאַל אָפּזאָגן קנעפּל אין .alertאון איינער פון די פיר קאָנטעקסטואַל קלאסן (למשל, .alert-success) פֿאַר יקערדיק פלינק אַרטיקלען.

קיין פעליקייַט קלאַס

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

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

דיסמיססיבלע אַלערץ

בויען אויף קיין פלינק דורך אַדינג אַן אַפּשאַנאַל .alert-dismissibleאון נאָענט קנעפּל.

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

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

פאַרזיכערן געהעריק נאַטור אויף אַלע דעוויסעס

זייט זיכער צו נוצן דעם <button>עלעמענט מיט די data-dismiss="alert"דאַטן אַטריביוט.

ניצן די .alert-linkנוצן קלאַס צו געשווינד צושטעלן וואָס ריכטן בונט לינקס אין קיין פלינק.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

פּראָגרעס באַרס

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

קרייַז בלעטערער קאַמפּאַטאַבילאַטי

פּראָגרעס באַרס נוצן CSS3 טראַנזישאַנז און אַנאַמיישאַנז צו דערגרייכן עטלעכע פון ​​זייער יפעקץ. די פֿעיִקייטן זענען נישט געשטיצט אין Internet Explorer 9 און ווייטער אָדער עלטערע ווערסיעס פון Firefox. אָפּעראַ 12 שטיצט נישט אַנאַמיישאַנז.

אינהאַלט סעקוריטי פּאָליטיק (CSP) קאַמפּאַטאַבילאַטי

אויב דיין וועבזייטל האט אַ אינהאַלט סעקוריטי פּאָליטיק (CSP) וואָס קען נישט לאָזן style-src 'unsafe-inline', איר וועט נישט קענען צו נוצן ינלינע styleאַטריביוץ צו שטעלן פּראָגרעס באַר ווידטס ווי געוויזן אין אונדזער ביישפילן אונטן. אַלטערנאַטיווע מעטהאָדס פֿאַר באַשטעטיקן די ווידטס וואָס זענען קאַמפּאַטאַבאַל מיט שטרענג CSPs אַרייַננעמען ניצן אַ ביסל מנהג דזשאַוואַסקריפּט (וואָס שטעלט element.style.width) אָדער ניצן מנהג CSS קלאסן.

יקערדיק בייַשפּיל

פעליקייַט פּראָגרעס באַר.

60% גאַנץ
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

מיט לאַבעל

אַראָפּנעמען די <span>מיט .sr-onlyקלאַס פֿון די פּראָגרעס באַר צו ווייַזן אַ קענטיק פּראָצענט.

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

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

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

קאָנטעקסטואַל אַלטערנאַטיוועס

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

40% גאַנץ (הצלחה)
20% גאַנץ
60% גאַנץ (ווארענונג)
80% גאַנץ (געפאַר)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

סטרייפּט

ניצט אַ גראַדיענט צו שאַפֿן אַ סטרייפּט ווירקונג. ניט בנימצא אין IE9 און ווייטער.

40% גאַנץ (הצלחה)
20% גאַנץ
60% גאַנץ (ווארענונג)
80% גאַנץ (געפאַר)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

אַנימאַטעד

לייג .activeצו .progress-bar-stripedצו ופלעבן די סטריפּס רעכט צו לינקס. ניט בנימצא אין IE9 און ווייטער.

45% גאַנץ
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

סטאַקט

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

35% גאַנץ (הצלחה)
20% גאַנץ (ווארענונג)
10% גאַנץ (געפאַר)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

מידיאַ כייפעץ

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

פעליקייַט מידיאַ

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

מעדיע כעדינג

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

מעדיע כעדינג

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

נעסטעד מידיאַ כעדינג

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

מעדיע כעדינג

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

מעדיע כעדינג

קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. נוללאַ און מעטוס ססעלעריסקווע אַנטי סאָלליסיטיודין קאָממאָדאָ. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

די קלאסן .pull-leftאון .pull-rightאויך עקסיסטירן און זענען ביז אַהער געוויינט ווי אַ טייל פון די מידיאַ קאָמפּאָנענט, אָבער זענען דיפּרישיייטיד פֿאַר דעם נוצן זינט וו3.3.0. זיי זענען בעערעך עקוויוואַלענט צו .media-leftאון .media-right, אַחוץ אַז .media-rightזאָל זיין געשטעלט נאָך די .media-bodyאין די HTML.

מידיאַ אַליינמאַנט

די בילדער אָדער אנדערע מידיאַ קענען זיין אַליינד אויבן, מיטן אָדער דנאָ. די פעליקייַט איז העכסט אַליינד.

Top אַליינד מידיאַ

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

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

מיטל אַליינד מידיאַ

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

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

דנאָ אַליינד מידיאַ

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

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

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

מעדיע רשימה

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

  • מעדיע כעדינג

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

    נעסטעד מידיאַ כעדינג

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

    נעסטעד מידיאַ כעדינג

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

    נעסטעד מידיאַ כעדינג

    קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. נוללאַ און מעטוס ססעלעריסקווע אַנטי סאָלליסיטיודין קאָממאָדאָ. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

רשימה גרופּע

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

יקערדיק בייַשפּיל

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

  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • וועסטיבולום און עראָס
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

באַדזשיז

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

  • 14כ'האב אמאל געהערט
  • 2Dapibus ac facilisis in
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

לינגקט זאכן

לינקיפיי רשימה גרופּע ייטאַמז דורך ניצן אַנקער טאַגס אַנשטאָט פון רשימה ייטאַמז (דאָס אויך מיטל אַ פאָטער <div>אַנשטאָט פון אַ <ul>). ניט דאַרפֿן פֿאַר יחיד עלטערן אַרום יעדער עלעמענט.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

קנעפּל זאכן

רשימה גרופּע זאכן קען זיין קנעפּלעך אַנשטאָט פון רשימה זאכן (דאָס אויך מיטל אַ פאָטער <div>אַנשטאָט פון אַ <ul>). ניט דאַרפֿן פֿאַר יחיד עלטערן אַרום יעדער עלעמענט. דו זאלסט נישט נוצן די נאָרמאַל .btnקלאסן דאָ.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

פאַרקריפּלט זאכן

לייג .disabledצו אַ .list-group-itemצו גרוי עס צו דערשייַנען פאַרקריפּלט.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

קאָנטעקסטואַל קלאסן

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

  • Dapibus ac facilisis in
  • קראַס זיצן אַמעט נבֿה ליבעראָ
  • Porta ac consectetur ac
  • וועסטיבולום און עראָס
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

מנהג אינהאַלט

לייג כּמעט קיין HTML אין, אפילו פֿאַר לינגקט רשימה גרופּעס ווי דער אונטן.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

פּאַנעלס

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

יקערדיק בייַשפּיל

דורך פעליקייַט, אַלע די .panelטוט איז צולייגן עטלעכע יקערדיק גרענעץ און וואַטן צו אַנטהאַלטן עטלעכע אינהאַלט.

באַסיק טאַפליע בייַשפּיל
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

טאַפליע מיט כעדינג

לייכט לייגן אַ כעדינג קאַנטיינער צו דיין טאַפליע מיט .panel-heading. איר קען אויך אַרייַננעמען קיין <h1>- <h6>מיט אַ .panel-titleקלאַס צו לייגן אַ פאַר-סטיילד כעדינג. אָבער, די שריפֿט סיזעס פון <h1>- <h6>זענען אָווועררייד דורך .panel-heading.

פֿאַר געהעריק לינק קאַלערינג, זיין זיכער צו שטעלן לינקס אין כעדינגז ין .panel-title.

פּאַנעל כעדינג אָן טיטל
טאַפליע אינהאַלט

טאַפליע טיטל

טאַפליע אינהאַלט
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

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

טאַפליע אינהאַלט
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

קאָנטעקסטואַל אַלטערנאַטיוועס

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

טאַפליע טיטל

טאַפליע אינהאַלט

טאַפליע טיטל

טאַפליע אינהאַלט

טאַפליע טיטל

טאַפליע אינהאַלט

טאַפליע טיטל

טאַפליע אינהאַלט

טאַפליע טיטל

טאַפליע אינהאַלט
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

מיט טישן

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

פּאַנעל כעדינג

עטלעכע פעליקייַט טאַפליע אינהאַלט דאָ. Nulla vitae elit libero, אַ פאַרעטראַ אַוגוע. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum. נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.

# ערשטע נאמען לעצטע נאמען נאמען
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

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

פּאַנעל כעדינג
# ערשטע נאמען לעצטע נאמען נאמען
1 מארק אָטאָ @מדאָ
2 יעקב Thornton @פעט
3 לערי די פויגל @טוויטער
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

מיט רשימה גרופּעס

לייכט אַרייַננעמען פול-ברייט רשימה גרופּעס אין קיין טאַפליע.

פּאַנעל כעדינג

עטלעכע פעליקייַט טאַפליע אינהאַלט דאָ. Nulla vitae elit libero, אַ פאַרעטראַ אַוגוע. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo ​​quam. פּעללענטעסקווע אָרנאַרע סעם lacinia quam venenatis vestibulum. נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.

  • כ'האב אמאל געהערט
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • וועסטיבולום און עראָס
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

אָפּרופיק עמבעד

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

כּללים זענען גלייַך געווענדט צו <iframe>, <embed>, <video>, און <object>עלעמענטן; אָפּטיאָנאַללי נוצן אַ יקספּליסאַט אָפּשטאַמלינג קלאַס .embed-responsive-itemווען איר ווילן צו גלייַכן די סטילינג פֿאַר אנדערע אַטריביוץ.

פּראָ-טיפּ! איר טאָן ניט דאַרפֿן צו אַרייַננעמען frameborder="0"אין דיין <iframe>ס ווי מיר אָווועררייד אַז פֿאַר איר.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

וועלז

פעליקייַט געזונט

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

זע, איך בין אין אַ ברונעם!
<div class="well">...</div>

אָפּטיאָנאַל קלאסן

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

זע, איך בין אין אַ גרויסן ברונעם!
<div class="well well-lg">...</div>
קוק, איך בין אין אַ קליין ברונעם!
<div class="well well-sm">...</div>