አካላት

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

የአዝራር ቡድኖች

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

ምርጥ ልምዶች

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

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

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

ነባሪ ምሳሌ

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </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>

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

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

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

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

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

የአዝራሮች ተቆልቋይ

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

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

ምሳሌ ምልክት ማድረግ

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

  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

ጃቫስክሪፕት ያስፈልገዋል

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

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


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

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

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

መጠኖች

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <!-- ተቆልቋይ ምናሌ አገናኞች -->
  5. </ul>
  6. </div>

ምሳሌ ምልክት ማድረግ

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

  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>

የተጣሉ ምናሌዎች

የተቆልቋይ ምናሌዎች እንዲሁ ነጠላ ክፍልን ወደ የቅርብ ወላጅ በማከል ከታች ወደ ላይ መቀየር ይችላሉ .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>

ባለብዙ-ኮን-ገጽ ገጽ

መቼ መጠቀም

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

የገጹ አገናኞች

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

ተለዋዋጭ አሰላለፍ

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

ምሳሌዎች

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

ምልክት ማድረጊያ

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

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

ፔጀር ለፈጣን የቀድሞ እና ቀጣይ ማገናኛዎች

ስለ ፔጀር

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

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

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

ነባሪ ምሳሌ

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

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

የተጣጣሙ አገናኞች

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

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

ስለ

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

የሚገኙ ክፍሎች

ስም ለምሳሌ ምልክት ማድረጊያ
ነባሪ 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>

ጀግና ክፍል

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

ምልክት ማድረጊያ

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

  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>

ሰላም ልዑል!

ይህ ቀላል የጀግንነት አሃድ ነው፣ ለቀረቡ ይዘቶች ወይም መረጃዎች ተጨማሪ ትኩረት ለመጥራት ቀላል የ jumbotron አይነት አካል ነው።

ተጨማሪ እወቅ

የገጽ ርዕስ

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

  1. <div class = "ገጽ-ራስጌ" >
  2. <h1> የምሳሌ ገጽ ራስጌ </h1>
  3. </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— የጥፍር አክል ልኬቶችን ለመቆጣጠር።

ምልክት ማድረጊያ

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

  1. <ul class = "ድንክዬዎች" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

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

ተጨማሪ ምሳሌዎች

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

ቀላል ክብደት ያላቸው ነባሪዎች

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

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

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

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


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

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

ተሰኪውን አግኝ »

ምሳሌ ማንቂያዎች

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

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

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

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

ማስጠንቀቂያ!

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

  1. <div class = "የማስጠንቀቂያ ማንቂያ-ብሎክ" >
  2. <a class = "close" data-dismiss = "ማስጠንቀቂያ" href = "#" > × </a>
  3. <h4 class = "ማንቂያ-ርዕስ" > ማስጠንቀቂያ! </ 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 = "ባር"
  3. style = " ስፋት ፡ 60 %፤ " > </div>
  4. </div>

የተራቆተ

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

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

የታነመ

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

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

አማራጮች እና የአሳሽ ድጋፍ

ተጨማሪ ቀለሞች

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

የተራቆቱ አሞሌዎች

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

ባህሪ

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

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

የአሳሽ ድጋፍ

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

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

ዌልስ

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

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

አዶ ዝጋ

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

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

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

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