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

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

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

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

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

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

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

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

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

මෙවලම් තීරු උදාහරණය

වඩාත් සංකීර්ණ සංරචක සඳහා <div class="btn-group">a කට්ටල ඒකාබද්ධ කරන්න.<div class="btn-toolbar">

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

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

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

javascript ලබා ගන්න »

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

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

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

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

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

බොත්තම් සමූහයකට සමානව, අපගේ සලකුණු කිරීම සාමාන්‍ය බොත්තම් සලකුණු භාවිතා කරයි, නමුත් විලාසය පිරිපහදු කිරීමට සහ 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>

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

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

javascript අවශ්‍යයි

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

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

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

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

ප්රමාණ

අමතර බොත්තම් පන්ති .btn-mini, .btn-smallහෝ .btn-largeප්‍රමාණ කිරීම සඳහා භාවිතා කරන්න.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <!-- පතන මෙනු සබැඳි -->
  </ul>
</div>

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

වෙනම පතන ප්‍රේරකයක් ලෙස ක්‍රියා කරන දෙවන බොත්තම් ක්‍රියාවක් සැපයීමට අපි සාමාන්‍ය බොත්තම් පතනයන් පුළුල් කරමු.

<div class = "btn-group" > 
  <button class = "btn" > Action </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "dropdown-menu" > 
    <!-- පතන මෙනු සබැඳි -->
  </ul>
</div>

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

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

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <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 පිටුවට යන්න .

පතන සහිත ටැබ්

• නිවස
• උදව්
• පතන
  • Action
  • Another action
  • Something else here
  • Separated link

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

පතන සහිත පෙති

• නිවස
• උදව්
• පතන
  • Action
  • Another action
  • Something else here
  • Separated link

<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>ටැගය එක් කරන්න සහ ඔබ සකසා ඇත.

තිරස් බෙදුම්කරුවන්

පන්තිය සමඟ හිස් ලැයිස්තු අයිතමයක් සෑදීමෙන් තිරස් බෙදුම්කරුවෙකු එක් කරන්න .divider, මේ වගේ:

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

උදාහරණ නාවික ලැයිස්තුව

සබැඳි ලැයිස්තුවක් ගෙන එකතු කරන්න 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 ටැබ් කළ හැකි ටැබ් මෝස්තර හතරකින් ඒකාබද්ධ කරයි: ඉහළ (පෙරනිමිය), දකුණ, පහළ සහ වම.

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

ටැබ් තුළ මැකී යන්න

ටැබ් මැකී යාමට, එක් .fadeඑක් එක් කරන්න .tab-pane.

jQuery ප්ලගිනය අවශ්‍යයි

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

javascript → ලබා ගන්න

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

.tab-paneටැබ් ටැබ් කිරීමට, සෑම ටැබ් එකක් සඳහාම අනන්‍ය හැඳුනුම්පතක් සාදා ඒවා ඔතා .tab-content.

දකුණට හෝ වමට පෙළගස්වන ලද ටැබ් සඳහා, ඔතා .nav-tabsසහ .tab-contentතුළ .tabbable.

සෘජු සලකුණු කිරීම

Tabbable tabs භාවිතා කිරීම සඳහා wrapping div එකක්, ටැබ් කට්ටලයක් සහ ටැබ් කළ හැකි අන්තර්ගත පුවරු කට්ටලයක් අවශ්‍ය වේ.

<div class = "tabable" > <!-- වම්/දකුණු ටැබ් සඳහා පමණක් අවශ්‍ය වේ -->  
  <ul class = "nav nav-tabs" > 
    <li class = "සක්‍රිය" ><a href = "#tab1" data-toggle = "tab" > 1 කොටස </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2 කොටස </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> මම 1 කොටසේ සිටිමි. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> කොහොමද, මම 2 කොටසේ ඉන්නවා. </p>
    </div>
  </div>
</div>

පතුලේ ටැබ්

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.

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

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

ඔබ නව තීරුව ඇලවූ විට, යට සැඟවුණු ප්‍රදේශය ගණන් කිරීමට මතක තබා ගන්න. 40px හෝ ඊට වැඩි පිරවුම් එකතු කරන්න<body> . මූලික Bootstrap CSS ට පසුව සහ විකල්ප ප්‍රතිචාරාත්මක CSS වලට පෙර මෙය එක් කිරීමට වග බලා ගන්න.

වෙළඳ නාමය

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

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

නව තීරුවේ ආකෘති

නව තීරුව තුළ පෝරමයක් නිසි ලෙස හැඩගැන්වීමට සහ ස්ථානගත කිරීමට, පහත දැක්වෙන පරිදි සුදුසු පන්ති එක් කරන්න. පෙරනිමි පෝරමයක් සඳහා, ඇතුළත් .navbar-formකර .pull-leftහෝ .pull-rightඑය නිවැරදිව පෙළගස්වන්න.

<form class = "navbar-form pull-left" > 
  <ආදාන වර්ගය = "පෙළ" පන්තිය = "span2" >  
</form>

වඩාත් අභිරුචිකරණය කළ සෙවුම් පෝරමයක් සඳහා, navbar හි විශේෂිත මෝස්තර සඳහා සහ ආදානයට එක් .navbar-searchකරන්න .form.search-query

<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 වෙත dropdowns සහ dropups එකතු කිරීම ඉතා සරලයි, නමුත් අපගේ 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 → ලබා ගන්න

නව තීරුවේ පෙළ

<.navbar-text>සාමාන්‍යයෙන් <p>නිසි ප්‍රමුඛත්වය සහ වර්ණය සඳහා ටැග් එකකින් පෙළ නූල් ඔතා .

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

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

උදාහරණ

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

• නිවස

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

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

සලකුණු කිරීම

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

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > නිවස </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > පුස්තකාලය </a> <span class = "divider" > / </span>   
  </li>
  <li class = "සක්‍රිය" > දත්ත </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>

පේජර් ගැන

පේජර් සංරචකය යනු සැහැල්ලු සලකුණු සහ ඊටත් වඩා සැහැල්ලු මෝස්තර සහිත සරල පේජිනේෂන් ක්‍රියාත්මක කිරීම් සඳහා සබැඳි සමූහයකි. එය බ්ලොග් හෝ සඟරා වැනි සරල අඩවි සඳහා විශිෂ්ටයි.

විකල්ප ආබාධිත තත්ත්වය

පේජර් සබැඳි ද .disabledපේජිනේෂන් වෙතින් සාමාන්‍ය පන්තිය භාවිතා කරයි.

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

පෙරනිමියෙන්, පේජරය සබැඳි මධ්‍යස්ථාන කරයි.

• කලින්
• ඊළඟ

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

ගැන

ලාංඡන යනු යම් ආකාරයක දර්ශකයක් හෝ ගණන් කිරීම සඳහා කුඩා, සරල සංරචක වේ. ඒවා සාමාන්‍යයෙන් Mail.app වැනි විද්‍යුත් තැපැල් සේවාලාභීන් තුළ හෝ තල්ලු දැනුම්දීම් සඳහා ජංගම යෙදුම්වල දක්නට ලැබේ.

ලබා ගත හැකි පන්ති

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

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

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

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > අවවාදයයි! </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>

ඉරි සහිත

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

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

සජීවිකරණ

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

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

අමතර වර්ණ

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

ඉරි සහිත තීරු

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

හැසිරීම

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

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

බ්රවුසර සහාය

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

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

ළිං

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

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

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

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

×

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

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

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