ខាងលើ

ឆ្វេង

ត្រឹមត្រូវ។

ខាងក្រោម

Bootstrap ពី Twitter

Bootstrap គឺជាកញ្ចប់ឧបករណ៍ពី Twitter ដែលត្រូវបានរចនាឡើងដើម្បីចាប់ផ្តើមការអភិវឌ្ឍន៍កម្មវិធី និងគេហទំព័រ។
វារួមបញ្ចូលមូលដ្ឋាន CSS និង HTML សម្រាប់វាយអក្សរ ទម្រង់ ប៊ូតុង តារាង ក្រឡាចត្រង្គ រុករក និងច្រើនទៀត។

ការដាស់តឿន Nerd៖ Bootstrap ត្រូវ បានបង្កើតឡើងដោយ Less ហើយត្រូវបានរចនាឡើងដើម្បីដំណើរការចេញពីច្រកទ្វារជាមួយនឹងកម្មវិធីរុករកទំនើបនៅក្នុងចិត្ត។

Hotlink របស់ CSS

សម្រាប់ការចាប់ផ្តើមលឿនបំផុត និងងាយស្រួលបំផុត គ្រាន់តែចម្លងអត្ថបទនេះទៅក្នុងគេហទំព័ររបស់អ្នក។

ប្រើវាជាមួយតិច

អ្នកគាំទ្រប្រើតិច? គ្មានបញ្ហាទេ គ្រាន់តែក្លូន repo ហើយបន្ថែមបន្ទាត់ទាំងនេះ៖

Fork នៅលើ GitHub

ទាញយក បំបែក ទាញ បញ្ហាឯកសារ និងច្រើនទៀតជាមួយ Bootstrap repo ផ្លូវការនៅលើ Github ។

Bootstrap នៅលើ GitHub »

បច្ចុប្បន្ន v1.3.0

ប្រវត្តិសាស្ត្រ

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

អានបន្ថែមនៅលើ dev.twitter.com ›

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

Bootstrap ត្រូវបានសាកល្បង និងគាំទ្រនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតទំនើបធំៗដូចជា Chrome, Safari, Internet Explorer និង Firefox ។

បានសាកល្បង និងគាំទ្រនៅក្នុង Chrome, Safari, Internet Explorer និង Firefox

Safari ចុងក្រោយបង្អស់
Google Chrome ចុងក្រោយ
Firefox 4+
Internet Explorer 7+
ល្ខោនបាសាក់ ១១

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

Bootstrap ភ្ជាប់មកជាមួយនូវ CSS ដែលបានចងក្រង មិនចងក្រង និងគំរូគំរូ។

ថ្មីនៅក្នុង 1.3 កម្មវិធីជំនួយ Javascript
ឯកសារដើម .less ទាំងអស់។
បានចងក្រង យ៉ាងពេញលេញ និង បង្រួម CSS
បំពេញឯកសារណែនាំរចនាប័ទ្ម
ទំព័រឧទាហរណ៍បីដែលមានប្លង់ផ្សេងៗគ្នា

ឧទាហរណ៍នៃការចាប់ផ្តើមរហ័ស

ត្រូវការគំរូរហ័សខ្លះទេ? សូមពិនិត្យមើលឧទាហរណ៍ជាមូលដ្ឋានទាំងនេះ ដែលយើងបានដាក់បញ្ចូលគ្នា៖

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

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

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

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

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

១

២

៣

១

៤

១/៣

២/៣

៤

៦

៨

៥

១១

១៦

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

៤

៨ អុហ្វសិត ៤

1/3 អុហ្វសិត 2/3 វិ

៤ អុហ្វសិត ៤

៥ អុហ្វសិត ៣

១០ អុហ្វសិត ៦

ជួរឈរសំបុក

លាក់មាតិការបស់អ្នក ប្រសិនបើអ្នកត្រូវតែបង្កើត .rowនៅក្នុងជួរឈរដែលមានស្រាប់។

ឧទាហរណ៍នៃជួរឈរដែលបានដាក់

កម្រិត 1 នៃជួរឈរ

កម្រិត 2

<div class = "row" > 
  <div class = "span12" > 
    កម្រិត 1 នៃជួរឈរ
    <div class = "row" > 
      <div class = "span6" > 
        កម្រិត 2
      </div>
      <div class = "span6" > 
        កម្រិត 2
      </div>
    </div>
  </div>
</div>

រមៀលក្រឡាចត្រង្គរបស់អ្នក។

បានបង្កើតឡើងនៅក្នុង Bootstrap គឺជាអថេរមួយចំនួនសម្រាប់ប្ដូរប្រព័ន្ធក្រឡាចត្រង្គ 940px លំនាំដើមតាមបំណង។ ជាមួយនឹងការប្ដូរតាមបំណងបន្តិច អ្នកអាចកែប្រែទំហំនៃជួរឈរ បំពង់ទឹក និងធុងដែលពួកគេស្នាក់នៅ។

នៅខាងក្នុងក្រឡាចត្រង្គ

អថេរដែលត្រូវការដើម្បីកែប្រែប្រព័ន្ធក្រឡាចត្រង្គបច្ចុប្បន្នទាំងអស់ស្ថិតនៅក្នុង preboot.less.

អថេរ	តម្លៃលំនាំដើម	ការពិពណ៌នា
`@gridColumns`	១៦	ចំនួនជួរឈរនៅក្នុងក្រឡាចត្រង្គ
`@gridColumnWidth`	40px	ទទឹងនៃជួរឈរនីមួយៗនៅក្នុងក្រឡាចត្រង្គ
`@gridGutterWidth`	20px	ចន្លោះអវិជ្ជមានរវាងជួរឈរនីមួយៗ
`@siteWidth`	គណនាផលបូកនៃជួរឈរទាំងអស់	យើងប្រើការផ្គូផ្គងមូលដ្ឋានមួយចំនួនដើម្បីរាប់ចំនួនជួរឈរ និងអញ្ចាញ និងកំណត់ទទឹងរបស់ `.fixed-container()`mixin ។

ឥឡូវនេះដើម្បីប្ដូរតាមបំណង

ការកែប្រែក្រឡាចត្រង្គមានន័យថាផ្លាស់ប្តូរ @grid-*អថេរទាំងបី និងចងក្រងឯកសារតិចជាង។

Bootstrap ភ្ជាប់មកជាមួយដើម្បីគ្រប់គ្រងប្រព័ន្ធក្រឡាចត្រង្គដែលមានរហូតដល់ 24 ជួរឈរ។ លំនាំដើមគឺត្រឹមតែ 16 ប៉ុណ្ណោះ។ នេះជារបៀបដែលអថេរក្រឡាចត្រង្គរបស់អ្នកនឹងមើលទៅប្ដូរតាមបំណងទៅក្រឡាចត្រង្គ 24 ជួរ។

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

ពេលចងក្រងឡើងវិញ អ្នកនឹងត្រូវបានកំណត់!

ប្លង់ថេរ

លំនាំដើម និងសាមញ្ញ 940px-wide ប្លង់កណ្តាលសម្រាប់គេហទំព័រ ឬទំព័រណាមួយដែលផ្តល់ដោយតែមួយ <div.container>។

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

ប្លង់រាវ

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

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

ចំណងជើង & ចម្លង

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

ក្រឡាចត្រង្គវាយអក្សរទាំងមូលគឺផ្អែកលើអថេរ Less ពីរនៅក្នុងឯកសារ preboot.less របស់យើង៖ @basefontនិង @baseline. ទីមួយគឺទំហំពុម្ពអក្សរមូលដ្ឋានដែលបានប្រើពេញមួយ ហើយទីពីរគឺកម្ពស់បន្ទាត់មូលដ្ឋាន។

យើងប្រើអថេរទាំងនោះ និងគណិតវិទ្យាមួយចំនួន ដើម្បីបង្កើតរឹម បន្ទះ និងបន្ទាត់កម្ពស់នៃប្រភេទរបស់យើង និងច្រើនទៀត។

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

ចំណាំ៖ វានៅតែមិនអីទេក្នុងការប្រើ <b>និង <i>ដាក់ស្លាកក្នុង HTML5 ហើយពួកវាមិនចាំបាច់ធ្វើរចនាប័ទ្មដិត និងទ្រេតរៀងគ្នាទេ (បើទោះជាមានធាតុអត្ថន័យច្រើន សូមប្រើវា)។ <b>មានន័យដើម្បីរំលេចពាក្យ ឬឃ្លាដោយមិនបង្ហាញពីសារៈសំខាន់បន្ថែម ខណៈដែល <i>ភាគច្រើនគឺសម្រាប់សំឡេង ពាក្យបច្ចេកទេស ។ល។

អាស័យដ្ឋាន

ធាតុ នេះ <address>ត្រូវបានប្រើសម្រាប់ព័ត៌មានទំនាក់ទំនងសម្រាប់បុព្វបុរសដែលនៅជិតបំផុតរបស់វា ឬផ្នែកទាំងមូលនៃការងារ។ នេះគឺជាឧទាហរណ៍ពីរនៃរបៀបដែលវាអាចប្រើបាន៖

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

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

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

អក្សរកាត់

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

ប្លុកសម្រង់

<blockquote> <p> <small>

របៀបដកស្រង់

ដើម្បីរួមបញ្ចូល blockquote រុំ <blockquote>ជុំវិញ <p>និង <small>ដាក់ស្លាក។ ប្រើ <small>ធាតុដើម្បីដកស្រង់ប្រភពរបស់អ្នក ហើយអ្នកនឹងទទួលបាន em dash —នៅពីមុខវា។

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere erat a ante venenatis dapibus posuere velit aliquet ។
វេជ្ជបណ្ឌិត Julius Hibbert

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere erat a ante venenatis dapibus posuere velit aliquet ។ </p>
  <small> វេជ្ជបណ្ឌិត Julius Hibbert </small>
</blockquote>

បញ្ជី

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

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

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

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

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

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

ការពិពណ៌នា`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 ។

កូដ

<code> <pre>

Pimp កូដរបស់អ្នកតាមរចនាប័ទ្មជាមួយនឹងស្លាកសាមញ្ញពីរ។ ដើម្បីឱ្យកាន់តែអស្ចារ្យតាមរយៈ javascript ទម្លាក់ក្នុងបណ្ណាល័យកែកូដរបស់ Google ហើយអ្នកត្រូវបានកំណត់។

បង្ហាញលេខកូដ

កូដ ប្លុក ឬគ្រាន់តែខ្ទាស់ក្នុងជួរ អាចត្រូវបានបង្ហាញជាមួយរចនាប័ទ្មដោយគ្រាន់តែរុំក្នុងស្លាកត្រឹមត្រូវ។ សម្រាប់ប្លុកកូដដែលលាតសន្ធឹងលើបន្ទាត់ច្រើន ប្រើ <pre>ធាតុ។ សម្រាប់កូដក្នុងបន្ទាត់ សូមប្រើ <code>ធាតុ។

ធាតុ លទ្ធផល

<code> នៅក្នុងបន្ទាត់នៃអត្ថបទដូចនេះ លេខកូដរុំរបស់អ្នកនឹងមើលទៅដូច >html<ធាតុនេះ។

ធាតុ	លទ្ធផល
`<code>`	នៅក្នុងបន្ទាត់នៃអត្ថបទដូចនេះ លេខកូដរុំរបស់អ្នកនឹងមើលទៅដូច `>html<`ធាតុនេះ។
`<pre>`	<div> <h1>ក្បាល</h1> <p>មានអ្វីមួយនៅទីនេះ...</p> </div> ចំណាំ៖ ត្រូវប្រាកដថារក្សាកូដនៅក្នុង `pre`ស្លាកឱ្យជិតទៅខាងឆ្វេងតាមដែលអាចធ្វើទៅបាន។ វានឹងបង្ហាញផ្ទាំងទាំងអស់។
`<pre class="prettyprint">`	ដោយប្រើបណ្ណាល័យ google-code-prettify អ្នកគឺជាប្លុកនៃកូដទទួលបានរចនាប័ទ្មដែលមើលឃើញខុសគ្នាបន្តិចបន្តួច និងការបន្លិចវាក្យសម្ព័ន្ធដោយស្វ័យប្រវត្តិ។ <div> <h1> ចំណងជើង </h1> <p> មានអ្វីមួយនៅទីនេះ... </p> </div> ទាញយក google-code-prettify ហើយមើល readme សម្រាប់របៀបប្រើ។

<pre>

<div>
  <h1>ក្បាល</h1>
  <p>មានអ្វីមួយនៅទីនេះ...</p>
</div>

ចំណាំ៖ ត្រូវប្រាកដថារក្សាកូដនៅក្នុង preស្លាកឱ្យជិតទៅខាងឆ្វេងតាមដែលអាចធ្វើទៅបាន។ វានឹងបង្ហាញផ្ទាំងទាំងអស់។

<pre class="prettyprint">

ដោយប្រើបណ្ណាល័យ google-code-prettify អ្នកគឺជាប្លុកនៃកូដទទួលបានរចនាប័ទ្មដែលមើលឃើញខុសគ្នាបន្តិចបន្តួច និងការបន្លិចវាក្យសម្ព័ន្ធដោយស្វ័យប្រវត្តិ។

<div> <h1> ចំណងជើង </h1> <p> មានអ្វីមួយនៅទីនេះ... </p> </div>

ទាញយក google-code-prettify ហើយមើល readme សម្រាប់របៀបប្រើ។

ស្លាកក្នុងជួរ

<span class="label">

ហៅការយកចិត្តទុកដាក់ ឬដាក់ទង់ឃ្លាណាមួយនៅក្នុងអត្ថបទរាងកាយរបស់អ្នក។

ដាក់ស្លាកអ្វីទាំងអស់។

ធ្លាប់ត្រូវការមួយក្នុងចំណោមពុម្ពអក្សរក្បូរក្បាច់ទាំងនោះ New! ឬ ទង់ សំខាន់ៗ នៅពេលសរសេរកូដ? ឥឡូវនេះអ្នកមានពួកគេ។ នេះជាអ្វីដែលរួមបញ្ចូលតាមលំនាំដើម៖

ស្លាកសញ្ញា	លទ្ធផល
`<span class="label">Default</span>`	លំនាំដើម
`<span class="label success">New</span>`	ថ្មី។
`<span class="label warning">Warning</span>`	ការព្រមាន
`<span class="label important">Important</span>`	សំខាន់
`<span class="label notice">Notice</span>`	សេចក្តីជូនដំណឹង

បណ្តាញផ្សព្វផ្សាយ

បង្ហាញរូបភាពតូចៗនៃទំហំខុសៗគ្នានៅលើទំព័រដែលមានបាតជើង HTML ទាប និងរចនាប័ទ្មតិចតួចបំផុត។

រូបភាពតូចឧទាហរណ៍

រូបភាពតូចៗនៅក្នុង .media-gridទំហំអាចមានទំហំណាមួយ ប៉ុន្តែពួកវាដំណើរការបានល្អបំផុតនៅពេលដែលបានគូសផែនទីដោយផ្ទាល់ទៅប្រព័ន្ធក្រឡាចត្រង្គ Bootstrap ដែលភ្ជាប់មកជាមួយ។ ទទឹងរូបភាពដូចជា 90, 210, និង 330 រួមបញ្ចូលគ្នាជាមួយនឹងបន្ទះភីកសែលមួយចំនួនដើម្បីឲ្យស្មើនឹង ទំហំ .span2, .span4, និង .span6ជួរឈរ។

ធំ

មធ្យម

តូច

សរសេរកូដពួកគេ។

ក្រឡាចត្រង្គប្រព័ន្ធផ្សព្វផ្សាយមានភាពងាយស្រួលក្នុងការប្រើប្រាស់ និងសាមញ្ញជាងនៅផ្នែកសម្គាល់។ វិមាត្ររបស់ពួកគេគឺផ្អែកលើទំហំរូបភាពដែលបានរួមបញ្ចូល។

<ul class = "media-grid" > 
  <li>
    <a href="#"> _ _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href="#"> _ _ _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

តារាងសំណង់

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

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

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

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

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

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

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

<តារាង>
  ...
</table>

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

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

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

ចំណាំ៖ Zebra-striping គឺជាការពង្រឹងរីកចម្រើនដែលមិនមានសម្រាប់កម្មវិធីរុករកចាស់ៗដូចជា IE8 និងខាងក្រោម។

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

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

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

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

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( មុខងារ () { 
    $ ( "table #sortTableExample" ) ។ tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</table>

របារកំពូលថេរ

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

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

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

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

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

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

ចំណាំ៖ នៅពេលប្រើរបារកំពូលនៅលើទំព័រណាមួយ ត្រូវប្រាកដថាគណនីសម្រាប់ការត្រួតគ្នាដែលវាបណ្តាលឱ្យដោយការបន្ថែម padding-top: 40px;ទៅរបស់អ្នក body។

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

បង្កើតការរុករកបន្ទាប់បន្សំសាមញ្ញជាមួយ <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>

ម្សៅនំប៉័ង

ការរុករក Breadcrumb ត្រូវបានប្រើជាមធ្យោបាយដើម្បីបង្ហាញអ្នកប្រើប្រាស់នូវកន្លែងដែលពួកគេស្ថិតនៅក្នុងកម្មវិធី ឬគេហទំព័រមួយ ប៉ុន្តែមិនមែនសម្រាប់ការរុករកបឋមនោះទេ។

<ul class = "breadcrumb" > 
  <li><a href="#"> ផ្ទះ </a> < span class = "divider" > / < / span></li>   
  <li><a href="#"> ទំព័រកណ្តាល </a> < span class = "divider" > / < / span></li>   
  <li><a href="#"> មួយទៀត </a> < span class = "divider" > / < / span></li>   
  <li class = "active" > អ្នកនៅទីនេះ </li> 
</ul>

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

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

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← មុន </a></li>  
    <li class = "active" > <a href="#"> 1 </a></ li >  
    <li><a href="#"> 2 </a> < /li > 
    <li><a href="#"> 3 </a> < /li > 
    <li><a href="#"> ៤ </a> < /li > 
    <li><a href="#"> 5 </a> < /li > 
    <li class = "next" > <a href="#"> បន្ទាប់ & rarr ; </a></li>  
  </ul>
</div>

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

.alert-message

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

ទទួលបាន javascript »

បរិសុទ្ធ guacamole! ពិនិត្យមើលខ្លួនឯងឱ្យបានល្អបំផុត អ្នកមិនសូវល្អទេ។

អូខ្ទាស់! ផ្លាស់ប្តូរវា ហើយព្យាយាមម្តងទៀត។

ល្អណាស់! អ្នកបានអានសារដាស់តឿននេះដោយជោគជ័យ។

ព្រឺក្បាល! នេះគឺជាការដាស់តឿនមួយដែលត្រូវការការយកចិត្តទុកដាក់របស់អ្នក ប៉ុន្តែវាមិនមែនជាអាទិភាពដ៏ធំមួយនៅឡើយទេ។

កូដឧទាហរណ៍

<div class = "ការព្រមានសារព្រមាន" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> បរិសុទ្ធ guacamole! ពិនិត្យមើលខ្លួនឯង ឱ្យ បានល្អបំផុត អ្នកមើលទៅមិនល្អពេកទេ។ </p>
</div>

រារាំងសារ

.alert-message.block-message

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

ទទួលបាន javascript »

បរិសុទ្ធ guacamole! នេះជាការព្រមាន! ពិនិត្យមើលខ្លួនឯងឱ្យបានល្អបំផុត អ្នកមិនសូវល្អទេ។ Nulla vitae elit libero, a pharetra auggue ។ Praesent commodo cursus magna, vel scelerisque nisl consectetur et ។

ធ្វើសកម្មភាពនេះ។ ឬធ្វើបែបនេះ

អូខ្ទាស់! អ្នកមានកំហុស! ផ្លាស់ប្តូរវា ហើយព្យាយាមម្តងទៀត។

Duis mollis មិនមែនជា luctus ទេ។
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

ធ្វើសកម្មភាពនេះ។ ឬធ្វើបែបនេះ

ល្អណាស់! អ្នកបានអានសារដាស់តឿននេះដោយជោគជ័យ។ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum ។

ធ្វើសកម្មភាពនេះ។ ឬធ្វើបែបនេះ

កូដឧទាហរណ៍

<div class = "alert-message block-message warning" > 
  <a class="close" href="#"> × </a> _ _ _ _ _  
  <p><strong> បរិសុទ្ធ guacamole! នេះជាការព្រមាន! ពិនិត្យមើលខ្លួនឯង ឱ្យ បានល្អបំផុត អ្នកមើលទៅមិនល្អពេកទេ។ Nulla vitae elit libero, a pharetra auggue ។ Praesent commodo cursus magna, vel scelerisque nisl consectetur et ។ </p>
  <div class = "alert-actions" > 
    <a class="btn small" href="#"> ធ្វើសកម្មភាព នេះ </a> <a class="btn small" href="#"> ឬ ធ្វើ បែបនេះ </a> _ _ _ _ _     
  </div>
</div>

ម៉ូឌុល

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

ទទួលបាន javascript »

ព័ត៌មានជំនួយ

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

ទទួលបាន javascript »

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur, aut natus illo voluptatem odit perpiciatis laudantium rem dolorupquetam to Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quaeuptaugit accusant .

Popovers

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

ទទួលបាន javascript »

ការចាប់ផ្តើម

ការរួមបញ្ចូល javascript ជាមួយបណ្ណាល័យ Bootstrap គឺងាយស្រួលណាស់។ ខាងក្រោមនេះ យើងនិយាយអំពីមូលដ្ឋានគ្រឹះ និងផ្ដល់ឱ្យអ្នកនូវកម្មវិធីជំនួយដ៏អស្ចារ្យមួយចំនួន ដើម្បីឱ្យអ្នកចាប់ផ្ដើម!

មើលឯកសារ javascript »

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

នាំយកសមាសធាតុចម្បងមួយចំនួនរបស់ Bootstrap មកជាមួយនឹងកម្មវិធីជំនួយផ្ទាល់ខ្លួនថ្មីដែលដំណើរការជាមួយ jQuery និង Ender ។ យើងលើកទឹកចិត្តអ្នកឱ្យពង្រីក និងកែប្រែពួកវាឱ្យសមនឹងតម្រូវការអភិវឌ្ឍន៍ជាក់លាក់របស់អ្នក។

ឯកសារ	ការពិពណ៌នា
bootstrap-modal.js	កម្មវិធីជំនួយ Modal របស់យើងគឺជាកម្មវិធីជំនួយ Js ដ៏ ស្ដើងបំផុត! យើងបានយកចិត្តទុកដាក់ជាពិសេសដើម្បីរួមបញ្ចូលតែមុខងារទទេដែលយើងត្រូវការនៅ twitter ។
bootstrap-alerts.js	កម្មវិធីជំនួយការជូនដំណឹងគឺជាថ្នាក់តូចមួយសម្រាប់បន្ថែមមុខងារជិតស្និទ្ធទៅនឹងការជូនដំណឹង។
bootstrap-dropdown.js	កម្មវិធីជំនួយនេះគឺសម្រាប់បន្ថែមអន្តរកម្មទម្លាក់ចុះទៅរបារខាងលើ bootstrap ឬការរុករកផ្ទាំង។
bootstrap-scrollspy.js	កម្មវិធីជំនួយ ScrollSpy គឺសម្រាប់បន្ថែមការអាប់ដេតដោយស្វ័យប្រវត្តិ nav ដោយផ្អែកលើទីតាំងរមូរទៅកាន់របារ bootstrap topbar។
bootstrap-tabs.js	កម្មវិធីជំនួយនេះបន្ថែមមុខងារផ្ទាំងថាមវន្ត និងរហ័សសម្រាប់ការជិះកង់តាមរយៈមាតិកាក្នុងស្រុក។
bootstrap-twipsy.js	ផ្អែកលើកម្មវិធីជំនួយ jQuery.tipsy ដ៏ល្អឥតខ្ចោះដែលសរសេរដោយ Jason Frame; twipsy គឺជាកំណែដែលបានអាប់ដេត ដែលមិនពឹងផ្អែកលើរូបភាព ប្រើ css3 សម្រាប់ចលនា និង data-attributes សម្រាប់ការផ្ទុកចំណងជើងក្នុងស្រុក!
bootstrap-popover.js	កម្មវិធីជំនួយ popover ផ្តល់នូវចំណុចប្រទាក់សាមញ្ញមួយសម្រាប់បន្ថែម popovers ទៅក្នុងកម្មវិធីរបស់អ្នក។ វាពង្រីក កម្មវិធីជំនួយ boostrap-twipsy.js ដូច្នេះត្រូវប្រាកដថាចាប់យកឯកសារនោះផងដែរ នៅពេលរួមបញ្ចូល popovers នៅក្នុងគម្រោងរបស់អ្នក!

តើ javascript ចាំបាច់ទេ?

ទេ! Bootstrap ត្រូវបានរចនាឡើងជាបណ្ណាល័យ CSS ដំបូងបង្អស់។ javascript នេះផ្តល់នូវស្រទាប់អន្តរកម្មជាមូលដ្ឋាននៅផ្នែកខាងលើនៃរចនាប័ទ្មដែលបានរួមបញ្ចូល។

ទោះយ៉ាងណាក៏ដោយ សម្រាប់អ្នកដែលត្រូវការ javascript យើងបានផ្តល់កម្មវិធីជំនួយខាងលើ ដើម្បីជួយអ្នកឱ្យយល់ពីរបៀបរួមបញ្ចូល Bootstrap ជាមួយ javascript និងផ្តល់ឱ្យអ្នកនូវជម្រើសដ៏រហ័ស និងស្រាលសម្រាប់មុខងារជាមូលដ្ឋានភ្លាមៗ។

សម្រាប់ព័ត៌មានបន្ថែម និងដើម្បីមើលការបង្ហាញបន្តផ្ទាល់ សូមមើល ទំព័រឯកសារកម្មវិធីជំនួយ របស់យើង ។

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

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

របៀបប្រើវា។

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

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "ទាំងអស់" />    
<script src = "js/less-1.1.3.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 ;            
 
// ក្រឡាចត្រង្គមូលដ្ឋាន
@basefont : 13px ;          
@baseline : 18px ;

មតិយោបល់

/* ... */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 ; 
  }
  ...
}

ជម្រាល

#ជម្រាល {
  ...
  . បញ្ឈរ ( @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   
    ផ្ទៃខាងក្រោយ - រូបភាព ៖ លីនេអ៊ែរ - ជម្រាល ( @startColor , @endColor ); // ស្តង់ដារ  
  }
  ...
}

ប្រតិបត្តិការ

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

// ក្រឡាចត្រង្គ
@gridColumns : ១៦ ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// ធ្វើជួរឈរមួយចំនួន
. ជួរឈរ ( @columnSpan : 1 ) {  
  ទទឹង : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

ចងក្រងតិច

បន្ទាប់ពីកែប្រែ .lessឯកសារក្នុង /lib/ អ្នកនឹងត្រូវចងក្រងពួកវាឡើងវិញ ដើម្បីបង្កើតឯកសារ bootstrap-*.*.*.css និង bootstrap-*.*.*.min.css ឡើងវិញ។ ប្រសិនបើអ្នកកំពុងដាក់សំណើរទាញទៅ GitHub អ្នកត្រូវតែចងក្រងឡើងវិញជានិច្ច។

វិធីចងក្រង

វិធីសាស្រ្ត	ជំហាន
ថ្នាំងជាមួយ makefile	ដំឡើងកម្មវិធីចងក្រងបន្ទាត់ពាក្យបញ្ជាតិចជាងជាមួយ npm ដោយដំណើរការពាក្យបញ្ជាខាងក្រោម៖ $ npm ដំឡើង lessc នៅពេលដំឡើងរួច គ្រាន់តែដំណើរការ `make`ពី root នៃ bootstrap directory របស់អ្នក ហើយអ្នករួចរាល់ហើយ។ លើសពីនេះ ប្រសិនបើអ្នកបាន ដំឡើង watchr អ្នកអាចដំណើរការ `make watch`ដើម្បីឱ្យ bootstrap បង្កើតឡើងវិញដោយស្វ័យប្រវត្តិរាល់ពេលដែលអ្នកកែសម្រួលឯកសារនៅក្នុង bootstrap lib (នេះមិនទាមទារទេ គ្រាន់តែជាវិធីសាស្ត្រងាយស្រួលប៉ុណ្ណោះ)។
Javascript	ទាញយក Less.js ចុងក្រោយបង្អស់ ហើយបញ្ចូលផ្លូវទៅកាន់វា (និង Bootstrap) នៅក្នុង `head`. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script> ដើម្បីចងក្រងឯកសារ .less ឡើងវិញ គ្រាន់តែរក្សាទុកពួកវា ហើយផ្ទុកទំព័ររបស់អ្នកឡើងវិញ។ Less.js ចងក្រងពួកវា ហើយរក្សាទុកពួកវានៅក្នុងកន្លែងផ្ទុកក្នុងតំបន់។
បន្ទាត់ពាក្យបញ្ជា	ប្រសិនបើអ្នកបានដំឡើងឧបករណ៍បន្ទាត់ពាក្យបញ្ជាតិចជាងមុនរួចហើយ សូមដំណើរការពាក្យបញ្ជាខាងក្រោម៖ $ lessc ./lib/bootstrap.less > bootstrap.css ត្រូវប្រាកដថាបញ្ចូលទៅ `--compress`ក្នុងពាក្យបញ្ជានោះ ប្រសិនបើអ្នកកំពុងព្យាយាមរក្សាទុកបៃមួយចំនួន!
កម្មវិធី Mac តិច	កម្មវិធី Mac ដែលមិនផ្លូវការ មើលថតឯកសារ .less និងចងក្រងកូដទៅជាឯកសារមូលដ្ឋានបន្ទាប់ពីការរក្សាទុករាល់ឯកសារ .less ដែលបានមើល។ ប្រសិនបើអ្នកចូលចិត្ត អ្នកអាចបិទបើកចំណូលចិត្តនៅក្នុងកម្មវិធីសម្រាប់ការបង្រួមតូចដោយស្វ័យប្រវត្តិ ហើយថតឯកសារណាដែលចងក្រងនឹងបញ្ចប់។

Hotlink របស់ CSS

ប្រើវាជាមួយតិច

Fork នៅលើ GitHub

អំពីប្រវត្តិសង្ខេបរបស់ Bootstrap ការគាំទ្រកម្មវិធីរុករក និងច្រើនទៀត

ប្រវត្តិសាស្ត្រ

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

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

ឧទាហរណ៍នៃការចាប់ផ្តើមរហ័ស

ប្រព័ន្ធក្រឡាចត្រង្គ Rock the standard 940px or roll your own

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

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

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

ជួរឈរសំបុក

ឧទាហរណ៍នៃជួរឈរដែលបានដាក់

រមៀលក្រឡាចត្រង្គរបស់អ្នក។

នៅខាងក្នុងក្រឡាចត្រង្គ

ឥឡូវនេះដើម្បីប្ដូរតាមបំណង

Layouts គំរូមូលដ្ឋានដើម្បីបង្កើតគេហទំព័រ

ប្លង់ថេរ

ប្លង់រាវ

ចំណងជើង វាយអត្ថបទ កថាខណ្ឌ បញ្ជី និងធាតុប្រភេទក្នុងជួរផ្សេងទៀត។

ចំណងជើង & ចម្លង

h1. ចំណងជើង 1

h2. ក្បាល 2

h3. ចំណងជើង ៣

h4. ក្បាល ៤

h5. ក្បាលទី 5

h6. ចំណងជើង 6

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

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

ផ្សេងៗ ធាតុ

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

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

អាស័យដ្ឋាន

អក្សរកាត់

ប្លុកសម្រង់

របៀបដកស្រង់

បញ្ជី

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

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

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

ការពិពណ៌នាdl

កូដ

បង្ហាញលេខកូដ

ស្លាកក្នុងជួរ

ដាក់ស្លាកអ្វីទាំងអស់។

ប្រព័ន្ធផ្សព្វផ្សាយ បង្ហាញរូបភាព និងវីដេអូ

បណ្តាញផ្សព្វផ្សាយ

រូបភាពតូចឧទាហរណ៍

ធំ

មធ្យម

តូច

សរសេរកូដពួកគេ។

តារាង សម្រាប់ អ្នកបានទាយវា ទិន្នន័យតារាង

តារាងសំណង់

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

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

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

ទម្រង់

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

ទម្រង់ជាជង់

ទម្រង់ទំហំវាល

ប៊ូតុង

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

ទំហំជំនួស

រដ្ឋពិការ

តំណភ្ជាប់

ប៊ូតុង

ការរុករក

របារកំពូលថេរ

ឈ្មោះគម្រោង

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

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

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

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

ម្សៅនំប៉័ង

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

រចនាប័ទ្ម​ការ ​ជូន​ដំណឹង និង​កំហុស ​សម្រាប់​ជោគជ័យ ការ​ព្រមាន និង​សារ​ឬ​ការ​ជូន​ដំណឹង​អំពី​បញ្ហា

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

កូដឧទាហរណ៍

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

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

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

ការពិពណ៌នា`dl`

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

រចនាប័ទ្មការ ជូនដំណឹង និងកំហុស សម្រាប់ជោគជ័យ ការព្រមាន និងសារឬការជូនដំណឹងអំពីបញ្ហា