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

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

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

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

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

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

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

דאָ ס ווי די HTML קוקט פֿאַר אַ נאָרמאַל קנעפּל גרופּע געבויט מיט אַנקער קוויטל קנעפּלעך:

<div class = "btn-group" > 
  <אַ קלאַס = "בטן" href = "#" > 1 </a>  
  <אַ קלאַס = "בטן" href = "#" > 2 </a>  
  <a class = "btn" href = "#"> 3 </a> _  
</div>

מכשיר-באַר ביישפּיל

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

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

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

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

באַקומען די דזשאַוואַסקריפּט »

קאָפּ אַרויף

CSS פֿאַר קנעפּל גרופּעס איז אין אַ באַזונדער טעקע, button-groups.less.

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

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    קאַמף
    <span class = "קאַרעט" ></span> 
  </a>
  <ul class = "דראָפּדאָוון-מעניו" > 
    <!-- דראָפּדאָוון מעניו לינקס -->
  </ul>
</div>

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

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

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > קאַמף </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "קאַרעט" ></span> 
  </a>
  <ul class = "דראָפּדאָוון-מעניו" > 
    <!-- דראָפּדאָוון מעניו לינקס -->
  </ul>
</div>

שטאַרק באַזע קלאַס

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

ווען צו נוצן

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

קאָמפּאָנענט אַליינמאַנט

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

יקערדיק טאַבס

נעמען אַ רעגולער <ul>פון לינקס און לייגן .nav-tabs:

• היים
• פּראָפיל
• אַרטיקלען

<ul class = "נאַוו נאַוו-טאַבס" > 
  <לי קלאַס = "אַקטיוו" > 
    <a href = "#" > היים </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

יקערדיק פּילז

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

• היים
• פּראָפיל
• אַרטיקלען

<ul class = "nav nav-pills" > 
  <לי קלאַס = "אַקטיוו" > 
    <a href = "#" > היים </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

ווי צו שטעלן זיי

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

סטאַקט טאַבס

• היים
• פּראָפיל
• אַרטיקלען

<ul class = "נאַוו נאַוו-טאַבס נאַוו-סטאַקט" > 
  ...
</ul>

סטאַקט פּילז

• היים
• פּראָפיל
• אַרטיקלען

<ul class = "נאַוו נאַוו-פּיללס נאַוו-סטאַקט" > 
  ...
</ul>

רייַך מעניוז געמאכט גרינג

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

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

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

• היים
• פּראָפיל
• דראָפּדאָוון
  • קאַמף
  • אן אנדער קאַמף
  • עפּעס אַנדערש דאָ
  • אפגעשיידט לינק

<ul class = "נאַוו נאַוו-טאַבס" > 
  <לי קלאַס = "דראָפּדאָוון" > 
    <אַ קלאַס = "דראָפּדאָוון-טאַגאַל" 
       data-toggle = "דראָפּדאָוון"
       הרף = "#" >
        דראָפּדאָוון
        <b class = "קאַרעט" ></b> 
      </a>
    <ul class = "דראָפּדאָוון-מעניו" > 
      <!-- לינקס -->
    </ul>
  </li>
</ul>

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

• היים
• פּראָפיל
• דראָפּדאָוון
  • קאַמף
  • אן אנדער קאַמף
  • עפּעס אַנדערש דאָ
  • אפגעשיידט לינק

<ul class = "nav nav-pills" > 
  <לי קלאַס = "דראָפּדאָוון" > 
    <אַ קלאַס = "דראָפּדאָוון-טאַגאַל" 
       data-toggle = "דראָפּדאָוון"
       הרף = "#" >
        דראָפּדאָוון
        <b class = "קאַרעט" ></b> 
      </a>
    <ul class = "דראָפּדאָוון-מעניו" > 
      <!-- לינקס -->
    </ul>
  </li>
</ul>

אַפּפּליקאַטיאָן-נוסח נאַוויגאַציע

נאַוו רשימות צושטעלן אַ פּשוט און גרינג וועג צו בויען גרופּעס פון נאַוו פֿאַרבינדונגען מיט אַפּשאַנאַל כעדערז. זיי זענען בעסטער געניצט אין סיידבאַרז ווי די Finder אין OS X.

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

מיט ייקאַנז

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

בייַשפּיל פון נאַוויגאַציע רשימה

נעמען אַ רשימה פון לינקס און לייגן class="nav nav-list":

<ul class = "נאַוו נאַוויגאַציע רשימה" > 
  <לי קלאַס = "נאַוו-כעדער" > 
    רשימה כעדער
  </li>
  <לי קלאַס = "אַקטיוו" > 
    <a href = "#" > היים </a> 
  </li>
  <לי>
    <a href = "#" > ביבליאָטעק </a> 
  </li>
  ...
</ul>

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

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

<ul class = "נאַוו נאַוויגאַציע רשימה" > 
  ...
  <לי>
    <אַ הרף = " # " > 
      <i class = "ייקאַן-בוך" ></i> 
      ביבליאָטעק
    </a>
  </li>
  ...
</ul>

וואָס איז אַרייַנגערעכנט

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

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

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

צו מאַכן טאַבס טאַבאַבלע, ייַנוויקלען די .nav-tabsאין אן אנדער דייוו מיט קלאַס .tabbable.

מנהג jQuery פּלוגין

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

באַקומען די דזשאַוואַסקריפּט →

טאַבס אויף די דנאָ

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

<div class = "טאַבאַבלע טאַבס-ונטער" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "נאַוו נאַוו-טאַבס" > 
    ...
  </ul>
</div>

טאַבס אויף די לינקס

ויסבייַטן די קלאַס צו שטעלן טאַבס אויף די לינקס.

<div class = "טאַבאַבלע טאַבס-לינקס" > 
  <ul class = "נאַוו נאַוו-טאַבס" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

טאַבס אויף די רעכט

ויסבייַטן די קלאַס צו שטעלן טאַבס אויף די רעכט.

<דייוו קלאַס = "טאַבאַבלע טאַבס-רעכט" > 
  <ul class = "נאַוו נאַוו-טאַבס" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

נאַוובאַר סקאַפאַלדינג

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

<דייוו קלאַס = "נאַוובאַר" > 
  <דייוו קלאַס = "נאַוובאַר-ינער" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

פאַרפעסטיקט נאַוובאַר

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

<דייוו קלאַס = "נאַוובאַר נאַוובאַר-פאַרפעסטיקט-שפּיץ" > 
  ...
</div>

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

בארימטע נאמען

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

<אַ קלאַס = "בראַנד" href = "#" >  
  פּראָיעקט נאָמען
</a>

זוכן פאָרעם

זוכן פארמען באַקומען מנהג סטיילז אין די נאַוובאַר מיט די .navbar-searchקלאַס. אַרייַננעמען .pull-leftאָדער .pull-rightאויף די formצו ייַנרייען עס.

<פאָרם קלאַס = "נאַוובאַר-זוכן ציען-לינקס" > 
  <אינפּוט טיפּ = "טעקסט" קלאַס = "זוכן-אָנפֿרעג" אָרטהאָלדער = "זוכן" >   
</form>

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

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

<דייוו קלאַס = "נאַוובאַר" > 
  <דייוו קלאַס = "נאַוובאַר-ינער" > 
    <div class = "container" > 
 
      <!-- .btn-navbar איז געניצט ווי די טאַגאַל פֿאַר קאַלאַפּסט נאַוובאַר אינהאַלט -->
      <אַ קלאַס = "btn btn - navbar " data-toggle = "ייַנבראָך" data- target = ".nav -collapse " >   
        <ספּאַן קלאַס = "ייקאַן-באַר" ></span> 
        <ספּאַן קלאַס = "ייקאַן-באַר" ></span> 
        <ספּאַן קלאַס = "ייקאַן-באַר" ></span> 
      </a>
 
      <!-- זייט זיכער צו לאָזן די סאָרט דאָרט אויב איר ווילן עס געוויזן -->
      <a class = "brand" href = "#" > פּראָיעקט נאָמען </a>  
 
      <!-- אַלץ איר ווילן פאַרבאָרגן אין 940 פּקס אָדער ווייניקער, שטעלן ין דאָ -->
      <דייוו קלאַס = "נאַוו-ייַנבראָך" > 
        <!-- .nav, .navbar-search, .navbar-form, עטק -->
      </div>
 
    </div>
  </div>
</div>

נאַוויגאַציע לינקס

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

<ul class = "nav" > 
  <לי קלאַס = "אַקטיוו" > 
    <a href = "#" > היים </a> 
  </li>
  <li><a href = "#" > לינק </a></li> 
  <li><a href = "#" > לינק </a></li> 
</ul>

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

<ul class = "nav" > 
  ...
  <לי קלאַס = "דיווידער-ווערטיקאַל" ></li> 
  ...
</ul>

קאָמפּאָנענט אַליינמאַנט

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

אַדינג דראָפּדאָוונס

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

<ul class = "nav" > 
  <לי קלאַס = "דראָפּדאָוון" > 
    <אַ הרף = "#" 
          קלאַס = "דראָפּדאָוון-טאַגאַל"
          data-toggle = "דראָפּדאָוון" >
          חשבון
          <b class = "קאַרעט" ></b> 
    </a>
    <ul class = "דראָפּדאָוון-מעניו" > 
      ...
    </ul>
  </li>
</ul>

באַקומען די דזשאַוואַסקריפּט →

פארוואס נוצן זיי

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

ביישפילן

א איין ביישפּיל געוויזן ווי עס קען זיין געוויזן אויף קייפל בלעטער.

• היים

• היים /
• ביבליאָטעק

• היים /
• ביבליאטעק /
• דאַטאַ

מאַרקאַפּ

HTML איז דיין נאָרמאַל אַנאָרדערד רשימה מיט לינקס.

<ul class = "ברעאַדקרומב" > 
  <לי>
    <a href = "#" > היים </a> <span class = "divider" > / </span>   
  </li>
  <לי>
    <a href = "#" > ביבליאָטעק </a> <span class = "דיווידער" > / </span>   
  </li>
  <לי קלאַס = "אַקטיוו" > 
    <a href = "#" > דאַטן </a> 
  </li>
</ul>

ווען צו נוצן

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

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

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

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

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

ביישפילן

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

מאַרקאַפּ

אלנגעוויקלט אין אַ <div>, פּאַדזשאַניישאַן איז נאָר אַ <ul>.

<דייוו קלאַס = "פּאַגעמענט" > 
  <ul>
    <li><a href = "#" > פריער </a></li> 
    <לי קלאַס = "אַקטיוו" > 
      <אַ 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 = "#" > ווייַטער </a></li> 
  </ul>
</div>

וועגן פּאַדזשער

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

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

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

• פֿריִערדיקע
• ווייַטער

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

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

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

• ← עלטער
• נייַער →

<ul class = "פּאַדזשער" > 
  <לי קלאַס = "פרייַערדיק" > 
    <אַ הרף = "#" > & לערר ; עלטער </a> 
  </li>
  <לי קלאַס = "ווייַטער" > 
    <a href = "#" > נייַער → </a> 
  </li>
</ul>

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

מאַרקאַפּ

ייַנוויקלען דיין אינהאַלט אין אַ divווי אַזוי:

<דייוו קלאַס = "העלד-איינהייט" > 
  <h1> כעדינג </h1>
  <p> טאַגלינע </p>
  <p>
    < אַ קלאַס = "בטן בטן-ערשטיק בטן-גרויס" > 
      לערן מער
    </a>
  </p>
</div>

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

<div class = "page-haeder" > 
  <h1> בייַשפּיל בלאַט כעדער </h1>
</div>

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

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

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

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

• 

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

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

  קאַמף קאַמף

• 

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

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

  קאַמף קאַמף

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

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

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

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

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

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

די מאַרקאַפּ

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

<ul class = "טהומבנאַילס" > 
  <לי קלאַס = "ספּאַן3" > 
    < אַ הרף = "#" קלאַס = "טהומבנאַיל" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "טהומבנאַילס" > 
  <לי קלאַס = "ספּאַן3" > 
    <דייוו קלאַס = "טהומבנאַיל" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> טאַמנייל פירמע </h5>
      <p> טאַמנייל קעפּל דאָ ... </p>
    </div>
  </li>
  ...
</ul>

מער ביישפילן

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

ריריטאַן באַזע קלאַס

מיט Bootstrap 2, מיר האָבן סימפּלאַפייד די באַזע קלאַס: .alertאַנשטאָט פון .alert-message. מיר האָבן אויך רידוסט די מינימום פארלאנגט מאַרקאַפּ - ניט <p>איז פארלאנגט דורך פעליקייַט, נאָר די ויסווייניקסט <div>.

איין פלינק אָנזאָג

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

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

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

באַקומען די פּלוגין »

בייַשפּיל אַלערץ

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

<דייוו קלאַס = "פלינק" > 
  <אַ קלאַס = "נאָענט " data-dismiss = " פלינק" > × </a>  
  <strong> ווארענונג! </strong> בעסטער טשעק איר זיך, איר ניטאָ קוקן צו גוט.
</div>

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

<דייוו קלאַס = "פלינק פלינק-בלאָק" > 
  <אַ קלאַס = "נאָענט " data-dismiss = " פלינק" > × </a>  
  <h4 class = "alert-heading" > ווארענונג! </h4> 
  בעסטער טשעק זיך, איר ניטאָ ...
</div>

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

<דייוו קלאַס = "פלינק פלינק-טעות" > 
  ...
</div>

הצלחה

<דייוו קלאַס = "פלינק פלינק-הצלחה" > 
  ...
</div>

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

<דייוו קלאַס = "פלינק פלינק-אינפֿאָרמאַציע" > 
  ...
</div>

באַסיק

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

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

סטרייפּט

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

<div class = "פּראָגרעס פּראָגרעס-אינפֿאָרמאַציע 
     פּראָגרעס-סטרייפּט" >
  <דייוו קלאַס = "באַר" 
       style = " ברייט : 20 %; " ></div> 
</div>

אַנימאַטעד

נעמט די סטרייפּט בייַשפּיל און אַנאַמייץ עס.

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

נאָך פארבן

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

• .progress-info
• .progress-success
• .progress-danger

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

נאַטור

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

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

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

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

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

וועלז

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

<דייוו קלאַס = "געזונט" > 
  ...
</div>

באַדזשיז

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

<שפּאַן קלאַס = "באַדגע" > 3 </div> 

נאָענט בילדל

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

×

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