בייַשפּיל

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

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "דראָפּדאָוון מעניו" >   
  <li><a tabindex = "-1" href = "#" > קאַמף </a></li>  
  <li><a tabindex = "-1" href = "#" > אן אנדער קאַמף </a></li>  
  <li><a tabindex = "-1" href = "#" > עפּעס אַנדערש דאָ </a></li>  
  <לי קלאַס = "דיווידער" ></li> 
  <li><a tabindex = "-1" href = "#" > אפגעשיידט לינק </a></li>  
</ul>

מאַרקאַפּ

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

<דייוו קלאַס = "דראָפּדאָוון" > 
  <!-- לינק אָדער קנעפּל צו טאַגאַל דראָפּדאָוון -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > קאַמף </a></li>  
    <li><a tabindex = "-1" href = "#" > אן אנדער קאַמף </a></li>  
    <li><a tabindex = "-1" href = "#" > עפּעס אַנדערש דאָ </a></li>  
    <לי קלאַס = "דיווידער" ></li> 
    <li><a tabindex = "-1" href = "#" > אפגעשיידט לינק </a></li>  
  </ul>
</div>

אָפּציעס

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

אַליינינג די מעניוז

לייג .pull-rightצו אַ .dropdown-menuרעכט ייַנרייען די דראָפּדאָוון מעניו.

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

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

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

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "דראָפּדאָוון מעניו" >   
  <li><a tabindex = "-1" href = "#" > רעגולער לינק </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > פאַרקריפּלט לינק </a></li>   
  <li><a tabindex = "-1" href = "#" > אן אנדער לינק </a></li>  
</ul>

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

לייג אַן עקסטרע מדרגה פון דראָפּדאָוון מעניוז, אנטפלעקט אויף האָווער ווי די פון OS X, מיט עטלעכע פּשוט מאַרקאַפּ אַדישאַנז. לייג .dropdown-submenuצו קיין liאין אַ יגזיסטינג דראָפּדאָוון מעניו פֿאַר אָטאַמאַטיק סטילינג.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <לי קלאַס = "דראָפּדאָוון-סובמעניו" > 
    <a tabindex = "-1" href = "#" > מער אָפּציעס </a>  
    <ul class = "דראָפּדאָוון-מעניו" > 
      ...
    </ul>
  </li>
</ul>

ביישפילן

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

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

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

<div class = "btn-group" > 
  <button class = "btn" > לינקס </button> 
  <button class = "btn" > מיטל </button> 
  <button class = "btn" > רעכט </button> 
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סיזעס

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

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

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

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

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

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

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

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

נעמען אַ רעגולער <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>

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

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

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > היים </a></li>  
  ...
</ul>

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

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

סטאַקאַבלע

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

סטאַקט טאַבס

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

סטאַקט פּילז

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

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

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

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

<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.

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

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

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

נאטיץפֿאַר נעסטינג אין אַ נאַוו רשימה, אַרייַננעמען class="nav nav-list"אויף קיין נעסטעד <ul>.

האָריזאָנטאַל דיווידערס

לייג אַ האָריזאָנטאַל דיווידער דורך קריייטינג אַ ליידיק רשימה נומער מיט די קלאַס .divider, ווי אַזוי:

<ul class = "נאַוו נאַוויגאַציע רשימה" > 
  ...
  <לי קלאַס = "דיווידער" ></li> 
  ...
</ul>

טאַבבאַבלע נאַוו

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

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

צו מאַכן טאַבס טאַבאַבלע, שאַפֿן אַ .tab-paneמיט יינציק שייַן פֿאַר יעדער קוויטל און ייַנוויקלען זיי אין .tab-content.

<div class = "tabable" > <!-- בלויז פארלאנגט פֿאַר לינקס / רעכט טאַבס -->  
  <ul class = "נאַוו נאַוו-טאַבס" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > אָפּטיילונג 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > אָפּטיילונג 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> איך בין אין אָפּטיילונג 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> היי, איך בין אין אָפּטיילונג 2. </p>
    </div>
  </div>
</div>

פאַלן אין טאַבס

צו מאַכן טאַבס וועלקן אין, לייגן .fadeצו יעדער .tab-pane.

ריקוויירז 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>

יקערדיק נאַוויגאַציע

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

<דייוו קלאַס = "נאַוובאַר" > 
  <דייוו קלאַס = "נאַוובאַר-ינער" > 
    <a class = "brand" href = "#" > טיטל </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > היים </a></li>  
      <li><a href = "#" > לינק </a></li> 
      <li><a href = "#" > לינק </a></li> 
    </ul>
  </div>
</div>

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

סאָרט

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

<a class = "brand" href = "#" > פּראָיעקט נאָמען </a>  

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

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

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

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

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

Forms

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

<פאָרם קלאַס = "נאַוובאַר-פאָרעם ציען-לינקס" > 
  <אינפּוט טיפּ = "טעקסט" קלאַס = "ספּאַן2" >  
  <button type = "submit" class = "btn" > פאָרלייגן </button>  
</form>

זוכן פאָרעם

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

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

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

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

ניצן דראָפּדאָוונס

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

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

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

טעקסט

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

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

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

פאַרפעסטיקט צו שפּיץ

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

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

פאַרפעסטיקט צו דנאָ

לייג .navbar-fixed-bottomאַנשטאָט.

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

סטאַטיק שפּיץ נאַוויגאַציע

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

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

אָפּרופיק נאַוויגאַציע

צו ינסטרומענט אַ קאַלאַפּסינג אָפּרופיק נאַוובאַר, ייַנוויקלען דיין נאַוובאַר אינהאַלט אין אַ מיט דייוו, .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>

ינווערטיד ווערייישאַן

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

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

ביישפילן

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

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

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

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

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

אָפּציעס

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

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

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

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

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

סיזעס

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

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

אַליינמאַנט

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

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

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

Pager

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

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

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

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

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

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

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

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

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

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

לאַבעלס

באַדזשיז

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

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

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

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

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

בלאַט כעדער

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

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

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

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

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

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

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

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

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

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

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

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

מאַרקאַפּ

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

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

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

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

מער ביישפילן

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

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

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

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

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

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

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

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

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

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

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

אָפּציעס

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

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

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

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

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

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

הצלחה

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

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

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

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

באַסיק

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

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

סטרייפּט

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

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

אַנימאַטעד

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

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

סטאַקט

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

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

אָפּציעס

נאָך פארבן

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

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

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

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

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

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

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

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

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

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

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

מעדיע כעדינג

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

מעדיע כעדינג

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

מעדיע כעדינג

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

<דייוו קלאַס = "מעדיע" > 
  <אַ קלאַס = "ציען-לינקס" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <דייוו קלאַס = "מעדיע-גוף" > 
    <h4 class = "media-heading" > מעדיע כעדינג </h4> 
    ...
 
    <!-- נעסטעד מידיאַ כייפעץ -->
    <דייוו קלאַס = "מעדיע" > 
      ...
    </div>
  </div>
</div>

מעדיע רשימה

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

<ul class = "מעדיע-ליסט" > 
  <לי קלאַס = "מעדיע" > 
    <אַ קלאַס = "ציען-לינקס" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <דייוו קלאַס = "מעדיע-גוף" > 
      <h4 class = "media-heading" > מעדיע כעדינג </h4> 
      ...
 
      <!-- נעסטעד מידיאַ כייפעץ -->
      <דייוו קלאַס = "מעדיע" > 
        ...
     </div>
    </div>
  </li>
</ul>

וועלז

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

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

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

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

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

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

נאָענט בילדל

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

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

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

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

העלפער קלאסן

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

.ציען-לינקס

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

קלאַס = "ציען-לינקס"

. ציען - לינקס {
  שווימען : לינקס ;
}

.ציען-רעכט

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

קלאַס = "ציען-רעכט"

. ציען - רעכט {
  שווימען : רעכט ;
}

.מוטעד

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

קלאַס = "מוטיק"

. פאַרשטומט {
  קאָליר : #999; 
}

.קלעאַרפיקס

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

קלאַס = "קלאַרפיקס"

. קלירפיקס {
  * פארגרעסער : 1 ; 
  &: פריער ,
  &: נאָך {
    ווייַז : טיש ;
    אינהאַלט : "" ; 
  }
  &: נאָך {
    קלאָר : ביידע ;
  }
}