בנימצא גליפס
כולל איבער 250 גליפס אין שריפֿט פֿאָרמאַט פֿון די Glyphicon Halflings שטעלן. Glyphicons Halflings זענען נאָרמאַלי ניט בנימצא פֿאַר פריי, אָבער זייער באשעפער האט געמאכט זיי בנימצא פֿאַר Bootstrap פריי. ווי אַ דאַנקען דיר, מיר נאָר בעטן אַז איר אַרייַן אַ לינק צוריק צו Glyphicons ווען מעגלעך.
וויאזוי צו ניצן
פֿאַר פאָרשטעלונג סיבות, אַלע ייקאַנז דאַרפן אַ באַזע קלאַס און יחיד ייקאַן קלאַס. צו נוצן, שטעלן די פאלגענדע קאָד כּמעט ערגעץ. זייט זיכער צו לאָזן אַ פּלאַץ צווישן די ייקאַן און טעקסט פֿאַר געהעריק וואַטן.
דו זאלסט נישט מישן מיט אנדערע קאַמפּאָונאַנץ
ייקאַן קלאסן קענען ניט זיין גלייך קאַמביינד מיט אנדערע קאַמפּאָונאַנץ. זיי זאָל ניט זיין געוויינט צוזאַמען מיט אנדערע קלאסן אויף דער זעלביקער עלעמענט. אַנשטאָט, לייגן אַ נעסטעד <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>
גרופּע אַ סעריע פון קנעפּלעך צוזאַמען אויף אַ איין שורה מיט די קנעפּל גרופּע. לייג צו אַפּשאַנאַל דזשאַוואַסקריפּט ראַדיאָ און טשעקקבאָקס נוסח נאַטור מיט אונדזער קנעפּלעך פּלוגין .
פאַרזיכערן ריכטיק 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>
עלעמענטן, איר מוזן ייַנוויקלען יעדער קנעפּל אין אַ קנעפּל גרופּע . רובֿ בראַוזערז טאָן ניט רעכט צולייגן אונדזער 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'
צו ויסמיידן אַנוואָנטיד זייַט יפעקץ (אַזאַ ווי דער עלעמענט וואַקסן ברייטער און / אָדער פאַרלירן זיין ראַונדיד עקן ווען די טאָאָלטיפּ אָדער פּאָפּאָווער איז טריגערד).
שטעלן איין אַדישאַן אָדער קנעפּל אויף יעדער זייַט פון אַ אַרייַנשרייַב. איר קענט אויך שטעלן איינער אויף ביידע זייטן פון אַ אַרייַנשרייַב.
מיר טאָן ניט שטיצן קייפל אַד-אָנס ( .input-group-addon
אָדער .input-group-btn
) אויף איין זייַט.
מיר טאָן ניט שטיצן קייפל פאָרעם-קאָנטראָלס אין אַ איין אַרייַנשרייַב גרופּע.
<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>
נאַווס בנימצא אין 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 קען נישט וויסן ווי פיל פּלאַץ די אינהאַלט אין דיין נאַוובאַר דאַרף, איר קען האָבן פּראָבלעמס מיט אינהאַלט ראַפּינג אין אַ צווייט רודערן. צו סאָלווע דעם, איר קענען:
רעדוצירן די סומע אָדער ברייט פון נאַוובאַר זאכן.
באַהאַלטן זיכער נאַוובאַר זאכן אין זיכער פאַרשטעלן סיזעס ניצן אָפּרופיק נוצן קלאסן .
טוישן די פונט אין וואָס דיין נאַוובאַר סוויטשיז צווישן קאַלאַפּסט און האָריזאָנטאַל מאָדע. קאַסטאַמייז די @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>
קייוויאַץ פֿאַר רירעוודיק מיטל
עס זענען עטלעכע קייוויאַץ וועגן ניצן פאָרעם קאָנטראָלס אין פאַרפעסטיקט עלעמענטן אויף רירעוודיק דעוויסעס. זען אונדזער בלעטערער שטיצן דאָקומענטן פֿאַר דעטאַילס.
לייג די .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>
צושטעלן פּאַדזשאַניישאַן פֿאַרבינדונגען פֿאַר דיין פּלאַץ אָדער אַפּ מיט די מולטי-בלאַט פּאַדזשאַניישאַן קאָמפּאָנענט, אָדער די סימפּלער פּיידזשער אנדער ברירה .
פּשוט פּאַדזשאַניישאַן ינספּייערד דורך Rdio, גרויס פֿאַר אַפּפּס און זוכן רעזולטאַטן. די גרויס בלאָק איז שווער צו פאַרפירן, לייכט סקאַלאַבלע און גיט גרויס קליקס געביטן.
<nav aria-label= "Page navigation" >
<ul class= "pagination" >
<li>
<a href= "#" aria-label= "Previous" >
<span aria-hidden= "true" > « </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" > » </span>
</a>
</li>
</ul>
</nav>
פאַרקריפּלט און אַקטיוו שטאַטן
לינקס זענען קוסטאָמיזאַבלע פֿאַר פאַרשידענע צושטאנדן. ניצן .disabled
פֿאַר ונקליקקאַבלע לינקס און .active
צו אָנווייַזן דעם קראַנט בלאַט.
<nav aria-label= "..." >
<ul class= "pagination" >
<li class= "disabled" ><a href= "#" aria-label= "Previous" ><span aria-hidden= "true" > « </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" > « </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>
שנעל פריערדיקן און ווייַטער לינקס פֿאַר פּשוט פּאַדזשאַניישאַן ימפּלאַמאַנץ מיט ליכט מאַרקאַפּ און סטיילז. עס איז גרויס פֿאַר פּשוט זייטלעך ווי בלאָגס אָדער מאַגאַזינז.
פעליקייַט בייַשפּיל
דורך פעליקייַט, די פּאַדזשער סענטערס לינקס.
<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" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </span></a></li>
</ul>
</nav>
אָפּטיאָנאַל פאַרקריפּלט שטאַט
פּאַגער פֿאַרבינדונגען אויך נוצן די אַלגעמיינע .disabled
נוצן קלאַס פון די פּאַדזשאַניישאַן.
<nav aria-label= "..." >
<ul class= "pager" >
<li class= "previous disabled" ><a href= "#" ><span aria-hidden= "true" > ← </span> Older</a></li>
<li class= "next" ><a href= "#" > Newer <span aria-hidden= "true" > → </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 נאַוויגאַציע און מער.
<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 אינהאַלט ווי כעדינגז, פּאַראַגראַפס אָדער קנעפּלעך אין טהומבנאַילס.
טאַמנייל פירמע
קראַס דזשוסטאָ אָדיאָ, דאַפּיבוס און פאַסיליטיז אין, עגעסטאַס עגעסט ווי. דאָנעק יד עליט ניט מיר פּאָרטאַ גראַווידאַ און עגעסט מעטוס. נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.
קנעפּל קנעפּל
טאַמנייל פירמע
קראַס דזשוסטאָ אָדיאָ, דאַפּיבוס און פאַסיליטיז אין, עגעסטאַס עגעסט ווי. דאָנעק יד עליט ניט מיר פּאָרטאַ גראַווידאַ און עגעסט מעטוס. נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.
קנעפּל קנעפּל
טאַמנייל פירמע
קראַס דזשוסטאָ אָדיאָ, דאַפּיבוס און פאַסיליטיז אין, עגעסטאַס עגעסט ווי. דאָנעק יד עליט ניט מיר פּאָרטאַ גראַווידאַ און עגעסט מעטוס. נוללאַם יד דאָלאָר יד ניבה ולטריסיעס וועהיקולאַ וט יד עליט.
קנעפּל קנעפּל
<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" > × </span></button>
<strong> Warning!</strong> Better check yourself, you're not looking too good.
</div>
לינקס אין אַלערץ
ניצן די .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 קלאסן.
יקערדיק בייַשפּיל
פעליקייַט פּראָגרעס באַר.
<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
קלאַס פֿון די פּראָגרעס באַר צו ווייַזן אַ קענטיק פּראָצענט.
<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
צו די פּראָגרעס באַר.
<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>
קאָנטעקסטואַל אַלטערנאַטיוועס
פּראָגרעס באַרס נוצן עטלעכע פון די זעלבע קנעפּל און פלינק קלאסן פֿאַר קאָנסיסטענט סטיילז.
<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 און ווייטער.
<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 און ווייטער.
<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.
די בילדער אָדער אנדערע מידיאַ קענען זיין אַליינד אויבן, מיטן אָדער דנאָ. די פעליקייַט איז העכסט אַליינד.
<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 כ'האב אמאל געהערט
2 Dapibus ac facilisis in
1 Morbi 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
קלאסן דאָ.
כ'האב אמאל געהערט
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
וועסטיבולום און עראָס
<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>