ឧទាហរណ៍

អាចបិទបើកបាន ម៉ឺនុយបរិបទសម្រាប់បង្ហាញបញ្ជីតំណ។ បានធ្វើអន្តរកម្មជាមួយ កម្មវិធីជំនួយ JavaScript ទម្លាក់ចុះ ។

<ul class = "dropdown-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" តួនាទី = "ម៉ឺនុយ" 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-rightទៅ .dropdown-menuស្តាំ តម្រឹមម៉ឺនុយទម្លាក់ចុះ។

<ul class = "dropdown-menu pull-right" តួនាទី = "ម៉ឺនុយ" aria-labelledby = "dLabel" >   
  ...
</ul>

ជម្រើសម៉ឺនុយបិទ

បញ្ចូល .disabledទៅ <li>ក្នុងបញ្ជីទម្លាក់ចុះ ដើម្បីបិទតំណ។

<ul class = "dropdown-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 ជាមួយនឹងការបន្ថែមសញ្ញាសម្គាល់សាមញ្ញមួយចំនួន។ បន្ថែម .dropdown-submenuទៅណាមួយ liនៅក្នុងម៉ឺនុយទម្លាក់ចុះដែលមានស្រាប់សម្រាប់ការកំណត់រចនាប័ទ្មដោយស្វ័យប្រវត្តិ។

<ul class = "dropdown-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 សម្រាប់នោះ។

ទម្លាក់ចុះក្នុងក្រុមប៊ូតុង

ព្រឺក្បាល!ប៊ូតុង​ដែល​មាន​ការ​ទម្លាក់​ចុះ​ត្រូវ​តែ​ត្រូវ​បាន​រុំ​ជា​លក្ខណៈ​បុគ្គល​ដោយ​ខ្លួន​ឯង .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 ដើម្បីដំណើរការ។

ក្នុងករណីខ្លះ ដូចជាទូរសព្ទចល័ត ម៉ឺនុយទម្លាក់ចុះនឹងពង្រីកនៅខាងក្រៅកន្លែងមើល។ អ្នកត្រូវដោះស្រាយការតម្រឹមដោយដៃ ឬដោយប្រើ JavaScript ផ្ទាល់ខ្លួន។

បំបែកប៊ូតុងទម្លាក់ចុះ

ដោយបង្កើតរចនាប័ទ្មក្រុមប៊ូតុង និងការសម្គាល់ យើងអាចបង្កើតប៊ូតុងបំបែកបានយ៉ាងងាយស្រួល។ ប៊ូតុងបំបែកមានសកម្មភាពស្តង់ដារមួយនៅខាងឆ្វេង និងទម្លាក់ចុះបិទបើកនៅខាងស្តាំជាមួយនឹងតំណភ្ជាប់បរិបទ។

<div class = "btn-group" > 
  <button class = "btn" > សកម្មភាព </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" > សកម្មភាព </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" > ទម្លាក់ </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 = "active" > 
    <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 = "active" > 
    <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 = "disabled" > <a href="#"> ផ្ទះ </a> </li >  
  ...
</ul>

ការតម្រឹមសមាសធាតុ

ដើម្បីតម្រឹមតំណ nav ប្រើ .pull-leftឬ .pull-rightថ្នាក់ឧបករណ៍ប្រើប្រាស់។ ថ្នាក់ទាំងពីរនឹងបន្ថែមអណ្តែត CSS ក្នុងទិសដៅដែលបានបញ្ជាក់។

អាចជង់បាន។

ដោយសារផ្ទាំង និងថ្នាំត្រូវបានដាក់ផ្ដេកតាមលំនាំដើម គ្រាន់តែបន្ថែមថ្នាក់ទីពីរ .nav-stackedដើម្បីធ្វើឱ្យពួកវាលេចឡើងជាជង់បញ្ឈរ។

ផ្ទាំងជង់

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

ថ្នាំគ្រាប់ជង់

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

ទម្លាក់ចុះ

បន្ថែមម៉ឺនុយទម្លាក់ចុះជាមួយ HTML បន្ថែមតិចតួច និង កម្មវិធីជំនួយ JavaScript ទម្លាក់ចុះ ។

ផ្ទាំងដែលមានបញ្ជីទម្លាក់ចុះ

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-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" 
       data-toggle = "ទម្លាក់ចុះ"
       href = "#" >
        ទម្លាក់​ចុះ
        <b class = "caret" ></b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- តំណភ្ជាប់ -->
    </ul>
  </li>
</ul>

បញ្ជី Nav

វិធីសាមញ្ញ និងងាយស្រួលក្នុងការបង្កើតក្រុមនៃតំណភ្ជាប់ nav ជាមួយនឹងបឋមកថាស្រេចចិត្ត។ ពួកវាត្រូវបានប្រើយ៉ាងល្អបំផុតនៅក្នុងរបារចំហៀងដូចជា Finder នៅក្នុង OS X។

ឧទាហរណ៍បញ្ជី nav

យកបញ្ជីតំណ ហើយបន្ថែម class="nav nav-list"៖

<ul class = "nav nav-list" > 
  <li class = "nav-header" > បញ្ជីបឋមកថា </li> 
  <li class = "active" > <a href="#"> ផ្ទះ </a> </li >  
  <li><a href="#"> បណ្ណាល័យ </a> < /li > 
  ...
</ul>

ចំណាំសម្រាប់ការដាក់សំបុកនៅក្នុងបញ្ជី nav រួមបញ្ចូល class="nav nav-list"នៅលើសំបុកណាមួយ <ul>។

ការបែងចែកផ្តេក

បន្ថែមការបែងចែកផ្តេកដោយបង្កើតធាតុបញ្ជីទទេជាមួយថ្នាក់ .dividerដូចជា៖

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

Tabbable nav

ធ្វើឱ្យផ្ទាំងរបស់អ្នកមានជីវិតជាមួយនឹងកម្មវិធីជំនួយដ៏សាមញ្ញមួយដើម្បីបិទបើករវាងមាតិកាតាមរយៈផ្ទាំង។ Bootstrap រួមបញ្ចូលផ្ទាំងដែលអាចដាក់បានក្នុងរចនាប័ទ្មចំនួនបួន៖ កំពូល (លំនាំដើម) ស្តាំ បាត និងខាងឆ្វេង។

ឧទាហរណ៍ដែលអាចនិយាយបាន។

ដើម្បីបង្កើតផ្ទាំងដែលអាចដាក់បាន សូមបង្កើត .tab-paneលេខសម្គាល់តែមួយគត់សម្រាប់ផ្ទាំងនីមួយៗ ហើយរុំពួកវាទៅក្នុង .tab-content.

<div class = "tabbable" > <!-- ទាមទារ​សម្រាប់​តែ​ផ្ទាំង​ឆ្វេង/ស្តាំ -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" > <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 សកម្ម" id = "tab1" >  
      <p> ខ្ញុំ​នៅ​ផ្នែក​ទី ១។ </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> សួស្តី ខ្ញុំ​នៅ​វគ្គ ២។ </p>
    </div>
  </div>
</div>

បន្ថយនៅក្នុងផ្ទាំង

ដើម្បីធ្វើឱ្យផ្ទាំងធ្លាក់ចុះ សូមបន្ថែម .fadeទៅនីមួយៗ .tab-pane។

ទាមទារកម្មវិធីជំនួយ jQuery

ផ្ទាំងដែលអាចប្រើបានទាំងអស់ត្រូវបានដំណើរការដោយកម្មវិធីជំនួយ jQuery ទម្ងន់ស្រាលរបស់យើង។ សូមអានបន្ថែមអំពីវិធីនាំយកផ្ទាំងដែលអាចដាក់បានទៅកាន់ជីវិត នៅលើទំព័រឯកសារ JavaScript ។

អាចដាក់បានក្នុងទិសដៅណាមួយ។

ផ្ទាំងនៅខាងក្រោម

ត្រឡប់លំដាប់នៃ HTML ហើយបន្ថែមថ្នាក់មួយដើម្បីដាក់ផ្ទាំងនៅខាងក្រោម។

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

ផ្ទាំងនៅខាងឆ្វេង

ប្តូរថ្នាក់ដើម្បីដាក់ផ្ទាំងនៅខាងឆ្វេង។

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

ផ្ទាំងនៅខាងស្តាំ

ប្តូរថ្នាក់ដើម្បីដាក់ផ្ទាំងនៅខាងស្តាំ។

<div class = "tabbable 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="#"> ផ្ទះ </a> </li >  
      <li><a href="#"> តំណ </a> < /li > 
      <li><a href="#"> តំណ </a> < /li > 
    </ul>
  </div>
</div>

សមាសធាតុ Navbar

ម៉ាក

តំណភ្ជាប់សាមញ្ញដើម្បីបង្ហាញម៉ាក ឬឈ្មោះគម្រោងរបស់អ្នក ទាមទារតែស្លាកយុថ្កាប៉ុណ្ណោះ។

<a class="brand" href="#"> ឈ្មោះ គម្រោង </a> _ _ _ _  

តំណរុករក

ធាតុ Nav គឺសាមញ្ញក្នុងការបន្ថែមតាមរយៈបញ្ជីដែលមិនបានបញ្ជាទិញ។

<ul class = "nav" > 
  <li class = "active" > 
    <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" > 
  < ប្រភេទ បញ្ចូល = "អត្ថបទ" class = "span2" >  
  <button type = "submit" class = "btn" > បញ្ជូន </button>  
</form>

ទម្រង់ស្វែងរក

សម្រាប់ទម្រង់ស្វែងរកដែលប្ដូរតាមបំណងបន្ថែម បន្ថែម .navbar-searchទៅ formនិង .search-queryបញ្ចូលសម្រាប់រចនាប័ទ្មពិសេសនៅក្នុងរបាររុករក។

<form class = "navbar-search pull-left" > 
  < input type = "text" class = "search-query" placeholder = "ស្វែងរក" >   
</form>

ការតម្រឹមសមាសធាតុ

តម្រឹមតំណរុករក ទម្រង់ស្វែងរក ឬអត្ថបទ ប្រើ .pull-leftឬ .pull-rightថ្នាក់ឧបករណ៍ប្រើប្រាស់។ ថ្នាក់ទាំងពីរនឹងបន្ថែមអណ្តែត CSS ក្នុងទិសដៅដែលបានបញ្ជាក់។

ការប្រើប្រាស់បញ្ជីទម្លាក់ចុះ

បន្ថែមការទម្លាក់ចុះ និងទម្លាក់ចុះទៅ 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 សម្រាប់ការសម្គាល់បន្ថែម និងព័ត៌មានស្តីពីការហៅទម្លាក់ចុះ។

អត្ថបទ

រុំខ្សែអក្សរនៃអត្ថបទនៅក្នុងធាតុមួយ .navbar-textជាធម្មតានៅលើ <p>ស្លាកសម្រាប់ការនាំមុខ និងពណ៌ត្រឹមត្រូវ។

បំរែបំរួលការបង្ហាញជាជម្រើស

ជួសជុលរបាររុករកទៅផ្នែកខាងលើ ឬខាងក្រោមនៃច្រកទិដ្ឋភាពជាមួយនឹងថ្នាក់បន្ថែមមួយនៅលើ div ខាងក្រៅបំផុត, .navbar.

ជួសជុលទៅកំពូល

បន្ថែម .navbar-fixed-topនិងចងចាំក្នុងគណនីសម្រាប់តំបន់លាក់នៅក្រោមវាដោយបន្ថែមយ៉ាងហោចណាស់ 40px paddingទៅ <body>. ត្រូវប្រាកដថាបន្ថែមវាបន្ទាប់ពី CSS ស្នូល Bootstrap និងមុនពេល CSS ឆ្លើយតបជាជម្រើស។

<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 ឆ្លើយតបដែលដួលរលំ សូមរុំមាតិកា navbar របស់អ្នកនៅក្នុង div ដែលមាន div .nav-collapse.collapseហើយបន្ថែមប៊ូតុងបិទ/បើក navbar .btn-navbar។

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .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>

បំរែបំរួលបញ្ច្រាស

កែប្រែរូបរាងរបស់របាររុករកដោយបន្ថែម .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 = "active" > ទិន្នន័យ </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="#"> ៤ </a> < /li > 
    <li><a href="#"> 5 </a> < /li > 
    <li><a href="#"> បន្ទាប់ </a> < /li > 
  </ul>
</div>

ជម្រើស

រដ្ឋដែលបិទ និងសកម្ម

តំណភ្ជាប់អាចប្ដូរតាមបំណងបានសម្រាប់កាលៈទេសៈផ្សេងៗ។ ប្រើ .disabledសម្រាប់តំណដែលមិនអាចចុចបាន និង .activeដើម្បីចង្អុលបង្ហាញទំព័របច្ចុប្បន្ន។

<div class = "pagination" > 
  <ul>
    <li class = "disabled" > <a href="#" > & laquo ; </a></li>  
    <li class = "active" > <a href="#"> 1 </a></ li >  
    ...
  </ul>
</div>

អ្នកអាចប្តូរយុថ្កាសកម្ម ឬបិទជាជម្រើសសម្រាប់វិសាលភាព ដើម្បីលុបមុខងារចុចចេញ ខណៈពេលដែលរក្សារចនាប័ទ្មដែលចង់បាន។

<div class = "pagination" > 
  <ul>
    <li class = "disabled" ><span> « </span></li> 
    <li class = "active" ><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 = "pager" > 
  <li><a href="#"> មុន </a> < /li > 
  <li><a href="#"> បន្ទាប់ </a> < /li > 
</ul>

តំណភ្ជាប់ដែលបានតម្រឹម

ជាជម្រើស អ្នកអាចតម្រឹមតំណនីមួយៗទៅភាគី៖

<ul class = "pager" > 
  <li class = "មុន" > 
    <a href="#"> & larr ; _ ចាស់ </a> 
  </li>
  <li class = "next" > 
    <a href="#"> ថ្មី ជាង & rarr ; </a> 
  </li>
</ul>

ស្ថានភាពបិទជម្រើស

តំណភ្ជាប់ Pager ក៏ប្រើ .disabledថ្នាក់ឧបករណ៍ប្រើប្រាស់ទូទៅពី pagination ផងដែរ។

<ul class = "pager" > 
  <li class = "ពីមុនបានបិទ" > 
    <a href="#"> & larr ; _ ចាស់ </a> 
  </li>
  ...
</ul>

ស្លាក

ផ្លាកសញ្ញា

ងាយដួលរលំ

ដើម្បីងាយស្រួលអនុវត្ត ស្លាក និងផ្លាកសញ្ញានឹងដួលរលំយ៉ាងសាមញ្ញ (តាមរយៈកម្មវិធី :emptyជ្រើសរើសរបស់ CSS) នៅពេលដែលគ្មានខ្លឹមសារនៅក្នុងនោះ។

ឯកតាវីរបុរស

សមាសធាតុស្រាល និងអាចបត់បែនបាន ដើម្បីបង្ហាញខ្លឹមសារសំខាន់ៗនៅលើគេហទំព័ររបស់អ្នក។ វាដំណើរការបានយ៉ាងល្អនៅលើទីផ្សារ និងគេហទំព័រដែលមានមាតិកាធ្ងន់។

<div class = "hero-unit" > 
  <h1> ក្បាល </h1>
  <p> Tagline </p>
  <p>
    <a class="btn btn-primary btn-large"> _ 
      ស្វែង​យល់​បន្ថែម
    </a>
  </p>
</div>

ក្បាលទំព័រ

សែលសាមញ្ញសម្រាប់ h1ដកឃ្លាយ៉ាងសមរម្យ និងបែងចែកផ្នែកនៃមាតិកានៅលើទំព័រមួយ។ វា​អាច​ប្រើ h1​លំនាំដើម​របស់ small​ធាតុ ក៏ដូចជា​សមាសធាតុ​ផ្សេងទៀត​ភាគច្រើន (ជាមួយ​រចនាប័ទ្ម​បន្ថែម)។

<div class = "page-header" > 
  <h1> បឋមកថាទំព័រឧទាហរណ៍ <small> អត្ថបទរងសម្រាប់បឋមកថា </small></h1>
</div>

រូបភាពតូចលំនាំដើម

តាមលំនាំដើម រូបភាពតូចៗរបស់ Bootstrap ត្រូវបានរចនាឡើងដើម្បីបង្ហាញរូបភាពដែលបានភ្ជាប់ជាមួយនឹងការសម្គាល់ដែលត្រូវការតិចតួចបំផុត។

អាចប្ដូរតាមបំណងបានខ្ពស់។

ជាមួយនឹងការសម្គាល់បន្ថែមបន្តិច វាអាចបន្ថែមមាតិកា HTML គ្រប់ប្រភេទដូចជា ចំណងជើង កថាខណ្ឌ ឬប៊ូតុងទៅក្នុងរូបភាពតូចៗ។

ហេតុអ្វីត្រូវប្រើរូបភាពតូច

រូបភាពតូចៗ (ពីមុន .media-gridរហូតដល់ v1.4) គឺល្អសម្រាប់ក្រឡានៃរូបថត ឬវីដេអូ លទ្ធផលស្វែងរករូបភាព ផលិតផលលក់រាយ ផលប័ត្រ និងច្រើនទៀត។ ពួកវាអាចជាតំណភ្ជាប់ ឬខ្លឹមសារឋិតិវន្ត។

ការសម្គាល់សាមញ្ញ និងអាចបត់បែនបាន។

ការសម្គាល់រូបភាពតូចគឺសាមញ្ញ - ulជាមួយនឹងចំនួន liធាតុណាមួយគឺចាំបាច់ទាំងអស់។ វាក៏អាចបត់បែនបានផងដែរ ដែលអនុញ្ញាតឱ្យមានប្រភេទមាតិកាណាមួយ ដោយគ្រាន់តែមានសញ្ញាសម្គាល់បន្ថែមទៀត ដើម្បីរុំមាតិការបស់អ្នក។

ប្រើទំហំជួរឈរក្រឡាចត្រង្គ

ជាចុងក្រោយ សមាសធាតុរូបភាពតូចប្រើប្រាស់ថ្នាក់ប្រព័ន្ធក្រឡាចត្រង្គដែលមានស្រាប់ ដូចជា .span2ឬ .span3- សម្រាប់ការគ្រប់គ្រងទំហំរូបភាពតូច។

សម្គាល់

ដូចដែលបានរៀបរាប់ពីមុន ការសម្គាល់ដែលត្រូវការសម្រាប់រូបភាពតូចៗគឺស្រាល និងត្រង់។ នេះជាការកំណត់លំនាំដើម សម្រាប់រូបភាពដែលបានភ្ជាប់ ៖

<ul class = "រូបភាពតូច" > 
  <li class = "span4" > 
    <a href="#" class="thumbnail"> _ _ _ _ _  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

សម្រាប់មាតិកា HTML ផ្ទាល់ខ្លួននៅក្នុងរូបភាពតូច សញ្ញាសម្គាល់ផ្លាស់ប្តូរបន្តិច។ ដើម្បីអនុញ្ញាតឱ្យមាតិកាកម្រិតប្លុកនៅគ្រប់ទីកន្លែង យើងប្តូរទៅ <a>ដូច <div>នោះ៖

<ul class = "រូបភាពតូច" > 
  <li class = "span4" > 
    <div class = "រូបភាពតូច" > 
      <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> ព្រមាន! ពិនិត្យ​មើល​ខ្លួន​ឯង ​ឱ្យ ​បាន​ល្អ​បំផុត អ្នក​មើល​ទៅ​មិន​ល្អ​ពេក​ទេ។
</div>

បិទប៊ូតុង

កម្មវិធីរុករកតាមអ៊ីនធឺណិត Mobile Safari និង Mobile Opera បន្ថែមពីលើ data-dismiss="alert"គុណលក្ខណៈ ទាមទារ href="#"ការលុបចោលការជូនដំណឹងនៅពេលប្រើ <a>ស្លាក។

<a href="#" class="close" data-dismiss = "alert"> & times ; _ _ _ </a>   

ជាជម្រើស អ្នកអាចប្រើ <button>ធាតុដែលមានគុណលក្ខណៈទិន្នន័យ ដែលយើងជ្រើសរើសធ្វើសម្រាប់ឯកសាររបស់យើង។ នៅពេលប្រើ <button>អ្នកត្រូវតែបញ្ចូល type="button"ឬទម្រង់របស់អ្នកមិនអាចដាក់ស្នើបានទេ។

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

ច្រានចោលការជូនដំណឹងតាមរយៈ JavaScript

ប្រើ កម្មវិធីជំនួយ jQuery ការដាស់តឿន សម្រាប់ការច្រានចោលការជូនដំណឹងរហ័ស និងងាយស្រួល។

ជម្រើស

សម្រាប់សារដែលវែងជាងនេះ បង្កើនបន្ទះនៅផ្នែកខាងលើ និងខាងក្រោមនៃសារដាស់តឿនដោយបន្ថែម .alert-block.

<div class = "ការជូនដំណឹង alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </button>   
  <h4> ប្រយ័ត្ន! </h4>
  ពិនិត្យ​ខ្លួន​ឯង​ឱ្យ​បាន​ល្អ​បំផុត អ្នក​មិន...
</div>

ជម្មើសជំនួសតាមបរិបទ

បន្ថែមថ្នាក់ស្រេចចិត្ត ដើម្បីផ្លាស់ប្តូរអត្ថន័យនៃការជូនដំណឹង។

កំហុសឬគ្រោះថ្នាក់

<div class = "ការជូនដំណឹង alert-error" > 
  ...
</div>

ជោគជ័យ

<div class = "ការជូនដំណឹង alert-success" > 
  ...
</div>

ព័ត៌មាន

<div class = "ការជូនដំណឹង alert-info" > 
  ...
</div>

ឧទាហរណ៍និងការសម្គាល់

មូលដ្ឋាន

របារវឌ្ឍនភាពលំនាំដើមជាមួយនឹងជម្រាលបញ្ឈរ។

<div class = "វឌ្ឍនភាព" > 
  <div class = "bar" style = " width : 60 %; " ></div>   
</div>

ឆ្នូត

ប្រើជម្រាលដើម្បីបង្កើតបែបផែនឆ្នូត។ មិនមាននៅក្នុង IE7-8 ទេ។

<div class = "progress progress-striped" > 
  <div class = "bar" style = " width : 20 %; " ></div>   
</div>

មានចលនា

បន្ថែម .activeទៅ .progress-stripedដើម្បីធ្វើឱ្យឆ្នូតមានចលនាពីស្តាំទៅឆ្វេង។ មិនមាននៅក្នុងកំណែទាំងអស់នៃ IE ទេ។

<div class = "វឌ្ឍនភាព-ឆ្នូតសកម្ម" > 
  <div class = "bar" style = " width : 40 %; " ></div>   
</div>

ជង់

ដាក់របារជាច្រើនចូលទៅក្នុងដូចគ្នា .progressដើម្បីជង់ពួកគេ។

<div class = "វឌ្ឍនភាព" > 
  <div class = "bar bar-success" style = " ទទឹង : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " width : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " width : 10 %; " ></div>   
</div>

ជម្រើស

ពណ៌បន្ថែម

របារវឌ្ឍនភាពប្រើប៊ូតុងដូចគ្នាមួយចំនួន និងថ្នាក់ជូនដំណឹងសម្រាប់រចនាប័ទ្មស្របគ្នា។

<div class = "progress progress-info" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "វឌ្ឍនភាព-ជោគជ័យ" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

របារឆ្នូត

ស្រដៀងទៅនឹងពណ៌រឹង យើងមានរបារវឌ្ឍនភាពឆ្នូតខុសៗគ្នា។

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " width : 20 % " ></div>   
</div>
<div class = "progress progress-success progress-striped" > 
  <div class = "bar" style = " width : 40 % " ></div>   
</div>
<div class = "progress-warning progress-striped" > 
  <div class = "bar" style = " width : 60 % " ></div>   
</div>
<div class = "progress progress-danger progress-striped" > 
  <div class = "bar" style = " width : 80 % " ></div>   
</div>

ការគាំទ្រកម្មវិធីរុករក

របារវឌ្ឍនភាពប្រើជម្រាល CSS3 ការផ្លាស់ប្តូរ និងចលនាដើម្បីសម្រេចបាននូវឥទ្ធិពលទាំងអស់របស់វា។ មុខងារទាំងនេះមិនត្រូវបានគាំទ្រនៅក្នុង IE7-9 ឬកំណែចាស់របស់ Firefox ទេ។

កំណែមុន Internet Explorer 10 និង Opera 12 មិនគាំទ្រចលនាទេ។

រចនាប័ទ្ម​វត្ថុ​អរូបី​សម្រាប់​ការ​បង្កើត​ប្រភេទ​សមាសធាតុ​ផ្សេងៗ (ដូចជា​មតិ​ប្លក់ ធ្វីត។

ឧទាហរណ៍លំនាំដើម

ប្រព័ន្ធផ្សព្វផ្សាយលំនាំដើមអនុញ្ញាតឱ្យបណ្ដែតវត្ថុមេឌៀ (រូបភាព វីដេអូ អូឌីយ៉ូ) ទៅខាងឆ្វេង ឬខាងស្តាំនៃប្លុកមាតិកា។

ចំណងជើងប្រព័ន្ធផ្សព្វផ្សាយ

Cras អង្គុយ 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 ។ Donec lacinia congue felis នៅ faucibus ។

ចំណងជើងប្រព័ន្ធផ្សព្វផ្សាយ

Cras អង្គុយ 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 ។ Donec lacinia congue felis នៅ faucibus ។

ចំណងជើងប្រព័ន្ធផ្សព្វផ្សាយ

Cras អង្គុយ 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 ។ Donec lacinia congue felis នៅ faucibus ។

<div class = "media" > 
  <a class="pull-left" href="#" > _ _ _ _  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > ក្បាលមេឌៀ </h4> 
    ...
 
    <!-- វត្ថុ​មេឌៀ​ដែល​បាន​លាក់ -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

បញ្ជីប្រព័ន្ធផ្សព្វផ្សាយ

ជាមួយនឹងការសម្គាល់បន្ថែមបន្តិច អ្នកអាចប្រើមេឌៀនៅខាងក្នុងបញ្ជី (មានប្រយោជន៍សម្រាប់អត្ថបទមតិយោបល់ ឬបញ្ជីអត្ថបទ)។

<ul class = "media-list" > 
  <li class = "media" > 
    <a class="pull-left" href="#" > _ _ _ _  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > ក្បាលមេឌៀ </h4> 
      ...
 
      <!-- វត្ថុ​មេឌៀ​ដែល​បាន​លាក់ -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

អណ្តូង

ប្រើអណ្តូងជាបែបផែនសាមញ្ញលើធាតុមួយ ដើម្បីផ្តល់ឱ្យវានូវឥទ្ធិពល inset ។

<div class = "ល្អ" > 
  ...
</div>

ថ្នាក់ជម្រើស

គ្រប់គ្រងទ្រនាប់ និងជ្រុងមូលជាមួយនឹងថ្នាក់កែប្រែស្រេចចិត្តពីរ។

<div class = "well-large" > 
  ...
</div>

<div class = "ល្អ-តូច" > 
  ...
</div>

បិទរូបតំណាង

ប្រើរូបតំណាងបិទទូទៅសម្រាប់ការបិទមាតិកាដូចជាម៉ូឌុល និងការជូនដំណឹង។

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

ឧបករណ៍ iOS ទាមទារ href="#"ព្រឹត្តិការណ៍ចុច ប្រសិនបើអ្នកចង់ប្រើយុថ្កា។

<a class="close" href="#"> & times ; _ _ _ </a>  

ថ្នាក់ជំនួយ

ថ្នាក់ផ្តោតសាមញ្ញ សម្រាប់ការបង្ហាញតូច ឬកែប្រែឥរិយាបថ។

.ទាញ-ឆ្វេង

អណ្តែតធាតុមួយនៅខាងឆ្វេង

ថ្នាក់ = "ទាញ​ឆ្វេង"

. ទាញ - ឆ្វេង {
  អណ្តែត ៖ ឆ្វេង ;
}

.ទាញស្តាំ

អណ្តែតធាតុត្រឹមត្រូវ។

class = "pull-right"

. ទាញ - ស្តាំ {
  អណ្តែត ៖ ត្រូវ ;
}

.បានបិទ

ផ្លាស់ប្តូរពណ៌របស់ធាតុទៅ#999

ថ្នាក់ = "បិទ"

. បាន​បិទ​សំឡេង {
  ពណ៌ ៖ #999; 
}

.ជម្រះ

ជម្រះ floatធាតុនៅលើធាតុណាមួយ ។

class = "clearfix"

. ជម្រះ {
  * ពង្រីក ៖ ១ ; 
  &: មុន ,
  &: បន្ទាប់ពី {
    បង្ហាញ ៖ តារាង ;
    មាតិកា ៖ "" ; 
  }
  &: បន្ទាប់ពី {
    ច្បាស់ ៖ ទាំងពីរ ;
  }
}