የአዝራር ቡድኖች

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

ምርጥ ልምዶች

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

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

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

ነባሪ ምሳሌ

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

የመሳሪያ አሞሌ ምሳሌ

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

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

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

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

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

ወደላይ ይመራሉ።

CSS ለአዝራር ቡድኖች በተለየ ፋይል ውስጥ ነው button-groups.less.

የአዝራሮች ተቆልቋይ

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

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

ምሳሌ ምልክት ማድረግ

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

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    ድርጊት
    <span class = "caret" ></span> 
  </a>
  <ul class = "ተቆልቋይ-ሜኑ" > 
    <!-- ተቆልቋይ ምናሌ አገናኞች -->
  </ul>
</div>

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

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

ምሳሌ ምልክት ማድረግ

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > ድርጊት </a>  
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <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>መለያ ከክፍል ጋር ያክሉ እና ተዘጋጅተዋል።

የናቪ ዝርዝር ምሳሌ

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

ምን ይካተታል።

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

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

ሊታወቅ የሚችል ምሳሌ

.nav-tabsትሮችን ለመሥራት፣ በሌላ ዲቪ ከክፍል ጋር ያጠቅልሉት .tabbable።

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

Navbar ስካፎልዲንግ

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

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

ቋሚ ናቭባር

የ navbar መመልከቻው አናት ላይ እንዲስተካከል ለማድረግ ወደ .navbar-fixed-topውጫዊው ዳይቭ ጨምር .navbar።

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

በእርስዎ CSS ውስጥ፣ 40 ፒክስል ወይም ከዚያ በላይ የሆነ ንጣፍ ወደ የእርስዎ <body>. ይህንን ከዋና ቡትስትራፕ CSS በኋላ እና ከአማራጭ ምላሽ ሰጪ CSS በፊት ማከልዎን ያረጋግጡ።

የምርት ስም

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

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

የፍለጋ ቅጽ

.navbar-searchየፍለጋ ቅጾች በ navbar ውስጥ ከክፍል ጋር ብጁ ቅጦች ይቀበላሉ ። ለማስማማት ያካትቱ .pull-leftወይም .pull-rightላይ ።form

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

ጃቫስክሪፕት → ያግኙ

ለምን ተጠቀምባቸው

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

ምሳሌዎች

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

• ቤት

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

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

ምልክት ማድረጊያ

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

<ul class = "የዳቦ ፍርፋሪ" > 
  <li>
    <a href = "#" > ቤት </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > ቤተ-መጽሐፍት </a> <span class = "divider" > / </span>   
  </li>
  <li class = "ንቁ" > 
    <a href = "#" > ውሂብ </a> 
  </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>

ስለ ፔጀር

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

ነባሪ ምሳሌ

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

• ቀዳሚ
• ቀጥሎ

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

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

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

<div class = "የማስጠንቀቂያ ማንቂያ-ብሎክ" > 
  <a class = "ዝጋ" data-dismiss = "ማስጠንቀቂያ" > × </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>

የታነመ

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

<div class = "የሂደት እድገት-አደጋ 
     በሂደት ላይ ያለ ንቁ" >
  <div class = "ባር" 
       style = " ስፋት ፡ 40 %፤ " > </div> 
</div>

ተጨማሪ ቀለሞች

የሂደት አሞሌዎች እንደ አዝራሮች እና ለተመሳሳይ የቅጥ ማንቂያዎች አንዳንድ ተመሳሳይ የክፍል ስሞችን ይጠቀማሉ።

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

በአማራጭ፣ የLESS ፋይሎችን ማበጀት እና የእራስዎን ቀለሞች እና መጠኖች ማሽከርከር ይችላሉ።

ባህሪ

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

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

የአሳሽ ድጋፍ

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

ኦፔራ በዚህ ጊዜ እነማዎችን አይደግፍም።

ዌልስ

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

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

ባጆች

ላልተነበበ ቆጠራ ወይም እንደ ቀላል አመልካች በአንድ አካል ላይ ባጅ ይጠቀሙ።

<span class = "ባጅ" > 3 </div> 

አዶ ዝጋ

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

×

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