සංරචක

සංචලනය, ඇඟවීම්, popovers, සහ තවත් බොහෝ දේ සැපයීම සඳහා නැවත භාවිත කළ හැකි සංරචක දුසිම් ගණනක් Bootstrap තුළ ගොඩනගා ඇත.

බොත්තම් කණ්ඩායම්

එක් සංයුක්ත සංරචකයක් ලෙස බහු බොත්තම් එකට සම්බන්ධ කිරීමට බොත්තම් කණ්ඩායම් භාවිතා කරන්න. මාලාවක් <a>හෝ <button>මූලද්රව්ය සමඟ ඒවා ගොඩනඟන්න.

හොඳම භාවිතයන්

බොත්තම් කණ්ඩායම් සහ මෙවලම් තීරු භාවිතා කිරීම සඳහා අපි පහත මාර්ගෝපදේශ නිර්දේශ කරමු:

  • සෑම විටම එකම මූලද්‍රව්‍යය තනි බොත්තම් සමූහයක භාවිතා කරන්න, <a>හෝ <button>.
  • එකම බොත්තම් සමූහයේ විවිධ වර්ණවල බොත්තම් මිශ්ර නොකරන්න.
  • පෙළට අමතරව හෝ ඒ වෙනුවට අයිකන භාවිතා කරන්න, නමුත් සුදුසු තැන්වල alt සහ මාතෘකා පෙළ ඇතුළත් කිරීමට වග බලා ගන්න.

පතනයන් සහිත අදාළ බොත්තම් කණ්ඩායම් (පහත බලන්න) වෙන වෙනම කැඳවිය යුතු අතර අපේක්ෂිත හැසිරීම දැක්වීමට සෑම විටම පතන කැරැට්ටුවක් ඇතුළත් කළ යුතුය.

පෙරනිමි උදාහරණය

ඇන්කර් ටැග් බොත්තම් සමඟ ගොඩනගා ඇති සම්මත බොත්තම් සමූහයක් සඳහා HTML බලන ආකාරය මෙන්න:

  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">a කට්ටල ඒකාබද්ධ කරන්න.<div class="btn-toolbar">

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

පිරික්සුම් පෙට්ටිය සහ ගුවන් විදුලි රස

බොත්තම් කණ්ඩායම් එක බොත්තමක් පමණක් සක්‍රිය විය හැකි රේඩියෝ හෝ ඕනෑම බොත්තම් සංඛ්‍යාවක් සක්‍රිය විය හැකි පිරික්සුම් කොටු ලෙසද ක්‍රියා කළ හැක. ඒ සඳහා Javascript docs බලන්න .

javascript ලබා ගන්න »

බොත්තම් කණ්ඩායම්වල පතන

දැනුම්දීම! නිසි විදැහුම්කරණයක් සඳහා පතන .btn-groupසහිත බොත්තම් තනි තනිව ඔතා තිබිය යුතුය ..btn-toolbar

බොත්තම් පතන

දළ විශ්ලේෂණය සහ උදාහරණ

පතන මෙනුවක් ප්‍රේරණය කිරීමට ඕනෑම බොත්තමක් භාවිතා කරන්න, එය a තුළ තබා .btn-groupනිසි මෙනු සලකුණු ලබා දෙන්න.

උදාහරණ සලකුණු කිරීම

බොත්තම් සමූහයකට සමානව, අපගේ සලකුණු කිරීම සාමාන්‍ය බොත්තම් සලකුණු භාවිතා කරයි, නමුත් විලාසය පිරිපහදු කිරීමට සහ Bootstrap හි dropdown 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 = "dropdown-menu" >
  7. <!-- පතන මෙනු සබැඳි -->
  8. </ul>
  9. </div>

සියලුම බොත්තම් ප්‍රමාණ සමඟ ක්‍රියා කරයි

බොත්තම් පතන ඕනෑම ප්‍රමාණයකින් ක්‍රියා කරයි. ඔබගේ බොත්තම් ප්‍රමාණය .btn-large, .btn-smallහෝ .btn-mini.

javascript අවශ්‍යයි

බොත්තම් පතනයන් ක්‍රියාත්මක වීමට Bootstrap dropdown ප්ලගිනය අවශ්‍ය වේ.

ජංගම වැනි-ඇතැම් අවස්ථාවල දී පතන මෙනු දර්ශන තොටින් පිටත දිගු වේ. ඔබ පෙළගැස්ම අතින් හෝ අභිරුචි ජාවාස්ක්‍රිප්ට් සමඟ විසඳිය යුතුය.


බෙදීම් බොත්තම් පතන

දළ විශ්ලේෂණය සහ උදාහරණ

බොත්තම් කණ්ඩායම් මෝස්තර සහ සලකුණු මත ගොඩනැගීම, අපට පහසුවෙන් බෙදීම් බොත්තමක් සෑදිය හැකිය. බෙදීම් බොත්තම් වම් පසින් සම්මත ක්‍රියාවක් සහ සන්දර්භීය සබැඳි සමඟ දකුණේ පතන ටොගලයක් දක්වයි.

ප්රමාණ

අමතර බොත්තම් පන්ති .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" > Action </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- පතන මෙනු සබැඳි -->
  8. </ul>
  9. </div>

ඩ්‍රොප්අප් මෙනු

හි ආසන්න මාපිය වෙත තනි පන්තියක් එක් කිරීමෙන් පතන මෙනු පහළ සිට ඉහළට ටොගල් කළ හැක .dropdown-menu. .caretඑය ඉහළට නොව පහළ සිට ඉහළට ගෙනයාමට මෙනුවේ දිශාව පෙරළනු ඇත.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <!-- පතන මෙනු සබැඳි -->
  8. </ul>
  9. </div>

බහු-පිටු පිටු සැකසීම

භාවිතා කරන විට

Rdio මගින් ආනුභාව ලත් අතිශය සරල සහ අවම මෝස්තර සහිත පිටුකරණය, යෙදුම් සහ සෙවුම් ප්‍රතිඵල සඳහා විශිෂ්ටයි. විශාල කොටස මග හැරීමට අපහසුය, පහසුවෙන් පරිමාණය කළ හැකි අතර විශාල ක්ලික් ප්‍රදේශ සපයයි.

රාජ්ය පිටු සබැඳි

සබැඳි අභිරුචිකරණය කළ හැකි අතර නිවැරදි පන්තිය සමඟ අවස්ථා ගණනාවක වැඩ කරයි. .disabledක්ලික් කළ නොහැකි සබැඳි .activeසඳහා සහ වත්මන් පිටුව සඳහා.

නම්‍යශීලී පෙළගැස්ම

පේජිනේෂන් සබැඳිවල පෙළගැස්ම වෙනස් කිරීමට විකල්ප පන්ති දෙකෙන් එකක් එක් කරන්න: .pagination-centeredසහ .pagination-right.

උදාහරණ

පෙරනිමි pagination සංරචකය නම්‍යශීලී වන අතර වෙනස්කම් ගණනාවකින් ක්‍රියා කරයි.

සලකුණු කිරීම

a එකකින් ඔතා <div>, pagination යනු a පමණි <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 = "hero-unit" >
  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> උදාහරණ පිටු ශීර්ෂකය </h1>
  3. </div>

පෙරනිමි සිඟිති රූ

පෙරනිමියෙන්, Bootstrap හි සිඟිති රූ නිර්මාණය කර ඇත්තේ අවම අවශ්‍ය සලකුණු සහිත සම්බන්ධිත රූප ප්‍රදර්ශනය කිරීමට ය.

ඉතා අභිරුචිකරණය කළ හැකිය

අමතර සලකුණු ටිකක් සමඟින්, සිඟිති රූවලට ශීර්ෂ, ඡේද, හෝ බොත්තම් වැනි ඕනෑම ආකාරයක HTML අන්තර්ගතයක් එක් කිරීමට හැකිය.

  • සිඟිති රූ ලේබලය

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at 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 at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    කටයුතු කටයුතු

සිඟිති රූ භාවිතා කරන්නේ ඇයි

සිඟිති රූ (පෙර .media-gridv1.4 දක්වා) ඡායාරූප හෝ වීඩියෝ ජාල, රූප සෙවුම් ප්‍රතිඵල, සිල්ලර නිෂ්පාදන, කළඹ, සහ තවත් බොහෝ දේ සඳහා විශිෂ්ටයි. ඒවා සබැඳි හෝ ස්ථිතික අන්තර්ගතය විය හැකිය.

සරල, නම්‍යශීලී සලකුණු කිරීම

සිඟිති රූ සලකුණු කිරීම සරලයි - අවශ්‍ය ulවන්නේ ඕනෑම liමූලද්‍රව්‍ය ගණනකි. එය ඉතා නම්‍යශීලී වන අතර, ඔබේ අන්තර්ගතය එතීමට මඳක් වැඩි සලකුණු සහිත ඕනෑම ආකාරයක අන්තර්ගතයකට ඉඩ සලසයි.

ජාලක තීරු ප්‍රමාණ භාවිතා කරයි

අවසාන වශයෙන්, thumbnails සංරචකය සිඟිති රූ මානයන් පාලනය කිරීම සඳහා පවතින ජාල පද්ධති පන්ති වැනි .span2හෝ - භාවිතා කරයි..span3

සලකුණු කිරීම

කලින් සඳහන් කළ පරිදි, සිඟිති රූ සඳහා අවශ්‍ය සලකුණු කිරීම සැහැල්ලු හා සරල ය. සම්බන්ධිත පින්තූර සඳහා පෙරනිමි සැකසුම දෙස බලන්න :

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

සිඟිති රූ වල අභිරුචි HTML අන්තර්ගතය සඳහා, සලකුණු කිරීම තරමක් වෙනස් වේ. <a>ඕනෑම තැනක වාරණ මට්ටමේ අන්තර්ගතයට ඉඩ දීම සඳහා, අපි එවැනි දෙයක් සඳහා හුවමාරු කරමු <div>:

  1. <ul class = "thumbnails" >
  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.


javascript එක්ක නියමෙට යනවා

Bootstrap අනතුරු ඇඟවීමේ පණිවිඩ සඳහා සහය දක්වන විශිෂ්ට jQuery ප්ලගිනයක් සමඟින් පැමිණේ, ඒවා ඉක්මනින් සහ පහසු කරවයි.

ප්ලගිනය ලබා ගන්න »

උදාහරණ ඇඟවීම්

සරල පන්තියක් සහිත div එකක ඔබේ පණිවිඩය සහ විකල්ප සමීප නිරූපකයක් ඔතා.

අවවාදයයි! ඔබම පරීක්ෂා කර බලන්න, ඔබ එතරම් හොඳ පෙනුමක් නැත.
  1. <div class = "ඇලට්" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> අවවාදයයි! </strong> ඔබම පරීක්ෂා කර බලන්න, ඔබ එතරම් හොඳ පෙනුමක් නැත.
  4. </div>

දැනුම්දීම! iOS උපාංගවලට href="#"ඇඟවීම් ඉවත් කිරීම සඳහා අවශ්‍ය වේ. ඇන්කර් සමීප අයිකන සඳහා එය සහ දත්ත ගුණාංගය ඇතුළත් කිරීමට වග බලා ගන්න. විකල්පයක් ලෙස, ඔබට <button>දත්ත උපලක්ෂණ සහිත මූලද්‍රව්‍යයක් භාවිතා කළ හැක, එය අප විසින් අපගේ ලේඛන සඳහා කිරීමට තීරණය කර ඇත. භාවිතා කරන විට <button>, ඔබ ඇතුළත් කළ යුතුය, type="button"නැතහොත් ඔබේ පෝරම ඉදිරිපත් නොකළ හැකිය.

විකල්ප පන්ති දෙකක් සමඟින් සම්මත ඇඟවීම් පණිවිඩය පහසුවෙන් දිගු කරන්න: .alert-blockවැඩි පිරවුම් සහ පෙළ පාලනයන් සහ .alert-headingගැළපෙන ශීර්ෂයක් සඳහා.

අවවාදයයි!

ඔබම පරීක්ෂා කර බලන්න, ඔබ එතරම් හොඳ පෙනුමක් නැත. Nulla vitae elit libero, a pharetra ague. ප්‍රෙසන්ට් කොමෝඩෝ කර්සස් මැග්නා, හෝ ස්කලෙරිස්ක් නිසල් කොන්සෙක්ටෙචර් සහ.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > අවවාදයයි! </h4>
  4. හොඳම පරීක්ෂාව ඔබම, ඔබ නොවේ ...
  5. </div>

සන්දර්භීය විකල්ප අනතුරු ඇඟවීමේ අර්ථය වෙනස් කිරීමට විකල්ප පන්ති එක් කරන්න

දෝෂයක් හෝ අනතුරක්

අපොයි! දේවල් කිහිපයක් වෙනස් කර නැවත ඉදිරිපත් කිරීමට උත්සාහ කරන්න.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

සාර්ථකත්වය

හොඳින් කළා! ඔබ මෙම වැදගත් අනතුරු ඇඟවීමේ පණිවිඩය සාර්ථකව කියවා ඇත.
  1. <div class = "Alert alert-success" >
  2. ...
  3. </div>

විස්තර

දැනුම්දීම! මෙම ඇඟවීමට ඔබේ අවධානය අවශ්‍යයි, නමුත් එය ඉතා වැදගත් නොවේ.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

උදාහරණ සහ සලකුණු

මූලික

සිරස් අනුක්‍රමයක් සහිත පෙරනිමි ප්‍රගති තීරුව.

  1. <div class = "ප්‍රගතිය" >
  2. <div class = "bar"
  3. style = " පළල : 60 %; " ></div>
  4. </div>

ඉරි සහිත

ඉරි සහිත ආචරණයක් නිර්මාණය කිරීමට අනුක්‍රමණයක් භාවිතා කරයි (IE නැත).

  1. <div class = "ප්‍රගතිය ප්‍රගතිය-ඉරි සහිත" >
  2. <div class = "bar"
  3. style = " පළල : 20 %; " ></div>
  4. </div>

සජීවිකරණ

ඉරි සහිත උදාහරණය ගෙන එය සජීවිකරණය කරයි (IE නැත).

  1. <div class = "ප්‍රගතිය ප්‍රගතිය-ඉරි සහිත
  2. ක්රියාකාරී" >
  3. <div class = "bar"
  4. style = " පළල : 40 %; " ></div>
  5. </div>

විකල්ප සහ බ්රවුසර සහාය

අමතර වර්ණ

ප්‍රගති තීරු එකම බොත්තම් කිහිපයක් සහ ස්ථාවර මෝස්තර සඳහා අනතුරු ඇඟවීමේ පන්ති භාවිතා කරයි.

ඉරි සහිත තීරු

ඝන වර්ණවලට සමාන, අපි විවිධ ඉරි සහිත ප්රගති තීරු ඇත.

හැසිරීම

ප්‍රගති තීරු CSS3 සංක්‍රාන්ති භාවිතා කරයි, එබැවින් ඔබ ජාවාස්ක්‍රිප්ට් හරහා පළල ගතිකව සීරුමාරු කරන්නේ නම්, එය සුමට ලෙස ප්‍රතිප්‍රමාණ කරයි.

ඔබ .activeපන්තිය භාවිතා කරන්නේ නම්, ඔබේ .progress-stripedප්‍රගති තීරු වමේ සිට දකුණට ඉරි සජීවීකරණය කරයි.

බ්රවුසර සහාය

ප්‍රගති තීරු CSS3 අනුක්‍රමික, සංක්‍රාන්ති සහ සජීවිකරණ ඒවායේ සියලු බලපෑම් සාක්ෂාත් කර ගැනීම සඳහා භාවිතා කරයි. මෙම විශේෂාංග IE7-9 හෝ Firefox හි පැරණි අනුවාද වල සහය නොදක්වයි.

Opera සහ IE මේ අවස්ථාවේ සජීවිකරණ සඳහා සහය නොදක්වයි.

ළිං

මූලද්‍රව්‍යයකට ඇතුල් කිරීමේ බලපෑමක් ලබා දීම සඳහා ළිඳ සරල බලපෑමක් ලෙස භාවිතා කරන්න.

බලන්න, මම ඉන්නේ ළිඳක!
  1. <div class = "හොඳින්" >
  2. ...
  3. </div>

නිරූපකය වසන්න

ආකෘති සහ ඇඟවීම් වැනි අන්තර්ගතය ඉවතලීම සඳහා සාමාන්‍ය සමීප නිරූපකය භාවිතා කරන්න.

  1. <button class = "close" > × </button>

ඔබ නැංගුරමක් භාවිතා කරන්නේ නම්, iOS උපාංගවලට ක්ලික් සිදුවීම් සඳහා href="#" අවශ්‍ය වේ.

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