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

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

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

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

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

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

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

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

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

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

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

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

javascript ලබා ගන්න »

දැනුම්දීම

බොත්තම් කණ්ඩායම් සඳහා CSS වෙනම ගොනුවක ඇත, button-groups.less.

බොත්තම් පතන

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

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

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

බොත්තම් සමූහයකට සමානව, අපගේ සලකුණු කිරීම සාමාන්‍ය බොත්තම් සලකුණු භාවිතා කරයි, නමුත් විලාසය පිරිපහදු කිරීමට සහ Bootstrap හි dropdown jQuery ප්ලගිනයට සහය දැක්වීමට අතලොස්සක් එකතු කිරීම් සමඟින්.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    කටයුතු
    <span class = "caret" ></span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- පතන මෙනු සබැඳි -->
  </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 = "dropdown-menu" > 
    <!-- පතන මෙනු සබැඳි -->
  </ul>
</div>

බලවත් මූලික පන්තිය

මෙහි ඇති සියලුම nav සංරචක-ටැබ්, පෙති සහ ලැයිස්තු- පන්තිය හරහා එකම මූලික සලකුණු සහ මෝස්තර බෙදා.nav ගනී .

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

ටැබ් සහ පෙති අන්තර්ගතයේ කොටස් සඳහා හෝ අදාළ අන්තර්ගතයේ පිටු අතර සැරිසැරීමට විශිෂ්ටයි.

සංරචක පෙළගැස්ම

නාවික සබැඳි පෙළගැස්වීමට, .pull-leftහෝ .pull-rightඋපයෝගිතා පන්ති භාවිතා කරන්න. පන්ති දෙකම නියමිත දිශාවට CSS float එකක් එක් කරයි.

මූලික ටැබ්

නිතිපතා <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>

මූලික පෙති

එම HTML ගන්න, නමුත් .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 හි පතනයන් ආරම්භ කිරීම පිළිබඳ ලේඛන කියවීමට Javascript පිටුවට යන්න .

පතන සහිත ටැබ්

• නිවස
• පැතිකඩ
• පතන
  • කටයුතු
  • තවත් ක්රියාවක්
  • මෙතන වෙන දෙයක්
  • වෙන් කළ සබැඳිය

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       දත්ත-ටොගල් = "ඩ්‍රොප් ඩවුන්"
       href = "#" >
        පතන
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- සබැඳි -->
    </ul>
  </li>
</ul>

පතන සහිත පෙති

• නිවස
• පැතිකඩ
• පතන
  • කටයුතු
  • තවත් ක්රියාවක්
  • මෙතන වෙන දෙයක්
  • වෙන් කළ සබැඳිය

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       දත්ත-ටොගල් = "ඩ්‍රොප් ඩවුන්"
       href = "#" >
        පතන
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- සබැඳි -->
    </ul>
  </li>
</ul>

යෙදුම් ආකාරයේ සංචලනය

Nav ලැයිස්තු විකල්ප ශීර්ෂයන් සමඟ nav සබැඳි කණ්ඩායම් ගොඩනැගීමට සරල සහ පහසු ක්‍රමයක් සපයයි. ඒවා OS X හි Finder වැනි පැති තීරුවල වඩාත් හොඳින් භාවිතා වේ.

ව්‍යුහාත්මකව, ඒවා ටැබ් සහ පෙති වැනි එකම මූලික නාවික මෝස්තර මත ගොඩනගා ඇත, එබැවින් භාවිතය සහ අභිරුචිකරණය සරල ය.

අයිකන සමඟ

Nav ලැයිස්තු අයිකන වලින් සන්නද්ධ කිරීම ද පහසුය. පන්තිය සමඟ නිසි <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>

ඇතුළත් දේ

ටැබ් හරහා අන්තර්ගතය අතර ටොගල් කිරීමට සරල ප්ලගිනයක් සමඟින් ඔබේ ටැබ් ජීවමාන කරන්න. Bootstrap ටැබ් කළ හැකි ටැබ් මෝස්තර හතරකින් ඒකාබද්ධ කරයි: ඉහළ (පෙරනිමිය), දකුණ, පහළ සහ වම.

ඔවුන් අතර වෙනස් කිරීම පහසු වන අතර ඉතා සුළු සලකුණු වෙනස් කිරීම පමණක් අවශ්ය වේ.

වගුගත හැකි උදාහරණයක්

.nav-tabsටැබ් ටැබ් කළ හැකි බවට පත් කිරීමට, පන්තිය සමඟ වෙනත් අංශයකින් ඔතා .tabbable.

අභිරුචි jQuery ප්ලගිනය

සියලුම ටැබ් කළ හැකි ටැබ් අපගේ සැහැල්ලු jQuery ප්ලගිනය මගින් බල ගැන්වේ. ජාවාස්ක්‍රිප්ට් ඩොක්ස් පිටුවෙන් ටැබබල් ටැබ් ජීවයට ගෙන එන්නේ කෙසේද යන්න ගැන වැඩිදුර කියවන්න.

javascript → ලබා ගන්න

පතුලේ ටැබ්

HTML හි අනුපිළිවෙල පෙරළන්න සහ පහළට ටැබ් තැබීමට පන්තියක් එක් කරන්න.

<div class = "tabable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

වම් පැත්තේ ටැබ්

වම් පසින් ටැබ් තැබීමට පන්තිය මාරු කරන්න.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

දකුණු පසින් ටැබ්

දකුණු පසින් ටැබ් තැබීමට පන්තිය මාරු කරන්න.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

නවබාර් පලංචිය

ස්ථිතික හෝ ස්ථාවර සංදර්ශකය සඳහා එය හොඳින් ව්‍යුහගත කිරීමට navbar හට අවශ්‍ය වන්නේ div කිහිපයක් පමණි.

<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 තුළ, ඔබේ 40px හෝ ඊට වැඩි පිරවුම් එකතු කිරීමෙන් එය ඇති කරන අතිච්ඡාදනය සඳහාද ඔබට ගණන් ගැනීමට අවශ්‍ය වනු ඇත <body>. මූලික Bootstrap CSS ට පසුව සහ විකල්ප ප්‍රතිචාරාත්මක CSS වලට පෙර මෙය එක් කිරීමට වග බලා ගන්න.

වෙළඳ නාමය

ඔබේ වෙළඳ නාමය හෝ ව්‍යාපෘති නාමය පෙන්වීමට සරල සබැඳියකට අවශ්‍ය වන්නේ නැංගුරම් ටැගයක් පමණි.

<a class = "වෙළඳ නාමය" href = "#" >  
  ව්යාපෘතියේ නම
</a>

සෙවුම් පෝරමය

.navbar-searchසෙවුම් පෝරම පන්තිය සමඟ navbar හි අභිරුචි මෝස්තර ලබා ගනී . එය පෙළගැස්වීමට ඇතුළත් කරන්න .pull-leftහෝ .pull-rightමත .form

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Search" >   
</form>

විකල්ප ප්‍රතිචාරාත්මක විචලනය

ඔබේ ඉහළ තීරුවේ අන්තර්ගත ප්‍රමාණය අනුව, ඔබට ප්‍රතිචාරාත්මක විකල්ප ක්‍රියාත්මක කිරීමට අවශ්‍ය විය හැකිය. එසේ කිරීමට, ඔබේ nav අන්තර්ගතය අඩංගු div එකක ඔතා, .nav-collapse.collapsenavbar toggle බොත්තම එක් කරන්න, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "බහාලකය" > 
 
      <!-- .btn-navbar හකුළන ලද navbar අන්තර්ගතය සඳහා ටොගලය ලෙස භාවිතා කරයි -->
      <a class = "btn btn-navbar" data-toggle = "කඩා වැටීම" 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>  
 
      <!-- ඔබට සඟවා ගැනීමට අවශ්‍ය සියල්ල 940px හෝ ඊට අඩුවෙන්, මෙහි තබන්න -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

නව සබැඳි

ඇණවුම් නොකළ ලැයිස්තු හරහා නව අයිතම එකතු කිරීම සරල ය.

<ul class = "nav" > 
  <li class = "ක්‍රියාකාරී" > 
    <a href = "#" > මුල් පිටුව </a> 
  </li>
  <li><a href = "#" > සබැඳිය </a></li> 
  <li><a href = "#" > සබැඳිය </a></li> 
</ul>

හිස් ලැයිස්තු අයිතමයක් සහ සරල පන්තියක් සමඟින් ඔබට පහසුවෙන් ඔබේ nav සබැඳි වෙත බෙදුම්කරුවන් එක් කළ හැක. සබැඳි අතර මෙය එක් කරන්න:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

සංරචක පෙළගැස්ම

nav, සෙවුම් පෝරමය හෝ පෙළ පෙළගැස්වීමට, .pull-leftහෝ .pull-rightඋපයෝගිතා පන්ති භාවිතා කරන්න. පන්ති දෙකම නියමිත දිශාවට CSS float එකක් එක් කරයි.

පතන එකතු කිරීම

nav වෙත පතන එකතු කිරීම ඉතා සරල ය, නමුත් අපගේ javascript ප්ලගිනය භාවිතා කිරීම අවශ්‍ය වේ .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          ගිණුම
          <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

javascript → ලබා ගන්න

ඇයි ඒවා පාවිච්චි කරන්නේ

බ්‍රෙඩ්ක්‍රම්බ් සංචාලනය භාවිතා කරන්නන් යෙදුමක් හෝ අඩවියක් තුළ සිටින ස්ථානය පෙන්වීමට මාර්ගයක් ලෙස භාවිතා කරයි, නමුත් ප්‍රාථමික සංචාලනය සඳහා නොවේ. වඩාත් ඵලදායී වීමට ඔවුන්ගේ භාවිතය විරල හා සංක්ෂිප්තව තබා ගන්න.

උදාහරණ

පිටු කිහිපයක් හරහා ප්‍රදර්ශනය විය හැකි බැවින් තනි උදාහරණයක් පෙන්වයි.

• නිවස

• නිවස /
• පුස්තකාලය

• නිවස /
• පුස්තකාලය /
• දත්ත

සලකුණු කිරීම

HTML යනු සබැඳි සහිත ඔබගේ සම්මත නොකල ලැයිස්තුවයි.

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

උදාහරණ

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

සලකුණු කිරීම

a එකකින් ඔතා <div>, pagination යනු a පමණි <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 = "hero-unit" > 
  <h1> ශීර්ෂකය </h1>
  <p> ටැග්ලයින් </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      තවත් හදාරන්න
    </a>
  </p>
</div>

යෝග්‍ය ලෙස ඉඩ ලබා දීම සහ පිටුවක අන්තර්ගත කොටස් කොටස් කිරීම සඳහා සරල h1කවචයකි. එයට h1පෙරනිමි small, මූලද්‍රව්‍ය මෙන්ම අනෙකුත් බොහෝ සංරචක (අමතර මෝස්තර සහිත) භාවිතා කළ හැක.

<div class = "page-haeder" > 
  <h1> උදාහරණ පිටු ශීර්ෂකය </h1>
</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

සලකුණු කිරීම

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

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

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

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

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

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

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

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

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

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

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" > × </a>  
  <h4 පන්තිය = "ඇලට්-ශීර්ෂය" > අවවාදයයි! </h4> 
  හොඳම පරීක්ෂාව ඔබම, ඔබ නොවේ ...
</div>

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

<div class = "alert alert-error" > 
  ...
</div>

සාර්ථකත්වය

<div class = "Alert alert-success" > 
  ...
</div>

විස්තර

<div class = "alert alert-info" > 
  ...
</div>

මූලික

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

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

ඉරි සහිත

ඉරි සහිත බලපෑමක් ඇති කිරීමට අනුක්‍රමණයක් භාවිතා කරයි.

<div class = "ප්‍රගතිය ප්‍රගතිය-තොරතුරු 
     ප්‍රගතිය ඉරි සහිත" >
  <div class = "bar" 
       style = " පළල : 20 %; " ></div> 
</div>

සජීවිකරණ

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

<div class = "ප්‍රගතිය ප්‍රගතිය-අනතුරයි 
     ප්‍රගති-ඉරි සහිත සක්‍රිය" >
  <div class = "bar" 
       style = " පළල : 40 %; " ></div> 
</div>

අමතර වර්ණ

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

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

විකල්පයක් ලෙස, ඔබට අඩු ගොනු අභිරුචිකරණය කළ හැකි අතර ඔබේම වර්ණ සහ ප්‍රමාණ පෙරළන්න.

හැසිරීම

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

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

බ්රවුසර සහාය

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

ඔපෙරා මේ මොහොතේ සජීවිකරණ සඳහා සහය නොදක්වයි.

ළිං

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

<div class = "හොඳින්" > 
  ...
</div>

ලාංඡන

නොකියවූ ගණන් කිරීම සඳහා හෝ සරල දර්ශකයක් ලෙස මූලද්‍රව්‍යයක ලාංඡනයක් භාවිතා කරන්න.

<span class = "badge" > 3 </div> 

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

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

×

<a class = "close" > × </a>