የአዝራር ቡድኖች

ብዙ አዝራሮችን እንደ አንድ የተዋሃደ አካል ለመቀላቀል የአዝራር ቡድኖችን ይጠቀሙ። በተከታታይ <a>ወይም <button>በንጥረ ነገሮች ይገንቧቸው።

ምርጥ ልምዶች

የአዝራር ቡድኖችን እና የመሳሪያ አሞሌዎችን ለመጠቀም የሚከተሉትን መመሪያዎች እንመክራለን።

• ሁልጊዜ አንድ አይነት አካል በአንድ አዝራር ቡድን ውስጥ ይጠቀሙ <a>ወይም <button>.
• በተመሳሳይ የአዝራር ቡድን ውስጥ የተለያየ ቀለም ያላቸውን አዝራሮች አትቀላቅሉ።
• አዶዎችን ከጽሑፍ በተጨማሪ ወይም ምትክ ይጠቀሙ፣ ነገር ግን አስፈላጊ ሆኖ ሲገኝ alt እና ርዕስ ጽሑፍ ማካተትዎን ያረጋግጡ።

ተቆልቋይ ያላቸው ተዛማጅ አዝራር ቡድኖች (ከዚህ በታች ይመልከቱ) ተለይተው መጠራት አለባቸው እና ሁልጊዜ የታሰበ ባህሪን ለማመልከት ተቆልቋይ እንክብካቤን ያካትቱ።

ነባሪ ምሳሌ

ኤችቲኤምኤል በመልህቅ መለያ አዝራሮች የተገነባውን መደበኛ የአዝራር ቡድን እንዴት እንደሚፈልግ እነሆ፦

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

የመሳሪያ አሞሌ ምሳሌ

ለተጨማሪ ውስብስብ አካላት <div class="btn-group">ስብስቦችን ያዋህዱ ።<div class="btn-toolbar">

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

የአመልካች ሳጥን እና የሬዲዮ ጣዕሞች

የአዝራር ቡድኖች እንዲሁ እንደ ራዲዮ ሊሰሩ ይችላሉ፣ አንድ አዝራር ብቻ ገባሪ ሊሆን ይችላል፣ ወይም አመልካች ሳጥኖች፣ የትኛውም የአዝራሮች ብዛት ንቁ ሊሆን ይችላል። ለዚያ የጃቫስክሪፕት ሰነዶችን ይመልከቱ ።

ጃቫስክሪፕቱን አግኝ »

መውረድ በአዝራር ቡድኖች

ቀና በል! ተቆልቋይ ያሏቸው አዝራሮች በተናጥል ለትክክለኛው አተረጓጎም .btn-groupውስጥ በራሳቸው መታጠቅ አለባቸው ።.btn-toolbar

አጠቃላይ እይታ እና ምሳሌዎች

የተቆልቋይ ምናሌን በ ውስጥ በማስቀመጥ .btn-groupእና ተገቢውን የሜኑ ማርክ በማቅረብ ለማስነሳት ማንኛውንም ቁልፍ ይጠቀሙ።

ምሳሌ ምልክት ማድረግ

ከአዝራር ቡድን ጋር በሚመሳሰል መልኩ፣ የእኛ ምልክት ማድረጊያ መደበኛ የአዝራር ምልክት ማድረጊያን ይጠቀማል፣ ነገር ግን ስልቱን ለማጣራት እና የBootstrap ተቆልቋይ jQuery ፕለጊንን ለመደገፍ በጥቂት ተጨማሪዎች።

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

ምሳሌ ምልክት ማድረግ

እንደ የተለየ ተቆልቋይ ቀስቅሴ የሚሰራ ሁለተኛ አዝራር እርምጃ ለማቅረብ በተለመደው የአዝራሮች ተቆልቋይ ላይ እናሰፋለን።

<div class = "btn-group" > 
  <button class = "btn" > ድርጊት </button> 
  <button class = "btn 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 ።

መቼ መጠቀም

ትሮች እና እንክብሎች ለይዘት ክፍሎች ወይም በተዛማጅ የይዘት ገፆች መካከል ማሰስ ጥሩ ናቸው።

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

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

መሰረታዊ ትሮች

መደበኛ <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>

እንዴት መቆለል እንደሚቻል

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

የተደረደሩ ትሮች

• ቤት
• መገለጫ
• መልዕክቶች

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

የተቆለሉ እንክብሎች

• ቤት
• መገለጫ
• መልዕክቶች

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

የበለጸጉ ምናሌዎች ቀላል ተደርገዋል።

በ Bootstrap ትሮች እና ክኒኖች ውስጥ ያሉ ተቆልቋይ ምናሌዎች እጅግ በጣም ቀላል ናቸው እና ትንሽ ተጨማሪ HTML እና ቀላል ክብደት ያለው jQuery ፕለጊን ያስፈልጋቸዋል።

በ Bootstrap ውስጥ ተቆልቋይ ማስጀመር ላይ ያሉትን ሰነዶች ለማንበብ ወደ ጃቫስክሪፕት ገጽ ይሂዱ።

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

• ቤት
• እገዛ
• ዝቅ በል
  • ድርጊት
  • ሌላ እርምጃ
  • እዚህ ሌላ ነገር
  • የተለየ አገናኝ

<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 ውስጥ እንደ ፈላጊ ባሉ የጎን አሞሌዎች ውስጥ በጣም ጥሩ ጥቅም ላይ ይውላሉ።

በመዋቅር የተገነቡት ልክ እንደ ታብ እና ክኒኖች ባሉበት የኮር ናቭ ስታይል ላይ ነው፣ ስለዚህ አጠቃቀም እና ማበጀት ቀጥተኛ ናቸው።

ከአዶዎች ጋር

የናቭ ዝርዝሮችም በአዶዎች ለማስታጠቅ ቀላል ናቸው። ተገቢውን <i>መለያ ከክፍል ጋር ያክሉ እና ተዘጋጅተዋል።

አግድም መከፋፈያዎች

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

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

የናቪ ዝርዝር ምሳሌ

የአገናኞችን ዝርዝር ይውሰዱ እና ያክሉ 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>

ምሳሌ ከአዶዎች ጋር

ተመሳሳይ ምሳሌ፣ ግን <i>ከአዶዎች መለያዎች ጋር።

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      ቤተ መፃህፍት
    </a>
  </li>
  ...
</ul>

ምን ይካተታል።

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

በመካከላቸው መለወጥ ቀላል ነው እና በጣም ትንሽ ማርክ መቀየር ብቻ ነው የሚያስፈልገው።

በትሮች ውስጥ ደብዝዝ

ትሮች እንዲደበዝዙ ለማድረግ .fadeበእያንዳንዱ ላይ ያክሉ .tab-pane።

jQuery ፕለጊን ያስፈልገዋል

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

ጃቫስክሪፕት → ያግኙ

ሊታወቅ የሚችል ምሳሌ

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

በቀኝ ወይም በግራ ለተሰለፉ ትሮች፣ ጠቅልለው .nav-tabsእና .tab-contentውስጥ .tabbable።

ቀጥ ያለ ምልክት ማድረጊያ

ሊታዩ የሚችሉ ትሮችን መጠቀም መጠቅለያ ዳይቭ፣ የታብ ስብስብ እና የይዘት መቃኖች ስብስብ ያስፈልገዋል።

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

ከታች ያሉት ትሮች

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

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

Navbar ስካፎልዲንግ

ናቭባር ለቋሚ ወይም ቋሚ ማሳያ በደንብ ለማዋቀር ጥቂት ዳይቪሶችን ብቻ ይፈልጋል።

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "መያዣ" > 
      ...
    </div>
  </div>
</div>

ቋሚ ናቭባር

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

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

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

ናቭባርን ሲሰቅሉ ከስር ያለውን የተደበቀ ቦታ ግምት ውስጥ ማስገባትዎን ያስታውሱ። ወደ 40 ፒክስል ወይም ከዚያ በላይ ንጣፍ ያክሉ <body>። ይህንን ከዋና ቡትስትራፕ CSS በኋላ እና ከአማራጭ ምላሽ ሰጪ CSS በፊት ማከልዎን ያረጋግጡ።

የምርት ስም

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

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

በ navbar ውስጥ ቅጾች

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

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

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

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

አማራጭ ምላሽ ሰጪ ልዩነት

በእርስዎ የላይኛው አሞሌ ላይ ባለው የይዘት መጠን ላይ በመመስረት፣ ምላሽ ሰጪ አማራጮችን መተግበር ይፈልጉ ይሆናል። ይህንን ለማድረግ የናቭ ይዘትዎን በያዘ ዲቪ፣ .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" > 
        <!-- .nav፣ .navbar-search፣ .navbar-ቅጽ፣ ወዘተ -->
      </div>
 
    </div>
  </div>
</div>

የናቭ ማገናኛዎች

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

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

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

.pull-leftናቭ፣ የፍለጋ ቅፅ ወይም ጽሑፍ ለማቀናጀት .pull-rightየፍጆታ ክፍሎችን ይጠቀሙ። ሁለቱም ክፍሎች በተጠቀሰው አቅጣጫ የሲኤስኤስ ተንሳፋፊ ይጨምራሉ።

የተቆልቋይ ምናሌዎችን በማከል ላይ

ተቆልቋይ እና ተቆልቋይ ወደ ባህር ኃይል መጨመር እጅግ በጣም ቀላል ነው፣ ግን የእኛን ጃቫስክሪፕት ፕለጊን መጠቀምን ይጠይቃል ።

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

ጃቫስክሪፕት → ያግኙ

በ navbar ውስጥ ጽሑፍ

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

ለምን ተጠቀምባቸው

የዳቦ ፍርፋሪ ዳሰሳ ለተጠቃሚዎች በመተግበሪያ ወይም ጣቢያ ውስጥ የት እንዳሉ ለማሳየት ያገለግላል፣ነገር ግን ለዋና አሰሳ አይደለም። አጠቃቀማቸው በጣም ውጤታማ እንዲሆን ትንሽ እና አጭር ያድርጉት።

ምሳሌዎች

በብዙ ገፆች ላይ ሊታይ ስለሚችል አንድ ነጠላ ምሳሌ ይታያል።

• ቤት

• መነሻ /
• ቤተ መፃህፍት

• መነሻ /
• ቤተ መጻሕፍት /
• ውሂብ

ምልክት ማድረጊያ

ኤችቲኤምኤል የእርስዎ መደበኛ ያልታዘዘ ዝርዝር ከአገናኞች ጋር ነው።

<ul class = "የዳቦ ፍርፋሪ" > 
  <li>
    <a href = "#" > ቤት </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > ላይብረሪ </a> <span class = "divider" > / </span>   
  </li>
  <li class = "ገባሪ" > ውሂብ </li> 
</ul>

መቼ መጠቀም

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

የገጹ አገናኞች

ማገናኛዎች ሊበጁ የሚችሉ እና ከትክክለኛው ክፍል ጋር በበርካታ ሁኔታዎች ውስጥ ይሰራሉ. .disabledላልተጫኑ አገናኞች እና .activeለአሁኑ ገጽ።

ተለዋዋጭ አሰላለፍ

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

ምሳሌዎች

ነባሪው የገጽታ ክፍል ተለዋዋጭ እና በተለያዩ ልዩነቶች ውስጥ ይሰራል።

ምልክት ማድረጊያ

በ a <div>ውስጥ ተጠቅልሎ፣ ፔጅኔሽን ሀ ብቻ ነው <ul>።

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > ቀዳሚ </a></li> 
    <li class = "ንቁ" > 
      <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 = "#" > ቀጣይ </a></li> 
  </ul>
</div>

ስለ ፔጀር

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

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

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

ነባሪ ምሳሌ

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

• ቀዳሚ
• ቀጥሎ

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

ስለ

ባጆች አመልካች ወይም ቆጠራን ለማሳየት ትንሽ፣ ቀላል አካላት ናቸው። እንደ Mail.app ባሉ የኢሜይል ደንበኞች ወይም በሞባይል መተግበሪያዎች ላይ የግፋ ማሳወቂያዎች በብዛት ይገኛሉ።

የሚገኙ ክፍሎች

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

ምልክት ማድረጊያ

ይዘትዎን በሚከተለው መንገድ ይሸፍኑት div፡-

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

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

<div class = "ገጽ-ራስጌ" > 
  <h1> የምሳሌ ገጽ ራስጌ </h1>
</div>

ነባሪ ድንክዬዎች

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

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

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

• 

  ድንክዬ መለያ

  Cras justo odio፣ dapibus ac facilisis in፣ egestas eget quam። Donec id elit non mi porta gravida እና eget metus። Nullam id dolor id nibh ultricies vehicula ut id elit.

  ድርጊት ድርጊት

• 

  ድንክዬ መለያ

  Cras justo odio፣ dapibus ac facilisis in፣ egestas eget quam። Donec id elit non mi porta gravida እና eget metus። Nullam id dolor id nibh ultricies vehicula ut id elit.

  ድርጊት ድርጊት

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

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

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

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

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

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

ምልክት ማድረጊያ

ቀደም ሲል እንደተገለፀው ለትንንሽ ምስሎች አስፈላጊው ምልክት ቀላል እና ቀጥተኛ ነው። ለተገናኙ ምስሎች ነባሪውን ማዋቀሩን ይመልከቱ ።

<ul class = "ድንክዬዎች" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "ድንክዬዎች" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> ድንክዬ መለያ </h5>
      <p> ድንክዬ መግለጫ ጽሑፍ እዚሁ... </p>
    </div>
  </li>
  ...
</ul>

ተጨማሪ ምሳሌዎች

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

እንደገና የተጻፈ የመሠረት ክፍል

በBootstrap 2፣ የመሠረት ክፍሉን ቀለል አድርገነዋል .alert፡ በምትኩ .alert-message። እንዲሁም የሚፈለገውን ዝቅተኛ ምልክት ቀንሰናል— <p>በነባሪነት አያስፈልግም፣ ውጫዊው ብቻ <div>።

ነጠላ የማንቂያ መልእክት

ያነሰ ኮድ ላለው የበለጠ ዘላቂ አካል፣ የብሎክ ማንቂያዎችን፣ ከተጨማሪ መጠቅለያ ጋር የሚመጡ መልዕክቶችን እና ብዙ ጽሁፍን የሚለይበትን ገጽታ አስወግደናል። ክፍሉም ወደ ተቀይሯል .alert-block.

በጃቫስክሪፕት ጥሩ ነው።

ቡትስትራፕ የማንቂያ መልዕክቶችን ከሚደግፍ ታላቅ jQuery ፕለጊን ጋር አብሮ ይመጣል፣ ይህም ማሰናበታቸውን ፈጣን እና ቀላል ያደርገዋል።

ተሰኪውን አግኝ »

ምሳሌ ማንቂያዎች

መልእክትዎን እና የአማራጭ የቅርብ አዶን በዲቪ ውስጥ ከቀላል ክፍል ጋር ይሸፍኑ።

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

ቀና በል! የ iOS መሣሪያዎች href="#"ማንቂያዎችን ለማሰናበት አንድ ያስፈልጋቸዋል። እሱን እና ለመልህቅ ቅርብ አዶዎች የውሂብ ባህሪ ማካተትዎን እርግጠኛ ይሁኑ። buttonበአማራጭ፣ ለሰነዶቻችን ለማድረግ የመረጥነውን ከውሂቡ ባህሪ ጋር አንድ አካል መጠቀም ይችላሉ ።

መደበኛውን የማንቂያ መልእክት በቀላሉ በሁለት አማራጭ ክፍሎች .alert-blockያራዝሙ፡ ለተጨማሪ ንጣፍ እና የጽሑፍ ቁጥጥሮች እና .alert-headingለተዛማጅ ርዕስ።

<div class = "የማስጠንቀቂያ ማንቂያ-ብሎክ" > 
  <a class = "close" data-dismiss = "ማስጠንቀቂያ" href = "#" > × </a>   
  <h4 class = "ማንቂያ-ርዕስ" > ማስጠንቀቂያ! </ h4> 
  እራስህን በደንብ ፈትሽ፣ አይደለህም…
</div>

ስህተት ወይም አደጋ

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

ስኬት

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

መረጃ

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

መሰረታዊ

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

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

የተራቆተ

የጭረት ውጤት ለመፍጠር ቅልመትን ይጠቀማል (አይ.አይ.)

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

የታነመ

የጭረት ምሳሌውን ወስዶ ይንቀሳቀሳል (አይ IE)።

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

ተጨማሪ ቀለሞች

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

የተራቆቱ አሞሌዎች

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

ባህሪ

የሂደት አሞሌዎች የCSS3 ሽግግሮችን ይጠቀማሉ፣ ስለዚህ በተለዋዋጭነት ስፋቱን በጃቫስክሪፕት ካስተካከሉ፣ ያለችግር መጠኑን ይቀየራል።

.activeክፍሉን ከተጠቀሙ ፣ .progress-stripedየሂደት አሞሌዎችዎ ከግራ ወደ ቀኝ ያሉትን ጅራቶች ያነባሉ።

የአሳሽ ድጋፍ

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

ኦፔራ እና IE በአሁኑ ጊዜ እነማዎችን አይደግፉም።

ዌልስ

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

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

አዶ ዝጋ

Use the generic close icon for dismissing content like modals and alerts.

×

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you rather use an anchor.

<a class="close" href="#">&times;</a>