උදාහරණයක්

ටොගල් කළ හැකි, සබැඳි ලැයිස්තුව පෙන්වීම සඳහා සන්දර්භ මෙනුව. පතන JavaScript ප්ලගිනය සමඟ අන්තර්ක්‍රියාකාරී කර ඇත .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > ක්‍රියාව </a></li>  
  <li><a tabindex = "-1" href = "#" > තවත් ක්‍රියාවක් </a></li>  
  <li><a tabindex = "-1" href = "#" > තවත් යමක් මෙහි ඇත </a></li>  
  <li class = "divider" ></li> 
  <li><a tabindex = "-1" href = "#" > වෙන් කළ සබැඳිය </a></li>  
</ul>

සලකුණු කිරීම

පතන මෙනුව දෙස බලන විට, අවශ්‍ය HTML මෙන්න. ඔබ පතන ප්‍රේරකය සහ පතන මෙනුව ඇතුළත .dropdownහෝ ප්‍රකාශ කරන වෙනත් මූලද්‍රව්‍යයක් එතීමට අවශ්‍ය වේ position: relative;. ඉන්පසු මෙනුව සාදන්න.

<div class = "dropdown" > 
  <!-- පතන ටොගල් කිරීමට සබැඳිය හෝ බොත්තම -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > ක්‍රියාව </a></li>  
    <li><a tabindex = "-1" href = "#" > තවත් ක්‍රියාවක් </a></li>  
    <li><a tabindex = "-1" href = "#" > තවත් යමක් මෙහි ඇත </a></li>  
    <li class = "divider" ></li> 
    <li><a tabindex = "-1" href = "#" > වෙන් කළ සබැඳිය </a></li>  
  </ul>
</div>

විකල්ප

මෙනු දකුණට පෙළගස්වා අමතර මට්ටම් පහත වැටීම් ඇතුළත් කරන්න.

මෙනු පෙළගැස්වීම

පතන මෙනුව දකුණට පෙළගස්වීමට .pull-righta වෙත එක් කරන්න ..dropdown-menu

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

අබල කළ මෙනු විකල්ප

සබැඳිය අක්‍රිය කිරීමට පතන තුළට .disabledඑක් කරන්න .<li>

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > සාමාන්‍ය සබැඳිය </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > අබල කළ සබැඳිය </a></li>   
  <li><a tabindex = "-1" href = "#" > තවත් සබැඳියක් </a></li>  
</ul>

පතන මත උප මෙනු

සමහර සරල සලකුණු එකතු කිරීම් සමඟින්, OS X හි මෙන් hover මත දිස්වන, පතන මෙනුවල අමතර මට්ටමක් එක් කරන්න. ස්වයංක්‍රීය හැඩගැන්වීම සඳහා පවතින පතන මෙනුවක .dropdown-submenuඕනෑම එකකට එක් කරන්න .li

පෙරනිමිය

අතහැර දැමීම

වම් උප මෙනුව

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#" > තවත් විකල්ප </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

උදාහරණ

තවත් විශේෂිත වෙනස්කම් දෙකක් සමඟ මූලික විකල්ප දෙකක්.

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

.btnසමඟ බොත්තම් මාලාවක් ඔතා .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > වම් </button> 
  <button class = "btn" > මැද </button> 
  <button class = "btn" > දකුණ </button> 
</div>

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

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

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

සිරස් බොත්තම් කණ්ඩායම්

බොත්තම් කට්ටලයක් තිරස් අතට වඩා සිරස් අතට අසුරන ලෙස පෙනෙන්න.

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

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

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

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

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

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

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

<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 ප්ලගිනය අවශ්‍ය වේ.

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

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

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

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

ප්රමාණ

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Action </button> 
  <button class = "btn btn-mini 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 ගනී .

මූලික ටැබ්

නිතිපතා <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 සංරචකයක් සඳහා (ටැබ්, පෙති, හෝ ලැයිස්තුව), අළු සබැඳි .disabledසඳහා එක් කරන්න සහ කිසිදු හෝවර් බලපෑම් . hrefකෙසේ වෙතත්, ඔබ ගුණාංගය ඉවත් නොකළහොත් සබැඳි ක්ලික් කළ හැකිව පවතිනු ඇත . විකල්පයක් ලෙස, ඔබට එම ක්ලික් කිරීම් වැළැක්වීම සඳහා අභිරුචි JavaScript ක්‍රියාත්මක කළ හැකිය.

<ul class = "nav nav-pills" > 
  ...
  <li class = "ආබාධිත" ><a href = "#" > නිවස </a></li>  
  ...
</ul>

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

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

ගොඩ ගැසිය හැකි

ටැබ් සහ පෙති පෙරනිමියෙන් තිරස් වන බැවින් .nav-stacked, ඒවා සිරස් අතට අසුර ඇති බව පෙන්වීමට දෙවන පන්තියක් එක් කරන්න.

ගොඩගැසූ ටැබ්

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

ගොඩ ගැසූ පෙති

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

පතනයන්

ටිකක් අමතර HTML සහ dropdowns 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>

නව ලැයිස්තු

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

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

සබැඳි ලැයිස්තුවක් ගෙන එකතු කරන්න class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > ලැයිස්තු ශීර්ෂකය </li> 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > පුස්තකාලය </a></li> 
  ...
</ul>

සටහනනාවික ලැයිස්තුවක් තුළ කූඩු කිරීම සඳහා, class="nav nav-list"ඕනෑම කැදැල්ලක් මත ඇතුළත් කරන්න <ul>.

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

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

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

Tabbable nav

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

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

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

මම ඉන්නේ 1 කොටසේ.

කොහොමද, මම 2 කොටසේ ඉන්නේ.

මොකක්ද කෙල්ලේ මේ 3 වෙනි කොටස.

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

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

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

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

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

ඕනෑම දිශාවකට ටැබ් කළ හැකිය

පතුලේ ටැබ්

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

මම A කොටසේ ඉන්නේ.

කොහොමද, මම ඉන්නේ B කොටසේ.

මොනාද කෙල්ලේ මේක සී කොටස.

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

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

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

මම A කොටසේ ඉන්නේ.

කොහොමද, මම ඉන්නේ B කොටසේ.

මොනාද කෙල්ලේ මේක සී කොටස.

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

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

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

මම A කොටසේ ඉන්නේ.

කොහොමද, මම ඉන්නේ B කොටසේ.

මොනාද කෙල්ලේ මේක සී කොටස.

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

මූලික නව තීරුව

ආරම්භ කිරීමට, navbars ස්ථිතික (ඉහළට සවි කර නැත) සහ ව්‍යාපෘති නාමයක් සහ මූලික සංචාලනය සඳහා සහය ඇතුළත් වේ. .containerඔබේ වෙබ් අඩවියේ සහ අන්තර්ගතයේ පළල සකසන, තුළ ඕනෑම තැනක එකක් තබන්න .

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > මාතෘකාව </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Home </a></li>  
      <li><a href = "#" > සබැඳිය </a></li> 
      <li><a href = "#" > සබැඳිය </a></li> 
    </ul>
  </div>
</div>

Navbar සංරචක

වෙළඳ නාමය

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

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

නව සබැඳි

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

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

ආකෘති පත්ර

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

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

සෙවුම් පෝරමය

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

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

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

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

පතනයන් භාවිතා කිරීම

මාර්ක්අප් ටිකක් සහ ඩ්‍රොප් ඩවුන්ස් ජාවාස්ක්‍රිප්ට් ප්ලගිනය සමඟින් ඩ්‍රොප් ඩවුන් සහ ඩ්‍රොප්ස් nav වෙත එක් කරන්න .

<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>නිසි ප්‍රමුඛත්වය සහ වර්ණය සඳහා ටැගයක් මත.

විකල්ප සංදර්ශක වෙනස්කම්

පිටතම කොටසේ අමතර පන්තියක් සමඟින් නැව් තීරුව නැරඹුම් තොටේ ඉහළට හෝ පහළට සවි කරන්න .navbar.

ඉහළට සවි කර ඇත

ට අවම වශයෙන් 40px එකතු කිරීමෙන් .navbar-fixed-topඑයට යටින් ඇති සැඟවුණු ප්‍රදේශය එක් කර ගිණුමට මතක තබා ගන්න . මූලික Bootstrap CSS ට පසුව සහ විකල්ප ප්‍රතිචාරාත්මක CSS වලට පෙර මෙය එක් කිරීමට වග බලා ගන්න.padding<body>

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

පහළට සවි කර ඇත

.navbar-fixed-bottomඒ වෙනුවට එකතු කරන්න .

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

ස්ථිතික ඉහළ නව තීරුව

එකතු කිරීම මගින් පිටුව සමඟ අනුචලනය වන සම්පූර්ණ පළල නව තීරුවක් සාදන්න .navbar-static-top. පන්තිය මෙන් නොව .navbar-fixed-top, ඔබ මත කිසිදු පිරවුමක් වෙනස් කිරීමට අවශ්ය නොවේ body.

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

ප්‍රතිචාර දක්වන නව තීරුව

කඩා වැටෙන ප්‍රතිචාරාත්මක නව තීරුවක් ක්‍රියාත්මක කිරීමට, ඔබේ navbar අන්තර්ගතය අඩංගු div එකක ඔතා .nav-collapse.collapse, සහ navbar 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 collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

දැනුම්දීම! ප්‍රතිචාර දක්වන navbar සඳහා කඩා වැටීමේ ප්ලගිනය සහ ප්‍රතිචාරාත්මක Bootstrap CSS ගොනුව අවශ්‍ය වේ.

ප්රතිලෝම විචලනය

එකතු කිරීමෙන් නව තීරුවේ පෙනුම වෙනස් කරන්න .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

උදාහරණ

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

<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 මගින් ආනුභාව ලත් සරල පිටුකරණය, යෙදුම් සහ සෙවුම් ප්‍රතිඵල සඳහා විශිෂ්ටයි. විශාල කොටස මග හැරීමට අපහසුය, පහසුවෙන් පරිමාණය කළ හැකි අතර විශාල ක්ලික් ප්‍රදේශ සපයයි.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > පෙර </a></li> 
    <li><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 = "#" > 5 </a></li> 
    <li><a href = "#" > ඊළඟ </a></li> 
  </ul>
</div>

විකල්ප

ආබාධිත සහ ක්රියාකාරී තත්ත්වයන්

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

<div class = "pagination" > 
  <ul>
    <li class = "ආබාධිත" ><a href = "#" > « </a></li>  
    <li class = "සක්‍රිය" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

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

<div class = "pagination" > 
  <ul>
    <li class = "ආබාධිත" ><span> « </span></li> 
    <li class = "සක්‍රිය" ><span> 1 </span></li> 
    ...
  </ul>
</div>

ප්රමාණ

විශාල හෝ කුඩා පිටුවක් කිරීමට කැමතිද? එකතු කරන්න .pagination-large, .pagination-smallහෝ .pagination-miniඅතිරේක ප්රමාණ සඳහා.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

පෙළගැස්වීම

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

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</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>

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

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

<ul class = "පේජර්" > 
  <li class = "පෙර ආබාධිත" > 
    <a href = "#" > ← පැරණි </a> 
  </li>
  ...
</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 තේරීම්කාරකය හරහා) සරලව බිඳ වැටේ.

වීර ඒකකය

ඔබේ වෙබ් අඩවියේ ප්‍රධාන අන්තර්ගතයන් ප්‍රදර්ශනය කිරීමට සැහැල්ලු, නම්‍යශීලී සංරචකයකි. එය අලෙවිකරණ සහ අන්තර්ගත බර වෙබ් අඩවි මත හොඳින් ක්‍රියා කරයි.

හෙලෝ වර්ල්ඩ්!

මෙය සරල වීර ඒකකයකි, විශේෂාංගගත අන්තර්ගතය හෝ තොරතුරු වෙත අමතර අවධානයක් යොමු කිරීම සඳහා සරල ජම්බෝට්‍රොන්-ශෛලිය සංරචකයකි.

තවත් හදාරන්න

<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> උදාහරණ පිටු ශීර්ෂකය <small> ශීර්ෂකය සඳහා උප පෙළ </small></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.

කටයුතු කටයුතු
සිඟිති රූ ලේබලය

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 = "span4" > 
    <a href = "#" class = "thumbnail" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> සිඟිති රූ ලේබලය </h3>
      <p> සිඟිති රූ සිරස්තල... </p>
    </div>
  </li>
  ...
</ul>

තවත් උදාහරණ

ඔබට ලබා ගත හැකි විවිධ ජාල පන්ති සමඟ ඔබගේ සියලු විකල්ප ගවේෂණය කරන්න. ඔබට විවිධ ප්‍රමාණ මිශ්‍ර කර ගැලපීමටද හැකිය.

පෙරනිමි ඇඟවීම

.alertමූලික අනතුරු ඇඟවීමේ පණිවිඩයක් සඳහා ඕනෑම පෙළක් සහ විකල්ප ඉවත් කිරීමේ බොත්තමක් ඔතා.

අවවාදයයි! ඔබම පරීක්ෂා කර බලන්න, ඔබ එතරම් හොඳ පෙනුමක් නැත.

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

බොත්තම් ඉවත් කරන්න

ජංගම සෆාරි සහ මොබයිල් ඔපෙරා බ්‍රවුසර, data-dismiss="alert"උපලක්ෂණයට අමතරව, ටැගයක් href="#"භාවිතා කරන විට ඇඟවීම් ඉවත් කිරීම අවශ්‍ය වේ.<a>

<a href = "#" class = "close" data-dismiss = "alert" > × </a>

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

<button type = "button" class = "close" data-dismiss = "alert" > × </button>

JavaScript හරහා ඇඟවීම් ඉවතලන්න

ඇඟවීම් ඉක්මනින් සහ පහසුවෙන් ඉවත් කිරීම සඳහා ඇඟවීම් jQuery ප්ලගිනය භාවිතා කරන්න .

විකල්ප

දිගු පණිවිඩ සඳහා, එකතු කිරීමෙන් අනතුරු ඇඟවීමේ එතුමෙහි ඉහළ සහ පහළ පෑඩින් වැඩි කරන්න .alert-block.

අවවාදයයි!

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

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <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 = " width : 60 %; " ></div>   
</div>

ඉරි සහිත

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

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

සජීවිකරණ

දකුණේ සිට වමට ඉරි සජීවීකරණය .activeකිරීමට to එකතු කරන්න . .progress-stripedIE හි සියලුම අනුවාද වල නොමැත.

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

ගොඩගැසී ඇත

.progressඒවා ගොඩගැසීමට බහු බාර් එකකට දමන්න.

<div class = "ප්‍රගතිය" > 
  <div class = "bar bar-success" style = " width : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

විකල්ප

අමතර වර්ණ

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

<div class = "ප්‍රගති ප්‍රගතිය-තොරතුරු" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "ප්‍රගතිය ප්‍රගතිය-සාර්ථකත්වය" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "ප්‍රගතිය ප්‍රගතිය-අනතුරු ඇඟවීම" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "ප්‍රගතිය ප්‍රගතිය-අනතුර" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

ඉරි සහිත තීරු

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

<div class = "ප්‍රගති ප්‍රගතිය-තොරතුරු ප්‍රගතිය-ඉරි සහිත" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "ප්‍රගතිය ප්‍රගතිය-සාර්ථක ප්‍රගතිය-ඉරි සහිත" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "ප්‍රගතිය ප්‍රගතිය-අනතුරු ඇඟවීමේ ප්‍රගතිය-ඉරි සහිත" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "ප්‍රගතිය ප්‍රගතිය-අනතුරුදායක ප්‍රගතිය-ඉරි සහිත" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

බ්රවුසර සහාය

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

Internet Explorer 10 සහ Opera 12 ට පෙර අනුවාද සජීවිකරණ සඳහා සහය නොදක්වයි.

පාඨමය අන්තර්ගතය සමඟ වම් හෝ දකුණට පෙළගස්වන ලද රූපයක් සහිත විවිධ වර්ගයේ සංරචක (බ්ලොග් අදහස්, ට්වීට්, ආදිය) ගොඩනැගීම සඳහා වියුක්ත වස්තු මෝස්තර.

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

පෙරනිමි මාධ්‍ය අන්තර්ගත වාරණයක වමට හෝ දකුණට මාධ්‍ය වස්තුවක් (රූප, වීඩියෝ, ශ්‍රව්‍ය) පාවීමට ඉඩ සලසයි.

මාධ්ය මාතෘකාව

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ෆවුසිබස් හි ඩොනෙක් ලැසීනියා කොන්ගු ෆෙලිස්.

මාධ්ය මාතෘකාව

<div class = "media" > 
  <a class = "left-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media heading </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

මාධ්ය ලැයිස්තුව

අමතර සලකුණු කිරීමකින්, ඔබට ලැයිස්තුවේ මාධ්‍ය භාවිතා කළ හැකිය (අදහස් පොටවල් හෝ ලිපි ලැයිස්තු සඳහා ප්‍රයෝජනවත්).

මාධ්ය මාතෘකාව

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

කැදලි මාධ්‍ය ශීර්ෂකය
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

කැදලි මාධ්‍ය ශීර්ෂකය
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

කැදලි මාධ්‍ය ශීර්ෂකය
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
මාධ්ය මාතෘකාව
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "media-list" > 
  <li class = "මාධ්‍ය" > 
    <a class = "left-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media heading </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

ළිං

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

බලන්න, මම ඉන්නේ ළිඳක!

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

විකල්ප පන්ති

විකල්ප විකරණයක පන්ති දෙකක් සමඟ පිරවුම් සහ වටකුරු කොන් පාලනය කරන්න.

බලන්න, මම ඉන්නේ ළිඳක!

<div class = "හොඳින් විශාල" > 
  ...
</div>

බලන්න, මම ඉන්නේ ළිඳක!

<div class = "හොඳින් හොඳින් කුඩා" > 
  ...
</div>

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

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

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

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

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

උපකාරක පන්ති

කුඩා සංදර්ශක හෝ හැසිරීම් වෙනස් කිරීම් සඳහා සරල, නාභිගත පන්ති.

.වමට අදින්න

මූලද්රව්යයක් වමට පාවන්න

පන්තිය = "වමට අදින්න"

. අදින්න - වමට {
  පාවෙන : වම් ;
}

.දකුණට අදින්න

මූලද්රව්යයක් දකුණට පාවන්න

පන්තිය = "දකුණට අදින්න"

. අදින්න - දකුණට {
  පාවෙන : දකුණ ;
}

.නිශ්ශබ්දයි

මූලද්රව්යයක වර්ණය වෙනස් කරන්න#999

පන්තිය = "නිශ්ශබ්ද"

. නිහඬ කළ {
  වර්ණය : #999; 
}

.clearfix

floatඕනෑම අංගයක් මත හිස් කරන්න

පන්තිය = "පැහැදිලි කිරීම"

. clearfix {
  * විශාලනය : 1 ; 
  &: පෙර ,
  &: පසු {
    සංදර්ශකය : වගුව ;
    අන්තර්ගතය : "" ; 
  }
  &: පසු {
    පැහැදිලි : දෙකම ;
  }
}

පතන මෙනු

උදාහරණයක්

සලකුණු කිරීම

විකල්ප

මෙනු පෙළගැස්වීම

අබල කළ මෙනු විකල්ප

පතන මත උප මෙනු

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

උදාහරණ

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

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

සිරස් බොත්තම් කණ්ඩායම්

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

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

බොත්තම් පතන මෙනු

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

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

JavaScript අවශ්‍යයි

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

ප්රමාණ

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

නව: ටැබ්, පෙති සහ ලැයිස්තු

සැහැල්ලු පෙරනිමි එකම සලකුණු, විවිධ පන්ති

මූලික ටැබ්

මූලික පෙති

ආබාධිත තත්ත්වය

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

ගොඩ ගැසිය හැකි

ගොඩගැසූ ටැබ්

ගොඩ ගැසූ පෙති

පතනයන්

පතන සහිත ටැබ්

පතන සහිත පෙති

නව ලැයිස්තු

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

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

Tabbable nav

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

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

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

ඕනෑම දිශාවකට ටැබ් කළ හැකිය

පතුලේ ටැබ්

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

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

නවබාර්

මූලික නව තීරුව

Navbar සංරචක

වෙළඳ නාමය

නව සබැඳි

ආකෘති පත්ර

සෙවුම් පෝරමය

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

පතනයන් භාවිතා කිරීම

පෙළ

විකල්ප සංදර්ශක වෙනස්කම්

ඉහළට සවි කර ඇත

පහළට සවි කර ඇත

ස්ථිතික ඉහළ නව තීරුව

ප්‍රතිචාර දක්වන නව තීරුව

ප්රතිලෝම විචලනය

පාන් කුඩු

උදාහරණ

පිටුකරණය අන්තර්ගතය හරහා පිටුගත කිරීම සඳහා විකල්ප දෙකක්

සම්මත පිටුකරණය

විකල්ප

ආබාධිත සහ ක්රියාකාරී තත්ත්වයන්

ප්රමාණ

පෙළගැස්වීම

පේජර්

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

පෙළගැස්වූ සබැඳි

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

ලේබල් සහ ලාංඡන

ලේබල්

ලාංඡන

පහසුවෙන් කඩා වැටිය හැකි

යතුරු ලියන සංරචක

වීර ඒකකය

හෙලෝ වර්ල්ඩ්!

පිටු ශීර්ෂකය