አካላት

አሰሳን፣ ማንቂያዎችን፣ ብቅ-ባይን እና ሌሎችንም ለማቅረብ በደርዘን የሚቆጠሩ እንደገና ጥቅም ላይ ሊውሉ የሚችሉ ክፍሎች።

ምሳሌዎች

ሁለት መሠረታዊ አማራጮች, ከሁለት ተጨማሪ ልዩ ልዩነቶች ጋር.

ነጠላ አዝራር ቡድን

በ ውስጥ ተከታታይ አዝራሮችን .btnጠቅልል .btn-group

  1. <div class = "btn-group" >
  2. <button class = "btn" > ግራ </button>
  3. <button class = "btn" > መካከለኛ </button>
  4. <የአዝራር ክፍል = "btn" > ቀኝ </button>
  5. </div>

በርካታ የአዝራር ቡድኖች

ስብስቦችን ያጣምሩ<div class="btn-group"><div class="btn-toolbar">ለተጨማሪ ውስብስብ አካላት ስብስቦችን

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

አቀባዊ አዝራር ቡድኖች

የአዝራሮች ስብስብ በአግድም ሳይሆን በአቀባዊ የተደረደሩ እንዲታዩ ያድርጉ።

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

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

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

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

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

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

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

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. ድርጊት
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "ተቆልቋይ-ሜኑ" >
  7. <!-- ተቆልቋይ ምናሌ አገናኞች -->
  8. </ul>
  9. </div>

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

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

JavaScript ያስፈልገዋል

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

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


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

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > ድርጊት </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "ተቆልቋይ" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ተቆልቋይ-ሜኑ" >
  7. <!-- ተቆልቋይ ምናሌ አገናኞች -->
  8. </ul>
  9. </div>

መጠኖች

ተጨማሪውን የአዝራር ክፍሎችን .btn-mini.btn-smallወይም ለመጠኑ ተጠቀም .btn-large

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > ድርጊት </button>
  3. <button class = "btn btn-mini dropdown-toggle" data-toggle = "ተቆልቋይ" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ተቆልቋይ-ሜኑ" >
  7. <!-- ተቆልቋይ ምናሌ አገናኞች -->
  8. </ul>
  9. </div>

የተጣሉ ምናሌዎች

የተቆልቋይ ምናሌዎች እንዲሁ ነጠላ ክፍልን ወደ የቅርብ ወላጅ በማከል ከታች ወደ ላይ መቀየር ይችላሉ .dropdown-menu.caretከላይ ወደታች ሳይሆን ከታች ወደ ላይ ለመንቀሳቀስ የአቅጣጫውን አቅጣጫ ይገለብጣል እና ሜኑ ራሱ ይቀይረዋል።

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > መጣል </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "ተቆልቋይ" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "ተቆልቋይ-ሜኑ" >
  7. <!-- ተቆልቋይ ምናሌ አገናኞች -->
  8. </ul>
  9. </div>

መደበኛ pagination

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#" > ቀዳሚ </a></li>
  4. <li><a href = "#" > 1 </a></li>
  5. <li><a href = "#" > 2 </a></li>
  6. <li><a href = "#" > 3 </a></li>
  7. <li><a href = "#" > 4 ​​</a></li>
  8. <li><a href = "#" > 5 </a></li>
  9. <li><a href = "#" > ቀጣይ </a></li>
  10. </ul>
  11. </div>

አማራጮች

የተሰናከሉ እና ንቁ ግዛቶች

ማገናኛዎች ለተለያዩ ሁኔታዎች ሊበጁ የሚችሉ ናቸው። .disabledጠቅ ለማይችሉ አገናኞች እና .activeየአሁኑን ገጽ ለማመልከት ይጠቀሙ ።

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

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li class = "ተሰናክሏል" ><span> « </span></li>
  4. <li class = "ገባሪ" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

መጠኖች

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

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "pagination" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

አሰላለፍ

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

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

ፔጀር

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

ነባሪ ምሳሌ

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

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

የተጣጣሙ አገናኞች

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

  1. <ul class = "ፔጀር" >
  2. <li class = "የቀድሞ" >
  3. <a href = "#" > የቆዩ </a>
  4. </li>
  5. <li class = "ቀጣይ" >
  6. <a href = "#" > አዲስ → </a>
  7. </li>
  8. </ul>

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

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

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

መለያዎች

መለያዎች ምልክት ማድረጊያ
ነባሪ <span class="label">Default</span>
ስኬት <span class="label label-success">Success</span>
ማስጠንቀቂያ <span class="label label-warning">Warning</span>
አስፈላጊ <span class="label label-important">Important</span>
መረጃ <span class="label label-info">Info</span>
ተገላቢጦሽ <span class="label label-inverse">Inverse</span>

ባጆች

ስም ለምሳሌ ምልክት ማድረጊያ
ነባሪ 1 <span class="badge">1</span>
ስኬት 2 <span class="badge badge-success">2</span>
ማስጠንቀቂያ 4 <span class="badge badge-warning">4</span>
አስፈላጊ 6 <span class="badge badge-important">6</span>
መረጃ 8 <span class="badge badge-info">8</span>
ተገላቢጦሽ 10 <span class="badge badge-inverse">10</span>

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

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

ጀግና ክፍል

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

ሰላም ልዑል!

ይህ ቀላል የጀግና አሃድ ነው፣ ለቀረበ ይዘት ወይም መረጃ ተጨማሪ ትኩረት ለመጥራት ቀላል የጃምቦሮን አይነት አካል ነው።

ተጨማሪ እወቅ

  1. <div class = "ጀግና-ዩኒት" >
  2. <h1> ርዕስ </h1>
  3. <p> የመለያ መስመር </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. ተጨማሪ እወቅ
  7. </a>
  8. </p>
  9. </div>

የገጽ ርዕስ

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

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

ነባሪ ድንክዬዎች

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

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

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

  • 300x200

    ድንክዬ መለያ

    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.

    ድርጊት ድርጊት

  • 300x200

    ድንክዬ መለያ

    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.

    ድርጊት ድርጊት

  • 300x200

    ድንክዬ መለያ

    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— የጥፍር አክል ልኬቶችን ለመቆጣጠር።

ምልክት ማድረጊያ

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

  1. <ul class = "ድንክዬዎች" >
  2. <li class = "span4" >
  3. <a href = "#" class = "thumbnail" >
  4. <img data-src = " holder.js /300x200" alt = ""
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "ድንክዬዎች" >
  2. <li class = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = " holder.js /300x200" alt = ""
  5. <h3> ድንክዬ መለያ </h3>
  6. <p> ድንክዬ መግለጫ ጽሁፍ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

ተጨማሪ ምሳሌዎች

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

ነባሪ ማንቂያ

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

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

አዝራሮችን አሰናብት

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

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

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

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

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

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


አማራጮች

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

ማስጠንቀቂያ!

እራስህን ፈትሽ በጣም ጥሩ አይደለህም። ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ። Praesent commodo cursus magna, vel selerisque nisl consectetur እና.

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

አውዳዊ አማራጮች

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

ስህተት ወይም አደጋ

ኧረ ተው! ጥቂት ነገሮችን ይቀይሩ እና እንደገና ለማስገባት ይሞክሩ።
  1. <div class = "የማስጠንቀቂያ ማንቂያ-ስህተት" >
  2. ...
  3. </div>

ስኬት

ጥሩ ስራ! ይህን አስፈላጊ የማንቂያ መልእክት በተሳካ ሁኔታ አንብበሃል።
  1. <div class = "የማንቂያ ማንቂያ-ስኬት" >
  2. ...
  3. </div>

መረጃ

ቀና በል! ይህ ማንቂያ የእርስዎን ትኩረት ይፈልጋል፣ ግን እጅግ በጣም አስፈላጊ አይደለም።
  1. <div class = "የማንቂያ ማንቂያ-መረጃ" >
  2. ...
  3. </div>

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

መሰረታዊ

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

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

የተራቆተ

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

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

የታነመ

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

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

የተቆለለ

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

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

አማራጮች

ተጨማሪ ቀለሞች

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

  1. <div class = "የሂደት ግስጋሴ-መረጃ" >
  2. <div class = "ባር" style = " ስፋት : 20 % " ></div>
  3. </div>
  4. <div class = "የሂደት ግስጋሴ-ስኬት" >
  5. <div class = "ባር" style = " ስፋት : 40 % " ></div>
  6. </div>
  7. <div class = "የሂደት እድገት-ማስጠንቀቂያ" >
  8. <div class = "ባር" style = " ስፋት : 60 % " ></div>
  9. </div>
  10. <div class = "የሂደት እድገት-አደጋ" >
  11. <div class = "ባር" style = " ስፋት : 80 % " ></div>
  12. </div>

የተራቆቱ አሞሌዎች

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "ባር" style = " ስፋት : 20 % " ></div>
  3. </div>
  4. <div class = "የሂደት ግስጋሴ-ስኬት ግስጋሴ-የተራቀቀ" >
  5. <div class = "ባር" style = " ስፋት : 40 % " ></div>
  6. </div>
  7. <div class = "የሂደት ግስጋሴ-ማስጠንቀቂያ ግስጋሴ-የተራቀቀ" >
  8. <div class = "ባር" style = " ስፋት : 60 % " ></div>
  9. </div>
  10. <div class = "የሂደት ግስጋሴ-አደጋ ግስጋሴ-የተቆራረጠ" >
  11. <div class = "ባር" style = " ስፋት : 80 % " ></div>
  12. </div>

የአሳሽ ድጋፍ

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

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

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

ነባሪ ምሳሌ

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

64x64

የሚዲያ ርዕስ

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

የሚዲያ ርዕስ

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

የሚዲያ ርዕስ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።
  1. <div class = "ሚዲያ" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "ሚዲያ-አካል" >
  6. <h4 class = "ሚዲያ-ርዕስ" > የሚዲያ ርዕስ </h4>
  7. ...
  8.  
  9. <!-- የተከተተ የሚዲያ ነገር -->
  10. <div class = "ሚዲያ" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

የሚዲያ ዝርዝር

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

  • 64x64

    የሚዲያ ርዕስ

    Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።

    64x64

    የተከተተ የሚዲያ ርዕስ

    Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።
    64x64

    የተከተተ የሚዲያ ርዕስ

    Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።
    64x64

    የተከተተ የሚዲያ ርዕስ

    Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።
  • 64x64

    የሚዲያ ርዕስ

    Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።
  1. <ul class = "ሚዲያ-ዝርዝር" >
  2. <li class = "ሚዲያ" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "ሚዲያ-አካል" >
  7. <h4 class = "ሚዲያ-ርዕስ" > የሚዲያ ርዕስ </h4>
  8. ...
  9.  
  10. <!-- የተከተተ የሚዲያ ነገር -->
  11. <div class = "ሚዲያ" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

ዌልስ

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

እነሆ፣ እኔ ጉድጓድ ውስጥ ነኝ!
  1. <div class = "ደህና" >
  2. ...
  3. </div>

አማራጭ ክፍሎች

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

እነሆ፣ እኔ ጉድጓድ ውስጥ ነኝ!
  1. <div class = "በደንብ ትልቅ" >
  2. ...
  3. </div>
እነሆ፣ እኔ ጉድጓድ ውስጥ ነኝ!
  1. <div class = "ደህና-ትንሽ" >
  2. ...
  3. </div>

አዶ ዝጋ

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

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

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

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

የረዳት ክፍሎች

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

.መጎተት-ግራ

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

  1. ክፍል = "መጎተት-ግራ"
  1. . ጎትት - ግራ {
  2. መንሳፈፍ ፡ ግራ ; _
  3. }

.መጎተት-ቀኝ

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

  1. ክፍል = "በቀኝ መጎተት"
  1. . ጎትት - ቀኝ {
  2. መንሳፈፍ ፡ ትክክል ; _
  3. }

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

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

  1. ክፍል = "ድምጸ-ከል የተደረገ"
  1. . ድምጸ-ከል ተደርጓል {
  2. ቀለም : # 999;
  3. }

.ግልጽ

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

  1. ክፍል = "ግልጽ"
  1. . ግልጽ ማስተካከያ {
  2. * አጉላ : 1 ;
  3. &: በፊት ,
  4. &: በኋላ {
  5. ማሳያ : ጠረጴዛ ;
  6. ይዘት : "" ;
  7. }
  8. &: በኋላ {
  9. ግልጽ : ሁለቱም ;
  10. }
  11. }