CSS មូលដ្ឋាន

នៅលើកំពូលនៃរន្ទា ធាតុ HTML ជាមូលដ្ឋានត្រូវបានរចនា និងពង្រឹងជាមួយនឹងថ្នាក់ដែលអាចពង្រីកបាន ដើម្បីផ្តល់នូវរូបរាង និងអារម្មណ៍ស្រស់ស្រាយ។

ចំណងជើង និងច្បាប់ចម្លងតួ

មាត្រដ្ឋានវាយអក្សរ

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

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

ឧទាហរណ៍អត្ថបទ

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 ។

Vivamus sagittis lacus vel auggue laoreet rutrum faucibus dolor auctor ។ Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit ។ Donec sed odio dui ។

h1. ចំណងជើង 1

h2. ក្បាល 2

h3. ចំណងជើង ៣

h4. ក្បាល ៤

h5. ក្បាលទី 5
h6. ចំណងជើង 6

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

ធាតុ ការប្រើប្រាស់ ស្រេចចិត្ត
<strong> សម្រាប់​ការ​សង្កត់​ធ្ងន់​លើ​ផ្នែក​ខ្លី​នៃ​អត្ថបទ​ជា​មួយ​នឹង ​ការ​សំខាន់ គ្មាន
<em> សម្រាប់​ការ​សង្កត់​ធ្ងន់​លើ​អត្ថបទ​ខ្លីៗ​ដោយ​មាន ​ភាព​តានតឹង គ្មាន
<abbr> រុំអក្សរកាត់ និងអក្សរកាត់ដើម្បីបង្ហាញកំណែដែលបានពង្រីកនៅលើដាក់ រួមបញ្ចូលជម្រើស titleសម្រាប់អត្ថបទដែលបានពង្រីក
<address> សម្រាប់ព័ត៌មានទំនាក់ទំនងសម្រាប់បុព្វបុរសដែលនៅជិតបំផុតរបស់វា ឬផ្នែកទាំងមូលនៃការងារ រក្សា​ការ​ធ្វើ​ទ្រង់ទ្រាយ​ដោយ​បញ្ចប់​បន្ទាត់​ទាំងអស់​ជាមួយ<br>

ការប្រើប្រាស់ការសង្កត់ធ្ងន់

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]

ឧទាហរណ៍អក្សរកាត់

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

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

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

ប្លុកសម្រង់

ធាតុ ការប្រើប្រាស់ ស្រេចចិត្ត
<blockquote> ធាតុកម្រិតប្លុកសម្រាប់ការដកស្រង់ខ្លឹមសារពីប្រភពផ្សេងទៀត។

បន្ថែម citeគុណលក្ខណៈសម្រាប់ URL ប្រភព

ប្រើ .pull-leftនិង .pull-rightថ្នាក់សម្រាប់ជម្រើសអណ្តែត
<small> ធាតុស្រេចចិត្តសម្រាប់ការបន្ថែមការដកស្រង់ដែលប្រឈមមុខនឹងអ្នកប្រើប្រាស់ ជាទូទៅអ្នកនិពន្ធដែលមានចំណងជើងការងារ ដាក់ <cite>ជុំវិញចំណងជើង ឬឈ្មោះប្រភព

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

រួមបញ្ចូលធាតុស្រេចចិត្ត <small>ដើម្បីដកស្រង់ប្រភពរបស់អ្នក ហើយអ្នកនឹងទទួលបាន em dash &mdash;មុនពេលវាសម្រាប់គោលបំណងរចនាប័ទ្ម។

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere erat a ante venenatis ។ </p>
  3. <small> អ្នកល្បីល្បាញ </small>
  4. </blockquote>

ឧទាហរណ៍ប្លុកសម្រង់

សម្រង់ប្លុកលំនាំដើមត្រូវបានកំណត់រចនាប័ទ្មដូចនេះ៖

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere erat a ante venenatis ។

បុគ្គលល្បីខាង ផ្នែកការងារ

ដើម្បីបណ្តែតសម្រង់ប្លុករបស់អ្នកទៅខាងស្តាំ សូមបន្ថែម class="pull-right"

Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere erat a ante venenatis ។

បុគ្គលល្បីខាង ផ្នែកការងារ

បញ្ជី

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

<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 class="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>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. ចំនួនគត់ molestie lorem និង massa
  4. Facilisis នៅក្នុង Pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. ទទួលបាន 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>.

  1. ឧទាហរណ៍ <code> section </ code > គួរតែ ត្រូវ បាន រុំ ជាជួរ

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

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

<p>អត្ថបទគំរូនៅទីនេះ...</p>
  1. <មុន>
  2. <p>អត្ថបទគំរូនៅទីនេះ...</p>
  3. </pre>

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

Google Prettify

យក <pre>ធាតុដូចគ្នា ហើយបន្ថែមថ្នាក់ជាជម្រើសពីរសម្រាប់ការបង្ហាញដែលប្រសើរឡើង។

  1. <p> អត្ថបទគំរូនៅទីនេះ... </p>
  1. <pre class = "prettyprint
  2. បន្ទាត់" >
  3. <p>អត្ថបទគំរូនៅទីនេះ...</p>
  4. </pre>

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

ការសម្គាល់តារាង

ស្លាក ការពិពណ៌នា
<table> ធាតុរុំសម្រាប់បង្ហាញទិន្នន័យក្នុងទម្រង់តារាង
<thead> ធាតុ​កុងតឺន័រ​សម្រាប់​ជួរ​ដេក​ក្បាល​តារាង ( <tr>) ដើម្បី​ដាក់​ស្លាក​ជួរ​ឈរ​តារាង
<tbody> ធាតុកុងតឺន័រសម្រាប់ជួរតារាង ( <tr>) នៅក្នុងតួតារាង
<tr> ធាតុកុងតឺន័រសម្រាប់សំណុំនៃក្រឡាតារាង ( <td><th>) ដែលបង្ហាញនៅលើជួរតែមួយ
<td> ក្រឡាតារាងលំនាំដើម
<th> ក្រឡាតារាងពិសេសសម្រាប់ជួរឈរ (ឬជួរដេកអាស្រ័យលើវិសាលភាព និងការដាក់) ស្លាក
ត្រូវតែប្រើក្នុង a<thead>
<caption> ការពិពណ៌នា ឬសេចក្តីសង្ខេបនៃអ្វីដែលតារាងមាន ជាពិសេសមានប្រយោជន៍សម្រាប់អ្នកអានអេក្រង់
  1. <តារាង>
  2. <ក្បាល>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

ជម្រើសតារាង

ឈ្មោះ ថ្នាក់ ការពិពណ៌នា
លំនាំដើម គ្មាន គ្មានរចនាប័ទ្មទេ គ្រាន់តែជួរឈរ និងជួរដេក
មូលដ្ឋាន .table មានតែបន្ទាត់ផ្ដេករវាងជួរដេកប៉ុណ្ណោះ។
មានព្រំប្រទល់ .table-bordered បង្គត់ជ្រុង និងបន្ថែមស៊ុមខាងក្រៅ
សេះបង្កង់-ឆ្នូត .table-striped បន្ថែមពណ៌ផ្ទៃខាងក្រោយពណ៌ប្រផេះស្រាលទៅជួរសេស (1, 3, 5 ។ល។)
ខាប់ .table-condensed កាត់បន្ទះបញ្ឈរជាពាក់កណ្តាល ពី 8px ទៅ 4px ក្នុងផ្នែកទាំងអស់ tdនិង thធាតុ

តារាងឧទាហរណ៍

1. រចនាប័ទ្មតារាងលំនាំដើម

តារាង​ត្រូវ​បាន​កំណត់​រចនាប័ទ្ម​ដោយ​ស្វ័យ​ប្រវត្តិ​ដោយ​មាន​ស៊ុម​តែ​មួយ​ចំនួន​ប៉ុណ្ណោះ ដើម្បី​ធានា​ថា​អាច​អាន​បាន និង​រក្សា​រចនាសម្ព័ន្ធ។ ជាមួយនឹង 2.0 .tableថ្នាក់ត្រូវបានទាមទារ។

  1. <table class = "table" >
  2. </table>
# ឈ្មោះដំបូង នាមត្រកូល ភាសា
ម៉ាក អូតូ CSS
យ៉ាកុប ថនតុន Javascript
ស្ទូ ធ្មេញ HTML

2. តារាងឆ្នូត

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

ចំណាំ៖ តារាង Sprited ប្រើ :nth-childឧបករណ៍ជ្រើសរើស CSS ហើយមិនមាននៅក្នុង IE7-IE8 ទេ។

  1. <table class = "table table-striped" >
  2. </table>
# ឈ្មោះដំបូង នាមត្រកូល ភាសា
ម៉ាក អូតូ CSS
យ៉ាកុប ថនតុន Javascript
ស្ទូ ធ្មេញ HTML

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

បន្ថែមស៊ុមជុំវិញតុទាំងមូល និងជ្រុងមូលសម្រាប់គោលបំណងសាភ័ណភ្ព។

  1. <table class = "table table-bordered" >
  2. </table>
# ឈ្មោះដំបូង នាមត្រកូល ភាសា
លោក Mark Otto CSS
យ៉ាកុប ថនតុន Javascript
ស្ទូ ធ្មេញ
ប្រូសេហ្វ ស្តាលីន HTML

4. តារាង condensed

ធ្វើឱ្យតារាងរបស់អ្នកកាន់តែបង្រួមដោយបន្ថែម .table-condensedថ្នាក់ដើម្បីកាត់ក្រឡាតារាងជាពាក់កណ្តាល (ពី 8px ដល់ 4px) ។

  1. <table class = "table table-condensed" >
  2. </table>
# ឈ្មោះដំបូង នាមត្រកូល ភាសា
ម៉ាក អូតូ CSS
យ៉ាកុប ថនតុន Javascript
ស្ទូ ធ្មេញ HTML

5. ផ្សំវាទាំងអស់គ្នា!

មានអារម្មណ៍សេរីក្នុងការរួមបញ្ចូលគ្នានៃថ្នាក់តារាងណាមួយ ដើម្បីសម្រេចបាននូវរូបរាងផ្សេងគ្នាដោយប្រើប្រាស់ថ្នាក់ដែលមាន។

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
# ឈ្មោះដំបូង នាមត្រកូល ភាសា
ម៉ាក អូតូ CSS
យ៉ាកុប ថនតុន Javascript
ស្ទូ ធ្មេញ HTML
ប្រូសេហ្វ ស្តាលីន HTML

HTML និង CSS ដែលអាចបត់បែនបាន។

ផ្នែកដ៏ល្អបំផុតអំពីទម្រង់នៅក្នុង Bootstrap គឺថារាល់ធាតុចូល និងការគ្រប់គ្រងរបស់អ្នកមើលទៅអស្ចារ្យមិនថាអ្នកបង្កើតពួកវានៅក្នុងការសម្គាល់របស់អ្នកដោយរបៀបណានោះទេ។ មិនតម្រូវឱ្យមាន HTML ហួសហេតុនោះទេ ប៉ុន្តែយើងផ្តល់គំរូសម្រាប់អ្នកដែលត្រូវការវា។

ប្លង់ដែលស្មុគស្មាញជាងនេះមកជាមួយថ្នាក់សង្ខេប និងអាចធ្វើមាត្រដ្ឋានបានសម្រាប់រចនាប័ទ្មងាយស្រួល និងការចងព្រឹត្តិការណ៍ ដូច្នេះអ្នកត្រូវបានគ្របដណ្តប់នៅគ្រប់ជំហាន។

ប្លង់ចំនួនបួនរួមបញ្ចូល

Bootstrap ភ្ជាប់មកជាមួយការគាំទ្រសម្រាប់ប្លង់ទម្រង់បួនប្រភេទ៖

  • បញ្ឈរ (លំនាំដើម)
  • ស្វែងរក
  • ក្នុងជួរ
  • ផ្ដេក

ប្រភេទផ្សេងគ្នានៃប្លង់ទម្រង់តម្រូវឱ្យមានការផ្លាស់ប្ដូរមួយចំនួនដើម្បីសម្គាល់ ប៉ុន្តែការគ្រប់គ្រងខ្លួនឯងនៅតែមាន និងមានលក្ខណៈដូចគ្នា។

គ្រប់គ្រងរដ្ឋ និងច្រើនទៀត

ទម្រង់របស់ Bootstrap រួមបញ្ចូលរចនាប័ទ្មសម្រាប់ការគ្រប់គ្រងទម្រង់មូលដ្ឋានទាំងអស់ដូចជា ការបញ្ចូល ផ្ទៃអត្ថបទ និងការជ្រើសរើសដែលអ្នកចង់បាន។ ប៉ុន្តែវាក៏មានភ្ជាប់មកជាមួយនូវសមាសធាតុផ្ទាល់ខ្លួនមួយចំនួនផងដែរ ដូចជាការបញ្ចូលបន្ថែម និងដែលបានបន្ថែមជាមុន និងការគាំទ្រសម្រាប់បញ្ជីប្រអប់ធីក។

រដ្ឋដូចជាកំហុស ការព្រមាន និងភាពជោគជ័យត្រូវបានរួមបញ្ចូលសម្រាប់ប្រភេទនៃការគ្រប់គ្រងទម្រង់នីមួយៗ។ រួមបញ្ចូលផងដែរគឺជារចនាប័ទ្មសម្រាប់ការគ្រប់គ្រងដែលបិទ។

ទម្រង់បួនប្រភេទ

Bootstrap ផ្តល់នូវការសម្គាល់ និងរចនាប័ទ្មសាមញ្ញសម្រាប់រចនាប័ទ្មបួននៃទម្រង់បណ្ដាញទូទៅ។

ឈ្មោះ ថ្នាក់ ការពិពណ៌នា
បញ្ឈរ (លំនាំដើម) .form-vertical (មិន​ត្រូវការ) បានដាក់ជង់ តម្រឹមឆ្វេងស្លាកលើវត្ថុបញ្ជា
ក្នុងជួរ .form-inline ស្លាកដែលបានតម្រឹមឆ្វេង និងការគ្រប់គ្រងប្លុកក្នុងបន្ទាត់សម្រាប់រចនាប័ទ្មបង្រួម
ស្វែងរក .form-search ការបញ្ចូលអត្ថបទរាងមូលបន្ថែមសម្រាប់សោភ័ណភាពស្វែងរកធម្មតា។
ផ្ដេក .form-horizontal អណ្តែតទៅឆ្វេង តម្រឹមស្តាំស្លាកនៅលើបន្ទាត់ដូចគ្នាជាវត្ថុបញ្ជា

ទម្រង់​គំរូ ​ដោយ​ប្រើ​តែ​ការ​គ្រប់គ្រង​ទម្រង់​ប៉ុណ្ណោះ គ្មាន​ការ​សម្គាល់​បន្ថែម

ទម្រង់មូលដ្ឋាន

ជាមួយនឹង v2.0 យើងមានលំនាំដើមស្រាលជាងមុន និងឆ្លាតវៃជាងមុនសម្រាប់រចនាប័ទ្មទម្រង់។ គ្មានការសម្គាល់បន្ថែមទេ គ្រាន់តែការគ្រប់គ្រងទម្រង់ប៉ុណ្ណោះ។

អត្ថបទជំនួយដែលពាក់ព័ន្ធ!

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

ដោយឆ្លុះបញ្ចាំងពីរចនាប័ទ្ម WebKit លំនាំដើម គ្រាន់តែបន្ថែម .form-searchសម្រាប់វាលស្វែងរករាងមូលបន្ថែម។

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

ការបញ្ចូលគឺជាកម្រិតប្លុកដើម្បីចាប់ផ្តើម។ សម្រាប់ .form-inlineនិង .form-horizontalយើងប្រើ inline-block។


ទម្រង់ផ្ដេក

គ្រប់គ្រងការគាំទ្រ Bootstrap

បន្ថែមពីលើអត្ថបទទម្រង់ឥតគិតថ្លៃ ការបញ្ចូលអត្ថបទដែលមានមូលដ្ឋានលើ HTML5 លេចឡើងដូចនេះ។

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

បង្ហាញនៅខាងឆ្វេងគឺជាការគ្រប់គ្រងទម្រង់លំនាំដើមទាំងអស់ដែលយើងគាំទ្រ។ នេះ​ជា​បញ្ជី​ចំណុច៖

  • ការបញ្ចូលអត្ថបទ (អត្ថបទ ពាក្យសម្ងាត់ អ៊ីមែល។ល។)
  • ប្រអប់ធីក
  • វិទ្យុ
  • ជ្រើសរើស
  • ជ្រើសរើសច្រើន។
  • ការបញ្ចូលឯកសារ
  • តំបន់អត្ថបទ

លំនាំដើមថ្មីជាមួយ v2.0

រហូតដល់ v1.4 រចនាប័ទ្មទម្រង់លំនាំដើមរបស់ Bootstrap បានប្រើប្លង់ផ្ដេក។ ជាមួយនឹង Bootstrap 2 យើងបានដកចេញនូវឧបសគ្គនោះ ដើម្បីឱ្យមានលំនាំដើមដែលអាចធ្វើមាត្រដ្ឋានបានកាន់តែឆ្លាតជាងមុន សម្រាប់ទម្រង់ណាមួយ។


ទម្រង់គ្រប់គ្រងរដ្ឋ
តម្លៃខ្លះនៅទីនេះ
មានអ្វីមួយខុសប្រក្រតី
សូមកែកំហុស
ហូហូ!
ហូហូ!

ការកំណត់កម្មវិធីរុករកឡើងវិញ

disabledBootstrap មានលក្ខណៈពិសេសរចនាប័ទ្មសម្រាប់ការផ្តោតអារម្មណ៍ និង រដ្ឋ ដែលគាំទ្រដោយកម្មវិធីរុករក ។ យើងដក Webkit លំនាំដើមចេញ outlineហើយអនុវត្ត a box-shadowនៅកន្លែងរបស់វាសម្រាប់ :focus.


ការបញ្ជាក់ទម្រង់

វាក៏រួមបញ្ចូលផងដែរនូវរចនាប័ទ្មសុពលភាពសម្រាប់កំហុស ការព្រមាន និងភាពជោគជ័យ។ ដើម្បីប្រើ សូមបន្ថែមថ្នាក់កំហុសទៅកន្លែងជុំវិញ .control-group

  1. <សំណុំវាល
  2. class = "control-group error" >
  3. </fieldset>

ពង្រីកការគ្រប់គ្រងទម្រង់

ប្រើ .span*ថ្នាក់ដូចគ្នាពីប្រព័ន្ធក្រឡាចត្រង្គសម្រាប់ទំហំបញ្ចូល។

@

នេះជាអត្ថបទជំនួយ

.00

នេះជាអត្ថបទជំនួយបន្ថែម

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

បន្ថែម និងបន្ថែមធាតុចូល

ក្រុមបញ្ចូល — ជាមួយ​នឹង​អត្ថបទ​បន្ថែម ឬ​បន្ថែម​ខាង​មុខ — ផ្តល់​នូវ​វិធី​ងាយ​ស្រួល​ក្នុង​ការ​ផ្តល់​បរិបទ​បន្ថែម​ទៀត​សម្រាប់​ការ​បញ្ចូល​របស់​អ្នក។ ឧទាហរណ៍ដ៏អស្ចារ្យរួមមានសញ្ញា @ សម្រាប់ឈ្មោះអ្នកប្រើប្រាស់ Twitter ឬ $ សម្រាប់ហិរញ្ញវត្ថុ។


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

រហូតដល់ v1.4, Bootstrap ទាមទារការសម្គាល់បន្ថែមជុំវិញប្រអប់ធីក និងវិទ្យុ ដើម្បីជង់ពួកវា។ ឥឡូវនេះ វាជាបញ្ហាសាមញ្ញនៃការធ្វើម្តងទៀតនូវ <label class="checkbox">អ្វីដែលរុំ <input type="checkbox">

ប្រអប់ធីកក្នុងបន្ទាត់ និងវិទ្យុក៏ត្រូវបានគាំទ្រផងដែរ។ គ្រាន់តែបន្ថែម .inlineទៅណាមួយ .checkbox.radioហើយអ្នកបានបញ្ចប់។


ទម្រង់ក្នុងបន្ទាត់ និងបន្ថែម/បន្ថែម

ដើម្បីប្រើការបញ្ចូលជាមុន ឬបន្ថែមធាតុបញ្ចូលក្នុងទម្រង់ក្នុងជួរ ត្រូវប្រាកដថាដាក់ .add-onនិង inputនៅលើបន្ទាត់ដូចគ្នា ដោយគ្មានចន្លោះ។


ទម្រង់ជំនួយអត្ថបទ

ដើម្បីបន្ថែមអត្ថបទជំនួយសម្រាប់ការបញ្ចូលទម្រង់បែបបទរបស់អ្នក រួមបញ្ចូលអត្ថបទជំនួយក្នុងបន្ទាត់ជាមួយ <span class="help-inline">ឬប្លុកអត្ថបទជំនួយជាមួយ <p class="help-block">បន្ទាប់ពីធាតុបញ្ចូល។

ប៊ូតុង ថ្នាក់ ការពិពណ៌នា
លំនាំដើម .btn ប៊ូតុងពណ៌ប្រផេះស្តង់ដារជាមួយនឹងពណ៌ជម្រាល
បឋមសិក្សា .btn-primary ផ្តល់ទម្ងន់ដែលមើលឃើញបន្ថែម និងកំណត់សកម្មភាពចម្បងនៅក្នុងសំណុំនៃប៊ូតុង
ព័ត៌មាន .btn-info ប្រើជាជម្រើសជំនួសរចនាប័ទ្មលំនាំដើម
ជោគជ័យ .btn-success បង្ហាញពីសកម្មភាពជោគជ័យ ឬវិជ្ជមាន
ការព្រមាន .btn-warning បង្ហាញថាការប្រុងប្រយ័ត្នគួរតែត្រូវបានអនុវត្តជាមួយនឹងសកម្មភាពនេះ។
គ្រោះថ្នាក់ .btn-danger បង្ហាញពីសកម្មភាពគ្រោះថ្នាក់ ឬសក្តានុពលអវិជ្ជមាន

ប៊ូតុងសម្រាប់សកម្មភាព

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

សម្រាប់យុថ្កានិងទម្រង់

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

ចំណាំ៖ ប៊ូតុងទាំងអស់ត្រូវតែរួមបញ្ចូល .btnថ្នាក់។ រចនាប័ទ្មប៊ូតុងគួរតែត្រូវបានអនុវត្ត <button>និង <a>ធាតុសម្រាប់ភាពស៊ីសង្វាក់គ្នា។

ទំហំច្រើន។

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

សកម្មភាពបឋម សកម្មភាព

សកម្មភាពបឋម សកម្មភាព

រដ្ឋពិការ

សម្រាប់ប៊ូតុងបិទ ប្រើ .btn-disabledសម្រាប់តំណភ្ជាប់ និង :disabledសម្រាប់ <button>ធាតុ។

សកម្មភាពបឋម សកម្មភាព

ភាពឆបគ្នារបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត

នៅក្នុង IE9 យើងទម្លាក់ជម្រាលនៅលើប៊ូតុងទាំងអស់ដើម្បីពេញចិត្តនៃជ្រុងមូល ព្រោះ IE9 មិនច្រឹបជម្រាលផ្ទៃខាងក្រោយទៅជ្រុង។

ពាក់ព័ន្ធ IE9 បន្ថែម button​ធាតុ​ដែល​បាន​បិទ ដោយ​បង្ហាញ​អត្ថបទ​ពណ៌​ប្រផេះ​ជាមួយ​នឹង​ស្រមោល​អត្ថបទ​ដ៏​អាក្រក់—ជា​អកុសល យើង​មិន​អាច​ជួសជុល​វា​បាន​ទេ។


ព្រឺក្បាល! ថ្នាក់រូបតំណាងត្រូវបានបន្ទរតាមរយៈ CSS :after។ នៅ​ក្នុង​ឯកសារ យើង​បង្ហាញ​ពណ៌​ផ្ទៃ​ខាង​ក្រោយ​ពណ៌​ក្រហម​ស្រាល​នៅ​លើ​កណ្ដុរ ដើម្បី​រំលេច​ទំហំ​រូបតំណាង។

សាងសង់ជា sprite

ជំនួសឱ្យការធ្វើឱ្យរូបតំណាងនីមួយៗក្លាយជាសំណើបន្ថែម យើងបានចងក្រងពួកវាទៅជា sprite ដែលជាបណ្តុំនៃរូបភាពនៅក្នុងឯកសារមួយដែលប្រើ CSS ដើម្បីដាក់រូបភាពជាមួយ background-position. នេះគឺជាវិធីសាស្រ្តដូចគ្នាដែលយើងប្រើនៅលើ Twitter.com ហើយវាដំណើរការល្អសម្រាប់យើង។

ថ្នាក់រូបតំណាងទាំងអស់ត្រូវបានបុព្វបទជាមួយ .icon-សម្រាប់ការកំណត់ឈ្មោះ និងវិសាលភាពត្រឹមត្រូវ ដូចជាសមាសធាតុផ្សេងទៀតរបស់យើង។ វានឹងជួយជៀសវាងការប៉ះទង្គិចជាមួយឧបករណ៍ផ្សេងទៀត។

Glyphicons បានផ្តល់ឱ្យយើងនូវការប្រើប្រាស់ Halflings ដែលបានកំណត់នៅក្នុងប្រអប់ឧបករណ៍ប្រភពបើកចំហរបស់យើង ដរាបណាយើងផ្តល់តំណ និងឥណទាននៅទីនេះក្នុងឯកសារ។ សូមពិចារណាធ្វើដូចគ្នានៅក្នុងគម្រោងរបស់អ្នក។

របៀបប្រើ

ជាមួយ v2.0.0 យើងបានជ្រើសរើសប្រើ <i>ស្លាកសម្រាប់រូបតំណាងទាំងអស់របស់យើង ប៉ុន្តែពួកវាមិនមានថ្នាក់ករណីទេ មានតែបុព្វបទដែលបានចែករំលែកប៉ុណ្ណោះ។ ដើម្បីប្រើ សូមដាក់កូដខាងក្រោមនៅគ្រប់ទីកន្លែង៖

  1. <i class = "icon-search" ></i>

វាក៏មានរចនាប័ទ្មដែលអាចរកបានសម្រាប់រូបតំណាងដាក់បញ្ច្រាស (ពណ៌ស) ដែលរៀបចំរួចរាល់ជាមួយនឹងថ្នាក់បន្ថែមមួយ៖

  1. <i class = "icon-search icon-white" ></i>

មាន 120 ថ្នាក់ដែលត្រូវជ្រើសរើសសម្រាប់រូបតំណាងរបស់អ្នក។ គ្រាន់​តែ​បន្ថែម <i>​ស្លាក​ជាមួយ​ថ្នាក់​ដែល​ត្រឹមត្រូវ​ហើយ​អ្នក​បាន​កំណត់​។ អ្នកអាចស្វែងរកបញ្ជីពេញលេញនៅក្នុង sprites.less ឬនៅទីនេះក្នុងឯកសារនេះ។

ករណីប្រើប្រាស់

រូបតំណាងគឺអស្ចារ្យណាស់ ប៉ុន្តែតើកន្លែងណានឹងប្រើវា? នេះគឺជាគំនិតមួយចំនួន៖

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

សំខាន់ កន្លែងណាដែលអ្នកអាចដាក់ <i>ស្លាក អ្នកអាចដាក់រូបតំណាងបាន។

ឧទាហរណ៍

ប្រើពួកវានៅក្នុងប៊ូតុង ក្រុមប៊ូតុងសម្រាប់របារឧបករណ៍ ការរុករក ឬការបញ្ចូលទម្រង់ដែលបានភ្ជាប់ជាមុន។