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

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

ביישפילן

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

איין קנעפּל גרופּע

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > לינקס </button>
  3. <button class = "btn" > מיטל </button>
  4. <button class = "btn" > רעכט </button>
  5. </div>

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

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

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

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

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </div>

טשעקקבאָקס און ראַדיאָ פלייווערז

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

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

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

איבערבליק און ביישפילן

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. קאַמף
  4. <span class = "קאַרעט" ></span>
  5. </a>
  6. <ul class = "דראָפּדאָוון-מעניו" >
  7. <!-- דראָפּדאָוון מעניו לינקס -->
  8. </ul>
  9. </div>

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

קנעפּל דראָפּדאָוונס אַרבעט אין קיין גרייס: .btn-large, .btn-small, אָדער .btn-mini.

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

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

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


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

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > קאַמף </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "דראָפּדאָוון" >
  4. <span class = "קאַרעט" ></span>
  5. </button>
  6. <ul class = "דראָפּדאָוון-מעניו" >
  7. <!-- דראָפּדאָוון מעניו לינקס -->
  8. </ul>
  9. </div>

סיזעס

ניצן די עקסטרע קנעפּל קלאסן .btn-mini, .btn-smallאָדער .btn-largeפֿאַר סייזינג.

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > קאַמף </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "דראָפּדאָוון" >
  4. <span class = "קאַרעט" ></span>
  5. </button>
  6. <ul class = "דראָפּדאָוון-מעניו" >
  7. <!-- דראָפּדאָוון מעניו לינקס -->
  8. </ul>
  9. </div>

דראָפּופּ מעניוז

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

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > דראָפּופּ </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "דראָפּדאָוון" >
  4. <span class = "קאַרעט" ></span>
  5. </button>
  6. <ul class = "דראָפּדאָוון-מעניו" >
  7. <!-- דראָפּדאָוון מעניו לינקס -->
  8. </ul>
  9. </div>

נאָרמאַל פּאַדזשאַניישאַן

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

  1. <דייוו קלאַס = "פּאַגעמענט" >
  2. <ul>
  3. <li><a href = "#" > פריער </a></li>
  4. <li > <a href = "#"> 1 </a></li>
  5. <li > <a href = "#"> 2 </a></li>
  6. <li > <a href = "#"> 3 </a></li>
  7. <li > <a href = "#"> 4 </a></li>
  8. <li > <a href = "#"> 5 </a></li>
  9. <li><a href = "#" > ווייַטער </a></li>
  10. </ul>
  11. </div>

אָפּציעס

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

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

  1. <דייוו קלאַס = "פּאַגעמענט" >
  2. <ul>
  3. <li class = "פאַרקריפּלט" ><a href = "#" > « </a></li>
  4. <לי קלאַס = "אַקטיוו" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

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

  1. <דייוו קלאַס = "פּאַגעמענט" >
  2. <ul>
  3. <לי קלאַס = "פאַרקריפּלט" ><span> & לאַקוואָ; </span></li>
  4. <לי קלאַס = "אַקטיוו" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

סיזעס

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

  1. <דייוו קלאַס = "פּאַגעמענט פּאַדזשאַניישאַן-גרויס" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <דייוו קלאַס = "פּאַגעמענט" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <דייוו קלאַס = "פּאַגעמענט פּאַדזשאַניישאַן-קליין" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <דייוו קלאַס = "פּאַגעמענט פּאַדזשאַניישאַן-מיני" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

אַליינמאַנט

לייג איינער פון צוויי אַפּשאַנאַל קלאסן צו טוישן די אַליינמאַנט פון פּאַדזשאַניישאַן לינקס: .pagination-centeredאון .pagination-right.

  1. <דייוו קלאַס = "פּאַגעמענט פּאַדזשאַניישאַן-צענטערעד" >
  2. ...
  3. </div>
  1. <דייוו קלאַס = "פּאַגעמענט פּאַדזשאַניישאַן-רעכט" >
  2. ...
  3. </div>

Pager

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

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

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

  1. <ul class = "פּאַדזשער" >
  2. <li><a href = "#" > פֿריִער </a></li>
  3. <li><a href = "#" > ווייַטער </a></li>
  4. </ul>

אַליינד לינקס

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

  1. <ul class = "פּאַדזשער" >
  2. <לי קלאַס = "פרייַערדיק" >
  3. <אַ הרף = "#" > & לערר ; עלטער </a>
  4. </li>
  5. <לי קלאַס = "ווייַטער" >
  6. <a href = "#" > נייַער → </a>
  7. </li>
  8. </ul>

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

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

  1. <ul class = "פּאַדזשער" >
  2. <לי קלאַס = "פרייַערדיק פאַרקריפּלט" >
  3. <אַ הרף = "#" > & לערר ; עלטער </a>
  4. </li>
  5. ...
  6. </ul>

לאַבעלס

לאַבעלס מאַרקאַפּ
פעליקייַט <span class="label">Default</span>
הצלחה <span class="label label-success">Success</span>
ווארענונג <span class="label label-warning">Warning</span>
וויכטיק <span class="label label-important">Important</span>
אינפֿאָרמאַציע <span class="label label-info">Info</span>
פאַרקערט <span class="label label-inverse">Inverse</span>

באַדזשיז

נאָמען בייַשפּיל מאַרקאַפּ
פעליקייַט 1 <span class="badge">1</span>
הצלחה 2 <span class="badge badge-success">2</span>
ווארענונג 4 <span class="badge badge-warning">4</span>
וויכטיק 6 <span class="badge badge-important">6</span>
אינפֿאָרמאַציע 8 <span class="badge badge-info">8</span>
פאַרקערט 10 <span class="badge badge-inverse">10</span>

לייכט קאַלאַפּסאַבאַל

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

העלד אַפּאַראַט

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

העלא וועלט!

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

לערן מער

  1. <דייוו קלאַס = "העלד-איינהייט" >
  2. <h1> כעדינג </h1>
  3. <p> טאַגלינע </p>
  4. <p>
  5. < אַ קלאַס = "בטן בטן-ערשטיק בטן-גרויס" >
  6. לערן מער
  7. </a>
  8. </p>
  9. </div>

בלאַט כעדער

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

  1. <דייוו קלאַס = "בלאַט-כעדער" >
  2. <h1> בייַשפּיל בלאַט כעדער <small> סובטעקסט פֿאַר כעדער </small></h1>
  3. </div>

פעליקייַט טהומבנאַילס

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

העכסט קוסטאָמיזאַבלע

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

  • 300x200

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

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

    קאַמף קאַמף

  • 300x200

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

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

    קאַמף קאַמף

  • 300x200

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

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

    קאַמף קאַמף

פארוואס נוצן טהומבנאַילס

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

פּשוט, פלעקסאַבאַל מאַרקאַפּ

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

ניצט גריד זייַל סיזעס

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

מאַרקאַפּ

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

  1. <ul class = "טהומבנאַילס" >
  2. <לי קלאַס = "ספּאַן4" >
  3. < אַ הרף = "#" קלאַס = "טהומבנאַיל" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "טהומבנאַילס" >
  2. <לי קלאַס = "ספּאַן4" >
  3. <דייוו קלאַס = "טהומבנאַיל" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> טאַמנייל פירמע </h3>
  6. <p> טאַמנייל קעפּל ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

מער ביישפילן

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

פעליקייַט פלינק

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

ווארענונג! בעסטער טשעק יאָ זיך, איר ניטאָ קוקן צו גוט.
  1. <דייוו קלאַס = "פלינק" >
  2. <קנעפּל טיפּ = "קנעפּל" קלאַס = "נאָענט" data-dismiss = "פלינק" > & מאל; </button>
  3. <strong> ווארענונג! </strong> בעסטער טשעק איר זיך, איר ניטאָ קוקן צו גוט.
  4. </div>

אָפּזאָגן קנעפּלעך

מאָביל סאַפאַרי און מאָביל אָפּעראַ בראַוזערז, אין אַדישאַן צו די data-dismiss="alert"אַטריביוט, דאַרפן אַ href="#"פֿאַר די דיסמיסאַל פון אַלערץ ווען ניצן אַ <a>קוויטל.

  1. <a href = "#" class = "נאָענט" data-dismiss = "פלינק" > & מאל; </a>

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

  1. <קנעפּל טיפּ = "קנעפּל" קלאַס = "נאָענט" data-dismiss = "פלינק" > & מאל; </button>

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

ניצן די אַלערץ jQuery פּלוגין פֿאַר שנעל און גרינג דיסמיסאַל פון אַלערץ.


אָפּציעס

פֿאַר מער אַרטיקלען, פאַרגרעסערן די וואַטן אויף די שפּיץ און דנאָ פון די פלינק ראַפּער דורך אַדינג .alert-block.

ווארענונג!

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

  1. <דייוו קלאַס = "פלינק פלינק-בלאָק" >
  2. <קנעפּל טיפּ = "קנעפּל" קלאַס = "נאָענט" data-dismiss = "פלינק" > & מאל; </button>
  3. <ה4> ווארענונג! </h4>
  4. בעסטער טשעק זיך, איר ניטאָ ...
  5. </div>

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

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

טעות אָדער געפאַר

אוי קנעפל! טוישן אַ ביסל זאכן און פּרובירן צו פאָרלייגן ווידער.
  1. <דייוו קלאַס = "פלינק פלינק-טעות" >
  2. ...
  3. </div>

הצלחה

גוט געטאן! איר האָט הצלחה לייענען דעם וויכטיק פלינק אָנזאָג.
  1. <דייוו קלאַס = "פלינק פלינק-הצלחה" >
  2. ...
  3. </div>

אינפֿאָרמאַציע

קאָפּ אַרויף! דעם פלינק דאַרף דיין ופמערקזאַמקייַט, אָבער עס איז נישט סופּער וויכטיק.
  1. <דייוו קלאַס = "פלינק פלינק-אינפֿאָרמאַציע" >
  2. ...
  3. </div>

ביישפילן און מאַרקאַפּ

באַסיק

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

  1. <div class = "פּראָגרעס" >
  2. <דייוו קלאַס = "באַר" סטיל = " ברייט : 60 %; " ></div>
  3. </div>

סטרייפּט

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

  1. <div class = "פּראָגרעס-סטרייפּט פּראָגרעס" >
  2. <דייוו קלאַס = "באַר" סטיל = " ברייט : 20 %; " ></div>
  3. </div>

אַנימאַטעד

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

  1. <div class = "פּראָגרעס פּראָגרעס-סטרייפּט אַקטיוו" >
  2. <דייוו קלאַס = "באַר" סטיל = " ברייט : 40 %; " ></div>
  3. </div>

סטאַקט

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

  1. <div class = "פּראָגרעס" >
  2. <div class = "bar bar-success" סטיל = " ברייט : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " ברייט : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " ברייט : 10 %; " ></div>
  5. </div>

אָפּציעס

נאָך פארבן

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

  1. <div class = "פּראָגרעס פּראָגרעס-אינפֿאָרמאַציע" >
  2. <דייוו קלאַס = "באַר" סטיל = " ברייט : 20 % " ></דייוו>
  3. </div>
  4. <div class = "פּראָגרעס פּראָגרעס-הצלחה" >
  5. <דייוו קלאַס = "באַר" סטיל = " ברייט : 40 % " ></דייוו>
  6. </div>
  7. <div class = "פּראָגרעס פּראָגרעס-ווארענונג" >
  8. <div class = "bar" style = " ברייט : 60 % " ></div>
  9. </div>
  10. <div class = "פּראָגרעס פּראָגרעס-געפאַר" >
  11. <דייוו קלאַס = "באַר" סטיל = " ברייט : 80 % " ></דייוו>
  12. </div>

סטרייפּט באַרס

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

  1. <div class = "פּראָגרעס פּראָגרעס-אינפֿאָרמאַציע פּראָגרעס-סטרייפּט" >
  2. <דייוו קלאַס = "באַר" סטיל = " ברייט : 20 % " ></דייוו>
  3. </div>
  4. <div class = "פּראָגרעס פּראָגרעס-הצלחה פּראָגרעס-סטרייפּט" >
  5. <דייוו קלאַס = "באַר" סטיל = " ברייט : 40 % " ></דייוו>
  6. </div>
  7. <div class = "פּראָגרעס פּראָגרעס-ווארענונג פּראָגרעס-סטרייפּט" >
  8. <div class = "bar" style = " ברייט : 60 % " ></div>
  9. </div>
  10. <div class = "פּראָגרעס פּראָגרעס-געפאַר פּראָגרעס-סטרייפּט" >
  11. <דייוו קלאַס = "באַר" סטיל = " ברייט : 80 % " ></דייוו>
  12. </div>

בלעטערער שטיצן

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

ווערסיעס פריער ווי Internet Explorer 10 און Opera 12 שטיצן נישט אַנאַמיישאַנז.

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

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

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

64x64

מעדיע כעדינג

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

מעדיע כעדינג

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

מעדיע כעדינג

קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. נוללאַ און מעטוס ססעלעריסקווע אַנטי סאָלליסיטיודין קאָממאָדאָ. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס. פוססע קאָנדימענטום נונק אַק ניט וווילפּוטאַט פרינגיללאַ. דאָנעק לאַסיניאַ קאָנגוע פעליס אין פאַוסיבוס.
  1. <דייוו קלאַס = "מעדיע" >
  2. <אַ קלאַס = "ציען-לינקס" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <דייוו קלאַס = "מעדיע-גוף" >
  6. <h4 class = "media-heading" > מעדיע כעדינג </h4>
  7. ...
  8.  
  9. <!-- נעסטעד מידיאַ כייפעץ -->
  10. <דייוו קלאַס = "מעדיע" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

מעדיע רשימה

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

  • 64x64

    מעדיע כעדינג

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

    64x64

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

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

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

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

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

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

    מעדיע כעדינג

    קראַס זיצן אמת ניבה ליבעראָ, אין גראַווידאַ נוללאַ. נוללאַ און מעטוס ססעלעריסקווע אַנטי סאָלליסיטיודין קאָממאָדאָ. קראַס פּורוס אָדיאָו, וועסטיבולום אין ווולפּוטאַטע און, טעמפּוס וויווערראַ טורפּיס.
  1. <ul class = "מעדיע-ליסט" >
  2. <לי קלאַס = "מעדיע" >
  3. <אַ קלאַס = "ציען-לינקס" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <דייוו קלאַס = "מעדיע-גוף" >
  7. <h4 class = "media-heading" > מעדיע כעדינג </h4>
  8. ...
  9.  
  10. <!-- נעסטעד מידיאַ כייפעץ -->
  11. <דייוו קלאַס = "מעדיע" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

וועלז

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

זע, איך בין אין אַ ברונעם!
  1. <דייוו קלאַס = "געזונט" >
  2. ...
  3. </div>

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

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

זע, איך בין אין אַ ברונעם!
  1. <דייוו קלאַס = "געזונט געזונט-גרויס" >
  2. ...
  3. </div>
זע, איך בין אין אַ ברונעם!
  1. <דייוו קלאַס = "געזונט געזונט-קליין" >
  2. ...
  3. </div>

נאָענט בילדל

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

  1. <קנעפּל קלאַס = "נאָענט" > & מאל; </button>

יאָס דעוויסעס דאַרפן אַן href="#"פֿאַר קליק געשעענישן אויב איר וואָלט אלא נוצן אַן אַנקער.

  1. <אַ קלאַס = "נאָענט" href = "#" > & מאל; </a>

העלפער קלאסן

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

.ציען-לינקס

פלאָוט אַן עלעמענט לינקס

  1. קלאַס = "ציען-לינקס"
  1. . ציען - לינקס {
  2. שווימען : לינקס ;
  3. }

.ציען-רעכט

לאָזנ שווימען אַן עלעמענט רעכט

  1. קלאַס = "ציען-רעכט"
  1. . ציען - רעכט {
  2. שווימען : רעכט ;
  3. }

.מוטעד

טוישן אַן עלעמענט ס קאָליר צו#999

  1. קלאַס = "מוטיק"
  1. . פאַרשטומט {
  2. קאָליר : #999;
  3. }

.קלעאַרפיקס

קלאָר די floatאויף קיין עלעמענט

  1. קלאַס = "קלאַרפיקס"
  1. . קלירפיקס {
  2. * פארגרעסער : 1 ;
  3. &: פריער ,
  4. &: נאָך {
  5. ווייַז : טיש ;
  6. אינהאַלט : "" ;
  7. }
  8. &: נאָך {
  9. קלאָר : ביידע ;
  10. }
  11. }