ለምሳሌ

የሚቀያየር፣ የአገናኞች ዝርዝሮችን ለማሳየት አውድ ምናሌ። ከተቆልቋዩ ጃቫ ስክሪፕት ተሰኪ ጋር በይነተገናኝ ተደርጓል ።

<ul class = "ተቆልቋይ-ሜኑ" ሚና = "ሜኑ" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > ድርጊት </a></li>  
  <li><a tabindex = "-1" href = "#" > ሌላ እርምጃ </a></li>  
  <li><a tabindex = "-1" href = "#" > እዚህ ሌላ ነገር </a></li>  
  <li class = "አከፋፋይ" ></li> 
  <li><a tabindex = "-1" href = "#" > የተለየ ማገናኛ </a></li>  
</ul>

ምልክት ማድረጊያ

የተቆልቋይ ምናሌውን ብቻ ስንመለከት፣ የሚፈለገው HTML ይኸውና የተቆልቋይ ቀስቅሴውን እና ተቆልቋይ ሜኑ በ ውስጥ .dropdown፣ ወይም ሌላ የሚያውጅ አካል መጠቅለል አለቦት position: relative;። ከዚያ ምናሌውን ብቻ ይፍጠሩ.

<div class = "ተቆልቋይ" > 
  <!-- ተቆልቋይ ለመቀየር አገናኝ ወይም አዝራር -->
  <ul class = "ተቆልቋይ-ሜኑ" ሚና = "ምናሌ" 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 class = "አከፋፋይ" ></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 = "ተቆልቋይ-ሜኑ" ሚና = "ሜኑ" aria-labelledby = "dropdownMenu" >   
  <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 = "ተቆልቋይ-ሜኑ" ሚና = "ምናሌ" aria-labelledby = "dLabel" >   
  ...
  <li class = "ተቆልቋይ-ንዑስ ሜኑ" > 
    <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> 
  <የአዝራር ክፍል  = "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 = "caret" ></span> 
  </a>
  <ul class = "ተቆልቋይ-ሜኑ" > 
    <!-- ተቆልቋይ ምናሌ አገናኞች -->
  </ul>
</div>

ከሁሉም የአዝራሮች መጠኖች ጋር ይሰራል

የአዝራር ተቆልቋይ በማንኛውም መጠን ይሰራሉ .btn-large፡፣፣ .btn-smallወይም .btn-mini።

JavaScript ያስፈልገዋል

የአዝራር ተቆልቋይዎች እንዲሰራ የ Bootstrap ተቆልቋይ ተሰኪ ያስፈልጋቸዋል።

በአንዳንድ ሁኔታዎች - እንደ ሞባይል - ተቆልቋይ ምናሌዎች ከእይታ እይታ ውጭ ይዘልቃሉ። አሰላለፍ በእጅ ወይም በብጁ ጃቫስክሪፕት መፍታት አለቦት።

የተከፈለ ቁልፍ ተቆልቋይ

በአዝራር ቡድን ቅጦች እና ምልክት ማድረጊያ ላይ በመገንባት በቀላሉ የተከፈለ አዝራር መፍጠር እንችላለን። የተከፋፈሉ አዝራሮች በግራ በኩል መደበኛ እርምጃ እና በቀኝ በኩል ተቆልቋይ መቀያየርን ከአውድ አገናኞች ጋር ያሳያሉ።

<div class = "btn-group" > 
  <button class = "btn" > ድርጊት </button> 
  <button class = "btn dropdown-toggle" data-toggle = "ተቆልቋይ" >  
    <span class = "caret" ></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 = "caret" ></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 = "caret" ></span> 
  </button>
  <ul class = "ተቆልቋይ-ሜኑ" > 
    <!-- ተቆልቋይ ምናሌ አገናኞች -->
  </ul>
</div>

ቀላል ክብደት ያላቸው ነባሪዎች ተመሳሳይ ምልክት ማድረጊያ፣ የተለያዩ ክፍሎች

እዚህ ያሉት ሁሉም የናቪ ክፍሎች—ትሮች፣ ክኒኖች እና ዝርዝሮች—በክፍል ውስጥ ተመሳሳይ የመሠረት ምልክት ማድረጊያ እና ቅጦችን ይጋራሉ.nav ።

መሰረታዊ ትሮች

መደበኛ <ul>አገናኞችን ይውሰዱ እና .nav-tabsያክሉ

<ul class = "nav nav-tabs" > 
  <li class = "ንቁ" > 
    <a href = "#" > ቤት </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

መሰረታዊ እንክብሎች

ያንኑ ኤችቲኤምኤል ይውሰዱ፣ ግን .nav-pillsበምትኩ ይጠቀሙ፡-

<ul class = "nav nav-pills" > 
  <li class = "ንቁ" > 
    <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የመገልገያ ክፍሎችን ይጠቀሙ። ሁለቱም ክፍሎች በተጠቀሰው አቅጣጫ የሲኤስኤስ ተንሳፋፊ ይጨምራሉ።

ሊደረደር የሚችል

ትሮች እና እንክብሎች በነባሪ አግድም ሲሆኑ፣ .nav-stackedበአቀባዊ የተደረደሩ እንዲመስሉ ሁለተኛ ክፍል ጨምሩ።

የተደረደሩ ትሮች

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

የተቆለሉ እንክብሎች

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

መውረድ

ተቆልቋይ ሜኑዎችን ከትንሽ ተጨማሪ ኤችቲኤምኤል እና ተቆልቋዮቹ ጃቫስክሪፕት ፕለጊን ያክሉ ።

ተቆልቋይ ያላቸው ትሮች

<ul class = "nav nav-tabs" > 
  <li class = "ተቆልቋይ" > 
    <a class = "ተቆልቋይ-መቀያየር" 
       data-toggle = "ተቆልቋይ"
       href = "#" >
        ዝቅ በል
        <b class = "እንክብካቤ" ></b> 
      </a>
    <ul class = "ተቆልቋይ-ሜኑ" > 
      <!-- ማገናኛዎች -->
    </ul>
  </li>
</ul>

ተቆልቋይ ያላቸው እንክብሎች

<ul class = "nav nav-pills" > 
  <li class = "ተቆልቋይ" > 
    <a class = "ተቆልቋይ-መቀያየር" 
       data-toggle = "ተቆልቋይ"
       href = "#" >
        ዝቅ በል
        <b class = "እንክብካቤ" ></b> 
      </a>
    <ul class = "ተቆልቋይ-ሜኑ" > 
      <!-- ማገናኛዎች -->
    </ul>
  </li>
</ul>

የናቭ ዝርዝሮች

ከአማራጭ ራስጌዎች ጋር የናቭ አገናኞችን ቡድን ለመገንባት ቀላል እና ቀላል መንገድ። በ OS X ውስጥ እንደ ፈላጊ ባሉ የጎን አሞሌዎች ውስጥ በጣም ጥሩ ጥቅም ላይ ይውላሉ።

የናቪ ዝርዝር ምሳሌ

የአገናኞችን ዝርዝር ይውሰዱ እና ያክሉ class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > የዝርዝር ራስጌ </li> 
  <li class = "ንቁ" ><a href = "#" > መነሻ </a></li>  
  <li><a href = "#" > ቤተ-መጽሐፍት </a></li> 
  ...
</ul>

ማስታወሻበናቭ ዝርዝር ውስጥ ለመክተት፣ class="nav nav-list"በማንኛውም የጎጆ ላይ ያካትቱ <ul>።

አግድም መከፋፈያዎች

ከክፍል ጋር ባዶ የዝርዝር ንጥል በመፍጠር አግድም አካፋይን ጨምር .divider፣ ልክ እንደዚህ፡-

<ul class = "nav nav-list" > 
  ...
  <li class = "አከፋፋይ" ></li> 
  ...
</ul>

ሊታበል የሚችል የባህር ኃይል

በትሮች በኩል በይዘት መካከል ለመቀያየር በቀላል ፕለጊን የእርስዎን ትሮች ህያው አድርገው። ቡትስትራፕ ሊታዩ የሚችሉ ትሮችን በአራት ቅጦች ያዋህዳል፡ ከላይ (ነባሪ)፣ ቀኝ፣ ታች እና ግራ።

ሊታወቅ የሚችል ምሳሌ

.tab-paneትሮችን ሊታረቅ የሚችል ለማድረግ ለእያንዳንዱ ትር ልዩ መታወቂያ ይፍጠሩ እና ወደ ውስጥ ጠቅልሏቸው .tab-content።

<div class = "tabbable" > <!-- ለግራ/ቀኝ ትሮች ብቻ ያስፈልጋል -->  
  <ul class = "nav nav-tabs" > 
    <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 ፕለጊን ያስፈልገዋል

ሁሉም ሊታዩ የሚችሉ ትሮች በቀላል ክብደት jQuery ፕለጊናችን ነው የተጎላበተው። በጃቫስክሪፕት ሰነዶች ገጽ ላይ ሊታዩ የሚችሉ ትሮችን እንዴት ወደ ሕይወት ማምጣት እንደሚችሉ የበለጠ ያንብቡ ።

በማንኛውም አቅጣጫ ሊታጠፍ የሚችል

ከታች ያሉት ትሮች

የኤችቲኤምኤልን ቅደም ተከተል ገልብጥ እና ከታች ትሮችን ለማስቀመጥ ክፍል ጨምር።

<div class = "ታብ ሊታዩ የሚችሉ ትሮች-ከታች" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

በግራ በኩል ትሮች

በግራ በኩል ትሮችን ለማስቀመጥ ክፍሉን ይቀይሩ።

<div class = " tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

በቀኝ በኩል ያሉት ትሮች

በቀኝ በኩል ትሮችን ለማስቀመጥ ክፍሉን ይቀይሩት።

<div class = "ሊታረሙ የሚችሉ ታብ-ቀኝ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

መሰረታዊ ናቭባር

ለመጀመር፣ navbars የማይንቀሳቀሱ ናቸው (ከላይ ያልተስተካከሉ) እና ለፕሮጀክት ስም እና መሰረታዊ አሰሳ ድጋፍን ያካትታሉ። .containerየጣቢያህን እና የይዘትህን ስፋት የሚያዘጋጅ በ ውስጥ የትኛውም ቦታ ላይ አስቀምጥ።

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > ርዕስ </a>  
    <ul class = "nav" > 
      <li class = "ንቁ" ><a href = "#" > መነሻ </a></li>  
      <li><a href = "#" > አገናኝ </a></li> 
      <li><a href = "#" > አገናኝ </a></li> 
    </ul>
  </div>
</div>

Navbar ክፍሎች

የምርት ስም

የምርት ስምዎን ወይም የፕሮጀክት ስምዎን ለማሳየት ቀላል አገናኝ መልህቅ መለያን ብቻ ይፈልጋል።

<a class = "brand" href = "#" > የፕሮጀክት ስም </a>  

የናቭ ማገናኛዎች

የናቭ ንጥሎች ባልታዘዙ ዝርዝሮች ለመጨመር ቀላል ናቸው።

<ul class = "nav" > 
  <li class = "ንቁ" > 
    <a href = "#" > ቤት </a> 
  </li>
  <li><a href = "#" > አገናኝ </a></li> 
  <li><a href = "#" > አገናኝ </a></li> 
</ul>

በባዶ ዝርዝር ንጥል እና በቀላል ክፍል በቀላሉ አካፋዮችን ወደ ናቭ ማገናኛዎችዎ ማከል ይችላሉ። ይህንን በአገናኞች መካከል ብቻ ያክሉ፡-

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

ቅጾች

ቅጹን በአግባቡ ለመቅረጽ እና በ navbar ውስጥ ለማስቀመጥ ከታች እንደሚታየው ተገቢውን ክፍሎችን ያክሉ። ለነባሪ ቅፅ፣ ያካትቱ .navbar-formእና ወይ .pull-leftወይም .pull-rightበትክክል እሱን ለማስተካከል።

<form class = "navbar-form pull-left" > 
  <የግብአት አይነት = "ጽሑፍ" ክፍል = "span2" >  
  <button type = "submit" class = "btn" > አስረክብ </button>  
</ form>

የፍለጋ ቅጽ

ለበለጠ ብጁ የፍለጋ ቅጽ፣ በ navbar ውስጥ ለልዩ ቅጦች ወደ እና ወደ ግብአት .navbar-searchያክሉ form።.search-query

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" ቦታ ያዥ = "ፈልግ" >   
</ form>

የአካል ክፍሎች አሰላለፍ

የዳሰሳ አገናኞችን፣ የፍለጋ ቅጹን ወይም ጽሑፍን አሰልፍ፣ .pull-leftወይም .pull-rightየመገልገያ ክፍሎችን ይጠቀሙ። ሁለቱም ክፍሎች በተጠቀሰው አቅጣጫ የሲኤስኤስ ተንሳፋፊ ይጨምራሉ።

ተቆልቋይዎችን በመጠቀም

በትንሹ ምልክት ማድረጊያ እና ተቆልቋይ ጃቫስክሪፕት ፕለጊን ወደ ባሕር ኃይል ተቆልቋይ እና ተቆልቋይ ጨምር ።

<ul class = "nav" > 
  <li class = "ተቆልቋይ" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "ተቆልቋይ" >   
      መለያ
      <b class = "እንክብካቤ" ></b> 
    </a>
    <ul class = "ተቆልቋይ-ሜኑ" > 
      ...
    </ul>
  </li>
</ul>

ለበለጠ ምልክት ማድረጊያ እና ተቆልቋይ መጥራት ላይ መረጃ ለማግኘት የጃቫስክሪፕት ተቆልቋይ ሰነዶችን ይጎብኙ ።

ጽሑፍ

የጽሑፍ ሕብረቁምፊዎችን ከ ጋር በአንድ አካል ጠቅልሉ .navbar-text፣ ብዙውን ጊዜ <p>ለትክክለኛ አመራር እና ቀለም መለያ ላይ።

አማራጭ የማሳያ ልዩነቶች

የመመልከቻ ቦታውን ከላይ ወይም ከታች ከተጨማሪ ክፍል ጋር በውጪኛው ዲቪ ላይ ያስተካክሉት .navbar።

ወደላይ ተስተካክሏል

.navbar-fixed-topቢያንስ 40 ፒክስል በማከል ከሱ ስር ያለውን የተደበቀ ቦታ paddingጨምር እና አስታውስ <body>። ይህንን ከዋና ቡትስትራፕ CSS በኋላ እና ከአማራጭ ምላሽ ሰጪ CSS በፊት ማከልዎን ያረጋግጡ።

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

ወደ ታች ተስተካክሏል

.navbar-fixed-bottomበምትኩ ያክሉ ።

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

የማይንቀሳቀስ የላይኛው navbar

በማከል ከገጹ ጋር የሚሸብልል ባለ ሙሉ ስፋት ናቭባር ይፍጠሩ .navbar-static-top። ከክፍሉ በተለየ .navbar-fixed-top፣ በ ላይ ምንም አይነት ንጣፍ መቀየር አያስፈልግዎትም body።

<div class = "navbar navbar-static-top" > 
  ...
</div>

ምላሽ ሰጪ ናቭባር

እየፈራረሰ ምላሽ የሚሰጥ ናቭባርን ለመተግበር፣የናvbar ይዘትህን በያዘው ዳይቭ፣ .nav-collapse.collapse, እና የናቭባር መቀየሪያ አዝራሩን ጨምር .btn-navbar።

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "መያዣ" > 
 
      <!-- .btn-navbar ለተሰበሰበ የናቭባር ይዘት መቀያየር ጥቅም ላይ ይውላል -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- እንዲታይ ከፈለጉ ምልክቱን እዚያ መተውዎን ያረጋግጡ -->
      <a class = "brand" href = "#" > የፕሮጀክት ስም </a>  
 
      <!-- የሚፈልጉትን ሁሉ በ940 ፒክስል ወይም ከዚያ በታች ተደብቀዋል፣ እዚህ ውስጥ ያስቀምጡ -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav፣ .navbar-search፣ .navbar-ቅጽ፣ ወዘተ -->
      </div>
 
    </div>
  </div>
</div>

የተገለበጠ ልዩነት

በማከል የናቭባርን መልክ ያስተካክሉ .navbar-inverse።

<div class = "navbar 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 = "ገባሪ" > ውሂብ </li> 
</ul>

መደበኛ pagination

በRdio አነሳሽነት ቀላል ፔጃኒሽን፣ ለመተግበሪያዎች እና ለፍለጋ ውጤቶች ምርጥ። ትልቁ ብሎክ ለማለፍ ከባድ ነው፣ በቀላሉ ሊሰፋ የሚችል እና ትልቅ ጠቅታ ቦታዎችን ያቀርባል።

<div class = "pagination" > 
  <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የአሁኑን ገጽ ለማመልከት ይጠቀሙ ።

<div class = "pagination" > 
  <ul>
    <li class = "ተሰናክሏል" ><a href = "#" > « </a></li>  
    <li class = "ንቁ" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

የታቀዱ ቅጦችን በማቆየት የጠቅ ተግባርን ለማስወገድ እንደ አማራጭ ንቁ ወይም የተሰናከሉ መልህቆችን ለተወሰነ ጊዜ መለዋወጥ ይችላሉ።

<div class = "pagination" > 
  <ul>
    <li class = "ተሰናክሏል" ><span> « </span></li> 
    <li class = "ገባሪ" ><span> 1 </span></li> 
    ...
  </ul>
</div>

መጠኖች

ትልቅ ወይም ትንሽ ፔጃኒሽን ይፈልጋሉ? አክል .pagination-large፣፣ .pagination-smallወይም .pagination-miniለተጨማሪ መጠኖች።

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

አሰላለፍ

የገጽታ ማያያዣዎችን አሰላለፍ ለመቀየር ከሁለቱ አማራጭ ክፍሎች አንዱን ያክሉ .pagination-centered፡ እና .pagination-right.

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

ፔጀር

ፈጣን ቀዳሚ እና ቀጣይ አገናኞች ለቀላል ፔጅ አተገባበር በብርሃን ምልክት ማድረጊያ እና ቅጦች። እንደ ብሎጎች ወይም መጽሔቶች ላሉ ቀላል ጣቢያዎች በጣም ጥሩ ነው።

ነባሪ ምሳሌ

በነባሪ, ፔጀር አገናኞችን ያገናኛል.

<ul class = "ፔጀር" > 
  <li><a href = "#" > ያለፈው </a></li> 
  <li><a href = "#" > ቀጣይ </a></li> 
</ul>

የተጣጣሙ አገናኞች

በአማራጭ፣ እያንዳንዱን ማገናኛ ወደ ጎኖቹ ማመጣጠን ትችላለህ፡-

<ul class = "ፔጀር" > 
  <li class = "የቀድሞ" > 
    <a href = "#" > ← የቆዩ </a> 
  </li>
  <li class = "ቀጣይ" > 
    <a href = "#" > አዲስ → </a> 
  </li>
</ul>

አማራጭ የአካል ጉዳተኛ ሁኔታ

የፔጀር ማገናኛዎች ከገጽ ወረቀቱ የአጠቃላይ .disabledመገልገያ ክፍልንም ይጠቀማሉ።

<ul class = "ፔጀር" > 
  <li class = "የቀድሞው ተሰናክሏል" > 
    <a href = "#" > ← የቆዩ </a> 
  </li>
  ...
</ul>

መለያዎች

ባጆች

በቀላሉ ሊሰበሰብ የሚችል

ለቀላል ትግበራ፣ :emptyምንም ይዘት ከሌለ መለያዎች እና ባጆች በቀላሉ (በ CSS መራጭ በኩል) ይወድቃሉ።

ጀግና ክፍል

በጣቢያዎ ላይ ቁልፍ ይዘትን ለማሳየት ቀላል ክብደት ያለው ተለዋዋጭ አካል። በግብይት እና በይዘት-ከባድ ጣቢያዎች ላይ በደንብ ይሰራል።

<div class = "ጀግና-ዩኒት" > 
  <h1> ርዕስ </h1>
  <p> የመለያ መስመር </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      ተጨማሪ እወቅ
    </a>
  </p>
</div>

የገጽ ርዕስ

አንድ ቀላል ሼል h1በተገቢው ቦታ ለማስወጣት እና የይዘት ክፍሎችን በገጽ ላይ። h1ነባሪውን ፣ ኤለመንቱን smallእና ሌሎች ብዙ ክፍሎችን (ከተጨማሪ ቅጦች ጋር) መጠቀም ይችላል።

<div class = "ገጽ-ራስጌ" > 
  <h1> የምሳሌ ገጽ ራስጌ < ትንሽ> ለርዕስ ንኡስ ጽሑፍ </small></h1>
</div>

ነባሪ ድንክዬዎች

በነባሪ የ Bootstrap ጥፍር አከሎች የተገናኙ ምስሎችን በትንሹ የሚፈለገው ምልክት ለማሳየት የተነደፉ ናቸው።

በከፍተኛ ሁኔታ ሊበጅ የሚችል

ከትንሽ ተጨማሪ ምልክት ማድረጊያ፣ እንደ አርእስት፣ አንቀጾች ወይም አዝራሮች ያሉ ማንኛውንም አይነት HTML ይዘት ወደ ድንክዬዎች ማከል ይቻላል።

ለምን ድንክዬዎችን ይጠቀሙ

ጥፍር አከሎች (ከዚህ .media-gridበፊት እስከ v1.4 ድረስ) ለፎቶዎች ወይም ቪዲዮዎች ፍርግርግ፣ የምስል ፍለጋ ውጤቶች፣ የችርቻሮ ምርቶች፣ ፖርትፎሊዮዎች እና ሌሎችም ምርጥ ናቸው። አገናኞች ወይም የማይንቀሳቀስ ይዘት ሊሆኑ ይችላሉ።

ቀላል ፣ ተለዋዋጭ ምልክት ማድረጊያ

ድንክዬ ምልክት ማድረጊያ ቀላል ነው - ulከማንኛውም liንጥረ ነገሮች ብዛት የሚፈለገው ብቻ ነው። እንዲሁም ይዘትዎን ለመጠቅለል ትንሽ ተጨማሪ ምልክት ያለው ማንኛውንም አይነት ይዘት እንዲኖር የሚያስችል እጅግ በጣም ተለዋዋጭ ነው።

የፍርግርግ አምድ መጠኖችን ይጠቀማል

በመጨረሻም፣ ጥፍር አከሎች ክፍል ያሉትን የፍርግርግ ስርዓት ክፍሎችን ይጠቀማል—እንደ .span2ወይም .span3— የጥፍር አክል ልኬቶችን ለመቆጣጠር።

ምልክት ማድረጊያ

ቀደም ሲል እንደተገለፀው ለትንንሽ ምስሎች አስፈላጊው ምልክት ቀላል እና ቀጥተኛ ነው። ለተገናኙ ምስሎች ነባሪውን ማዋቀር እዚህ አለ ፡-

<ul class = "ድንክዬዎች" > 
  <li class = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = " holder.js /300x200" alt = ""  
    </a>
  </li>
  ...
</ul>

በጥፍር አከሎች ውስጥ ላለ ብጁ የኤችቲኤምኤል ይዘት፣ ምልክቱ በትንሹ ይቀየራል። የማገድ ደረጃ ይዘትን በማንኛውም ቦታ ለመፍቀድ፣ በሚከተለው መልኩ <a>እንቀይራለን <div>፡-

<ul class = "ድንክዬዎች" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = " holder.js /300x200" alt = ""  
      <h3> ድንክዬ መለያ </h3>
      <p> ድንክዬ መግለጫ ጽሁፍ... </p>
    </div>
  </li>
  ...
</ul>

ተጨማሪ ምሳሌዎች

ለእርስዎ በሚገኙ የተለያዩ የፍርግርግ ክፍሎች ሁሉንም አማራጮችዎን ያስሱ። እንዲሁም የተለያዩ መጠኖችን መቀላቀል እና ማዛመድ ይችላሉ.

ነባሪ ማንቂያ

.alertለመሠረታዊ የማስጠንቀቂያ መልእክት ማንኛውንም ጽሑፍ እና አማራጭ የማሰናበት ቁልፍ ጠቅልለው ።

<div class = "ማስጠንቀቂያ" > 
  <button type = "button" class = "ዝጋ" data-dismiss = "ማስጠንቀቂያ" > × </button>   
  <strong> ማስጠንቀቂያ! </strong> እራስህን ፈትሽ፣ በጣም ጥሩ አይደለህም።
</div>

አዝራሮችን አሰናብት

የሞባይል ሳፋሪ እና የሞባይል ኦፔራ አሳሾች ከባህሪው በተጨማሪ መለያ ሲጠቀሙ ማንቂያዎችን ማሰናበት data-dismiss="alert"ይፈልጋሉ ።href="#"<a>

<a href = "#" ክፍል = "ዝጋ" data-dismiss = "ማስጠንቀቂያ" > × </a>   

<button>በአማራጭ፣ ለሰነዶቻችን ለማድረግ የመረጥነውን ከውሂቡ ባህሪ ጋር አንድ አካል መጠቀም ይችላሉ ። ሲጠቀሙ <button>፣ ማካተት አለቦት type="button"ወይም ቅጾችዎ ላያስገቡ ይችላሉ።

<button type = "button" class = "ዝጋ" data-dismiss = "ማስጠንቀቂያ" > × </button>   

ማንቂያዎችን በጃቫስክሪፕት አሰናብት

ፈጣን እና ቀላል ማንቂያዎችን ለማሰናበት ማንቂያዎችን jQuery ተሰኪን ይጠቀሙ ።

አማራጮች

ረዘም ላለ መልእክት በማንቂያ ማሸጊያው ላይ ከላይ እና ከታች ያለውን ንጣፍ በመጨመር ይጨምሩ .alert-block።

<div class = "የማስጠንቀቂያ ማንቂያ-ብሎክ" > 
  <button type = "button" class = "ዝጋ" data-dismiss = "ማስጠንቀቂያ" > × </button>   
  <h4> ማስጠንቀቂያ! </ h4>
  እራስህን በደንብ ፈትሽ፣ አይደለህም…
</div>

አውዳዊ አማራጮች

የማንቂያውን ትርጉም ለመቀየር አማራጭ ክፍሎችን ያክሉ።

ስህተት ወይም አደጋ

<div class = "የማስጠንቀቂያ ማንቂያ-ስህተት" > 
  ...
</div>

ስኬት

<div class = "የማንቂያ ማንቂያ-ስኬት" > 
  ...
</div>

መረጃ

<div class = "የማንቂያ ማንቂያ-መረጃ" > 
  ...
</div>

ምሳሌዎች እና ምልክት ማድረጊያ

መሰረታዊ

ነባሪ የሂደት አሞሌ ከአቀባዊ ቅልመት ጋር።

<div class = "ግስጋሴ" > 
  <div class = "ባር" style = " ስፋት : 60 %፤ " ></div>   
</div>

የተራቆተ

የጭረት ውጤት ለመፍጠር ቅልመትን ይጠቀማል። በIE7-8 ውስጥ አይገኝም።

<div class = "የእድገት ግስጋሴ-የተዘረጋ" > 
  <div class = "ባር" style = " ስፋት : 20 %፤ " ></div>   
</div>

የታነመ

ገመዶቹን ከቀኝ ወደ ግራ ለማንቃት .activeያክሉ ። .progress-stripedበሁሉም የ IE ስሪቶች ውስጥ አይገኝም።

<div class = "የእድገት ግስጋሴ-ስትሪፕድ ንቁ" > 
  <div class = "ባር" style = " ስፋት : 40 %፤ " ></div>   
</div>

የተቆለለ

.progressእነሱን ለመደርደር ብዙ አሞሌዎችን ወደ ተመሳሳይ ያስቀምጡ።

<div class = "ግስጋሴ" > 
  <div class = "bar bar-success" style = " ስፋት : 35 %; " ></div>   
  <div class = "ባር ባር-ማስጠንቀቂያ" style = " ስፋት : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " ስፋት : 10 %; " ></div>   
</div>

አማራጮች

ተጨማሪ ቀለሞች

የሂደት አሞሌዎች ለተመሳሳይ ቅጦች የተወሰኑትን ተመሳሳይ ቁልፍ እና የማንቂያ ክፍሎችን ይጠቀማሉ።

<div class = "የሂደት ግስጋሴ-መረጃ" > 
  <div class = "ባር" style = " ስፋት : 20 % " ></div>   
</div>
<div class = "የሂደት ግስጋሴ-ስኬት" > 
  <div class = "ባር" style = " ስፋት : 40 % " ></div>   
</div>
<div class = "የሂደት እድገት-ማስጠንቀቂያ" > 
  <div class = "ባር" style = " ስፋት : 60 % " ></div>   
</div>
<div class = "የሂደት እድገት-አደጋ" > 
  <div class = "ባር" style = " ስፋት : 80 % " ></div>   
</div>

የተራቆቱ አሞሌዎች

ከጠንካራዎቹ ቀለሞች ጋር በሚመሳሰል መልኩ፣ የተለያዩ ባለገመድ የሂደት አሞሌዎች አሉን።

<div class = "progress progress-info progress-striped" > 
  <div class = "ባር" style = " ስፋት : 20 % " ></div>   
</div>
<div class = "የሂደት ግስጋሴ-ስኬት ግስጋሴ-የተራቀቀ" > 
  <div class = "ባር" style = " ስፋት : 40 % " ></div>   
</div>
<div class = "የሂደት ግስጋሴ-ማስጠንቀቂያ ግስጋሴ-የተራቀቀ" > 
  <div class = "ባር" style = " ስፋት : 60 % " ></div>   
</div>
<div class = "የሂደት ግስጋሴ-አደጋ ግስጋሴ-የተቆራረጠ" > 
  <div class = "ባር" style = " ስፋት : 80 % " ></div>   
</div>

የአሳሽ ድጋፍ

የሂደት አሞሌዎች ሁሉንም ውጤቶቻቸውን ለማሳካት CSS3 ቅልመትን፣ ሽግግሮችን እና እነማዎችን ይጠቀማሉ። እነዚህ ባህሪያት በIE7-9 ወይም በቀድሞ የፋየርፎክስ ስሪቶች ውስጥ አይደገፉም።

ከኢንተርኔት ኤክስፕሎረር 10 እና ኦፔራ 12 ቀደም ያሉ ስሪቶች እነማዎችን አይደግፉም።

ከጽሑፋዊ ይዘት ጋር በግራ ወይም በቀኝ የተሰለፈ ምስል የሚያሳዩ የተለያዩ አይነት ክፍሎችን (እንደ ብሎግ አስተያየቶች፣ ትዊቶች፣ ወዘተ) ለመገንባት ረቂቅ የነገር ቅጦች።

ነባሪ ምሳሌ

ነባሪው ሚዲያ የሚዲያ ነገርን (ምስሎች፣ ቪዲዮ፣ ኦዲዮ) ከይዘት እገዳ ግራ ወይም ቀኝ ለመንሳፈፍ ያስችላል።

የሚዲያ ርዕስ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።

የሚዲያ ርዕስ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።

የሚዲያ ርዕስ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።

<div class = "ሚዲያ" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "ሚዲያ-አካል" > 
    <h4 class = "ሚዲያ-ርዕስ" > የሚዲያ ርዕስ </h4> 
    ...
 
    <!-- የተከተተ የሚዲያ ነገር -->
    <div class = "ሚዲያ" > 
      ...
    </div>
  </div>
</div>

የሚዲያ ዝርዝር

ከትንሽ ተጨማሪ ምልክት ማድረጊያ ጋር፣ በዝርዝሩ ውስጥ ሚዲያን መጠቀም ይችላሉ (ለአስተያየት ክሮች ወይም ለጽሁፎች ዝርዝሮች ይጠቅማል)።

<ul class = "ሚዲያ-ዝርዝር" > 
  <li class = "ሚዲያ" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "ሚዲያ-አካል" > 
      <h4 class = "ሚዲያ-ርዕስ" > የሚዲያ ርዕስ </h4> 
      ...
 
      <!-- የተከተተ የሚዲያ ነገር -->
      <div class = "ሚዲያ" > 
        ...
     </div>
    </div>
  </li>
</ul>

ዌልስ

ጉድጓዱን የማስገባት ውጤት ለመስጠት በአንድ ንጥረ ነገር ላይ እንደ ቀላል ተጽእኖ ይጠቀሙ።

<div class = "ደህና" > 
  ...
</div>

አማራጭ ክፍሎች

መቆጣጠሪያ ፓዲንግ እና የተጠጋጋ ማዕዘኖች ከሁለት አማራጭ መቀየሪያ ክፍሎች ጋር።

<div class = "በደንብ ትልቅ" > 
  ...
</div>

<div class = "ደህና-ትንሽ" > 
  ...
</div>

አዶ ዝጋ

እንደ ሞዳሎች እና ማንቂያዎች ያሉ ይዘቶችን ለማሰናበት አጠቃላይ መዝጊያ አዶን ይጠቀሙ።

<button class = "ዝጋ" > × </button> 

href="#"መልህቅን መጠቀም ከፈለግክ የ iOS መሳሪያዎች ለጠቅታ ክስተቶች ያስፈልጋቸዋል ።

<a class = "close" href = "#" > × </a>  

የረዳት ክፍሎች

ለአነስተኛ ማሳያ ወይም የባህሪ ማስተካከያ ቀላል፣ ትኩረት የተደረገባቸው ክፍሎች።

.መጎተት-ግራ

አንድ ኤለመንት ወደ ግራ ተንሳፈፈ

ክፍል = "መጎተት-ግራ"

. ጎትት - ግራ {
  መንሳፈፍ ፡ ግራ ; _
}

.መጎተት-ቀኝ

አንድ ኤለመንት ወደ ቀኝ አንሳፈፈ

ክፍል = "በቀኝ መጎተት"

. ጎትት - ቀኝ {
  መንሳፈፍ ፡ ትክክል ; _
}

.ድምጸ-ከል ተደርጓል

የአንድን ንጥረ ነገር ቀለም ቀይር#999

ክፍል = "ድምጸ-ከል የተደረገ"

. ድምጸ-ከል ተደርጓል {
  ቀለም : # 999; 
}

.ግልጽ

floatበማንኛውም ንጥረ ነገር ላይ ያጽዱ

ክፍል = "ግልጽ"

. ግልጽ ማስተካከያ {
  * አጉላ : 1 ; 
  &: በፊት ,
  &: በኋላ {
    ማሳያ : ጠረጴዛ ;
    ይዘት : "" ; 
  }
  &: በኋላ {
    ግልጽ : ሁለቱም ;
  }
}