ក្រឡាចត្រង្គលំនាំដើម

ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមដែលបានផ្តល់ជាផ្នែកនៃ Bootstrap គឺជាក្រឡាចត្រង្គជួរឈរ 16 ទទឹង 940px ។ វាជារសជាតិនៃប្រព័ន្ធក្រឡាចត្រង្គ 960 ដ៏ពេញនិយម ប៉ុន្តែដោយគ្មានរឹម/ទ្រនាប់បន្ថែមនៅផ្នែកខាងឆ្វេង និងខាងស្តាំ។

ឧទាហរណ៍ការសម្គាល់ក្រឡាចត្រង្គ

ដូចដែលបានបង្ហាញនៅទីនេះ ប្លង់មូលដ្ឋានអាចត្រូវបានបង្កើតជាមួយ "ជួរឈរ" ពីរដែលនីមួយៗលាតសន្ធឹងលើចំនួននៃ 16 ជួរឈរគ្រឹះដែលយើងបានកំណត់ថាជាផ្នែកនៃប្រព័ន្ធក្រឡាចត្រង្គរបស់យើង។ សូមមើលឧទាហរណ៍ខាងក្រោមសម្រាប់ការប្រែប្រួលបន្ថែម។

<div class="row"> class = "row" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

ប្លង់ថេរ

ប្លង់កុងតឺន័រដែលផ្តោតលើទំហំ 940px ជាមូលដ្ឋានសម្រាប់គេហទំព័រ ឬទំព័រណាមួយ។

<រាងកាយ>
  <div class = "container" > 
    ...
  </div>
</body>

ប្លង់រាវ

រចនាសម្ព័ន្ធទំព័ររាវ ឬរាវដែលអាចបត់បែនបានដែលមានទទឹងអប្បបរមា និងអតិបរមា និងរបារចំហៀងខាងឆ្វេង។ ល្អសម្រាប់កម្មវិធី។

<រាងកាយ>
  <div class = "container-fluid" > 
    <div class = "របារចំហៀង" > 
      ...
    </div>
    <div class = "មាតិកា" > 
      ...
    </div>
  </div>
</body>

ចំណងជើង និងចម្លង

ឋានានុក្រមវាយអក្សរស្តង់ដារសម្រាប់រៀបចំរចនាសម្ព័ន្ធគេហទំព័ររបស់អ្នក។

h1. ចំណងជើង 1

h2. ក្បាល 2

h3. ចំណងជើង ៣

h4. ក្បាល ៤

h5. ក្បាលទី 5

h6. ចំណងជើង 6

ឧទាហរណ៍កថាខណ្ឌ

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 ut id elit ។

ក្បាលឧទាហរណ៍ មានចំណងជើងរង...

អ្នកក៏អាចបន្ថែមចំណងជើងរងជាមួយ <strong>និង<em>

ផ្សេងៗ ធាតុ

ដោយប្រើការសង្កត់ធ្ងន់ អាសយដ្ឋាន និងអក្សរកាត់

<strong> <em> <address> <abbr>

ពេលណាត្រូវប្រើ

ស្លាកសង្កត់ធ្ងន់ ( <strong>និង <em>) គួរតែត្រូវបានប្រើ ដើម្បីបន្ថែមភាពខុសគ្នាដែលមើលឃើញរវាងពាក្យ ឬឃ្លា និងច្បាប់ចម្លងជុំវិញរបស់វា។ ប្រើ <strong>សម្រាប់ការយកចិត្តទុកដាក់ចាស់ធម្មតា និង <em>សម្រាប់ ការ យកចិត្តទុកដាក់ និងចំណងជើង។

ការសង្កត់ធ្ងន់ក្នុងកថាខណ្ឌ

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus។ Maecenas faucibus mollis interdum ។ Nulla vitae elit libero, a pharetra auggue ។

អាស័យដ្ឋាន

ធាតុ address​ត្រូវ​បាន​ប្រើ​សម្រាប់—អ្នក​ទាយ​វា!—អាសយដ្ឋាន។ នេះជារបៀបដែលវាមើលទៅ៖

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

ចំណាំ៖ បន្ទាត់នីមួយៗ addressត្រូវតែបញ្ចប់ដោយការបំបែកបន្ទាត់ ( <br />) ដើម្បីរៀបចំរចនាសម្ព័ន្ធមាតិកាឱ្យបានត្រឹមត្រូវ ដូចដែលវាត្រូវបានអានក្នុងជីវិតពិត ដោយគ្មានរចនាប័ទ្មណាមួយត្រូវបានអនុវត្ត។

អក្សរកាត់

សម្រាប់អក្សរកាត់ និងអក្សរកាត់ ប្រើ abbrស្លាក ( acronymត្រូវបានបដិសេធក្នុង HTML5 )។ ដាក់ទម្រង់អក្សរកាត់នៅក្នុងស្លាក ហើយកំណត់ចំណងជើងសម្រាប់ឈ្មោះពេញលេញ។

ប្លុកសម្រង់

<blockquote> <p> <cite>

ត្រូវ​ប្រាកដ​ថា​រុំ blockquote​ជុំវិញ paragraph​និង cite​ស្លាក។ នៅពេលដកស្រង់ប្រភព សូមប្រើ citeធាតុ។ CSS នឹងបង្ហាញឈ្មោះដោយស្វ័យប្រវត្តិជាមួយនឹងសញ្ញា em (—)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

វេជ្ជបណ្ឌិត Julius Hibbert

មិនបានបញ្ជាទិញ<ul>

• លោក Jeremy Bixby
• លោក Robert Dezure
• Josh Washington
• លោក Anton Capresi
• មិត្តរួមក្រុមរបស់ខ្ញុំ
  • លោក George Castanza
  • លោក Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • មនុស្ស​ថ្មី
• យ៉ូហាន យ៉ាកុប
• លោក Paul Pierce
• Kevin Garnett

គ្មានរចនាប័ទ្ម<ul.unstyled>

• លោក Jeremy Bixby
• លោក Robert Dezure
• Josh Washington
• លោក Anton Capresi
• មិត្តរួមក្រុមរបស់ខ្ញុំ
  • លោក George Castanza
  • លោក Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • មនុស្ស​ថ្មី
• យ៉ូហាន យ៉ាកុប
• លោក Paul Pierce
• Kevin Garnett

បានបញ្ជាទិញ<ol>

1. លោក Jeremy Bixby
2. លោក Robert Dezure
3. Josh Washington
4. លោក Anton Capresi
5. មិត្តរួមក្រុមរបស់ខ្ញុំ
   1. លោក George Castanza
   2. លោក Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. មនុស្ស​ថ្មី
6. យ៉ូហាន យ៉ាកុប
7. លោក Paul Pierce
8. Kevin Garnett

ការពិពណ៌នាdl

បញ្ជីពិពណ៌នា

បញ្ជីពិពណ៌នាគឺល្អឥតខ្ចោះសម្រាប់ការកំណត់ពាក្យ។

អ៊ីស្មូដ

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 ។

តារាងសំណង់

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

តុគឺអស្ចារ្យណាស់ - សម្រាប់អ្វីៗជាច្រើន។ ទោះជាយ៉ាងណាក៏ដោយ តារាងដ៏អស្ចារ្យ ត្រូវការការគូសចំណាំបន្តិច ដើម្បីមានប្រយោជន៍ ធ្វើមាត្រដ្ឋាន និងអាចអានបាន (នៅកម្រិតកូដ)។ នេះគឺជាគន្លឹះមួយចំនួនដើម្បីជួយ។

តែង​តែ​រុំ​បឋមកថា​ជួរ​ឈរ​របស់​អ្នក thead​តាម​ឋានានុក្រម​ដែល ​ជា thead​>> tr។th

ស្រដៀង​នឹង​ក្បាល​ជួរ​ឈរ ខ្លឹមសារ​តារាង​ទាំងអស់​របស់​អ្នក​គួរ​តែ​ត្រូវ​បាន​រុំ​ក្នុង​មួយ tbodyដូច្នេះ​ឋានានុក្រម​របស់​អ្នក​គឺ tbody> tr> td។

ឧទាហរណ៍៖ រចនាប័ទ្មតារាងលំនាំដើម

តារាងទាំងអស់នឹងត្រូវបានកំណត់រចនាប័ទ្មដោយស្វ័យប្រវត្តិដោយមានតែស៊ុមសំខាន់ៗប៉ុណ្ណោះ ដើម្បីធានាបាននូវការអាន និងរក្សារចនាសម្ព័ន្ធ។ មិនចាំបាច់បន្ថែមថ្នាក់បន្ថែម ឬគុណលក្ខណៈទេ។

#	ឈ្មោះដំបូង	នាមត្រកូល	ភាសា
១	ខ្លះ	មួយ។	ភាសាអង់គ្លេស
២	ចូ	ប្រាំមួយ​កញ្ចប់	ភាសាអង់គ្លេស
៣	ស្ទូ	ធ្មេញ	កូដ

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

ឧទាហរណ៍៖ សេះបង្កង់

ទទួលបានភាពស្រើបស្រាលជាមួយតុរបស់អ្នកដោយបន្ថែមការឆ្នូតសេះបង្កង់ - គ្រាន់តែបន្ថែម .zebra-stripedថ្នាក់។

#	ឈ្មោះដំបូង	នាមត្រកូល	ភាសា
១	ខ្លះ	មួយ។	ភាសាអង់គ្លេស
២	ចូ	ប្រាំមួយ​កញ្ចប់	ភាសាអង់គ្លេស
៣	ស្ទូ	ធ្មេញ	កូដ

<table class="common-table zebra-striped"> class = "mon-table zebra-striped" >
...
</table>

ឧទាហរណ៍៖ Zebra-striped w/ TableSorter.js

ដោយលើកយកឧទាហរណ៍ពីមុន យើងធ្វើឱ្យប្រសើរឡើងនូវអត្ថប្រយោជន៍នៃតារាងរបស់យើងដោយផ្តល់នូវមុខងារតម្រៀបតាមរយៈ jQuery និង កម្មវិធីជំនួយ Tablesorter ។ ចុចបឋមកថានៃជួរឈរណាមួយដើម្បីផ្លាស់ប្តូរការតម្រៀប។

#	ឈ្មោះដំបូង	នាមត្រកូល	ភាសា
១	របស់អ្នក។	មួយ។	ភាសាអង់គ្លេស
២	ចូ	ប្រាំមួយ​កញ្ចប់	ភាសាអង់គ្លេស
៣	ស្ទូ	ធ្មេញ	កូដ

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
< ប្រភេទ អក្សរ = "text/javascript" > 
  $ ( ឯកសារ ) ។ រួចរាល់ ( មុខងារ () { 
    $ ( "table #sortTableExample" ) ។ tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

រចនាប័ទ្មលំនាំដើម

ទម្រង់ទាំងអស់ត្រូវបានផ្តល់រចនាប័ទ្មលំនាំដើមដើម្បីបង្ហាញពួកវាតាមរបៀបដែលអាចអានបាន និងអាចធ្វើមាត្រដ្ឋានបាន។ រចនាប័ទ្មត្រូវបានផ្តល់ជូនសម្រាប់ការបញ្ចូលអត្ថបទ បញ្ជីជ្រើសរើស តំបន់អត្ថបទ ប៊ូតុងមូល និងប្រអប់ធីក និងប៊ូតុង។

ឧទាហរណ៍នៃទម្រង់រឿងព្រេង

ការបញ្ចូល X-ធំ

ជ្រើសរើស

១ ២ ៣ ៤ ៥

ជ្រើសរើស

១ ២ ៣ ៤ ៥

ការបញ្ចូលដែលមិនអាចកែប្រែបាន។

តម្លៃខ្លះនៅទីនេះ

បានបិទការបញ្ចូល

ការបញ្ចូល X-ធំ

អត្ថបទជំនួយតូចមួយ

ឧទាហរណ៍នៃទម្រង់រឿងព្រេង

អត្ថបទមុន

@

ប្រអប់ធីកដែលបានបន្ថែម

ប្រអប់ធីកបន្ថែម

ការបញ្ចូលឯកសារ

ឧទាហរណ៍នៃទម្រង់រឿងព្រេង

បញ្ជីជម្រើស

• ជម្រើសមួយគឺនេះ ហើយនោះ - ត្រូវប្រាកដថារួមបញ្ចូលហេតុអ្វីបានជាវាអស្ចារ្យ
• ជម្រើសទីពីរក៏អាចត្រូវបានពិនិត្យ និងបញ្ចូលក្នុងលទ្ធផលទម្រង់
• ជម្រើសទីបីអាច—បាទ អ្នកបានទាយវា—ក៏ត្រូវបានពិនិត្យ និងបញ្ចូលក្នុងលទ្ធផលទម្រង់ផងដែរ។
• ជម្រើសទីបួនមិនអាចពិនិត្យបានទេ ដោយសារវាត្រូវបានបិទ។

ចំណាំ៖ ស្លាកជុំវិញជម្រើសទាំងអស់សម្រាប់តំបន់ចុចធំជាង និងទម្រង់ដែលអាចប្រើបានច្រើនជាង។

ជួរកាលបរិច្ឆេទ

ទៅ ពេលវេលាទាំងអស់ត្រូវបានបង្ហាញជាម៉ោងស្តង់ដារប៉ាស៊ីហ្វិក (GMT -08:00) ។

អត្ថបទ

ប្លុកនៃអត្ថបទជំនួយដើម្បីពិពណ៌នាវាលខាងលើប្រសិនបើចាំបាច់។

បញ្ជីជម្រើស

• ជម្រើសមួយគឺនេះ ហើយនោះ - ត្រូវប្រាកដថារួមបញ្ចូលហេតុអ្វីបានជាវាអស្ចារ្យ
• ជម្រើសទីពីរក៏អាចត្រូវបានពិនិត្យ និងបញ្ចូលក្នុងលទ្ធផលទម្រង់

រក្សាទុកការផ្លាស់ប្តូរ បោះបង់

ទម្រង់ជាជង់

បន្ថែម .form-stackedទៅ HTML នៃទម្រង់របស់អ្នក ហើយអ្នកនឹងមានស្លាកនៅលើកំពូលនៃវាលរបស់ពួកគេ ជំនួសឱ្យនៅខាងឆ្វេងរបស់វា។ វាដំណើរការល្អប្រសិនបើទម្រង់របស់អ្នកខ្លី ឬអ្នកមានជួរបញ្ចូលពីរសម្រាប់ទម្រង់ធ្ងន់ជាង។

ឧទាហរណ៍នៃទម្រង់រឿងព្រេង

ការបញ្ចូល X-ធំ

ជ្រើសរើស

១ ២ ៣ ៤ ៥

ឧទាហរណ៍នៃទម្រង់រឿងព្រេង

បញ្ជីជម្រើស

• ជម្រើសមួយគឺនេះ ហើយនោះ - ត្រូវប្រាកដថារួមបញ្ចូលហេតុអ្វីបានជាវាអស្ចារ្យ
• ជម្រើសទីពីរក៏អាចត្រូវបានពិនិត្យ និងបញ្ចូលក្នុងលទ្ធផលទម្រង់

ចំណាំ៖ ស្លាកជុំវិញជម្រើសទាំងអស់សម្រាប់តំបន់ចុចធំជាង និងទម្រង់ដែលអាចប្រើបានច្រើនជាង។

រក្សាទុកការផ្លាស់ប្តូរ បោះបង់

ប៊ូតុង

ក្នុងនាមជាអនុសញ្ញា ប៊ូតុងត្រូវបានប្រើសម្រាប់សកម្មភាព ខណៈពេលដែលតំណភ្ជាប់ត្រូវបានប្រើសម្រាប់វត្ថុ។ ឧទាហរណ៍ "ទាញយក" អាចជាប៊ូតុងមួយ ហើយ "សកម្មភាពថ្មីៗ" អាចជាតំណ។

ប៊ូតុងទាំងអស់លំនាំដើមទៅជារចនាប័ទ្មពណ៌ប្រផេះស្រាល ប៉ុន្តែ .primaryថ្នាក់ពណ៌ខៀវអាចប្រើបាន។ លើសពីនេះ ការរំកិលស្ទីលផ្ទាល់ខ្លួនរបស់អ្នកគឺងាយស្រួល។

ប៊ូតុងឧទាហរណ៍

រចនាប័ទ្មប៊ូតុងអាចត្រូវបានអនុវត្តទៅអ្វីទាំងអស់ជាមួយនឹង .btnការអនុវត្ត។ ជាធម្មតា អ្នកនឹងចង់អនុវត្តទាំងនេះសម្រាប់តែ a, buttonនិងជ្រើសរើស inputធាតុប៉ុណ្ណោះ។ នេះជារបៀបដែលវាមើលទៅ៖

ទំហំជំនួស

ចង់បានប៊ូតុងធំ ឬតូចជាងនេះទេ? មាននៅវា!

រដ្ឋពិការ

សម្រាប់ប៊ូតុងដែលមិនសកម្ម ឬត្រូវបានបិទដោយកម្មវិធីសម្រាប់ហេតុផលមួយ ឬមួយផ្សេងទៀត សូមប្រើស្ថានភាពបិទ។ នោះគឺ .disabledសម្រាប់តំណភ្ជាប់ និង :disabledសម្រាប់ buttonធាតុ។

តំណភ្ជាប់

ប៊ូតុង

តើ​វា​គឺជា​អ្វី

របារកំពូលរបស់យើងគឺជារបារថេរដែលមានស្លាកសញ្ញា ឬឈ្មោះគេហទំព័រ ការរុករកចម្បង និងទម្រង់ស្វែងរក។

អាចប្ដូរតាមបំណងបាន។

ធាតុទាំងអស់នៅខាងក្នុង និងរបារកំពូលទាំងមូលគឺស្រេចចិត្ត។ អ្នក​អាច​ជ្រើសរើស​បញ្ចូល​ឡូហ្គោ/ឈ្មោះ រុករក ការ​ស្វែងរក និង​ការ​រុករក​បន្ទាប់បន្សំ—ឬ​ការ​រួម​បញ្ចូល​គ្នា​ណា​មួយ។

បញ្ជីទម្លាក់ចុះរួមបញ្ចូល

ជាផ្នែកមួយនៃការរុករកចម្បង យើងបានរួមបញ្ចូលនូវសមត្ថភាពសម្រាប់អ្នកក្នុងការបន្ថែមបញ្ជីទម្លាក់ចុះទៅ navigation របស់អ្នក។ សូមពិនិត្យមើលការរុករកបន្ទាប់បន្សំខាងលើ (តម្រឹមស្តាំ) ដើម្បីមើលពីរបៀបដែលវាត្រូវបានធ្វើ។

ថេប និងថ្នាំគ្រាប់

បង្កើតការរុករកបន្ទាប់បន្សំសាមញ្ញជាមួយ ul. ប្តូររវាងផ្ទាំង ឬថ្នាំដោយបន្ថែមថ្នាក់សមស្រប។

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

• ផ្ទះ
• ប្រវត្តិរូប
• សារ
• ការកំណត់
• ទំនាក់ទំនង

<ul class = "tabs" > 
  <li class = "active" > <a href=""> ផ្ទះ </a> </li >  
  <li><a href=""> ប្រវត្តិរូប </a> < / li> 
  <li><a href=""> សារ </a> < /li > 
  <li><a href=""> ការកំណត់ </a> < / li> 
  <li><a href=""> ទំនាក់ទំនង </a> < / li> 
</ul>

• ផ្ទះ
• ប្រវត្តិរូប
• សារ
• ការកំណត់
• ទំនាក់ទំនង

<ul class = "ថ្នាំ" > 
  <li class = "active" > <a href=""> ផ្ទះ </a> </li >  
  <li><a href=""> ប្រវត្តិរូប </a> < / li> 
  <li><a href=""> សារ </a> < /li > 
  <li><a href=""> ការកំណត់ </a> < / li> 
  <li><a href=""> ទំនាក់ទំនង </a> < / li> 
</ul>

ការបិទភ្ជាប់

ការសរសេរទំព័រដែលមានលក្ខណៈសាមញ្ញបំផុត និងតិចតួចបំផុតដែលត្រូវបានបំផុសគំនិតដោយ Rdio ។ ប្លុកធំគឺពិបាកនឹងខកខាន ងាយស្រួលធ្វើមាត្រដ្ឋាន និងផ្តល់នូវតំបន់ចុចធំ។

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a   > href=""> & larr ; មុន </a></li>
    <li class = "active" ><a   > href=""> 1 </a>< / li >
    <li><a href  href=""> ២ < /li >
    <li><a href  href=""> ៣ < /li >
    <li><a href  href=""> ៤ < /li >
    <li><a href  href=""> 5 < /li >
    <li class = "បន្ទាប់" ><a href   > បន្ទាប់ & rarr ; </a></li>
  </ul>
</div>

ការជូនដំណឹងជាមូលដ្ឋាន

សារមួយបន្ទាត់សម្រាប់គូសបញ្ជាក់ពីការបរាជ័យ ការបរាជ័យដែលអាចកើតមាន ឬជោគជ័យនៃសកម្មភាព។ មានប្រយោជន៍ជាពិសេសសម្រាប់ទម្រង់។

រារាំងសារ

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

ម៉ូឌុល

ម៉ូឌុល—ប្រអប់ ឬប្រអប់ពន្លឺ—គឺល្អសម្រាប់សកម្មភាពបរិបទក្នុងស្ថានភាពដែលមានសារៈសំខាន់ដែលបរិបទផ្ទៃខាងក្រោយត្រូវបានរក្សា។

Popovers

ប្រើ popovers ដើម្បីផ្តល់ព័ត៌មានអត្ថបទរងទៅទំព័រមួយដោយមិនមានប្រសិទ្ធិភាពប្លង់។

Bootstrap ត្រូវ​បាន​បង្កើត​ឡើង​ដោយ​ប្រើ Preboot ជា​កញ្ចប់​ប្រភព​បើកចំហ​នៃ mixins និង​អថេរ​ដែល​ត្រូវ​ប្រើ​ជាមួយ​នឹង Less ដែល​ជា​កម្មវិធី​ដំណើរការ​មុន​របស់ CSS សម្រាប់​ការ​អភិវឌ្ឍ​គេហទំព័រ​កាន់តែ​លឿន​និង​ងាយស្រួល​ជាង​មុន។

សូមពិនិត្យមើលពីរបៀបដែលយើងបានប្រើ Preboot នៅក្នុង Bootstrap និងរបៀបដែលអ្នកអាចប្រើប្រាស់វាបាន ប្រសិនបើអ្នកជ្រើសរើសដំណើរការតិចជាងនៅលើគម្រោងបន្ទាប់របស់អ្នក។

របៀបប្រើវា។

ប្រើជម្រើសនេះដើម្បីប្រើប្រាស់ពេញលេញនៃអថេរតិចនៃ Bootstrap, mixins, និង nesting នៅក្នុង CSS តាមរយៈ javascript នៅក្នុង browser របស់អ្នក។

<link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "ទាំងអស់" />     
< ប្រភេទ អក្សរ = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

មិនមានអារម្មណ៍ថាដំណោះស្រាយ .js? សាកល្បងកម្មវិធី Less Mac ឬ ប្រើ Node.js ដើម្បីចងក្រង នៅពេលអ្នកដាក់លេខកូដរបស់អ្នក។

អ្វីដែលរួមបញ្ចូល

នេះគឺជាចំណុចសំខាន់ៗមួយចំនួននៃអ្វីដែលរួមបញ្ចូលនៅក្នុង Twitter Bootstrap ដែលជាផ្នែកមួយនៃ Bootstrap ។ សូមចូលទៅកាន់គេហទំព័រ Bootstrap ឬទំព័រគម្រោង Github ដើម្បីទាញយក និងស្វែងយល់បន្ថែម។

អថេរពណ៌

Variables in Less គឺល្អឥតខ្ចោះសម្រាប់ការថែរក្សា និងធ្វើបច្ចុប្បន្នភាព CSS headache របស់អ្នកដោយឥតគិតថ្លៃ។ នៅពេលអ្នកចង់ផ្លាស់ប្តូរតម្លៃពណ៌ ឬតម្លៃដែលប្រើញឹកញាប់ សូមអាប់ដេតវានៅកន្លែងតែមួយ ហើយអ្នកត្រូវបានកំណត់។

// តំណភ្ជាប់
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
 
// ពណ៌ប្រផេះ
@ខ្មៅ ៖ #០០០;             
@grayDark :           lighten ( @black , 25 % ); 
@ប្រផេះ ៖               ស្រាល ( @ខ្មៅ , ៥០ %); 
@grayLight :          lighten ( @black , 70 % ); 
@grayLighter :        lighten ( @black , 90 %); 
@ ស ៖ #ffff ;             
 
// ពណ៌សង្កត់សំឡេង
@blue : #08b5fb;              
@បៃតង : #46a546 ;             
@ក្រហម ៖ #9d261d ;               
@លឿង ៖ #ffc40d ;            
@ពណ៌ទឹកក្រូច : #f89406 ;            
@pink : #c3325f;              
@ពណ៌ស្វាយ ៖ #7a43b6 ;            
 
// មូលដ្ឋាន
@មូលដ្ឋាន ៖ 20px ;          

មតិយោបល់

/* ... */Less ក៏ផ្តល់នូវរចនាប័ទ្មនៃការបញ្ចេញមតិមួយផ្សេងទៀតបន្ថែមលើ វាក្យសម្ព័ន្ធ ធម្មតារបស់ CSS ។

// នេះជាមតិ
// នេះក៏ជាមតិផងដែរ*/

លាយបញ្ចូល wazoo

Mixins ជាមូលដ្ឋានរួមបញ្ចូល ឬជាផ្នែកសម្រាប់ CSS ដែលអនុញ្ញាតឱ្យអ្នកបញ្ចូលគ្នានូវប្លុកនៃកូដទៅជាមួយ។ ពួកវាល្អណាស់សម្រាប់លក្ខណៈសម្បត្តិបុព្វបទរបស់អ្នកលក់ដូចជា box-shadowជម្រាលឆ្លងកាត់កម្មវិធីរុករក ជង់ពុម្ពអក្សរ និងច្រើនទៀត។ ខាងក្រោមនេះគឺជាគំរូនៃ mixins ដែលត្រូវបានរួមបញ្ចូលជាមួយ Bootstrap ។

ជង់ពុម្ពអក្សរ

#ពុម្ពអក្សរ {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    ពុម្ពអក្សរ - ទំហំ ៖ @size ; 
    ពុម្ពអក្សរ - ទម្ងន់ ៖ @ ទម្ងន់ ; 
    បន្ទាត់ - កម្ពស់ ៖ @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    ពុម្ពអក្សរ - គ្រួសារ : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    ពុម្ពអក្សរ - ទំហំ ៖ @size ; 
    ពុម្ពអក្សរ - ទម្ងន់ ៖ @ ទម្ងន់ ; 
    បន្ទាត់ - កម្ពស់ ៖ @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    ពុម្ពអក្សរ - ទំហំ ៖ @size ; 
    ពុម្ពអក្សរ - ទម្ងន់ ៖ @ ទម្ងន់ ; 
    បន្ទាត់ - កម្ពស់ ៖ @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    ពុម្ពអក្សរ - ទំហំ ៖ @size ; 
    ពុម្ពអក្សរ - ទម្ងន់ ៖ @ ទម្ងន់ ; 
    បន្ទាត់ - កម្ពស់ ៖ @lineHeight ; 
  }
}

ជម្រាល

#ជម្រាល {
  . ផ្ដេក ( @startColor : #555, @endColor: #333) { 
    ផ្ទៃខាងក្រោយ - ពណ៌ ៖ @endColor ; 
    ផ្ទៃខាងក្រោយ - ធ្វើម្តងទៀត ៖ ធ្វើម្តងទៀត - x ;
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - khtml - ជម្រាល ( លីនេអ៊ែរ កំពូល ឆ្វេង កំពូល ស្តាំ ពី ( @startColor ) ទៅ ( @endColor ) ) ; // Konqueror   
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - moz - លីនេអ៊ែរ - ជម្រាល ( ខាងឆ្វេង , @startColor , @endColor ); // FF 3.6+    
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - ms - លីនេអ៊ែរ - ជម្រាល ( ខាងឆ្វេង , @startColor , @endColor ); // IE10    
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - កញ្ចប់គេហទំព័រ - ជម្រាល ( លីនេអ៊ែរ កំពូល ឆ្វេង កំពូល ស្ដាំ ពណ៌ - បញ្ឈប់ ( 0 % , @startColor ), ពណ៌ - បញ្ឈប់ ( 100 %, @endColor )) ; // Safari 4+, Chrome 2+    
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - កញ្ចប់ គេហទំព័រ - លីនេអ៊ែរ - ជម្រាល ( ខាងឆ្វេង , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - o - លីនេអ៊ែរ - ជម្រាល ( ឆ្វេង , @startColor , @endColor ); // ល្ខោនអូប៉េរ៉ា 11.10    
    - ms - តម្រង : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    តម្រង ៖ e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 និង IE7 
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ លីនេអ៊ែរ - ជម្រាល ( ខាងឆ្វេង , @startColor , @endColor ); // ស្តង់ដារ   
  }
  . បញ្ឈរ ( @startColor : #555, @endColor: #333) { 
    ផ្ទៃខាងក្រោយ - ពណ៌ ៖ @endColor ; 
    ផ្ទៃខាងក្រោយ - ធ្វើម្តងទៀត ៖ ធ្វើម្តងទៀត - x ;
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - khtml - ជម្រាល ( លីនេអ៊ែរ កំពូល ឆ្វេង បាត ឆ្វេង ពី ( @startColor ) ទៅ ( @endColor ) ); // Konqueror   
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - moz - លីនេអ៊ែរ - ជម្រាល ( @startColor , @endColor ); // FF 3.6+   
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - ms - លីនេអ៊ែរ - ជម្រាល ( @startColor , @endColor ); // IE10   
    ផ្ទៃខាងក្រោយ - រូបភាព : - កញ្ចប់គេហទំព័រ - ជម្រាល ( លីនេអ៊ែរ កំពូល ឆ្វេង បាតឆ្វេង ពណ៌ - បញ្ឈប់ ( 0 % , @startColor ), ពណ៌ - បញ្ឈប់ ( 100 %, @endColor )) ; // Safari 4+, Chrome 2+    
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - កញ្ចប់គេហទំព័រ - លីនេអ៊ែរ - ជម្រាល ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ - o - លីនេអ៊ែរ - ជម្រាល ( @startColor , @endColor ); // ល្ខោនអូប៉េរ៉ា 11.10   
    - ms - តម្រង : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    តម្រង ៖ e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 និង IE7 
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ លីនេអ៊ែរ - ជម្រាល ( @startColor , @endColor ); // ស្តង់ដារ  
  }
  . ទិសដៅ ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . បញ្ឈរ - បី ពណ៌ ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

ប្រព័ន្ធប្រតិបត្តិការ និងបណ្តាញ

ទទួលបានភាពស្រមើស្រមៃ និងអនុវត្តគណិតវិទ្យាមួយចំនួនដើម្បីបង្កើត mixins ដែលអាចបត់បែនបាន និងមានឥទ្ធិពលដូចរូបខាងក្រោម។

// ក្រឡាចត្រង្គ
@gridColumns : ១៦ ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// ប្រព័ន្ធក្រឡាចត្រង្គ
. ធុង {
  ទទឹង ៖ @siteWidth ; 
  រឹម ៖ ០ ស្វ័យប្រវត្តិ ;  
  . clearfix ();
}
. ជួរឈរ ( @columnSpan : 1 ) {  
  បង្ហាញ ៖ ក្នុងជួរ ; 
  អណ្តែត ៖ ឆ្វេង ;
  ទទឹង : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  រឹម - ឆ្វេង ៖ @gridGutterWidth ; 
  &: ដំបូង - កូន {
    រឹម - ឆ្វេង ៖ 0 ; 
  }
}
. អុហ្វសិត ( @columnOffset : 1 ) {  
  រឹម - ឆ្វេង : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! សំខាន់ ;          
}