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

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

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

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

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

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

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

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

<div class = "btn-group" > 
  <קנעפּל קלאַס = "בטן" > 1 </button> 
  <קנעפּל קלאַס = "בטן" > 2 </button> 
  <קנעפּל קלאַס = "בטן" > 3 </button> 
</div>

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

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

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

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

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

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

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

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

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

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

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

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

<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 דראָפּדאָוון פּלוגין צו פונקציאָנירן.

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

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

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

סיזעס

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

<div class = "btn-group" > 
  ...
  <ul class = "דראָפּדאָוון-מעניו ציען-רעכט" > 
    <!-- דראָפּדאָוון מעניו לינקס -->
  </ul>
</div>

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

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

<div class = "btn-group" > 
  <button class = "btn" > קאַמף </button> 
  <button class = "btn 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קלאַס.

ווען צו נוצן

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

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

צו ייַנרייען נאַוו לינקס, נוצן די .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.

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

• היים
• הילף
• דראָפּדאָוון
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

• היים
• הילף
• דראָפּדאָוון
  • Action
  • Another action
  • Something else here
  • Separated link

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

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

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

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

מיט ייקאַנז

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

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

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

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

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

נעמען אַ רשימה פון לינקס און לייגן 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>

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

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

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

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

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

ריקוויירז jQuery פּלוגין

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

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

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

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

פֿאַר רעכט אָדער לינקס אַליינד טאַבס, ייַנוויקלען די .nav-tabsאון .tab-contentאין .tabbable.

פּשוט מאַרקאַפּ

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

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

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

פליפּ די סדר פון 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.

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

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

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

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

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

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

פארמען אין נאַוובאַר

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

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

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

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

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

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

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

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

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

ביישפילן

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

• היים

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

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

מאַרקאַפּ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

וועגן

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

בנימצא קלאסן

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

מאַרקאַפּ

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

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

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

<דייוו קלאַס = "בלאַט-כעדער" > 
  <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 = "פלינק" > × </button>  
  <strong> ווארענונג! </strong> בעסטער טשעק איר זיך, איר ניטאָ קוקן צו גוט.
</div>

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

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

<דייוו קלאַס = "פלינק פלינק-בלאָק" > 
  <אַ קלאַס = "נאָענט " data-dismiss = " alert" href = "#" > × </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>

נאָך פארבן

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

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

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

נאַטור

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

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

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

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

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

וועלז

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

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

נאָענט בילדל

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

×

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

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

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