ទទួលបានការថយចុះនៃផ្នែកសំខាន់ៗនៃហេដ្ឋារចនាសម្ព័ន្ធរបស់ Bootstrap រួមទាំងវិធីសាស្រ្តរបស់យើងក្នុងការអភិវឌ្ឍន៍គេហទំព័រកាន់តែប្រសើរ លឿន និងរឹងមាំជាងមុន។

ប្រភេទឯកសារ HTML5

Bootstrap ប្រើប្រាស់ធាតុ HTML ជាក់លាក់ និងលក្ខណៈសម្បត្តិ CSS ដែលទាមទារឱ្យប្រើប្រភេទឯកសារ HTML5 ។ រួមបញ្ចូលវានៅដើមដំបូងនៃគម្រោងរបស់អ្នកទាំងអស់។

<!DOCTYPE html>
<html lang="en">
  ...
</html>

ទូរស័ព្ទចល័តដំបូង

ជាមួយនឹង Bootstrap 2 យើងបានបន្ថែមរចនាប័ទ្មដែលងាយស្រួលប្រើសម្រាប់ទូរសព្ទចល័តជាជម្រើសសម្រាប់ទិដ្ឋភាពសំខាន់ៗនៃក្របខ័ណ្ឌ។ ជាមួយនឹង Bootstrap 3 យើងបានសរសេរគម្រោងឡើងវិញដើម្បីឱ្យមានភាពស្និទ្ធស្នាលជាមួយទូរស័ព្ទចល័តតាំងពីដំបូង។ ជំនួសឱ្យការបន្ថែមលើរចនាប័ទ្មទូរសព្ទចល័តជាជម្រើស ពួកវាត្រូវបានដុតចូលទៅក្នុងស្នូល។ តាមពិត Bootstrap គឺជាទូរស័ព្ទចល័តដំបូងគេ ។ រចនាប័ទ្មដំបូងចល័តអាចរកបាននៅទូទាំងបណ្ណាល័យទាំងមូលជំនួសឱ្យឯកសារដាច់ដោយឡែក។

ដើម្បីធានាបាននូវការបង្ហាញត្រឹមត្រូវ និងការពង្រីកដោយប៉ះ សូម បន្ថែមស្លាកមេតាទិដ្ឋភាព ទៅកាន់របស់អ្នក <head>។

<meta name="viewport" content="width=device-width, initial-scale=1">

អ្នកអាចបិទសមត្ថភាពពង្រីកនៅលើឧបករណ៍ចល័តដោយបន្ថែម user-scalable=noទៅស្លាកមេតានៃទិដ្ឋភាព។ នេះបិទការពង្រីក មានន័យថាអ្នកប្រើប្រាស់អាចរមូរតែប៉ុណ្ណោះ ហើយជាលទ្ធផលគេហទំព័ររបស់អ្នកមានអារម្មណ៍ដូចជាកម្មវិធីដើមបន្តិច។ សរុបមក យើងមិនណែនាំវានៅគ្រប់គេហទំព័រទេ ដូច្នេះសូមប្រយ័ត្ន!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

អក្សរកាត់ និងតំណភ្ជាប់

Bootstrap កំណត់ការបង្ហាញសកលជាមូលដ្ឋាន វាយអក្សរ និងរចនាប័ទ្មតំណ។ ជាពិសេស យើង៖

កំណត់ background-color: #fff;នៅលើbody
ប្រើ @font-family-base, @font-size-base, និង @line-height-baseគុណលក្ខណៈជាមូលដ្ឋានវាយអក្សររបស់យើង។
កំណត់ពណ៌តំណសកលតាមរយៈ @link-colorនិងអនុវត្តការគូសបន្ទាត់ក្រោមតំណតែប៉ុណ្ណោះ:hover

រចនាប័ទ្មទាំងនេះអាចរកបាននៅក្នុង scaffolding.less។

Normalize.css

សម្រាប់ការធ្វើឱ្យប្រសើរឡើងនូវការបង្ហាញឆ្លងកម្មវិធីរុករកតាមអ៊ីនធឺណិត យើងប្រើ Normalize.css ជាគម្រោងដោយ Nicolas Gallagher និង Jonathan Neal ។

ធុង

Bootstrap ទាមទារធាតុដែលមានដើម្បីរុំមាតិកាគេហទំព័រ និងរៀបចំប្រព័ន្ធក្រឡាចត្រង្គរបស់យើង។ អ្នកអាចជ្រើសរើសធុងមួយក្នុងចំណោមធុងពីរដើម្បីប្រើក្នុងគម្រោងរបស់អ្នក។ ចំណាំថាដោយសារតែ paddingនិងច្រើនទៀត ធុងទាំងពីរមិនមានសំបុកទេ។

ប្រើ .containerសម្រាប់ធុងទទឹងថេរដែលឆ្លើយតប។

<div class="container">
  ...
</div>

ប្រើ .container-fluidសម្រាប់កុងតឺន័រដែលមានទទឹងពេញ ដែលលាតសន្ធឹងទទឹងទាំងមូលនៃច្រកមើលរបស់អ្នក។

<div class="container-fluid">
  ...
</div>

Bootstrap រួមបញ្ចូលប្រព័ន្ធក្រឡាចត្រង្គវត្ថុរាវដំបូងចល័តដែលឆ្លើយតប ដែលធ្វើមាត្រដ្ឋានរហូតដល់ 12 ជួរយ៉ាងសមស្រប នៅពេលដែលឧបករណ៍ ឬទំហំទិដ្ឋភាពកើនឡើង។ វារួមបញ្ចូល ថ្នាក់ដែលបានកំណត់ជាមុន សម្រាប់ជម្រើសប្លង់ងាយស្រួល ក៏ដូចជា mixins ដ៏មានអានុភាពសម្រាប់បង្កើតប្លង់ semantic បន្ថែមទៀត ។

សេចក្តីផ្តើម

ប្រព័ន្ធក្រឡាចត្រង្គត្រូវបានប្រើសម្រាប់បង្កើតប្លង់ទំព័រតាមរយៈជួរជួរ និងជួរឈរជាច្រើនដែលផ្ទុកខ្លឹមសាររបស់អ្នក។ នេះជារបៀបដែលប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap ដំណើរការ៖

ជួរដេកត្រូវតែត្រូវបានដាក់ក្នុង .container(ទទឹងថេរ) ឬ .container-fluid(ទទឹងពេញ) សម្រាប់ការតម្រឹម និងទ្រនាប់ត្រឹមត្រូវ។
ប្រើជួរដេកដើម្បីបង្កើតក្រុមផ្ដេកនៃជួរឈរ។
មាតិកាគួរតែត្រូវបានដាក់នៅក្នុងជួរឈរ ហើយមានតែជួរឈរប៉ុណ្ណោះដែលអាចជាកូនជួរដេកភ្លាមៗ។
ថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនដូចជា .rowនិង .col-xs-4អាចរកបានសម្រាប់ធ្វើប្លង់ក្រឡាចត្រង្គយ៉ាងឆាប់រហ័ស។ mixins តិចក៏អាចត្រូវបានប្រើសម្រាប់ប្លង់ semantic កាន់តែច្រើនផងដែរ។
ជួរឈរបង្កើតផ្លូវទឹក (ចន្លោះរវាងមាតិកាជួរឈរ) តាមរយៈ padding. បន្ទះនោះត្រូវបានទូទាត់ក្នុងជួរដេកសម្រាប់ជួរឈរដំបូងនិងចុងក្រោយតាមរយៈរឹមអវិជ្ជមាននៅលើ .rows ។
រឹមអវិជ្ជមានជាមូលហេតុដែលឧទាហរណ៍ខាងក្រោមគឺហួសពីមុខ។ វាដូច្នេះថាមាតិកានៅក្នុងជួរឈរក្រឡាចត្រង្គត្រូវបានតម្រង់ជួរជាមួយនឹងមាតិកាដែលមិនមែនជាក្រឡាចត្រង្គ។
ជួរឈរក្រឡាចត្រង្គត្រូវបានបង្កើតឡើងដោយការបញ្ជាក់ចំនួនជួរឈរដែលមានចំនួនដប់ពីរដែលអ្នកចង់ពង្រីក។ ឧទាហរណ៍ ជួរឈរស្មើគ្នាបីនឹងប្រើបី .col-xs-4។
ប្រសិនបើជួរឈរលើសពី 12 ត្រូវបានដាក់ក្នុងជួរតែមួយ ក្រុមនីមួយៗនៃជួរឈរបន្ថែមនឹងរុំលើបន្ទាត់ថ្មី។
ថ្នាក់ក្រឡាចត្រង្គអនុវត្តចំពោះឧបករណ៍ដែលមានទទឹងអេក្រង់ធំជាង ឬស្មើនឹងទំហំចំណុចឈប់ ហើយបដិសេធថ្នាក់ក្រឡាចត្រង្គដែលកំណត់គោលដៅនៅឧបករណ៍តូចជាង។ ដូច្នេះ ឧទាហរណ៍ ការអនុវត្ត .col-md-*ថ្នាក់ណាមួយទៅធាតុមួយនឹងមិនត្រឹមតែប៉ះពាល់ដល់រចនាប័ទ្មរបស់វានៅលើឧបករណ៍មធ្យមប៉ុណ្ណោះទេ ប៉ុន្តែក៏មាននៅលើឧបករណ៍ធំផងដែរ ប្រសិនបើ .col-lg-*ថ្នាក់មិនមានវត្តមាន។

រកមើលឧទាហរណ៍សម្រាប់ការអនុវត្តគោលការណ៍ទាំងនេះទៅនឹងកូដរបស់អ្នក។

សំណួរប្រព័ន្ធផ្សព្វផ្សាយ

យើងប្រើសំណួរមេឌៀខាងក្រោមនៅក្នុងឯកសារតិចរបស់យើង ដើម្បីបង្កើតចំណុចបំបែកគន្លឹះនៅក្នុងប្រព័ន្ធក្រឡាចត្រង្គរបស់យើង។

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

យើងពង្រីកម្តងម្កាលលើសំណួរមេឌៀទាំងនេះ ដើម្បីរួមបញ្ចូល max-widthការកំណត់ CSS ទៅឧបករណ៍តូចចង្អៀត។

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

ជម្រើសក្រឡាចត្រង្គ

មើលពីរបៀបដែលទិដ្ឋភាពនៃប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap ដំណើរការលើឧបករណ៍ជាច្រើនជាមួយនឹងតារាងងាយស្រួល។

	ឧបករណ៍តូចៗបន្ថែម ទូរស័ព្ទ (<768px)	ឧបករណ៍ Tablet តូច (≥768px)	ឧបករណ៍មធ្យម Desktops (≥992px)	ឧបករណ៍ធំ Desktops (≥1200px)
ឥរិយាបថក្រឡាចត្រង្គ	ផ្ដេកគ្រប់ពេល	បង្រួមដើម្បីចាប់ផ្តើម ផ្តេកពីលើចំណុចឈប់
ទទឹងធុង	គ្មាន (ស្វ័យប្រវត្តិ)	750px	970px	1170px
បុព្វបទថ្នាក់	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# នៃជួរឈរ	១២
ទទឹងជួរឈរ	ស្វ័យប្រវត្តិ	~62px	~81px	~ 97px
ទទឹងប្រឡាយ	30px (15px នៅផ្នែកម្ខាងនៃជួរឈរ)
សំបុក	បាទ
អុហ្វសិត	បាទ
លំដាប់ជួរ	បាទ

ឧទាហរណ៍៖ ជង់ទៅផ្ដេក

ដោយប្រើសំណុំនៃ .col-md-*ថ្នាក់ក្រឡាចត្រង្គតែមួយ អ្នកអាចបង្កើតប្រព័ន្ធក្រឡាចត្រង្គមូលដ្ឋានដែលចាប់ផ្តើមដាក់ជង់លើឧបករណ៍ចល័ត និងឧបករណ៍ថេប្លេត (ជួរបន្ថែមពីតូចទៅតូច) មុនពេលក្លាយជាឧបករណ៍ផ្ដេកនៅលើកុំព្យូទ័រលើតុ (មធ្យម)។ ដាក់ជួរឈរក្រឡាចត្រង្គនៅក្នុងណាមួយ .row។

.col-md-1

.col-md-8

.col-md-4

.col-md-6

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

ឧទាហរណ៍៖ ធុងទឹក

បង្វែរប្លង់ក្រឡាចត្រង្គដែលមានទទឹងថេរណាមួយទៅជាប្លង់ទទឹងពេញ ដោយផ្លាស់ប្តូរផ្នែកខាងក្រៅបំផុតរបស់អ្នក .containerទៅជា .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

ឧទាហរណ៍៖ ទូរសព្ទ និងកុំព្យូទ័រ

មិនចង់ឱ្យជួរឈររបស់អ្នកគ្រាន់តែជង់លើឧបករណ៍តូចៗទេ? ប្រើថ្នាក់ក្រឡាឧបករណ៍តូច និងមធ្យមបន្ថែមដោយបន្ថែម .col-xs-* .col-md-*ទៅជួររបស់អ្នក។ សូមមើលឧទាហរណ៍ខាងក្រោមសម្រាប់គំនិតកាន់តែប្រសើរឡើងអំពីរបៀបដែលវាដំណើរការទាំងអស់។

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

ឧទាហរណ៍៖ ទូរសព្ទ ថេប្លេត កុំព្យូទ័រលើតុ

បង្កើតឧទាហរណ៍មុនដោយបង្កើតប្លង់ដែលមានភាពស្វាហាប់ និងមានឥទ្ធិពលកាន់តែខ្លាំងជាមួយ .col-sm-*ថ្នាក់កុំព្យូទ័របន្ទះ។

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

ឧទាហរណ៍៖ ការរុំជួរឈរ

ប្រសិនបើជួរឈរលើសពី 12 ត្រូវបានដាក់ក្នុងជួរតែមួយ ក្រុមនីមួយៗនៃជួរឈរបន្ថែមនឹងរុំលើបន្ទាត់ថ្មី។

.col-xs-9

.col-xs-4
ចាប់តាំងពី 9 + 4 = 13 > 12, div ធំទូលាយ 4 ជួរនេះត្រូវបានរុំនៅលើបន្ទាត់ថ្មីជាឯកតាជាប់គ្នា។

.col-xs-6
ជួរបន្ទាប់បន្តតាមបន្ទាត់ថ្មី។

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

កំណត់ជួរឈរឆ្លើយតបឡើងវិញ

ជាមួយនឹងក្រឡាចត្រង្គទាំងបួនដែលមាន អ្នកនឹងប្រឈមមុខនឹងបញ្ហាដែលនៅចំនុចបំបែកជាក់លាក់ ជួរឈររបស់អ្នកមិនច្បាស់ទេ ដោយសារមួយមានកំពស់ខ្ពស់ជាងមួយទៀត។ ដើម្បីជួសជុលវា ប្រើការរួមបញ្ចូលគ្នានៃ ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប.clearfix របស់យើង .

.col-xs-6 .col-sm-3 ប្តូរ
ទំហំទិដ្ឋភាពរបស់អ្នក ឬពិនិត្យមើលវានៅលើទូរស័ព្ទរបស់អ្នកសម្រាប់ឧទាហរណ៍មួយ។

.col-xs-6 .col-sm-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

បន្ថែមពីលើការជម្រះជួរឈរនៅចំនុចបំបែកដែលឆ្លើយតប អ្នកប្រហែលជាត្រូវ កំណត់ឡើងវិញនូវអុហ្វសិត ការរុញ ឬទាញ ។ សូមមើលសកម្មភាពនេះនៅក្នុង ឧទាហរណ៍ក្រឡាចត្រង្គ ។

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

អុហ្វសិតជួរឈរ

ផ្លាស់ទីជួរឈរទៅខាងស្តាំដោយប្រើ .col-md-offset-*ថ្នាក់។ ថ្នាក់ទាំងនេះបង្កើនរឹមខាងឆ្វេងនៃជួរឈរដោយ *ជួរឈរ។ ឧទាហរណ៍ .col-md-offset-4ផ្លាស់ទី .col-md-4លើជួរឈរបួន។

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

អ្នកក៏អាចបដិសេធអុហ្វសិតពីថ្នាក់ក្រឡាចត្រង្គទាបជាមួយ .col-*-offset-0ថ្នាក់ផងដែរ។

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

ជួរឈរសំបុក

ដើម្បីដាក់មាតិការបស់អ្នកជាមួយក្រឡាចត្រង្គលំនាំដើម សូមបន្ថែមជួរឈរថ្មី .rowនិងសំណុំនៃ .col-sm-*ជួរឈរនៅក្នុងជួរឈរដែលមានស្រាប់ .col-sm-*។ ជួរដេកដែលជាប់គួររួមបញ្ចូលសំណុំជួរឈរដែលបន្ថែមរហូតដល់ 12 ឬតិចជាងនេះ (វាមិនតម្រូវឱ្យអ្នកប្រើជួរឈរទាំង 12 ដែលមានទាំងអស់)។

កម្រិត 1: .col-sm-9

កម្រិតទី 2: .col-xs-8 .col-sm-6

កម្រិតទី 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

លំដាប់ជួរ

ងាយស្រួលផ្លាស់ប្តូរលំដាប់នៃជួរឈរក្រឡាចត្រង្គដែលភ្ជាប់មកជាមួយរបស់យើងជាមួយ .col-md-push-*និង .col-md-pull-*ថ្នាក់កែប្រែ។

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

mixins តិច និងអថេរ

បន្ថែមពីលើ ថ្នាក់ក្រឡាចត្រង្គដែល បានសាងសង់រួចជាស្រេច សម្រាប់ប្លង់រហ័ស Bootstrap រួមបញ្ចូលអថេរតិច និង mixins សម្រាប់បង្កើតប្លង់បែបន័យសាមញ្ញផ្ទាល់ខ្លួនរបស់អ្នក។

អថេរ

អថេរកំណត់ចំនួនជួរឈរ ទទឹងផ្លូវទឹក និងចំណុចសំណួរប្រព័ន្ធផ្សព្វផ្សាយដែលត្រូវចាប់ផ្តើមជួរឈរអណ្តែត។ យើងប្រើវាដើម្បីបង្កើតថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនដែលបានចងក្រងជាឯកសារខាងលើ ក៏ដូចជាសម្រាប់ mixins ផ្ទាល់ខ្លួនដែលបានរាយខាងក្រោម។

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

ល្បាយ

Mixins ត្រូវបានប្រើដោយភ្ជាប់ជាមួយអថេរក្រឡាចត្រង្គ ដើម្បីបង្កើត CSS semantic សម្រាប់ជួរឈរក្រឡាចត្រង្គនីមួយៗ។

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

ការប្រើប្រាស់ឧទាហរណ៍

អ្នកអាចកែប្រែអថេរទៅជាតម្លៃផ្ទាល់ខ្លួនរបស់អ្នក ឬគ្រាន់តែប្រើ mixins ជាមួយនឹងតម្លៃលំនាំដើមរបស់វា។ នេះជាឧទាហរណ៍នៃការប្រើប្រាស់ការកំណត់លំនាំដើមដើម្បីបង្កើតប្លង់ជួរឈរពីរដែលមានគម្លាតរវាង។

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

ក្បាល

ចំណងជើង HTML ទាំងអស់ <h1>មាន <h6>។ .h1តាមរយៈ .h6ថ្នាក់ក៏មានផងដែរ សម្រាប់នៅពេលដែលអ្នកចង់ផ្គូផ្គងរចនាប័ទ្មពុម្ពអក្សរនៃចំណងជើង ប៉ុន្តែនៅតែចង់ឱ្យអត្ថបទរបស់អ្នកត្រូវបានបង្ហាញក្នុងជួរ។

h1. ក្បាល Bootstrap	ពាក់កណ្តាល 36px
h2. ក្បាល Bootstrap	ពាក់កណ្តាល 30px
h3. ក្បាល Bootstrap	ពាក់កណ្តាល 24px
h4. ក្បាល Bootstrap	ពាក់កណ្តាល 18px
h5. ក្បាល Bootstrap	ស្រដៀងគ្នា 14px
h6. ក្បាល Bootstrap	ពាក់កណ្តាល 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

បង្កើតអត្ថបទបន្ទាប់បន្សំដែលស្រាលជាងមុននៅក្នុងក្បាលណាមួយដែលមាន <small>ស្លាកទូទៅ ឬ .smallថ្នាក់។

h1. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

h2. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

h3. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

h4. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

h5. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

h6. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

ច្បាប់ចម្លងរាងកាយ

លំនាំដើមសកលរបស់ Bootstrap font-sizeគឺ 14px ជាមួយនឹង 1.428 ។ នេះត្រូវបានអនុវត្តចំពោះ កថាខណ្ឌទាំងអស់។ លើសពីនេះ (កថាខណ្ឌ) ទទួលបានរឹមខាងក្រោមពាក់កណ្តាលនៃកម្ពស់បន្ទាត់ដែលបានគណនា (10px តាមលំនាំដើម)។line-height<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo ។ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ។

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla ។ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit ។ Donec ullamcorper nulla non metus auctor fringilla ។

Maecenas sed diam eget risus varius blandit អង្គុយ amet non magna ។ Donec id elit non mi porta gravida នៅ eget metus។ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit ។

<p>...</p>

ច្បាប់ចម្លងរាងកាយនាំមុខ

ធ្វើឱ្យកថាខណ្ឌលេចធ្លោដោយបន្ថែម .lead។

Vivamus sagittis lacus vel auggue laoreet rutrum faucibus dolor auctor ។ Duis mollis គឺជា luctus ដែលមិនមែនជាទំនិញ។

<p class="lead">...</p>

សាងសង់ដោយតិច

មាត្រដ្ឋានវាយអក្សរគឺផ្អែកលើអថេរ Less ពីរនៅក្នុង variables.less : @font-size-baseនិង @line-height-base. ទីមួយគឺទំហំពុម្ពអក្សរមូលដ្ឋានដែលបានប្រើពេញមួយ ហើយទីពីរគឺកម្ពស់បន្ទាត់មូលដ្ឋាន។ យើងប្រើអថេរទាំងនោះ និងគណិតវិទ្យាសាមញ្ញមួយចំនួនដើម្បីបង្កើតរឹម បន្ទះ និងបន្ទាត់កម្ពស់នៃប្រភេទរបស់យើង និងច្រើនទៀត។ ប្ដូរពួកវាតាមបំណង ហើយ Bootstrap សម្រប។

ធាតុអត្ថបទក្នុងជួរ

អត្ថបទដែលបានសម្គាល់

សម្រាប់ការបន្លិចការរត់នៃអត្ថបទដោយសារតែភាពពាក់ព័ន្ធរបស់វានៅក្នុងបរិបទផ្សេងទៀត សូមប្រើ <mark>ស្លាក។

អ្នកអាចប្រើស្លាកសញ្ញាទៅបន្លិចអត្ថបទ។

You can use the mark tag to <mark>highlight</mark> text.

អត្ថបទដែលបានលុប

សម្រាប់ការចង្អុលបង្ហាញប្លុកនៃអត្ថបទដែលត្រូវបានលុបសូមប្រើ <del>ស្លាក។

~~បន្ទាត់នៃអត្ថបទនេះមានន័យថាត្រូវបានចាត់ទុកជាអត្ថបទដែលបានលុប។~~

<del>This line of text is meant to be treated as deleted text.</del>

អត្ថបទវាយលុក

សម្រាប់ការចង្អុលបង្ហាញប្លុកនៃអត្ថបទដែលលែងពាក់ព័ន្ធ សូមប្រើ <s>ស្លាក។

~~បន្ទាត់នៃអត្ថបទនេះត្រូវបានចាត់ទុកថាមិនត្រឹមត្រូវទៀតទេ។~~

<s>This line of text is meant to be treated as no longer accurate.</s>

អត្ថបទដែលបានបញ្ចូល

សម្រាប់ការបង្ហាញការបន្ថែមទៅក្នុងឯកសារ ប្រើ <ins>ស្លាក។

បន្ទាត់នៃអត្ថបទនេះមានន័យថាត្រូវបានចាត់ទុកជាការបន្ថែមទៅលើឯកសារ។

<ins>This line of text is meant to be treated as an addition to the document.</ins>

អត្ថបទដែលបានគូសបញ្ជាក់

ដើម្បីគូសបញ្ជាក់អត្ថបទ ប្រើ <u>ស្លាក។

បន្ទាត់នៃអត្ថបទនេះនឹងបង្ហាញដូចដែលបានគូសបញ្ជាក់

<u>This line of text will render as underlined</u>

ប្រើស្លាកសង្កត់ធ្ងន់លំនាំដើមរបស់ HTML ជាមួយនឹងរចនាប័ទ្មស្រាល។

អត្ថបទតូច

សម្រាប់ការលុបការសង្កត់ធ្ងន់ក្នុងបន្ទាត់ ឬប្លុកនៃអត្ថបទ សូមប្រើ <small>ស្លាកដើម្បីកំណត់អត្ថបទនៅ 85% នៃទំហំមេ។ ធាតុក្បាលទទួលបានរបស់ពួកគេផ្ទាល់ font-sizeសម្រាប់ <small>ធាតុដែលបានដាក់។

អ្នកអាចប្រើធាតុក្នុងជួរជាជំនួសជំនួស .smallកន្លែងណាមួយក៏បាន <small>។

បន្ទាត់នៃអត្ថបទនេះមានន័យថាត្រូវបានចាត់ទុកជាការបោះពុម្ពដ៏ល្អ។

<small>This line of text is meant to be treated as fine print.</small>

ដិត

សម្រាប់ការសង្កត់ធ្ងន់លើអត្ថបទខ្លីៗដែលមានទម្ងន់ពុម្ពអក្សរធ្ងន់ជាង។

អត្ថបទខ្លីៗខាងក្រោមត្រូវ បានបកប្រែជាអក្សរដិត ។

<strong>rendered as bold text</strong>

ទ្រេត

សម្រាប់ការសង្កត់ធ្ងន់លើអត្ថបទដោយអក្សរទ្រេត។

អត្ថបទខ្លីៗខាងក្រោមត្រូវ បានបកប្រែជាអក្សរទ្រេត ។

<em>rendered as italicized text</em>

ធាតុជំនួស

មានអារម្មណ៍សេរីក្នុងការប្រើប្រាស់ <b>និង <i>ក្នុង HTML5។ <b>មានន័យដើម្បីរំលេចពាក្យឬឃ្លាដោយមិនបង្ហាញពីសារៈសំខាន់បន្ថែមខណៈពេលដែល <i>ភាគច្រើនគឺសម្រាប់សំឡេង ពាក្យបច្ចេកទេស ។ល។

ថ្នាក់តម្រឹម

ងាយស្រួលតម្រឹមអត្ថបទទៅសមាសធាតុជាមួយនឹងថ្នាក់តម្រឹមអត្ថបទ។

អត្ថបទដែលបានតម្រឹមឆ្វេង។

អត្ថបទតម្រឹមកណ្តាល។

អត្ថបទតម្រឹមស្ដាំ។

អត្ថបទសមហេតុផល។

គ្មានអត្ថបទរុំ។

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

ថ្នាក់ផ្លាស់ប្តូរ

បំប្លែងអត្ថបទក្នុងសមាសធាតុជាមួយថ្នាក់អក្សរធំ។

អក្សរតូច។

អក្សរធំ។

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

អក្សរកាត់

ការអនុវត្តរចនាប័ទ្មនៃ <abbr>ធាតុរបស់ HTML សម្រាប់អក្សរកាត់ និងអក្សរកាត់ដើម្បីបង្ហាញកំណែដែលបានពង្រីកនៅលើដាក់លើ។ អក្សរកាត់ដែលមាន titleគុណលក្ខណៈមានស៊ុមខាងក្រោមដែលមានចំនុចស្រាល និងទស្សន៍ទ្រនិចជំនួយនៅលើដាក់លើ ដែលផ្តល់បរិបទបន្ថែមនៅលើដាក់លើ និងដល់អ្នកប្រើប្រាស់បច្ចេកវិទ្យាជំនួយ។

អក្សរកាត់ជាមូលដ្ឋាន

អក្សរកាត់នៃពាក្យ attribute គឺ attr ។

<abbr title="attribute">attr</abbr>

លទ្ធិបឋមនិយម

បន្ថែម .initialismទៅអក្សរកាត់សម្រាប់ទំហំពុម្ពអក្សរតូចជាងបន្តិច។

HTML គឺជារឿងដ៏ល្អបំផុតចាប់តាំងពីនំប៉័ងចំណិត។

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

អាស័យដ្ឋាន

បង្ហាញព័ត៌មានទំនាក់ទំនងសម្រាប់បុព្វបុរសដែលនៅជិតបំផុត ឬផ្នែកទាំងមូលនៃការងារ។ រក្សាទម្រង់ដោយបញ្ចប់បន្ទាត់ទាំងអស់ដោយ <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

ឈ្មោះពេញ
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

ប្លុកសម្រង់

សម្រាប់ការដកស្រង់ប្លុកនៃមាតិកាពីប្រភពផ្សេងទៀតនៅក្នុងឯកសាររបស់អ្នក។

សម្រង់ប្លុកលំនាំដើម

រុំ <blockquote>ជុំវិញ HTML ណាមួយ ជាសម្រង់។ សម្រាប់សម្រង់ត្រង់ យើងសូមណែនាំ a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ជម្រើសនៃការដកស្រង់

រចនាប័ទ្ម និងមាតិកាផ្លាស់ប្តូរសម្រាប់ការប្រែប្រួលសាមញ្ញលើស្តង់ដារមួយ <blockquote>។

ការដាក់ឈ្មោះប្រភព

បន្ថែម a <footer>សម្រាប់កំណត់អត្តសញ្ញាណប្រភព។ រុំឈ្មោះរបស់ប្រភពការងារនៅក្នុង <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។

នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ការបង្ហាញជំនួស

បន្ថែម .blockquote-reverseសម្រាប់សម្រង់សម្រង់ដែលមានមាតិកាតម្រឹមស្តាំ។

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere បានលុបមុន។

នរណាម្នាក់ដែលល្បីល្បាញនៅក្នុង ចំណងជើងប្រភព

<blockquote class="blockquote-reverse">
  ...
</blockquote>

បញ្ជី

មិនបានបញ្ជាទិញ

បញ្ជីនៃធាតុដែលការបញ្ជាទិញ មិន សំខាន់។

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ចំនួនគត់ molestie lorem និង massa
Facilisis នៅក្នុង Pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat នៅ
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ទទួលបាន porttitor lorem

<ul>
  <li>...</li>
</ul>

បានបញ្ជាទិញ

បញ្ជីនៃវត្ថុដែលបញ្ជាទិញ ពិតជា សំខាន់។

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ចំនួនគត់ molestie lorem និង massa
Facilisis នៅក្នុង Pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ទទួលបាន porttitor lorem

<ol>
  <li>...</li>
</ol>

គ្មានរចនាប័ទ្ម

លុបលំនាំដើម list-styleនិងរឹមខាងឆ្វេងនៅលើធាតុបញ្ជី (កុមារភ្លាមៗប៉ុណ្ណោះ)។ នេះអនុវត្តតែចំពោះធាតុបញ្ជីកុមារភ្លាមៗ មានន័យថាអ្នកនឹងត្រូវបន្ថែមថ្នាក់សម្រាប់បញ្ជីដែលជាប់ពាក់ព័ន្ធណាមួយផងដែរ។

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ចំនួនគត់ molestie lorem និង massa
Facilisis នៅក្នុង Pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat នៅ
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
ទទួលបាន porttitor lorem

<ul class="list-unstyled">
  <li>...</li>
</ul>

ក្នុងជួរ

ដាក់ធាតុបញ្ជីទាំងអស់នៅលើបន្ទាត់តែមួយជាមួយ display: inline-block;និងបន្ទះពន្លឺមួយចំនួន។

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li>...</li>
</ul>

ការពិពណ៌នា

បញ្ជីនៃលក្ខខណ្ឌជាមួយនឹងការពិពណ៌នាដែលពាក់ព័ន្ធរបស់ពួកគេ។

បញ្ជីពិពណ៌នា: បញ្ជីពិពណ៌នាគឺល្អឥតខ្ចោះសម្រាប់ការកំណត់ពាក្យ។
អ៊ីស្មូដ: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit ។; Donec id elit non mi porta gravida នៅ eget metus។
Malesuada porta: Etiam porta sem malesuada magna mollis euismod ។

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

ការពិពណ៌នាផ្ដេក

បង្កើតលក្ខខណ្ឌ និងការពិពណ៌នា <dl>ជាជួរដោយចំហៀង។ ចាប់ផ្តើមបិទជង់ដូចលំនាំដើម <dl>s ប៉ុន្តែនៅពេលដែលរបាររុករកពង្រីក ធ្វើដូច្នេះ។

បញ្ជីពិពណ៌នា: បញ្ជីពិពណ៌នាគឺល្អឥតខ្ចោះសម្រាប់ការកំណត់ពាក្យ។
អ៊ីស្មូដ: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit ។; Donec id elit non mi porta gravida នៅ eget metus។
Malesuada porta: Etiam porta sem malesuada magna mollis euismod ។
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus។

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ការកាត់ដោយស្វ័យប្រវត្តិ

បញ្ជីពណ៌នាផ្ដេកនឹងកាត់ឲ្យខ្លីពាក្យដែលវែងពេកមិនអាចសមក្នុងជួរឈរខាងឆ្វេងជាមួយ text-overflow. នៅក្នុងច្រកមើលតូចជាងនេះ ពួកគេនឹងផ្លាស់ប្តូរទៅប្លង់ជង់លំនាំដើម។

ក្នុងជួរ

រុំផ្នែកតូចៗនៃកូដក្នុងជួរជាមួយ <code>.

ជាឧទាហរណ៍ <section>គួរតែរុំជាជួរ។

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

ការបញ្ចូលអ្នកប្រើប្រាស់

ប្រើ <kbd>ដើម្បីចង្អុលបង្ហាញការបញ្ចូលដែលជាធម្មតាត្រូវបានបញ្ចូលតាមរយៈក្តារចុច។

ដើម្បីប្តូរថត សូមវាយ cdតាមឈ្មោះរបស់ថត។
ដើម្បីកែសម្រួលការកំណត់សូមចុច ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

ប្លុកមូលដ្ឋាន

ប្រើ <pre>សម្រាប់បន្ទាត់កូដច្រើន។ ត្រូវប្រាកដថាគេចចេញពីតង្កៀបមុំណាមួយនៅក្នុងកូដសម្រាប់ការបង្ហាញត្រឹមត្រូវ។

<p>អត្ថបទគំរូនៅទីនេះ...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

អ្នកអាចបន្ថែម .pre-scrollableថ្នាក់ជាជម្រើស ដែលនឹងកំណត់កម្ពស់អតិបរមា 350px និងផ្តល់នូវរបាររមូរអ័ក្ស y ។

អថេរ

សម្រាប់ការចង្អុលបង្ហាញអថេរ ប្រើ <var>ស្លាក។

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

លទ្ធផលគំរូ

សម្រាប់ការចង្អុលបង្ហាញលទ្ធផលគំរូប្លុកពីកម្មវិធីប្រើ <samp>ស្លាក។

អត្ថបទនេះមានន័យថាត្រូវបានចាត់ទុកជាលទ្ធផលគំរូពីកម្មវិធីកុំព្យូទ័រ។

<samp>This text is meant to be treated as sample output from a computer program.</samp>

ឧទាហរណ៍ជាមូលដ្ឋាន

សម្រាប់រចនាប័ទ្មមូលដ្ឋាន - បន្ទះស្រាល និងតែផ្នែកផ្ដេក - បន្ថែមថ្នាក់មូលដ្ឋាន .tableទៅណាមួយ <table>។ វាអាចហាក់ដូចជាហួសហេតុពេក ប៉ុន្តែដោយសារការប្រើប្រាស់តារាងយ៉ាងទូលំទូលាយសម្រាប់កម្មវិធីជំនួយផ្សេងទៀតដូចជាប្រតិទិន និងកម្មវិធីជ្រើសរើសកាលបរិច្ឆេទ យើងបានជ្រើសរើសដាច់ដោយឡែកពីរចនាប័ទ្មតារាងផ្ទាល់ខ្លួនរបស់យើង។

ចំណងជើងតារាងស្រេចចិត្ត។
#	ឈ្មោះដំបូង	នាមត្រកូល	ឈ្មោះអ្នកប្រើប្រាស់
១	ម៉ាក	អូតូ	@mdo
២	យ៉ាកុប	ថនតុន	@ខ្លាញ់
៣	ឡារី	បក្សី	@twitter

<table class="table">
  ...
</table>

ជួរឆ្នូត

ប្រើ .table-stripedដើម្បីបន្ថែមការឆ្នូតសេះបង្កង់ទៅជួរតារាងណាមួយនៅក្នុង <tbody>.

ភាពឆបគ្នាឆ្លងកម្មវិធីរុករក

តារាងឆ្នូតត្រូវបានកំណត់រចនាប័ទ្មតាមរយៈ :nth-childឧបករណ៍ជ្រើសរើស CSS ដែលមិនមាននៅក្នុង Internet Explorer 8 ។

#	ឈ្មោះដំបូង	នាមត្រកូល	ឈ្មោះអ្នកប្រើប្រាស់
១	ម៉ាក	អូតូ	@mdo
២	យ៉ាកុប	ថនតុន	@ខ្លាញ់
៣	ឡារី	បក្សី	@twitter

<table class="table table-striped">
  ...
</table>

តារាងព្រំដែន

បន្ថែម .table-borderedសម្រាប់ស៊ុមនៅគ្រប់ជ្រុងទាំងអស់នៃតារាង និងក្រឡា។

#	ឈ្មោះដំបូង	នាមត្រកូល	ឈ្មោះអ្នកប្រើប្រាស់
១	ម៉ាក	អូតូ	@mdo
២	យ៉ាកុប	ថនតុន	@ខ្លាញ់
៣	ឡារី	បក្សី	@twitter

<table class="table table-bordered">
  ...
</table>

ដាក់ជួរ

បន្ថែម .table-hoverដើម្បីបើកស្ថានភាពដាក់នៅលើជួរតារាងក្នុង <tbody>.

#	ឈ្មោះដំបូង	នាមត្រកូល	ឈ្មោះអ្នកប្រើប្រាស់
១	ម៉ាក	អូតូ	@mdo
២	យ៉ាកុប	ថនតុន	@ខ្លាញ់
៣	ឡារី	បក្សី	@twitter

<table class="table table-hover">
  ...
</table>

តារាង condensed

បន្ថែម .table-condensedដើម្បីធ្វើឱ្យតារាងកាន់តែបង្រួមដោយកាត់បន្ទះក្រឡាជាពាក់កណ្តាល។

#	ឈ្មោះដំបូង	នាមត្រកូល	ឈ្មោះអ្នកប្រើប្រាស់
១	ម៉ាក	អូតូ	@mdo
២	យ៉ាកុប	ថនតុន	@ខ្លាញ់
៣	ឡារី បក្សី		@twitter

<table class="table table-condensed">
  ...
</table>

ថ្នាក់បរិបទ

ប្រើថ្នាក់បរិបទដើម្បីដាក់ពណ៌ជួរតារាង ឬក្រឡានីមួយៗ។

ថ្នាក់	ការពិពណ៌នា
`.active`	អនុវត្តពណ៌ដាក់លើជួរ ឬក្រឡាជាក់លាក់មួយ។
`.success`	បង្ហាញពីសកម្មភាពជោគជ័យ ឬវិជ្ជមាន
`.info`	បង្ហាញពីការផ្លាស់ប្តូរព័ត៌មានអព្យាក្រឹត ឬសកម្មភាព
`.warning`	បង្ហាញពីការព្រមានដែលអាចត្រូវការការយកចិត្តទុកដាក់
`.danger`	បង្ហាញពីសកម្មភាពគ្រោះថ្នាក់ ឬសក្តានុពលអវិជ្ជមាន

#	ចំណងជើងជួរឈរ	ចំណងជើងជួរឈរ	ចំណងជើងជួរឈរ
១	មាតិកាជួរឈរ	មាតិកាជួរឈរ	មាតិកាជួរឈរ
២	មាតិកាជួរឈរ	មាតិកាជួរឈរ	មាតិកាជួរឈរ
៣	មាតិកាជួរឈរ	មាតិកាជួរឈរ	មាតិកាជួរឈរ
៤	មាតិកាជួរឈរ	មាតិកាជួរឈរ	មាតិកាជួរឈរ
៥	មាតិកាជួរឈរ	មាតិកាជួរឈរ	មាតិកាជួរឈរ
៦	មាតិកាជួរឈរ	មាតិកាជួរឈរ	មាតិកាជួរឈរ
៧	មាតិកាជួរឈរ	មាតិកាជួរឈរ	មាតិកាជួរឈរ
៨	មាតិកាជួរឈរ	មាតិកាជួរឈរ	មាតិកាជួរឈរ
៩	មាតិកាជួរឈរ	មាតិកាជួរឈរ	មាតិកាជួរឈរ

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ

ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យទៅជួរតារាង ឬក្រឡានីមួយៗផ្តល់តែការចង្អុលបង្ហាញដែលមើលឃើញប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (អត្ថបទដែលមើលឃើញក្នុងជួរតារាង/ក្រឡាដែលពាក់ព័ន្ធ) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .sr-onlyថ្នាក់។

តារាងឆ្លើយតប

បង្កើតតារាងឆ្លើយតបដោយការរុំណាមួយ .tableដើម្បី .table-responsiveធ្វើឱ្យពួកវារមូរផ្ដេកនៅលើឧបករណ៍តូចៗ (ក្រោម 768px)។ នៅពេលមើលអ្វីដែលធំជាងទំហំ 768px អ្នកនឹងមិនឃើញភាពខុសគ្នាណាមួយនៅក្នុងតារាងទាំងនេះទេ។

ការកាត់/កាត់បញ្ឈរ

តារាងដែលមានការឆ្លើយតបប្រើប្រាស់ overflow-y: hiddenដែលបិទមាតិកាណាដែលហួសពីគែមខាងក្រោម ឬកំពូលតារាង។ ជាពិសេស វាអាចបិទម៉ឺនុយទម្លាក់ចុះ និងធាតុក្រាហ្វិកភាគីទីបីផ្សេងទៀត។

Firefox និងសំណុំវាល

Firefox មានរចនាប័ទ្មសំណុំវាលដ៏ឆ្គងមួយចំនួនដែលពាក់ព័ន្ធនឹង widthការរំខានដល់តារាងឆ្លើយតប។ វាមិនអាចត្រូវបានបដិសេធដោយគ្មានការ hack ជាក់លាក់របស់ Firefox ដែលយើង មិន ផ្តល់នៅក្នុង Bootstrap៖

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

សម្រាប់ព័ត៌មានបន្ថែម សូមអាន ចម្លើយ Stack Overflow នេះ ។

#	ចំណងជើងតារាង	ចំណងជើងតារាង	ចំណងជើងតារាង	ចំណងជើងតារាង	ចំណងជើងតារាង	ចំណងជើងតារាង
១	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង
២	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង
៣	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង

#	ចំណងជើងតារាង	ចំណងជើងតារាង	ចំណងជើងតារាង	ចំណងជើងតារាង	ចំណងជើងតារាង	ចំណងជើងតារាង
១	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង
២	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង
៣	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង	ក្រឡាតារាង

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

ឧទាហរណ៍ជាមូលដ្ឋាន

ការគ្រប់គ្រងទម្រង់បុគ្គលទទួលបានរចនាប័ទ្មសកលមួយចំនួនដោយស្វ័យប្រវត្តិ។ អត្ថបទ <input>, <textarea>និង <select>ធាតុទាំងអស់ជាមួយ .form-controlត្រូវបានកំណត់ width: 100%;តាមលំនាំដើម។ រុំស្លាក និងការគ្រប់គ្រង .form-groupសម្រាប់គម្លាតល្អបំផុត។

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

កុំលាយក្រុមទម្រង់ជាមួយក្រុមបញ្ចូល

កុំលាយក្រុមទម្រង់ដោយផ្ទាល់ជាមួយ ក្រុមបញ្ចូល ។ ផ្ទុយទៅវិញ ដាក់ក្រុមបញ្ចូលនៅខាងក្នុងនៃក្រុមទម្រង់។

ទម្រង់ក្នុងជួរ

បន្ថែម .form-inlineទៅទម្រង់របស់អ្នក (ដែលមិនចាំបាច់ជា a <form>) សម្រាប់ការគ្រប់គ្រងប្លុកដែលបានតម្រឹមឆ្វេង និងក្នុងជួរ។ នេះអនុវត្តចំពោះតែទម្រង់នៅក្នុង viewports ដែលមានទទឹងយ៉ាងតិច 768px។

អាចទាមទារទទឹងផ្ទាល់ខ្លួន

ការបញ្ចូល និងការជ្រើសរើសបាន width: 100%;អនុវត្តតាមលំនាំដើមនៅក្នុង Bootstrap។ នៅក្នុងទម្រង់ក្នុងជួរ យើងកំណត់វាឡើងវិញដើម្បី width: auto;ឱ្យវត្ថុបញ្ជាច្រើនអាចស្ថិតនៅលើបន្ទាត់តែមួយ។ អាស្រ័យលើប្លង់របស់អ្នក ទទឹងផ្ទាល់ខ្លួនបន្ថែមអាចត្រូវបានទាមទារ។

បន្ថែមស្លាកជានិច្ច

អ្នកអានអេក្រង់នឹងមានបញ្ហាជាមួយនឹងទម្រង់របស់អ្នក ប្រសិនបើអ្នកមិនបញ្ចូលស្លាកសម្រាប់រាល់ការបញ្ចូល។ សម្រាប់ទម្រង់ក្នុងជួរទាំងនេះ អ្នកអាចលាក់ស្លាកដោយប្រើ .sr-onlyថ្នាក់។ មានវិធីសាស្រ្តជំនួសបន្ថែមទៀតនៃការផ្តល់ស្លាកសម្រាប់បច្ចេកវិទ្យាជំនួយ ដូចជា aria-label, aria-labelledbyឬ titleគុណលក្ខណៈ។ ប្រសិនបើគ្មានវត្ថុទាំងនេះទេ អ្នកអានអេក្រង់អាចងាកមកប្រើ placeholderគុណលក្ខណៈ ប្រសិនបើមានវត្តមាន ប៉ុន្តែសូមចំណាំថា ការប្រើ placeholderជាការជំនួសសម្រាប់វិធីដាក់ស្លាកផ្សេងទៀតមិនត្រូវបានណែនាំទេ។

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

ទម្រង់ផ្ដេក

ប្រើថ្នាក់ក្រឡាចត្រង្គដែលបានកំណត់ជាមុនរបស់ Bootstrap ដើម្បីតម្រឹមស្លាក និងក្រុមនៃការគ្រប់គ្រងទម្រង់ក្នុងប្លង់ផ្ដេកដោយបន្ថែម .form-horizontalទៅទម្រង់ (ដែលមិនចាំបាច់ជា <form>) ។ ការធ្វើដូច្នេះនឹងផ្លាស់ប្តូរ .form-groups ឱ្យមានឥរិយាបទជាជួរក្រឡាក្រឡា ដូច្នេះមិនត្រូវការ .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

ការគ្រប់គ្រងដែលបានគាំទ្រ

ឧទាហរណ៍នៃការគ្រប់គ្រងទម្រង់ស្តង់ដារដែលគាំទ្រនៅក្នុងប្លង់ទម្រង់ឧទាហរណ៍។

ធាតុចូល

ការគ្រប់គ្រងទម្រង់ទូទៅបំផុត វាលបញ្ចូលដែលមានមូលដ្ឋានលើអត្ថបទ។ រួមបញ្ចូលការគាំទ្រសម្រាប់ប្រភេទ HTML5 ទាំងអស់៖ text, password, datetime, datetime-local, date, month, time, , week, number, email, url, search, tel, និង color.

ទាមទារការប្រកាសប្រភេទ

ធាតុចូលនឹងត្រូវបានកំណត់រចនាប័ទ្មពេញលេញតែប៉ុណ្ណោះ ប្រសិនបើពួកវា typeត្រូវបានប្រកាសយ៉ាងត្រឹមត្រូវ។

<input type="text" class="form-control" placeholder="Text input">

ក្រុមបញ្ចូល

ដើម្បីបន្ថែមអត្ថបទ ឬប៊ូតុងដែលរួមបញ្ចូលគ្នាមុន និង/ឬបន្ទាប់ពីអត្ថបទដែលផ្អែកលើអត្ថបទ <input>សូម ពិនិត្យមើលសមាសធាតុក្រុមបញ្ចូល ។

អត្ថបទ

ការគ្រប់គ្រងទម្រង់ដែលគាំទ្របន្ទាត់ជាច្រើននៃអត្ថបទ។ ផ្លាស់ប្តូរ rowsគុណលក្ខណៈតាមការចាំបាច់។

<textarea class="form-control" rows="3"></textarea>

ប្រអប់ធីក និងវិទ្យុ

ប្រអប់ធីកគឺសម្រាប់ជ្រើសរើសជម្រើសមួយ ឬច្រើនក្នុងបញ្ជីមួយ ខណៈវិទ្យុគឺសម្រាប់ជ្រើសរើសជម្រើសមួយពីច្រើន។

ប្រអប់ធីក និងវិទ្យុដែលបិទត្រូវបានគាំទ្រ ប៉ុន្តែដើម្បីផ្តល់ទស្សន៍ទ្រនិច "មិនអនុញ្ញាត" នៅលើមេ <label>អ្នកត្រូវបន្ថែម .disabledថ្នាក់ទៅមេ .radio, .radio-inline, .checkbox, ឬ .checkbox-inline.

លំនាំដើម (ជង់)

ជម្រើសមួយគឺនេះ ហើយនោះ - ត្រូវប្រាកដថារួមបញ្ចូលហេតុអ្វីបានជាវាអស្ចារ្យ

ជម្រើសទីពីរត្រូវបានបិទ

ជម្រើសមួយគឺនេះ ហើយនោះ - ត្រូវប្រាកដថារួមបញ្ចូលហេតុអ្វីបានជាវាអស្ចារ្យ

ជម្រើសទីពីរអាចជាអ្វីផ្សេងទៀត ហើយការជ្រើសរើសវានឹងមិនជ្រើសរើសជម្រើសមួយ។

ជម្រើសទីបីត្រូវបានបិទ

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

ប្រអប់ធីកក្នុងបន្ទាត់ និងវិទ្យុ

ប្រើ .checkbox-inlineឬ .radio-inlineថ្នាក់នៅលើប្រអប់ធីកស៊េរី ឬវិទ្យុសម្រាប់ការគ្រប់គ្រងដែលបង្ហាញនៅលើបន្ទាត់ដូចគ្នា។

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

ប្រអប់ធីក និងវិទ្យុដោយគ្មានអត្ថបទស្លាក

ប្រសិនបើអ្នកមិនមានអត្ថបទនៅក្នុង <label>នោះ ការបញ្ចូលត្រូវបានដាក់ដូចដែលអ្នកចង់បាន។ បច្ចុប្បន្ននេះដំណើរការតែលើប្រអប់ធីក និងវិទ្យុដែលមិនមានក្នុងអ៊ីនធឺណិតប៉ុណ្ណោះ។ សូមចងចាំថានៅតែផ្តល់នូវទម្រង់នៃស្លាកមួយចំនួនសម្រាប់បច្ចេកវិទ្យាជំនួយ (ឧទាហរណ៍ ការប្រើប្រាស់ aria-label)។

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

ជ្រើសរើស

សូមចំណាំថា ម៉ឺនុយជ្រើសរើសដើមជាច្រើន - ពោលគឺនៅក្នុង Safari និង Chrome - មានជ្រុងមូលដែលមិនអាចកែប្រែបានតាមរយៈ border-radiusលក្ខណៈសម្បត្តិ។

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

សម្រាប់ <select>ការគ្រប់គ្រងដោយប្រើ multipleគុណលក្ខណៈ ជម្រើសច្រើនត្រូវបានបង្ហាញតាមលំនាំដើម។

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

ការគ្រប់គ្រងឋិតិវន្ត

នៅពេលដែលអ្នកត្រូវការដាក់អត្ថបទធម្មតានៅជាប់ស្លាកទម្រង់ក្នុងទម្រង់មួយ សូមប្រើ .form-control-staticថ្នាក់នៅលើ <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

ស្ថានភាពផ្តោតអារម្មណ៍

យើងលុបរចនាប័ទ្មលំនាំដើម outlineនៅលើការគ្រប់គ្រងទម្រង់មួយចំនួន ហើយអនុវត្ត a box-shadowនៅកន្លែងរបស់វាសម្រាប់ :focus.

`:focus`ស្ថានភាព សាកល្បង

ការបញ្ចូលឧទាហរណ៍ខាងលើប្រើរចនាប័ទ្មផ្ទាល់ខ្លួននៅក្នុងឯកសាររបស់យើងដើម្បីបង្ហាញ :focusស្ថានភាពនៅលើ .form-control.

រដ្ឋពិការ

បន្ថែម disabledគុណលក្ខណៈប៊ូលីននៅលើធាតុបញ្ចូលដើម្បីការពារអន្តរកម្មរបស់អ្នកប្រើ។ ធាតុចូលដែលបិទដំណើរការមើលទៅស្រាលជាងមុន ហើយបន្ថែម not-allowedទស្សន៍ទ្រនិច។

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

សំណុំវាលដែលបានបិទ

បន្ថែម disabledគុណលក្ខណៈទៅ a <fieldset>ដើម្បីបិទការគ្រប់គ្រងទាំងអស់នៅក្នុង <fieldset>ពេលតែមួយ។

ការព្រមានអំពីមុខងារតំណរបស់`<a>`

តាមលំនាំដើម កម្មវិធីរុករកតាមអ៊ីនធឺណិតនឹងចាត់ទុកការគ្រប់គ្រងទម្រង់ដើមទាំងអស់ ( <input>, <select>និង <button>ធាតុ) នៅខាងក្នុង <fieldset disabled>ជាបិទ ដោយការពារអន្តរកម្មក្តារចុច និងកណ្តុរនៅលើពួកវា។ ទោះយ៉ាងណាក៏ដោយ ប្រសិនបើទម្រង់របស់អ្នករួមបញ្ចូល <a ... class="btn btn-*">ធាតុផងដែរ ទាំងនេះនឹងត្រូវបានផ្តល់តែរចនាប័ទ្មនៃ pointer-events: none. ដូចដែលបានកត់សម្គាល់នៅក្នុងផ្នែកអំពី ស្ថានភាពបិទសម្រាប់ប៊ូតុង (និងជាពិសេសនៅក្នុងផ្នែករងសម្រាប់ធាតុយុថ្កា) លក្ខណៈសម្បត្តិ CSS នេះមិនទាន់មានលក្ខណៈស្តង់ដារនៅឡើយ ហើយមិនត្រូវបានគាំទ្រពេញលេញនៅក្នុង Opera 18 និងខាងក្រោម ឬនៅក្នុង Internet Explorer 11 ហើយបានឈ្នះ 'មិនរារាំងអ្នកប្រើប្រាស់ក្តារចុចមិនឱ្យផ្តោត ឬធ្វើឱ្យតំណទាំងនេះសកម្មទេ។ ដូច្នេះដើម្បីឱ្យមានសុវត្ថិភាព សូមប្រើ JavaScript ផ្ទាល់ខ្លួន ដើម្បីបិទតំណបែបនេះ។

ភាពឆបគ្នាឆ្លងកម្មវិធីរុករក

ខណៈពេលដែល Bootstrap នឹងអនុវត្តរចនាប័ទ្មទាំងនេះនៅក្នុងកម្មវិធីរុករកទាំងអស់ Internet Explorer 11 និងខាងក្រោមមិនគាំទ្រទាំងស្រុងនូវ disabledគុណលក្ខណៈនៅលើ <fieldset>. ប្រើ JavaScript ផ្ទាល់ខ្លួនដើម្បីបិទសំណុំវាលនៅក្នុងកម្មវិធីរុករកទាំងនេះ។

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

ស្ថានភាពបានតែអាន

បន្ថែម readonlyគុណលក្ខណៈប៊ូលីនលើធាតុបញ្ចូល ដើម្បីការពារការកែប្រែតម្លៃរបស់ធាតុបញ្ចូល។ ធាតុបញ្ចូលបានតែអានហាក់ដូចជាស្រាលជាងមុន (ដូចជាការបញ្ចូលដែលបិទ) ប៉ុន្តែរក្សាទស្សន៍ទ្រនិចស្តង់ដារ។

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

អត្ថបទជំនួយ

រារាំងអត្ថបទជំនួយសម្រាប់ការគ្រប់គ្រងទម្រង់។

ការភ្ជាប់អត្ថបទជំនួយជាមួយការគ្រប់គ្រងទម្រង់

អត្ថបទជំនួយគួរតែត្រូវបានទាក់ទងយ៉ាងច្បាស់ជាមួយនឹងការគ្រប់គ្រងទម្រង់ដែលវាទាក់ទងនឹងការប្រើប្រាស់ aria-describedbyគុណលក្ខណៈ។ វានឹងធានាថា បច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ នឹងប្រកាសអត្ថបទជំនួយនេះ នៅពេលដែលអ្នកប្រើប្រាស់ផ្តោតអារម្មណ៍ ឬចូលទៅក្នុងការគ្រប់គ្រង។

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

បញ្ជាក់សុពលភាព

Bootstrap រួមបញ្ចូលរចនាប័ទ្មសុពលភាពសម្រាប់កំហុស ការព្រមាន និងស្ថានភាពជោគជ័យលើការគ្រប់គ្រងទម្រង់។ ដើម្បីប្រើ បន្ថែម .has-warning, .has-errorឬ .has-successទៅធាតុមេ។ ណាមួយ .control-label, .form-controlនិង .help-blockនៅក្នុងធាតុនោះនឹងទទួលបានរចនាប័ទ្មសុពលភាព។

ការបញ្ជូនស្ថានភាពសុពលភាពទៅកាន់បច្ចេកវិទ្យាជំនួយ និងអ្នកប្រើប្រាស់ពិការភ្នែកពណ៌

ការប្រើរចនាប័ទ្មសុពលភាពទាំងនេះដើម្បីបញ្ជាក់អំពីស្ថានភាពនៃការគ្រប់គ្រងទម្រង់ផ្តល់នូវការចង្អុលបង្ហាញដែលផ្អែកលើពណ៌ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ ឬចំពោះអ្នកប្រើប្រាស់ពិការភ្នែកពណ៌។

ត្រូវប្រាកដថាការចង្អុលបង្ហាញជំនួសនៃរដ្ឋក៏ត្រូវបានផ្តល់ជូនផងដែរ។ ឧទាហរណ៍ អ្នកអាចរួមបញ្ចូលព័ត៌មានជំនួយអំពីស្ថានភាពនៅក្នុង <label>អត្ថបទរបស់ការគ្រប់គ្រងទម្រង់ខ្លួនវា (ដូចករណីនៅក្នុងឧទាហរណ៍កូដខាងក្រោម) រួមបញ្ចូល Glyphicon (ជាមួយអត្ថបទជំនួសដែលសមស្របដោយប្រើ .sr-onlyថ្នាក់ - មើល ឧទាហរណ៍ Glyphicon ) ឬដោយការផ្តល់នូវ ប្លុក អត្ថបទជំនួយ បន្ថែម ។ ជាពិសេសសម្រាប់បច្ចេកវិទ្យាជំនួយ ការគ្រប់គ្រងទម្រង់មិនត្រឹមត្រូវក៏អាចត្រូវបានកំណត់ aria-invalid="true"គុណលក្ខណៈផងដែរ។

បញ្ចូលដោយជោគជ័យ ប្លុកនៃអត្ថបទជំនួយដែលបំបែកទៅលើបន្ទាត់ថ្មី ហើយអាចពង្រីកលើសពីមួយបន្ទាត់។

បញ្ចូលជាមួយការព្រមាន

បញ្ចូលជាមួយកំហុស

ប្រអប់ធីកដោយជោគជ័យ

ប្រអប់ធីកជាមួយនឹងការព្រមាន

ប្រអប់ធីកដែលមានកំហុស

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

ជាមួយនឹងរូបតំណាងស្រេចចិត្ត

អ្នកក៏អាចបន្ថែមរូបតំណាងមតិកែលម្អជាជម្រើសជាមួយនឹងការបន្ថែម .has-feedbackនិងរូបតំណាងត្រឹមត្រូវ។

រូបតំណាងមតិកែលម្អដំណើរការតែជាមួយ <input class="form-control">ធាតុអត្ថបទប៉ុណ្ណោះ។

រូបតំណាង ស្លាក និងក្រុមបញ្ចូល

ការកំណត់ទីតាំងនៃរូបតំណាងមតិកែលម្អដោយដៃគឺត្រូវបានទាមទារសម្រាប់ការបញ្ចូលដោយគ្មានស្លាក និងសម្រាប់ ក្រុមបញ្ចូលដែល មានកម្មវិធីបន្ថែមនៅខាងស្តាំ។ អ្នកត្រូវបានលើកទឹកចិត្តយ៉ាងខ្លាំងក្នុងការផ្តល់ស្លាកសម្រាប់ការបញ្ចូលទាំងអស់សម្រាប់ហេតុផលភាពងាយស្រួល។ ប្រសិនបើអ្នកចង់ការពារស្លាកមិនឱ្យបង្ហាញ សូមលាក់ពួកវាជាមួយ .sr-onlyថ្នាក់។ ប្រសិនបើអ្នកត្រូវធ្វើដោយគ្មានស្លាក សូមកែតម្រូវ topតម្លៃនៃរូបតំណាងមតិកែលម្អ។ សម្រាប់ក្រុមបញ្ចូល សូមកែតម្រូវ rightតម្លៃទៅជាតម្លៃភីកសែលសមស្រប អាស្រ័យលើទទឹងនៃ addon របស់អ្នក។

បង្ហាញអត្ថន័យរបស់រូបតំណាងទៅនឹងបច្ចេកវិទ្យាជំនួយ

ដើម្បីធានាថាបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ - បង្ហាញអត្ថន័យនៃរូបតំណាងបានត្រឹមត្រូវ អត្ថបទដែលលាក់បន្ថែមគួរតែត្រូវបានរួមបញ្ចូលជាមួយ .sr-onlyថ្នាក់ ហើយភ្ជាប់យ៉ាងច្បាស់លាស់ជាមួយការគ្រប់គ្រងទម្រង់ដែលវាទាក់ទងនឹងការប្រើប្រាស់ aria-describedby។ ម៉្យាងទៀត ត្រូវប្រាកដថាអត្ថន័យ (ឧទាហរណ៍ ការពិតដែលថាមានការព្រមានសម្រាប់វាលបញ្ចូលអត្ថបទជាក់លាក់មួយ) ត្រូវបានបញ្ជូនក្នុងទម្រង់មួយចំនួនផ្សេងទៀត ដូចជាការផ្លាស់ប្តូរអត្ថបទនៃការពិត <label>ដែលទាក់ទងនឹងការគ្រប់គ្រងទម្រង់។

ទោះបីជាឧទាហរណ៍ខាងក្រោមបានរៀបរាប់រួចហើយអំពីស្ថានភាពសុពលភាពនៃការគ្រប់គ្រងទម្រង់រៀងៗខ្លួននៅក្នុង <label>អត្ថបទផ្ទាល់ក៏ដោយ បច្ចេកទេសខាងលើ (ដោយប្រើ .sr-onlyអត្ថបទ និង aria-describedby) ត្រូវបានរួមបញ្ចូលសម្រាប់គោលបំណងជាឧទាហរណ៍។

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

រូបតំណាងស្រេចចិត្តក្នុងទម្រង់ផ្ដេក និងក្នុងជួរ

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

រូបតំណាងស្រេចចិត្តជាមួយនឹង `.sr-only`ស្លាក ដែលលាក់

ប្រសិនបើអ្នកប្រើ .sr-onlyclass ដើម្បីលាក់ form control's <label>(ជាជាងប្រើជម្រើសដាក់ស្លាកផ្សេងទៀត ដូចជា aria-labelattribute) Bootstrap នឹងកែតម្រូវទីតាំងរបស់ icon ដោយស្វ័យប្រវត្តិ នៅពេលដែលវាត្រូវបានបន្ថែម។

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

គ្រប់គ្រងទំហំ

កំណត់កម្ពស់ដោយប្រើថ្នាក់ដូចជា .input-lgនិងកំណត់ទទឹងដោយប្រើថ្នាក់ជួរឈរក្រឡាចត្រង្គដូចជា .col-lg-*.

ទំហំកម្ពស់

បង្កើតការគ្រប់គ្រងទម្រង់ខ្ពស់ ឬខ្លីជាង ដែលផ្គូផ្គងទំហំប៊ូតុង។

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

ទំហំក្រុមទម្រង់ផ្ដេក

ទំហំស្លាក និងការគ្រប់គ្រងទម្រង់យ៉ាងរហ័សនៅខាងក្នុង .form-horizontalដោយបន្ថែម .form-group-lgឬ .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

ទំហំជួរឈរ

រុំធាតុបញ្ចូលក្នុងជួរឈរក្រឡាចត្រង្គ ឬធាតុមេផ្ទាល់ខ្លួន ដើម្បីងាយស្រួលអនុវត្តទទឹងដែលចង់បាន។

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

ស្លាកប៊ូតុង

ប្រើថ្នាក់ប៊ូតុងនៅលើ<a> , <button>ឬ <input>ធាតុ។

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

ការប្រើប្រាស់តាមបរិបទជាក់លាក់

ខណៈពេលដែលថ្នាក់ប៊ូតុងអាចត្រូវបានប្រើនៅលើ <a>និង <button>ធាតុ មានតែ <button>ធាតុប៉ុណ្ណោះដែលត្រូវបានគាំទ្រនៅក្នុងសមាសធាតុ nav និង navbar របស់យើង។

តំណភ្ជាប់ដើរតួជាប៊ូតុង

ប្រសិនបើ <a>ធាតុត្រូវបានប្រើដើម្បីដើរតួជាប៊ូតុង – ដំណើរការមុខងារក្នុងទំព័រ ជាជាងការរុករកទៅឯកសារ ឬផ្នែកផ្សេងទៀតនៅក្នុងទំព័របច្ចុប្បន្ន – ពួកគេក៏គួរតែត្រូវបានផ្តល់ឱ្យសមស្រប role="button"ផងដែរ។

ការបង្ហាញឆ្លងកាត់កម្មវិធីរុករក

ជាការអនុវត្តល្អបំផុត យើងសូមផ្តល់អនុសាសន៍យ៉ាងខ្លាំងឱ្យប្រើ <button>ធាតុនៅពេលណាដែលអាចធ្វើទៅបាន ទៅបាន ដើម្បីធានាឱ្យមានការផ្គូផ្គងការបង្ហាញឆ្លងកាត់កម្មវិធីរុករក។

ក្នុងចំណោមរបស់ផ្សេងទៀត មាន កំហុសនៅក្នុង Firefox <30 ដែលរារាំងយើងពីការកំណត់ line-heightនៃ <input>ប៊ូតុង -based ដែលបណ្តាលឱ្យពួកវាមិនស៊ីគ្នានឹងកម្ពស់នៃប៊ូតុងផ្សេងទៀតនៅលើ Firefox ។

ជម្រើស

ប្រើថ្នាក់ប៊ូតុងណាមួយដែលមានដើម្បីបង្កើតប៊ូតុងដែលមានរចនាប័ទ្មយ៉ាងរហ័ស។

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ

ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យទៅប៊ូតុងមួយផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (អត្ថបទដែលអាចមើលឃើញនៃប៊ូតុង) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .sr-onlyថ្នាក់។

ទំហំ

ចង់បានប៊ូតុងធំ ឬតូចជាងនេះទេ? បន្ថែម .btn-lg, .btn-smឬ .btn-xsសម្រាប់ទំហំបន្ថែម។

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

បង្កើតប៊ូតុងកម្រិតប្លុក—ដែលលាតសន្ធឹងទទឹងពេញរបស់មេ—ដោយបន្ថែម .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

ស្ថានភាពសកម្ម

ប៊ូតុងនឹងលេចឡើងដោយចុច (ជាមួយផ្ទៃខាងក្រោយងងឹត ស៊ុមងងឹត និងស្រមោលបញ្ចូល) ពេលសកម្ម។ សម្រាប់ <button>ធាតុនេះត្រូវបានធ្វើតាមរយៈ :active. សម្រាប់ <a>ធាតុវាត្រូវបានធ្វើជាមួយ .active. ទោះយ៉ាងណាក៏ដោយ អ្នកអាចប្រើ .activeនៅលើ <button>s (និងរួមបញ្ចូលaria-pressed="true" គុណលក្ខណៈ) ប្រសិនបើអ្នកត្រូវការចម្លងស្ថានភាពសកម្មតាមកម្មវិធី។

ធាតុប៊ូតុង

មិនចាំបាច់បន្ថែម :activeទេ ព្រោះវាជាប្រភេទ pseudo-class ប៉ុន្តែប្រសិនបើអ្នកត្រូវការបង្ខំរូបរាងដូចគ្នា សូមបន្តបន្ថែម .active។

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

ធាតុយុថ្កា

បន្ថែម .activeថ្នាក់ទៅ <a>ប៊ូតុង។

តំណភ្ជាប់បឋម តំណភ្ជាប់

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

រដ្ឋពិការ

ធ្វើឱ្យប៊ូតុងមើលទៅមិនអាចចុចបានដោយបន្ថយពួកវាត្រឡប់មកវិញជាមួយ opacity.

ធាតុប៊ូតុង

បន្ថែម disabledគុណលក្ខណៈទៅ <button>ប៊ូតុង។

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

ភាពឆបគ្នាឆ្លងកម្មវិធីរុករក

ប្រសិនបើអ្នកបន្ថែម disabledគុណលក្ខណៈទៅ <button>Internet Explorer 9 និងខាងក្រោមនឹងបង្ហាញអត្ថបទពណ៌ប្រផេះជាមួយនឹងស្រមោលអត្ថបទអាក្រក់ដែលយើងមិនអាចជួសជុលបាន។

ធាតុយុថ្កា

បន្ថែម .disabledថ្នាក់ទៅ <a>ប៊ូតុង។

តំណភ្ជាប់បឋម តំណភ្ជាប់

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

យើងប្រើ .disabledជាថ្នាក់ឧបករណ៍ប្រើប្រាស់នៅទីនេះ ស្រដៀងនឹង .activeថ្នាក់ទូទៅ ដូច្នេះមិនទាមទារបុព្វបទទេ។

ការព្រមានអំពីមុខងារភ្ជាប់

ថ្នាក់នេះប្រើ pointer-events: noneដើម្បីព្យាយាមបិទមុខងារតំណរបស់ <a>s ប៉ុន្តែលក្ខណសម្បត្តិ CSS មិនទាន់មានលក្ខណៈស្តង់ដារ និងមិនត្រូវបានគាំទ្រពេញលេញនៅក្នុង Opera 18 និងខាងក្រោម ឬនៅក្នុង Internet Explorer 11។ លើសពីនេះ សូម្បីតែនៅក្នុងកម្មវិធីរុករកដែលគាំទ្រ pointer-events: noneក្តារចុច ការរុករកនៅតែមិនមានផលប៉ះពាល់ មានន័យថាអ្នកប្រើប្រាស់ក្តារចុចដែលបានមើលឃើញ និងអ្នកប្រើប្រាស់បច្ចេកវិទ្យាជំនួយនឹងនៅតែអាចដំណើរការតំណភ្ជាប់ទាំងនេះបាន។ ដូច្នេះដើម្បីឱ្យមានសុវត្ថិភាព សូមប្រើ JavaScript ផ្ទាល់ខ្លួន ដើម្បីបិទតំណបែបនេះ។

រូបភាពដែលឆ្លើយតប

រូបភាពនៅក្នុង Bootstrap 3 អាចត្រូវបានធ្វើឱ្យមានការឆ្លើយតបងាយស្រួលតាមរយៈការបន្ថែម .img-responsiveថ្នាក់។ max-width: 100%;នេះ អនុវត្ត height: auto;និង display: block;ចំពោះរូបភាព ដូច្នេះវាធ្វើមាត្រដ្ឋានយ៉ាងស្អាតចំពោះធាតុមេ។

ដើម្បីដាក់កណ្តាលរូបភាពដែលប្រើ .img-responsiveថ្នាក់ សូមប្រើ .center-blockជំនួសឱ្យ .text-center. សូមមើលផ្នែក ថ្នាក់ជំនួយ សម្រាប់ព័ត៌មានលម្អិតអំពី .center-blockការប្រើប្រាស់។

រូបភាព SVG និង IE 8-10

នៅក្នុង Internet Explorer 8-10 រូបភាព SVG ជាមួយ .img-responsiveមានទំហំមិនសមាមាត្រ។ ដើម្បីជួសជុលនេះ បន្ថែម width: 100% \9;កន្លែងចាំបាច់។ Bootstrap មិនអនុវត្តវាដោយស្វ័យប្រវត្តិទេព្រោះវាបណ្តាលឱ្យមានភាពស្មុគស្មាញដល់ទម្រង់រូបភាពផ្សេងទៀត។

<img src="..." class="img-responsive" alt="Responsive image">

ទម្រង់រូបភាព

បន្ថែមថ្នាក់ទៅ <img>ធាតុដើម្បីងាយស្រួលធ្វើរចនាប័ទ្មរូបភាពនៅក្នុងគម្រោងណាមួយ។

ភាពឆបគ្នាឆ្លងកម្មវិធីរុករក

សូមចងចាំថា Internet Explorer 8 ខ្វះការគាំទ្រសម្រាប់ជ្រុងមូល។

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

ពណ៌តាមបរិបទ

បង្ហាញអត្ថន័យតាមរយៈពណ៌ដោយប្រើថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលសង្កត់ធ្ងន់។ ទាំងនេះក៏អាចត្រូវបានអនុវត្តចំពោះតំណ ហើយនឹងងងឹតនៅពេលដាក់ដូចទៅនឹងរចនាប័ទ្មតំណលំនាំដើមរបស់យើង។

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh។

Nullam id dolor id nibh ultricies vehicula ut id elit ។

Duis mollis, est non commodo luctus, nisi erat porttitor ligula ។

Maecenas sed diam eget risus varius blandit អង្គុយ amet non magna ។

Etiam porta sem malesuada magna mollis euismod ។

Donec ullamcorper nulla non metus auctor fringilla ។

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

ដោះស្រាយជាមួយភាពជាក់លាក់

ពេលខ្លះថ្នាក់សង្កត់ធ្ងន់មិនអាចអនុវត្តបានទេ ដោយសារភាពជាក់លាក់របស់អ្នកជ្រើសរើសផ្សេងទៀត។ ក្នុងករណីភាគច្រើន ដំណោះស្រាយគ្រប់គ្រាន់គឺការរុំអត្ថបទរបស់អ្នកនៅក្នុង <span>ថ្នាក់។

ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ

ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (ពណ៌បរិបទត្រូវបានប្រើដើម្បីពង្រឹងអត្ថន័យដែលមានរួចហើយនៅក្នុងអត្ថបទ/ការសម្គាល់) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .sr-onlyថ្នាក់។ .

ផ្ទៃខាងក្រោយបរិបទ

ស្រដៀងទៅនឹងថ្នាក់ពណ៌អត្ថបទតាមបរិបទ ងាយស្រួលកំណត់ផ្ទៃខាងក្រោយនៃធាតុទៅថ្នាក់បរិបទណាមួយ។ សមាសធាតុយុថ្កានឹងងងឹតនៅពេលដាក់ ដូចគ្នានឹងថ្នាក់អត្ថបទដែរ។

Nullam id dolor id nibh ultricies vehicula ut id elit ។

Duis mollis, est non commodo luctus, nisi erat porttitor ligula ។

Maecenas sed diam eget risus varius blandit អង្គុយ amet non magna ។

Etiam porta sem malesuada magna mollis euismod ។

Donec ullamcorper nulla non metus auctor fringilla ។

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

ដោះស្រាយជាមួយភាពជាក់លាក់

ពេលខ្លះថ្នាក់ផ្ទៃខាងក្រោយតាមបរិបទមិនអាចអនុវត្តបានទេ ដោយសារភាពជាក់លាក់របស់អ្នកជ្រើសរើសផ្សេងទៀត។ ក្នុងករណីខ្លះ ដំណោះស្រាយគ្រប់គ្រាន់គឺដើម្បីរុំមាតិការបស់ធាតុរបស់អ្នកនៅក្នុង <div>ថ្នាក់។

ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ

ដូច ពណ៌តាមបរិបទ ត្រូវប្រាកដថាអត្ថន័យណាមួយដែលបញ្ជូនតាមរយៈពណ៌ក៏ត្រូវបានបញ្ជូនជាទម្រង់ដែលមិនមែនជាការបង្ហាញសុទ្ធសាធ។

បិទរូបតំណាង

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

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

ការ៉ាស់

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

<span class="caret"></span>

អណ្តែតលឿន

អណ្តែតធាតុមួយទៅឆ្វេង ឬស្តាំជាមួយថ្នាក់។ !importantរួមបញ្ចូលដើម្បីជៀសវាងបញ្ហាជាក់លាក់។ ថ្នាក់ក៏អាចត្រូវបានប្រើជា mixins ផងដែរ។

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

ប្លុកមាតិកាកណ្តាល

កំណត់ធាតុមួយទៅ display: blockកណ្តាលតាមរយៈ margin. អាចប្រើបានជា mixin និងថ្នាក់។

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

ជម្រះ

ងាយស្រួលសម្អាត floats ដោយបន្ថែម .clearfix ទៅធាតុមេ ។ ប្រើប្រាស់ micro clearfix ដែល ពេញនិយមដោយ Nicolas Gallagher ។ ក៏អាចប្រើជាម្សៅលាយបានដែរ។

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

បង្ហាញនិងលាក់មាតិកា

បង្ខំធាតុមួយឱ្យបង្ហាញ ឬលាក់ ( រួមទាំងសម្រាប់អ្នកអានអេក្រង់ ) ជាមួយនឹងការប្រើប្រាស់ .showនិង .hiddenថ្នាក់។ ថ្នាក់ទាំងនេះប្រើ !importantដើម្បីជៀសវាងការប៉ះទង្គិចជាក់លាក់ ដូចជា បណ្តែតរហ័ស ។ ពួកវាអាចប្រើបានសម្រាប់តែការបិទបើកកម្រិតប្លុកប៉ុណ្ណោះ។ ពួកគេក៏អាចត្រូវបានប្រើជា mixins ផងដែរ។

.hideអាចប្រើបាន ប៉ុន្តែវាមិនតែងតែប៉ះពាល់ដល់អ្នកអានអេក្រង់ទេ ហើយត្រូវបាន បដិសេធ ជា v3.0.1។ ប្រើ .hiddenឬ .sr-onlyជំនួស។

លើសពីនេះ .invisibleអាចត្រូវបានប្រើដើម្បីបិទបើកតែភាពមើលឃើញនៃធាតុ មានន័យថាវា displayមិនត្រូវបានកែប្រែ ហើយធាតុនៅតែអាចប៉ះពាល់ដល់លំហូរនៃឯកសារ។

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

កម្មវិធីអានអេក្រង់ និងមាតិការុករកក្តារចុច

លាក់ធាតុមួយទៅកាន់ឧបករណ៍ទាំងអស់ លើកលែងតែកម្មវិធីអានអេក្រង់ ជាមួយ .sr-only. ផ្សំ .sr-onlyជាមួយ .sr-only-focusableដើម្បីបង្ហាញធាតុម្តងទៀត នៅពេលដែលវាត្រូវបានផ្តោត (ឧ. ដោយអ្នកប្រើប្រាស់ក្តារចុចប៉ុណ្ណោះ)។ ចាំបាច់សម្រាប់ ការអនុវត្តតាមការអនុវត្តល្អបំផុតអំពីភាពងាយស្រួល ។ ក៏អាចប្រើជាល្បាយផងដែរ។

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

ការជំនួសរូបភាព

ប្រើប្រាស់ .text-hideclass ឬ mixin ដើម្បីជួយជំនួសខ្លឹមសារអត្ថបទរបស់ធាតុជាមួយនឹងរូបភាពផ្ទៃខាងក្រោយ។

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

សម្រាប់ការអភិវឌ្ឍន៍ដែលងាយស្រួលប្រើសម្រាប់ទូរសព្ទចល័តកាន់តែលឿន សូមប្រើថ្នាក់ឧបករណ៍ប្រើប្រាស់ទាំងនេះសម្រាប់បង្ហាញ និងលាក់ខ្លឹមសារតាមឧបករណ៍តាមរយៈសំណួរមេឌៀ។ រួមបញ្ចូលផងដែរគឺជាថ្នាក់ឧបករណ៍ប្រើប្រាស់សម្រាប់បិទបើកមាតិកានៅពេលបោះពុម្ព។

ព្យាយាមប្រើវានៅលើមូលដ្ឋានមានកំណត់ និងជៀសវាងការបង្កើតកំណែខុសគ្នាទាំងស្រុងនៃគេហទំព័រតែមួយ។ ជំនួសមកវិញ ប្រើពួកវាដើម្បីបំពេញបទបង្ហាញរបស់ឧបករណ៍នីមួយៗ។

ថ្នាក់ដែលមាន

ប្រើថ្នាក់តែមួយ ឬបន្សំនៃថ្នាក់ដែលមានសម្រាប់បិទបើកមាតិកាឆ្លងកាត់ចំណុចឈប់នៃច្រកចូលមើល។

	ឧបករណ៍តូចៗបន្ថែមទូរស័ព្ទ (<768px)	ឧបករណ៍តូចៗថេប្លេត (≥768px)	ឧបករណ៍មធ្យមកុំព្យូទ័រលើតុ (≥992px)	ឧបករណ៍ធំកុំព្យូទ័រលើតុ (≥1200px)
`.visible-xs-*`	ដែលអាចមើលឃើញ	លាក់	លាក់	លាក់
`.visible-sm-*`	លាក់	ដែលអាចមើលឃើញ	លាក់	លាក់
`.visible-md-*`	លាក់	លាក់	ដែលអាចមើលឃើញ	លាក់
`.visible-lg-*`	លាក់	លាក់	លាក់	ដែលអាចមើលឃើញ
`.hidden-xs`	លាក់	ដែលអាចមើលឃើញ	ដែលអាចមើលឃើញ	ដែលអាចមើលឃើញ
`.hidden-sm`	ដែលអាចមើលឃើញ	លាក់	ដែលអាចមើលឃើញ	ដែលអាចមើលឃើញ
`.hidden-md`	ដែលអាចមើលឃើញ	ដែលអាចមើលឃើញ	លាក់	ដែលអាចមើលឃើញ
`.hidden-lg`	ដែលអាចមើលឃើញ	ដែលអាចមើលឃើញ	ដែលអាចមើលឃើញ	លាក់

គិតត្រឹម v3.2.0 .visible-*-*ថ្នាក់សម្រាប់ចំណុចឈប់នីមួយៗមានការប្រែប្រួលបី ដែលមួយសម្រាប់ displayតម្លៃទ្រព្យសម្បត្តិ CSS នីមួយៗដែលបានរាយខាងក្រោម។

ក្រុមនៃថ្នាក់	CSS`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

xsដូច្នេះ ឧទាហរណ៍សម្រាប់អេក្រង់ តូចបន្ថែម .visible-*-*ថ្នាក់ដែលមានគឺ៖ .visible-xs-block, .visible-xs-inline, និង .visible-xs-inline-block.

ថ្នាក់ .visible-xs, .visible-sm, .visible-md, និង .visible-lgក៏មានដែរ ប៉ុន្តែត្រូវបាន បដិសេធជា v3.2.0 ។ ពួកវាគឺប្រហែលស្មើនឹង .visible-*-blockលើកលែងតែករណីពិសេសបន្ថែមសម្រាប់ការបិទ/បើក <table>ធាតុដែលទាក់ទងនឹង។

ថ្នាក់បោះពុម្ព

ស្រដៀងទៅនឹងថ្នាក់ឆ្លើយតបធម្មតា ប្រើវាសម្រាប់បិទបើកមាតិកាសម្រាប់ការបោះពុម្ព។

ថ្នាក់	កម្មវិធីរុករក	បោះពុម្ព
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	លាក់	ដែលអាចមើលឃើញ
`.hidden-print`	ដែលអាចមើលឃើញ	លាក់

ថ្នាក់ ក៏មានដែរ .visible-printប៉ុន្តែត្រូវបាន បដិសេធ ជា v3.2.0។ វាប្រហាក់ប្រហែលនឹង .visible-print-blockលើកលែងតែករណីពិសេសបន្ថែមសម្រាប់ <table>ធាតុដែលទាក់ទង។

ករណីសាកល្បង

ប្ដូរទំហំកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់អ្នក ឬផ្ទុកនៅលើឧបករណ៍ផ្សេងៗ ដើម្បីសាកល្បងថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប។

អាចមើលឃើញនៅលើ...

សញ្ញាធីកពណ៌បៃតងបង្ហាញថាធាតុ អាចមើលឃើញ នៅក្នុងច្រកមើលបច្ចុប្បន្នរបស់អ្នក។

តូចបន្ថែម ✔ Visible on x-small

តូច ✔ Visible on small

មធ្យម ✔ Visible on medium

Large ✔មើលឃើញនៅលើធំ

តូចនិងតូចបន្ថែម ✔ Visible on x-small and small

Medium and large ✔អាចមើលឃើញនៅលើមធ្យមនិងធំ

តូច និងមធ្យមបន្ថែម ✔ Visible on x-small and medium

Small and large ✔អាចមើលបានទាំងតូច និងធំ

Extra small and large ✔អាចមើលឃើញនៅលើ x-តូច និងធំ

តូច និងមធ្យម ✔ Visible on small and medium

លាក់នៅ...

Here, green checkmarks also indicate the element is hidden in your current viewport.

Extra small ✔ Hidden on x-small

Small ✔ Hidden on small

Medium ✔ Hidden on medium

Large ✔ Hidden on large

Extra small and small ✔ Hidden on x-small and small

Medium and large ✔ Hidden on medium and large

Extra small and medium ✔ Hidden on x-small and medium

Small and large ✔ Hidden on small and large

Extra small and large ✔ Hidden on x-small and large

Small and medium ✔ Hidden on small and medium

Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.

Grid variables and mixins are covered within the Grid system section.

Compiling Bootstrap

Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, consult the Getting Started section for how to setup your development environment to run the necessary commands.

Third party compilation tools may work with Bootstrap, but they are not supported by our core team.

Variables

Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see the Customizer.

Colors

Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

Use any of these color variables as they are or reassign them to more meaningful variables for your project.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

Scaffolding

A handful of variables for quickly customizing key elements of your site's skeleton.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

Links

Easily style your links with the right color with only one value.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

Note that the @link-hover-color uses a function, another awesome tool from Less, to automagically create the right hover color. You can use darken, lighten, saturate, and desaturate.

Typography

Easily set your typeface, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

Icons

Two quick variables for customizing the location and filename of your icons.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

Components

Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

Vendor mixins

Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixes in your compiled CSS.

Box-sizing

Reset your components' box model with a single mixin. For context, see this helpful article from Mozilla.

The mixin is deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

Rounded corners

Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Box (Drop) shadows

If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.

The mixin is deprecated as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.

Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

Transitions

Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.

The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

Transformations

Rotate, scale, translate (move), or skew any object.

The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

Animations

A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.

The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

Opacity

Set the opacity for all browsers and provide a filter fallback for IE8.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

Placeholder text

Provide context for form controls within each field.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

Columns

Generate columns via CSS within a single element.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

Gradients

Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

You can also specify the angle of a standard two-color, linear gradient:

#gradient > .directional(#333; #000; 45deg);

If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.

#gradient > .striped(#333; 45deg);

Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none;.

Utility mixins

Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.

Clearfix

Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallagher.

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

Horizontal centering

Quickly center any element within its parent. Requires width or max-width to be set.

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

Sizing helpers

Specify the dimensions of an object more easily.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

Resizable textareas

Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

Truncating text

Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

Retina images

Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.

What's included

Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.

Path	Description
`lib/`	Ruby gem code (Sass configuration, Rails and Compass integrations)
`tasks/`	Converter scripts (turning upstream Less to Sass)
`test/`	Compilation tests
`templates/`	បង្ហាញកញ្ចប់ត្រីវិស័យ
`vendor/assets/`	Sass, JavaScript និងឯកសារពុម្ពអក្សរ
`Rakefile`	កិច្ចការផ្ទៃក្នុង ដូចជាតុងរួច និងបំប្លែង

ចូលទៅកាន់ ឃ្លាំង GitHub របស់ច្រក Sass ដើម្បីមើលឯកសារទាំងនេះនៅក្នុងសកម្មភាព។

ការដំឡើង

សម្រាប់ព័ត៌មានអំពីរបៀបដំឡើង និងប្រើប្រាស់ Bootstrap សម្រាប់ Sass សូមពិគ្រោះជាមួយ ឃ្លាំង GitHub readme ។ វាជាប្រភពចុងក្រោយបំផុត និងរួមបញ្ចូលព័ត៌មានសម្រាប់ប្រើជាមួយគម្រោង Rails, Compass និងស្តង់ដារ Sass ។

Bootstrap សម្រាប់ Sass

CSS

ទិដ្ឋភាពទូទៅ

ប្រភេទឯកសារ HTML5

ទូរស័ព្ទចល័តដំបូង

អក្សរកាត់ និងតំណភ្ជាប់

Normalize.css

ធុង

ប្រព័ន្ធក្រឡាចត្រង្គ

សេចក្តីផ្តើម

សំណួរប្រព័ន្ធផ្សព្វផ្សាយ

ជម្រើសក្រឡាចត្រង្គ

ឧទាហរណ៍៖ ជង់ទៅផ្ដេក

ឧទាហរណ៍៖ ធុងទឹក

ឧទាហរណ៍៖ ទូរសព្ទ និងកុំព្យូទ័រ

ឧទាហរណ៍៖ ទូរសព្ទ ថេប្លេត កុំព្យូទ័រលើតុ

ឧទាហរណ៍៖ ការរុំជួរឈរ

កំណត់ជួរឈរឆ្លើយតបឡើងវិញ

អុហ្វសិតជួរឈរ

ជួរឈរសំបុក

លំដាប់ជួរ

mixins តិច និងអថេរ

អថេរ

ល្បាយ

ការប្រើប្រាស់ឧទាហរណ៍

វាយអក្សរ

ក្បាល

h1. ក្បាល Bootstrap

h2. ក្បាល Bootstrap

h3. ក្បាល Bootstrap

h4. ក្បាល Bootstrap

h5. ក្បាល Bootstrap

h6. ក្បាល Bootstrap

h1. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

h2. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

h3. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

h4. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

h5. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

h6. ចំណងជើង Bootstrap អត្ថបទបន្ទាប់បន្សំ

ច្បាប់ចម្លងរាងកាយ

ច្បាប់ចម្លងរាងកាយនាំមុខ

សាងសង់ដោយតិច

ធាតុអត្ថបទក្នុងជួរ

អត្ថបទដែលបានសម្គាល់

អត្ថបទដែលបានលុប

អត្ថបទវាយលុក

អត្ថបទដែលបានបញ្ចូល

អត្ថបទដែលបានគូសបញ្ជាក់

អត្ថបទតូច

ដិត

ទ្រេត

ធាតុជំនួស

ថ្នាក់តម្រឹម

ថ្នាក់ផ្លាស់ប្តូរ

អក្សរកាត់

អក្សរកាត់ជាមូលដ្ឋាន

លទ្ធិបឋមនិយម

អាស័យដ្ឋាន

ប្លុកសម្រង់

សម្រង់ប្លុកលំនាំដើម

ជម្រើសនៃការដកស្រង់

ការដាក់ឈ្មោះប្រភព

ការបង្ហាញជំនួស

បញ្ជី

មិនបានបញ្ជាទិញ

បានបញ្ជាទិញ

គ្មានរចនាប័ទ្ម

ក្នុងជួរ

ការពិពណ៌នា

ការពិពណ៌នាផ្ដេក

ការកាត់ដោយស្វ័យប្រវត្តិ

កូដ

ក្នុងជួរ

ការបញ្ចូលអ្នកប្រើប្រាស់

ប្លុកមូលដ្ឋាន

អថេរ

លទ្ធផលគំរូ

តុ

ឧទាហរណ៍ជាមូលដ្ឋាន

ជួរឆ្នូត

ភាពឆបគ្នាឆ្លងកម្មវិធីរុករក

ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ

ទាមទារការប្រកាសប្រភេទ

`:focus`ស្ថានភាព សាកល្បង

សំណុំវាលដែលបានបិទ

ការព្រមានអំពីមុខងារតំណរបស់`<a>`

រូបតំណាងស្រេចចិត្តជាមួយនឹង `.sr-only`ស្លាក ដែលលាក់

ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ