ទទួលបានការថយចុះនៃផ្នែកសំខាន់ៗនៃហេដ្ឋារចនាសម្ព័ន្ធរបស់ 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
. បន្ទះនោះត្រូវបានទូទាត់ក្នុងជួរដេកសម្រាប់ជួរឈរដំបូងនិងចុងក្រោយតាមរយៈរឹមអវិជ្ជមាននៅលើ .row
s ។
រឹមអវិជ្ជមានជាមូលហេតុដែលឧទាហរណ៍ខាងក្រោមគឺហួសពីមុខ។ វាដូច្នេះថាមាតិកានៅក្នុងជួរឈរក្រឡាចត្រង្គត្រូវបានតម្រង់ជួរជាមួយនឹងមាតិកាដែលមិនមែនជាក្រឡាចត្រង្គ។
ជួរឈរក្រឡាចត្រង្គត្រូវបានបង្កើតឡើងដោយការបញ្ជាក់ចំនួនជួរឈរដែលមានចំនួនដប់ពីរដែលអ្នកចង់ពង្រីក។ ឧទាហរណ៍ ជួរឈរស្មើគ្នាបីនឹងប្រើបី .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)
ឧបករណ៍ Tablets តូច (≥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-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-4
.col-md-4
ចម្លង
<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 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
ចម្លង
<!-- 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
.col-xs-6 .col-sm-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 > 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
.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>
យកទឹកស្អុយចេញ
ដកទឹកចេញពីជួរមួយ ហើយវាជាជួរឈរជាមួយ .row-no-gutters
ថ្នាក់។
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
ចម្លង
<div class= "row row-no-gutters" >
<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>
<div class= "row row-no-gutters" >
<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>
<div class= "row row-no-gutters" >
<div class= "col-xs-6" > .col-xs-6</div>
<div class= "col-xs-6" > .col-xs-6</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-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 augue 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
Eget 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
Eget 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
Eget 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> < section> </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> < p> Sample text here...< /p> </pre>
អ្នកអាចបន្ថែម .pre-scrollable
ថ្នាក់ជាជម្រើស ដែលនឹងកំណត់កម្ពស់អតិបរមា 350px និងផ្តល់នូវរបាររមូរអ័ក្ស y ។
អថេរ
សម្រាប់ការចង្អុលបង្ហាញអថេរ ប្រើ <var>
ស្លាក។
ចម្លង
<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។
ចម្លង
<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-group
s ដើម្បីធ្វើជាជួរក្រឡាក្រឡា ដូច្នេះមិនចាំបាច់មាន .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
.
ចម្លង
<input type= "text" class= "form-control" placeholder= "Text 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— 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— 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 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
នៅក្នុងធាតុនោះនឹងទទួលបានរចនាប័ទ្មសុពលភាព។
ចម្លង
<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-only
class ដើម្បីលាក់ form control's <label>
(ជាជាងប្រើជម្រើសដាក់ស្លាកផ្សេងទៀត ដូចជា aria-label
attribute) 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 របស់យើង។
ប្រើថ្នាក់ប៊ូតុងណាមួយដែលមានដើម្បីបង្កើតប៊ូតុងដែលមានរចនាប័ទ្មយ៉ាងរហ័ស។
លំនាំដើម
បឋមសិក្សា
ជោគជ័យ
ព័ត៌មាន
ការព្រមាន
គ្រោះថ្នាក់
តំណភ្ជាប់
ចម្លង
<!-- 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>
ចង់បានប៊ូតុងធំ ឬតូចជាងនេះទេ? បន្ថែម .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
ថ្នាក់ទៅ <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
ថ្នាក់ទូទៅ ដូច្នេះមិនទាមទារបុព្វបទទេ។
រូបភាពដែលឆ្លើយតប
រូបភាពនៅក្នុង 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" > × </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 () ;
}
មិនមែនសម្រាប់ប្រើក្នុង navbars ទេ។
ដើម្បីតម្រឹមសមាសធាតុនៅក្នុងរបាររុករកជាមួយថ្នាក់ឧបករណ៍ប្រើប្រាស់ សូមប្រើ .navbar-left
ឬ .navbar-right
ជំនួសវិញ។ សូមមើលឯកសារ navbar សម្រាប់ព័ត៌មានលម្អិត។
ប្លុកមាតិកាកណ្តាល
កំណត់ធាតុមួយទៅ 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 () ;
}
ជម្រះ
ងាយស្រួលសម្អាត float
s ដោយបន្ថែម .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-hide
class ឬ 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 នីមួយៗដែលបានរាយខាងក្រោម។
ក្រុមនៃថ្នាក់
CSSdisplay
.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>
ធាតុដែលទាក់ទង។
ករណីសាកល្បង
ប្ដូរទំហំកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់អ្នក ឬផ្ទុកនៅលើឧបករណ៍ផ្សេងៗ ដើម្បីសាកល្បងថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលឆ្លើយតប។
អាចមើលឃើញនៅលើ...
សញ្ញាធីកពណ៌បៃតងបង្ហាញថាធាតុ អាចមើលឃើញ នៅក្នុងច្រកមើលបច្ចុប្បន្នរបស់អ្នក។
តូចបន្ថែម
✔អាចមើលឃើញនៅលើ x-small
តូច
✔ មើលឃើញនៅតូច
មធ្យម
✔អាចមើលឃើញនៅលើមធ្យម
ធំ
✔អាចមើលឃើញនៅលើធំ
តូចនិងតូចបន្ថែម
✔អាចមើលឃើញនៅលើ x-តូច និងតូច
មធ្យម និងធំ
✔អាចមើលឃើញនៅលើមធ្យមនិងធំ
តូច និងមធ្យមបន្ថែម
✔អាចមើលឃើញនៅលើ x-តូច និងមធ្យម
តូចនិងធំ
✔អាចមើលបានទាំងតូច និងធំ
តូចនិងធំបន្ថែម
✔ អាចមើលឃើញនៅលើ x-តូច និងធំ
តូច និងមធ្យម
✔អាចមើលឃើញនៅលើតូចនិងមធ្យម
លាក់នៅ...
នៅទីនេះ សញ្ញាធីកពណ៌បៃតងក៏បង្ហាញថាធាតុ ត្រូវបានលាក់ នៅក្នុងច្រកមើលបច្ចុប្បន្នរបស់អ្នក។
តូចបន្ថែម
✔លាក់នៅលើ x-small
តូច
✔លាក់នៅលើតូច
មធ្យម
✔លាក់នៅលើមធ្យម
ធំ
✔លាក់នៅលើធំ
តូចនិងតូចបន្ថែម
✔លាក់នៅលើ x តូចនិងតូច
មធ្យម និងធំ
✔លាក់នៅលើមធ្យមនិងធំ
តូច និងមធ្យមបន្ថែម
✔លាក់នៅលើ x-តូច និងមធ្យម
តូចនិងធំ
✔លាក់នៅលើតូចនិងធំ
តូចនិងធំបន្ថែម
✔លាក់នៅលើ x តូចនិងធំ
តូច និងមធ្យម
✔លាក់នៅលើតូចនិងមធ្យម
CSS របស់ Bootstrap ត្រូវបានបង្កើតឡើងនៅលើ Less ដែលជា preprocessor ដែលមានមុខងារបន្ថែមដូចជា variables mixins និង functions សម្រាប់ compiling CSS។ អ្នកដែលចង់ប្រើប្រភពឯកសារតិចជាង ជំនួសឱ្យឯកសារ CSS ដែលបានចងក្រងរបស់យើង អាចប្រើប្រាស់អថេរ និង mixins ជាច្រើនដែលយើងប្រើពេញក្របខ័ណ្ឌ។
អថេរក្រឡាចត្រង្គ និង mixins ត្រូវបានគ្របដណ្តប់ នៅក្នុងផ្នែកប្រព័ន្ធក្រឡាចត្រង្គ ។
ការចងក្រង Bootstrap
Bootstrap អាចត្រូវបានប្រើយ៉ាងហោចណាស់ពីរវិធី៖ ជាមួយ CSS ដែលបានចងក្រង ឬជាមួយនឹងប្រភពឯកសារតិច។ ដើម្បីចងក្រងឯកសារតិច សូមពិគ្រោះជាមួយផ្នែកចាប់ផ្តើម សម្រាប់របៀបរៀបចំបរិស្ថានអភិវឌ្ឍន៍របស់អ្នកដើម្បីដំណើរការពាក្យបញ្ជាចាំបាច់។
ឧបករណ៍ចងក្រងភាគីទីបីអាចដំណើរការជាមួយ Bootstrap ប៉ុន្តែពួកវាមិនត្រូវបានគាំទ្រដោយក្រុមស្នូលរបស់យើងទេ។
អថេរ
អថេរត្រូវបានប្រើពេញមួយគម្រោងទាំងមូលជាមធ្យោបាយមួយដើម្បីដាក់កណ្តាល និងចែករំលែកតម្លៃដែលប្រើជាទូទៅដូចជាពណ៌ គម្លាត ឬជង់ពុម្ពអក្សរ។ សម្រាប់ការវិភាគពេញលេញ សូមមើល Customizer ។
ពណ៌
ងាយស្រួលប្រើពណ៌ចម្រុះពីរ៖ មាត្រដ្ឋានប្រផេះ និងសតិអារម្មណ៍។ ពណ៌ប្រផេះផ្ដល់ការចូលដំណើរការរហ័សទៅកាន់ស្រមោលដែលប្រើជាទូទៅនៃពណ៌ខ្មៅ ខណៈដែលអត្ថន័យរួមបញ្ចូលពណ៌ផ្សេងៗដែលត្រូវបានកំណត់ទៅតម្លៃបរិបទដែលមានន័យ។
ចម្លង
@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 as-is
.masthead {
background-color : @ brand-primary ;
}
// Reassigned variables in Less
@alert-message-background : @ brand-info ;
.alert {
background-color : @ alert-message-background ;
}
រន្ទា
មួយក្តាប់តូចនៃអថេរសម្រាប់ប្ដូរតាមបំណងយ៉ាងឆាប់រហ័សនូវធាតុសំខាន់ៗនៃគ្រោងនៃគេហទំព័ររបស់អ្នក។
ចម្លង
// Scaffolding
@body-bg : #fff ;
@text-color : @ black-50 ;
តំណភ្ជាប់
ងាយស្រួលធ្វើរចនាប័ទ្មតំណភ្ជាប់របស់អ្នកជាមួយនឹងពណ៌ត្រឹមត្រូវជាមួយនឹងតម្លៃតែមួយគត់។
ចម្លង
// 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 ;
}
}
ចំណាំថា @link-hover-color
មុខងារនេះប្រើមុខងារដែលជាឧបករណ៍ដ៏អស្ចារ្យមួយទៀតពី Less ដើម្បីបង្កើតពណ៌ដាក់លើខាងស្តាំដោយស្វ័យប្រវត្តិ។ អ្នកអាចប្រើ darken
, lighten
, saturate
និង desaturate
.
វាយអក្សរ
ងាយស្រួលកំណត់ពុម្ពអក្សរ ទំហំអត្ថបទ នាំមុខ និងច្រើនទៀតរបស់អ្នកជាមួយនឹងអថេររហ័សមួយចំនួន។ Bootstrap ប្រើប្រាស់វាផងដែរ ដើម្បីផ្តល់នូវការលាយបញ្ចូលអក្សរងាយស្រួល។
ចម្លង
@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 ;
រូបតំណាង
អថេររហ័សចំនួនពីរសម្រាប់ប្ដូរទីតាំង និងឈ្មោះឯកសារនៃរូបតំណាងរបស់អ្នក។
ចម្លង
@icon-font-path : "../fonts/" ;
@icon-font-name : "glyphicons-halflings-regular" ;
សមាសធាតុ
សមាសធាតុនៅទូទាំង Bootstrap ប្រើប្រាស់អថេរលំនាំដើមមួយចំនួនសម្រាប់កំណត់តម្លៃទូទៅ។ នេះគឺជាការប្រើប្រាស់ជាទូទៅបំផុត។
ចម្លង
@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 ;
អ្នកលក់លាយ
អ្នកលក់ mixins គឺជា mixins ដើម្បីជួយគាំទ្រកម្មវិធីរុករកច្រើនដោយរួមបញ្ចូលបុព្វបទអ្នកលក់ដែលពាក់ព័ន្ធទាំងអស់នៅក្នុង CSS ដែលបានចងក្រងរបស់អ្នក។
ទំហំប្រអប់
កំណត់គំរូប្រអប់សមាសធាតុរបស់អ្នកឡើងវិញជាមួយនឹង mixin តែមួយ។ សម្រាប់បរិបទ សូមមើល អត្ថបទមានប្រយោជន៍នេះពី Mozilla ។
mixin ត្រូវបាន បដិសេធ ជា v3.2.0 ដោយមានការណែនាំអំពី Autoprefixer ។ ដើម្បីរក្សាភាពឆបគ្នាថយក្រោយ Bootstrap នឹងបន្តប្រើ mixin ខាងក្នុងរហូតដល់ Bootstrap v4 ។
ចម្លង
.box-sizing (@ box-model ) {
-webkit-box-sizing : @ box-model ; // Safari <= 5
-moz-box-sizing : @ box-model ; // Firefox <= 19
box-sizing : @ box-model ;
}
ជ្រុងមូល
សព្វថ្ងៃនេះគ្រប់កម្មវិធីរុករកតាមអ៊ីនធឺណិតទំនើបទាំងអស់គាំទ្រលក្ខណៈសម្បត្តិដែលមិនមានបុព្វបទ border-radius
។ ដូចនេះ វាមិនមាន .border-radius()
លាយបញ្ចូលគ្នាទេ ប៉ុន្តែ Bootstrap រួមបញ្ចូលផ្លូវកាត់សម្រាប់បង្គត់ជ្រុងពីរយ៉ាងរហ័សនៅលើផ្នែកជាក់លាក់នៃវត្ថុមួយ។
ចម្លង
.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-shadow
អចលនទ្រព្យនោះដោយខ្លួនឯង។ ប្រសិនបើអ្នកត្រូវការការគាំទ្រសម្រាប់ឧបករណ៍ Android ចាស់ (pre-v4) និងឧបករណ៍ iOS (pre-iOS 5) សូមប្រើ mixin ដែលបាន បដិសេធ ដើម្បីយកតម្រូវការដែលត្រូវការ-webkit
បុព្វបទដែលត្រូវការ។
mixin ត្រូវបាន បដិសេធ ជា v3.1.0 ចាប់តាំងពី Bootstrap មិនគាំទ្រជាផ្លូវការនូវវេទិកាហួសសម័យដែលមិនគាំទ្រលក្ខណៈស្តង់ដារ។ ដើម្បីរក្សាភាពឆបគ្នាថយក្រោយ Bootstrap នឹងបន្តប្រើ mixin ខាងក្នុងរហូតដល់ Bootstrap v4 ។
ត្រូវប្រាកដថាប្រើ rgba()
ពណ៌នៅក្នុងស្រមោលប្រអប់របស់អ្នក ដូច្នេះពួកវាបញ្ចូលគ្នាយ៉ាងរលូនតាមដែលអាចធ្វើទៅបានជាមួយនឹងផ្ទៃខាងក្រោយ។
ចម្លង
. box-shadow (@ shadow : 0 1px 3px rgba ( 0 , 0 , 0 ,. 25 )) {
-webkit-box-shadow : @ shadow ; // iOS <4.3 & Android <4.1
box-shadow : @ shadow ;
}
ដំណើរផ្លាស់ប្តូរ
mixins ច្រើនសម្រាប់ភាពបត់បែន។ កំណត់ព័ត៌មានការផ្លាស់ប្តូរទាំងអស់ដោយមួយ ឬបញ្ជាក់ការពន្យារពេល និងរយៈពេលដាច់ដោយឡែកតាមតម្រូវការ។
mixins ត្រូវបាន បដិសេធ ជា v3.2.0 ដោយមានការណែនាំអំពី Autoprefixer ។ ដើម្បីរក្សាភាពឆបគ្នាថយក្រោយ Bootstrap នឹងបន្តប្រើ mixins ខាងក្នុងរហូតដល់ 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 ;
}
បង្វិល ធ្វើមាត្រដ្ឋាន បកប្រែ (ផ្លាស់ទី) ឬបញ្ឆិតវត្ថុណាមួយ។
mixins ត្រូវបាន បដិសេធ ជា v3.2.0 ដោយមានការណែនាំអំពី Autoprefixer ។ ដើម្បីរក្សាភាពឆបគ្នាថយក្រោយ Bootstrap នឹងបន្តប្រើ mixins ខាងក្នុងរហូតដល់ 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 ;
}
ចលនា
mixin តែមួយសម្រាប់ប្រើលក្ខណៈសម្បត្តិចលនារបស់ CSS3 ទាំងអស់នៅក្នុងការប្រកាសមួយ និង mixin ផ្សេងទៀតសម្រាប់លក្ខណៈសម្បត្តិបុគ្គល។
mixins ត្រូវបាន បដិសេធ ជា v3.2.0 ដោយមានការណែនាំអំពី Autoprefixer ។ ដើម្បីរក្សាភាពឆបគ្នាថយក្រោយ Bootstrap នឹងបន្តប្រើ mixins ខាងក្នុងរហូតដល់ 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 ;
}
ភាពស្រអាប់
កំណត់ភាពស្រអាប់សម្រាប់កម្មវិធីរុករកទាំងអស់ និងផ្តល់នូវការ filter
ថយក្រោយសម្រាប់ IE8 ។
ចម្លង
.opacity (@ opacity ) {
opacity : @ opacity ;
// IE8 filter
@opacity-ie : (@ opacity * 100 ) ;
filter : ~ "alpha(opacity=@{opacity-ie})" ;
}
អត្ថបទដាក់
ផ្តល់បរិបទសម្រាប់ការគ្រប់គ្រងទម្រង់នៅក្នុងវាលនីមួយៗ។
ចម្លង
. 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
}
ជួរឈរ
បង្កើតជួរឈរតាមរយៈ CSS ក្នុងធាតុតែមួយ។
ចម្លង
.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 ;
}
ជម្រាល
ងាយស្រួលប្រែពណ៌ទាំងពីរទៅជាជម្រាលផ្ទៃខាងក្រោយ។ ទទួលបានកម្រិតខ្ពស់ជាងមុន និងកំណត់ទិសដៅ ប្រើពណ៌បី ឬប្រើជម្រាលរ៉ាឌីកាល់។ ជាមួយនឹង mixin តែមួយ អ្នកទទួលបានវាក្យសម្ព័ន្ធបុព្វបទទាំងអស់ដែលអ្នកត្រូវការ។
ចម្លង
#gradient > .vertical ( #333 ; #000 ) ;
#gradient > .horizontal ( #333 ; #000 ) ;
#gradient > .radial ( #333 ; #000 ) ;
អ្នកក៏អាចបញ្ជាក់មុំនៃជម្រាលលីនេអ៊ែរពីរពណ៌ស្តង់ដារ៖
ចម្លង
#gradient > .directional ( #333 ; #000 ; 45deg ) ;
ប្រសិនបើអ្នកត្រូវការជម្រាលរចនាប័ទ្មសក់ឆ្នូត នោះជាការងាយស្រួលផងដែរ។ គ្រាន់តែបញ្ជាក់ពណ៌តែមួយ ហើយយើងនឹងលាបឆ្នូតពណ៌សថ្លា។
ចម្លង
#gradient > .striped ( #333 ; 45deg ) ;
ប្រើពណ៌បីជំនួសវិញ។ កំណត់ពណ៌ទីមួយ ពណ៌ទីពីរ បញ្ឈប់ពណ៌ទីពីរ (តម្លៃភាគរយដូចជា 25%) និងពណ៌ទីបីជាមួយ mixins ទាំងនេះ៖
ចម្លង
#gradient > .vertical-three-colors ( #777 ; #333 ; 25 % ; #000 ) ;
#gradient > .horizontal-three-colors ( #777 ; #333 ; 25 % ; #000 ) ;
ព្រឺក្បាល! ប្រសិនបើអ្នកត្រូវការលុបជម្រាល ត្រូវប្រាកដថាលុប IE ជាក់លាក់ណាមួយដែល filter
អ្នកបានបន្ថែម។ អ្នកអាចធ្វើវាបានដោយប្រើ .reset-filter()
mixin រួមជាមួយ background-image: none;
។
ល្បាយឧបករណ៍ប្រើប្រាស់
Utility mixins គឺជា mixins ដែលរួមបញ្ចូលគ្នានូវលក្ខណៈសម្បត្តិ CSS ដែលមិនទាក់ទងគ្នា ដើម្បីសម្រេចបាននូវគោលដៅ ឬភារកិច្ចជាក់លាក់មួយ។
ជម្រះ
បំភ្លេចការបន្ថែម class="clearfix"
ទៅធាតុណាមួយ ហើយជំនួសមកវិញការបន្ថែម .clearfix()
mixin នៅកន្លែងដែលសមស្រប។ ប្រើ micro clearfix ពី Nicolas Gallagher ។
ចម្លង
// Mixin
.clearfix () {
& :before ,
& :after {
content : " " ;
display : table ;
}
& :after {
clear : both ;
}
}
// Usage
.container {
.clearfix () ;
}
ផ្ចិតផ្តេក
តម្រឹមធាតុណាមួយនៅក្នុងមេរបស់វា។ ទាមទារ width
ឬ max-width
កំណត់។
ចម្លង
// Mixin
.center-block () {
display : block ;
margin-left : auto ;
margin-right : auto ;
}
// Usage
.container {
width : 940px ;
.center-block () ;
}
អ្នកជំនួយទំហំ
បញ្ជាក់វិមាត្ររបស់វត្ថុកាន់តែងាយស្រួល។
ចម្លង
// Mixins
.size (@ width ; @height ) {
width : @ width ;
height : @ height ;
}
.square (@ size ) {
.size (@ size ; @size ) ;
}
// Usage
.image { .size ( 400px ; 300px ) ; }
.avatar { .square ( 48px ) ; }
ផ្ទៃអត្ថបទដែលអាចផ្លាស់ប្តូរទំហំបាន។
ងាយស្រួលកំណត់រចនាសម្ព័ន្ធជម្រើសផ្លាស់ប្តូរទំហំសម្រាប់ textarea ណាមួយ ឬធាតុផ្សេងទៀតណាមួយ។ លំនាំដើមចំពោះឥរិយាបថកម្មវិធីរុករកធម្មតា ( both
) ។
ចម្លង
. resizable (@ direction : both ) {
// Options: horizontal, vertical, both
resize : @ direction ;
// Safari fix
overflow : auto ;
}
កំពុងកាត់អត្ថបទ
កាត់អត្ថបទយ៉ាងងាយស្រួលដោយប្រើពងក្រពើជាមួយ mixin តែមួយ។ តម្រូវឱ្យមានធាតុជា block
ឬ inline-block
កម្រិត។
ចម្លង
// Mixin
.text-overflow () {
overflow : hidden ;
text-overflow : ellipsis ;
white-space : nowrap ;
}
// Usage
.branch-name {
display : inline-block ;
max-width : 200px ;
.text-overflow () ;
}
រូបភាពរីទីណា
បញ្ជាក់ផ្លូវរូបភាពពីរ និងវិមាត្ររូបភាព @1x ហើយ Bootstrap នឹងផ្តល់សំណួរមេឌៀ @2x។ ប្រសិនបើអ្នកមានរូបភាពជាច្រើនដើម្បីបម្រើ សូមពិចារណាសរសេររូបភាពរីទីណា CSS ដោយដៃក្នុងសំណួរមេឌៀតែមួយ។
ចម្លង
.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 ) ;
}
ខណៈពេលដែល Bootstrap ត្រូវបានបង្កើតឡើងនៅលើ Less វាក៏មាន ច្រក Sass ផ្លូវការ ផងដែរ។ យើងរក្សាវានៅក្នុងឃ្លាំង GitHub ដាច់ដោយឡែក ហើយដោះស្រាយបច្ចុប្បន្នភាពជាមួយនឹងស្គ្រីបបំប្លែង។
អ្វីដែលរួមបញ្ចូល
ដោយសារច្រក Sass មាន repo ដាច់ដោយឡែក និងបម្រើទស្សនិកជនខុសគ្នាបន្តិចបន្តួច ខ្លឹមសារនៃគម្រោងមានភាពខុសគ្នាខ្លាំងពីគម្រោង Bootstrap សំខាន់។ នេះធានាថាច្រក Sass គឺត្រូវគ្នាជាមួយប្រព័ន្ធដែលមានមូលដ្ឋានលើ Sass ច្រើនតាមដែលអាចធ្វើទៅបាន។
ផ្លូវ
ការពិពណ៌នា
lib/
កូដត្បូង Ruby (ការកំណត់រចនាសម្ព័ន្ធ Sass, Rails និង Compass រួមបញ្ចូល)
tasks/
កម្មវិធីបំប្លែងស្គ្រីប (បង្វែរចរន្តតិចទៅជា Sass)
test/
ការធ្វើតេស្តចងក្រង
templates/
បង្ហាញកញ្ចប់ត្រីវិស័យ
vendor/assets/
Sass, JavaScript និងឯកសារពុម្ពអក្សរ
Rakefile
កិច្ចការផ្ទៃក្នុង ដូចជាតុងរួច និងបំប្លែង
ចូលទៅកាន់ ឃ្លាំង GitHub របស់ច្រក Sass ដើម្បីមើលឯកសារទាំងនេះនៅក្នុងសកម្មភាព។
ការដំឡើង
សម្រាប់ព័ត៌មានអំពីរបៀបដំឡើង និងប្រើប្រាស់ Bootstrap សម្រាប់ Sass សូមពិគ្រោះជាមួយ ឃ្លាំង GitHub readme ។ វាជាប្រភពចុងក្រោយបំផុត និងរួមបញ្ចូលព័ត៌មានសម្រាប់ប្រើជាមួយគម្រោង Rails, Compass និងស្តង់ដារ Sass ។
Bootstrap សម្រាប់ Sass