នៅលើកំពូលនៃរន្ទា ធាតុ 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 ។
ធាតុ | ការប្រើប្រាស់ | ស្រេចចិត្ត |
---|---|---|
<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>
ស្លាកអាចត្រូវបានប្រើ:
អក្សរកាត់ត្រូវបានកំណត់រចនាប័ទ្មដោយអក្សរធំ និងស៊ុមបាតដែលមានចំនុចស្រាល។ ពួកវាក៏មានទស្សន៍ទ្រនិចជំនួយនៅលើដាក់កណ្ដុរ ដូច្នេះអ្នកប្រើប្រាស់មានការចង្អុលបង្ហាញបន្ថែមថា អ្វីមួយដែលនឹងត្រូវបានបង្ហាញនៅពេលដាក់កណ្ដុរ។
HTML គឺជារឿងដ៏ល្អបំផុតចាប់តាំងពីនំប៉័ងចំណិត។
អក្សរកាត់នៃពាក្យ attribute គឺ attr ។
ធាតុ | ការប្រើប្រាស់ | ស្រេចចិត្ត |
---|---|---|
<blockquote> |
ធាតុកម្រិតប្លុកសម្រាប់ការដកស្រង់ខ្លឹមសារពីប្រភពផ្សេងទៀត។ | បន្ថែម .pull-left និង .pull-right ថ្នាក់សម្រាប់ជម្រើសអណ្តែត |
<small> |
ធាតុស្រេចចិត្តសម្រាប់ការបន្ថែមការដកស្រង់ដែលប្រឈមមុខនឹងអ្នកប្រើប្រាស់ ជាទូទៅអ្នកនិពន្ធដែលមានចំណងជើងការងារ | ដាក់ <cite> ជុំវិញចំណងជើង ឬឈ្មោះប្រភព |
ដើម្បីរួមបញ្ចូល blockquote រុំ <blockquote>
ជុំវិញ HTML ណាមួយ ជាសម្រង់។ សម្រាប់សម្រង់ត្រង់យើងសូមណែនាំមួយ <p>
.
រួមបញ្ចូលធាតុស្រេចចិត្ត <small>
ដើម្បីដកស្រង់ប្រភពរបស់អ្នក ហើយអ្នកនឹងទទួលបាន em dash —
មុនពេលវាសម្រាប់គោលបំណងរចនាប័ទ្ម។
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit ។ ចំនួនគត់ posuere erat a ante venenatis ។ </p>
- <small> អ្នកល្បីល្បាញ </small>
- </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>
<ul class="unstyled">
<ol>
<dl>
រុំផ្នែកតូចៗនៃកូដក្នុងជួរជាមួយ <code>
.
- ឧទាហរណ៍ <code> section </ code > គួរតែ ត្រូវ បាន រុំ ជាជួរ ។
ប្រើ <pre>
សម្រាប់បន្ទាត់កូដច្រើន។ ត្រូវប្រាកដថាគេចចេញពីតង្កៀបមុំណាមួយនៅក្នុងកូដសម្រាប់ការបង្ហាញត្រឹមត្រូវ។
<p>អត្ថបទគំរូនៅទីនេះ...</p>
- <មុន>
- <p>អត្ថបទគំរូនៅទីនេះ...</p>
- </pre>
ចំណាំ៖ ត្រូវប្រាកដថារក្សាកូដនៅក្នុង <pre>
ស្លាកឱ្យជិតទៅខាងឆ្វេងតាមដែលអាចធ្វើទៅបាន។ វានឹងបង្ហាញផ្ទាំងទាំងអស់។
អ្នកអាចបន្ថែម .pre-scrollable
ថ្នាក់ជាជម្រើសដែលនឹងកំណត់កម្ពស់អតិបរមា 350px និងផ្តល់នូវរបាររមូរអ័ក្ស y ។
យក <pre>
ធាតុដូចគ្នា ហើយបន្ថែមថ្នាក់ជាជម្រើសពីរសម្រាប់ការបង្ហាញដែលប្រសើរឡើង។
- <p> អត្ថបទគំរូនៅទីនេះ... </p>
- <pre class = "prettyprint
- បន្ទាត់" >
- <p>អត្ថបទគំរូនៅទីនេះ...</p>
- </pre>
ទាញយក google-code-prettify ហើយមើល readme សម្រាប់របៀបប្រើ។
ស្លាក | ការពិពណ៌នា |
---|---|
<table> |
ធាតុរុំសម្រាប់បង្ហាញទិន្នន័យក្នុងទម្រង់តារាង |
<thead> |
ធាតុកុងតឺន័រសម្រាប់ជួរដេកក្បាលតារាង ( <tr> ) ដើម្បីដាក់ស្លាកជួរឈរតារាង |
<tbody> |
ធាតុកុងតឺន័រសម្រាប់ជួរតារាង ( <tr> ) នៅក្នុងតួតារាង |
<tr> |
ធាតុកុងតឺន័រសម្រាប់សំណុំនៃក្រឡាតារាង ( <td> ឬ <th> ) ដែលបង្ហាញនៅលើជួរតែមួយ |
<td> |
ក្រឡាតារាងលំនាំដើម |
<th> |
ក្រឡាតារាងពិសេសសម្រាប់ជួរឈរ (ឬជួរដេកអាស្រ័យលើវិសាលភាព និងការដាក់) ស្លាក ត្រូវតែប្រើក្នុង a <thead> |
<caption> |
ការពិពណ៌នា ឬសេចក្តីសង្ខេបនៃអ្វីដែលតារាងមាន ជាពិសេសមានប្រយោជន៍សម្រាប់អ្នកអានអេក្រង់ |
- <តារាង>
- <ក្បាល>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
ឈ្មោះ | ថ្នាក់ | ការពិពណ៌នា |
---|---|---|
លំនាំដើម | គ្មាន | គ្មានរចនាប័ទ្មទេ គ្រាន់តែជួរឈរ និងជួរដេក |
មូលដ្ឋាន | .table |
មានតែបន្ទាត់ផ្ដេករវាងជួរដេកប៉ុណ្ណោះ។ |
មានព្រំប្រទល់ | .table-bordered |
បង្គត់ជ្រុង និងបន្ថែមស៊ុមខាងក្រៅ |
សេះបង្កង់-ឆ្នូត | .table-striped |
បន្ថែមពណ៌ផ្ទៃខាងក្រោយពណ៌ប្រផេះស្រាលទៅជួរសេស (1, 3, 5 ។ល។) |
ខាប់ | .table-condensed |
កាត់បន្ទះបញ្ឈរជាពាក់កណ្តាល ពី 8px ទៅ 4px ក្នុងផ្នែកទាំងអស់ td និង th ធាតុ |
តារាងត្រូវបានកំណត់រចនាប័ទ្មដោយស្វ័យប្រវត្តិដោយមានស៊ុមតែមួយចំនួនប៉ុណ្ណោះ ដើម្បីធានាថាអាចអានបាន និងរក្សារចនាសម្ព័ន្ធ។ ជាមួយនឹង 2.0 .table
ថ្នាក់ត្រូវបានទាមទារ។
- <table class = "table" >
- …
- </table>
# | ឈ្មោះដំបូង | នាមត្រកូល | ភាសា |
---|---|---|---|
១ | ម៉ាក | អូតូ | CSS |
២ | យ៉ាកុប | ថនតុន | Javascript |
៣ | ស្ទូ | ធ្មេញ | HTML |
ទទួលបានភាពស្រើបស្រាលជាមួយតុរបស់អ្នកដោយបន្ថែមការឆ្នូតសេះបង្កង់ - គ្រាន់តែបន្ថែម .table-striped
ថ្នាក់។
ចំណាំ៖ តារាងឆ្នូតប្រើ :nth-child
ឧបករណ៍ជ្រើសរើស CSS ហើយមិនមាននៅក្នុង IE7-IE8 ទេ។
- <table class = "table table-striped" >
- …
- </table>
# | ឈ្មោះដំបូង | នាមត្រកូល | ភាសា |
---|---|---|---|
១ | ម៉ាក | អូតូ | CSS |
២ | យ៉ាកុប | ថនតុន | Javascript |
៣ | ស្ទូ | ធ្មេញ | HTML |
បន្ថែមស៊ុមជុំវិញតុទាំងមូល និងជ្រុងមូលសម្រាប់គោលបំណងសាភ័ណភ្ព។
- <table class = "table table-bordered" >
- …
- </table>
# | ឈ្មោះដំបូង | នាមត្រកូល | ភាសា |
---|---|---|---|
១ | លោក Mark Otto | CSS | |
២ | យ៉ាកុប | ថនតុន | Javascript |
៣ | ស្ទូ | ធ្មេញ | |
៣ | ប្រូសេហ្វ | ស្តាលីន | HTML |
ធ្វើឱ្យតារាងរបស់អ្នកកាន់តែបង្រួមដោយបន្ថែម .table-condensed
ថ្នាក់ដើម្បីកាត់ក្រឡាតារាងជាពាក់កណ្តាល (ពី 8px ដល់ 4px) ។
- <table class = "table table-condensed" >
- …
- </table>
# | ឈ្មោះដំបូង | នាមត្រកូល | ភាសា |
---|---|---|---|
១ | ម៉ាក | អូតូ | CSS |
២ | យ៉ាកុប | ថនតុន | Javascript |
៣ | ស្ទូ | ធ្មេញ | HTML |
មានអារម្មណ៍សេរីក្នុងការរួមបញ្ចូលគ្នានៃថ្នាក់តារាងណាមួយ ដើម្បីសម្រេចបាននូវរូបរាងផ្សេងគ្នាដោយប្រើប្រាស់ថ្នាក់ដែលមាន។
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
# | ឈ្មោះដំបូង | នាមត្រកូល | ភាសា |
---|---|---|---|
១ | ម៉ាក | អូតូ | CSS |
២ | យ៉ាកុប | ថនតុន | Javascript |
៣ | ស្ទូ | ធ្មេញ | HTML |
៤ | ប្រូសេហ្វ | ស្តាលីន | HTML |
ផ្នែកដ៏ល្អបំផុតអំពីទម្រង់នៅក្នុង Bootstrap គឺថារាល់ធាតុចូល និងការគ្រប់គ្រងរបស់អ្នកមើលទៅអស្ចារ្យមិនថាអ្នកបង្កើតពួកវានៅក្នុងការសម្គាល់របស់អ្នកដោយរបៀបណានោះទេ។ មិនតម្រូវឱ្យមាន HTML ហួសហេតុនោះទេ ប៉ុន្តែយើងផ្តល់គំរូសម្រាប់អ្នកដែលត្រូវការវា។
ប្លង់ដែលស្មុគស្មាញជាងនេះមកជាមួយថ្នាក់សង្ខេប និងអាចធ្វើមាត្រដ្ឋានបានសម្រាប់រចនាប័ទ្មងាយស្រួល និងការចងព្រឹត្តិការណ៍ ដូច្នេះអ្នកត្រូវបានគ្របដណ្តប់នៅគ្រប់ជំហាន។
Bootstrap ភ្ជាប់មកជាមួយការគាំទ្រសម្រាប់ប្លង់ទម្រង់បួនប្រភេទ៖
ប្រភេទផ្សេងគ្នានៃប្លង់ទម្រង់តម្រូវឱ្យមានការផ្លាស់ប្ដូរមួយចំនួនដើម្បីសម្គាល់ ប៉ុន្តែការគ្រប់គ្រងខ្លួនឯងនៅតែមាន និងមានលក្ខណៈដូចគ្នា។
ទម្រង់របស់ Bootstrap រួមបញ្ចូលរចនាប័ទ្មសម្រាប់ការគ្រប់គ្រងទម្រង់មូលដ្ឋានទាំងអស់ដូចជា ការបញ្ចូល ផ្ទៃអត្ថបទ និងការជ្រើសរើសដែលអ្នកចង់បាន។ ប៉ុន្តែវាក៏មានភ្ជាប់មកជាមួយនូវសមាសធាតុផ្ទាល់ខ្លួនមួយចំនួនផងដែរ ដូចជាការបញ្ចូលបន្ថែម និងដែលបានបន្ថែមជាមុន និងការគាំទ្រសម្រាប់បញ្ជីប្រអប់ធីក។
រដ្ឋដូចជាកំហុស ការព្រមាន និងភាពជោគជ័យត្រូវបានរួមបញ្ចូលសម្រាប់ប្រភេទនៃការគ្រប់គ្រងទម្រង់នីមួយៗ។ រួមបញ្ចូលផងដែរគឺជារចនាប័ទ្មសម្រាប់ការគ្រប់គ្រងដែលបិទ។
Bootstrap ផ្តល់នូវការសម្គាល់ និងរចនាប័ទ្មសាមញ្ញសម្រាប់រចនាប័ទ្មបួននៃទម្រង់បណ្ដាញទូទៅ។
ឈ្មោះ | ថ្នាក់ | ការពិពណ៌នា |
---|---|---|
បញ្ឈរ (លំនាំដើម) | .form-vertical (មិនត្រូវការ) |
បានដាក់ជង់ តម្រឹមឆ្វេងស្លាកលើវត្ថុបញ្ជា |
ក្នុងជួរ | .form-inline |
ស្លាកដែលបានតម្រឹមឆ្វេង និងការគ្រប់គ្រងប្លុកក្នុងបន្ទាត់សម្រាប់រចនាប័ទ្មបង្រួម |
ស្វែងរក | .form-search |
ការបញ្ចូលអត្ថបទរាងមូលបន្ថែមសម្រាប់សោភ័ណភាពស្វែងរកធម្មតា។ |
ផ្ដេក | .form-horizontal |
អណ្តែតទៅឆ្វេង តម្រឹមស្តាំស្លាកនៅលើបន្ទាត់ដូចគ្នាជាវត្ថុបញ្ជា |
ជាមួយនឹង v2.0 យើងមានលំនាំដើមស្រាលជាងមុន និងឆ្លាតវៃជាងមុនសម្រាប់រចនាប័ទ្មទម្រង់។ គ្មានការសម្គាល់បន្ថែមទេ គ្រាន់តែការគ្រប់គ្រងទម្រង់ប៉ុណ្ណោះ។
- <form class = "ល្អ" >
- <label> ឈ្មោះស្លាក </label>
- < input type = "text" class = "span3" placeholder = "វាយអ្វីមួយ..." >
- <span class = "help-inline" > អត្ថបទជំនួយដែលពាក់ព័ន្ធ! </span>
- <label class = "checkbox" >
- <input type = "checkbox" > ពិនិត្យខ្ញុំចេញ
- </label>
- <button type = "submit" class = "btn" > បញ្ជូន </button>
- </form>
ដោយឆ្លុះបញ្ចាំងពីរចនាប័ទ្ម WebKit លំនាំដើម គ្រាន់តែបន្ថែម .form-search
សម្រាប់វាលស្វែងរករាងមូលបន្ថែម។
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > ស្វែងរក </button>
- </form>
ការបញ្ចូលគឺជាកម្រិតប្លុកដើម្បីចាប់ផ្តើម។ សម្រាប់ .form-inline
និង .form-horizontal
យើងប្រើ inline-block។
- <form class = "well form-inline" >
- < input type = "text" class = "input-small" placeholder = "Email" >
- < input type = "password" class = "input-small" placeholder = "password" >
- <button type = "submit" class = "btn" > ទៅ </button>
- </form>
ដោយបានផ្ដល់ឱ្យនូវគំរូទម្រង់ប្លង់ខាងលើ នេះជាការសម្គាល់ដែលភ្ជាប់ជាមួយនឹងការបញ្ចូល និងក្រុមត្រួតពិនិត្យដំបូង។ ថ្នាក់ .control-group
, .control-label
, និង .controls
ថ្នាក់ទាំងអស់ត្រូវបានទាមទារសម្រាប់រចនាប័ទ្ម។
- <form class = "form-horizontal" >
- <សំណុំវាល>
- <legend> អត្ថបទរឿងព្រេង </legend>
- <div class = "control-group" >
- <label class = "control-label" for = "input01" > ការបញ្ចូលអត្ថបទ </label>
- <div class = "បញ្ជា" >
- < ប្រភេទ បញ្ចូល = "អត្ថបទ" class = "បញ្ចូល-xlarge" id = "បញ្ចូល01" >
- <p class = "help-block" > គាំទ្រអត្ថបទជំនួយ </p>
- </div>
- </div>
- </fieldset>
- </form>
បង្ហាញនៅខាងឆ្វេងគឺជាការគ្រប់គ្រងទម្រង់លំនាំដើមទាំងអស់ដែលយើងគាំទ្រ។ នេះជាបញ្ជីចំណុច៖
រហូតដល់ v1.4 រចនាប័ទ្មទម្រង់លំនាំដើមរបស់ Bootstrap បានប្រើប្លង់ផ្ដេក។ ជាមួយនឹង Bootstrap 2 យើងបានដកចេញនូវឧបសគ្គនោះ ដើម្បីឱ្យមានលំនាំដើមដែលអាចធ្វើមាត្រដ្ឋានបានកាន់តែឆ្លាតជាងមុន សម្រាប់ទម្រង់ណាមួយ។
disabled
Bootstrap មានលក្ខណៈពិសេសរចនាប័ទ្មសម្រាប់ការផ្តោតអារម្មណ៍ និង រដ្ឋ ដែលគាំទ្រដោយកម្មវិធីរុករក ។ យើងដក Webkit លំនាំដើមចេញ outline
ហើយអនុវត្ត a box-shadow
នៅកន្លែងរបស់វាសម្រាប់ :focus
.
វាក៏រួមបញ្ចូលផងដែរនូវរចនាប័ទ្មសុពលភាពសម្រាប់កំហុស ការព្រមាន និងភាពជោគជ័យ។ ដើម្បីប្រើ សូមបន្ថែមថ្នាក់កំហុសទៅកន្លែងជុំវិញ .control-group
។
- <សំណុំវាល
- class = "control-group error" >
- …
- </fieldset>
ក្រុមបញ្ចូល — ជាមួយនឹងអត្ថបទបន្ថែម ឬបន្ថែមខាងមុខ — ផ្តល់នូវវិធីងាយស្រួលក្នុងការផ្តល់បរិបទបន្ថែមទៀតសម្រាប់ការបញ្ចូលរបស់អ្នក។ ឧទាហរណ៍ដ៏អស្ចារ្យរួមមានសញ្ញា @ សម្រាប់ឈ្មោះអ្នកប្រើប្រាស់ Twitter ឬ $ សម្រាប់ហិរញ្ញវត្ថុ។
រហូតដល់ v1.4, Bootstrap ទាមទារការសម្គាល់បន្ថែមជុំវិញប្រអប់ធីក និងវិទ្យុ ដើម្បីជង់ពួកវា។ ឥឡូវនេះ វាជាបញ្ហាសាមញ្ញនៃការធ្វើម្តងទៀតនូវ <label class="checkbox">
អ្វីដែលរុំ <input type="checkbox">
។
ប្រអប់ធីកក្នុងបន្ទាត់ និងវិទ្យុក៏ត្រូវបានគាំទ្រផងដែរ។ គ្រាន់តែបន្ថែម .inline
ទៅណាមួយ .checkbox
ឬ .radio
ហើយអ្នកបានបញ្ចប់។
ដើម្បីប្រើការបញ្ចូលជាមុន ឬបន្ថែមធាតុបញ្ចូលក្នុងទម្រង់ក្នុងជួរ ត្រូវប្រាកដថាដាក់ .add-on
និង input
នៅលើបន្ទាត់ដូចគ្នា ដោយគ្មានចន្លោះ។
ដើម្បីបន្ថែមអត្ថបទជំនួយសម្រាប់ការបញ្ចូលទម្រង់បែបបទរបស់អ្នក រួមបញ្ចូលអត្ថបទជំនួយក្នុងបន្ទាត់ជាមួយ <span class="help-inline">
ឬប្លុកអត្ថបទជំនួយជាមួយ <p class="help-block">
បន្ទាប់ពីធាតុបញ្ចូល។
:after
។ នៅក្នុងឯកសារ យើងបង្ហាញពណ៌ផ្ទៃខាងក្រោយពណ៌ក្រហមស្រាលនៅលើកណ្ដុរ ដើម្បីរំលេចទំហំរូបតំណាង។
ជំនួសឱ្យការធ្វើឱ្យរូបតំណាងនីមួយៗក្លាយជាសំណើបន្ថែម យើងបានចងក្រងពួកវាទៅជា sprite ដែលជាបណ្តុំនៃរូបភាពនៅក្នុងឯកសារមួយដែលប្រើ CSS ដើម្បីដាក់រូបភាពជាមួយ background-position
. នេះគឺជាវិធីសាស្រ្តដូចគ្នាដែលយើងប្រើនៅលើ Twitter.com ហើយវាដំណើរការល្អសម្រាប់យើង។
ថ្នាក់រូបតំណាងទាំងអស់ត្រូវបានបុព្វបទជាមួយ .icon-
សម្រាប់ការកំណត់ឈ្មោះ និងវិសាលភាពត្រឹមត្រូវ ដូចជាសមាសធាតុផ្សេងទៀតរបស់យើង។ វានឹងជួយជៀសវាងការប៉ះទង្គិចជាមួយឧបករណ៍ផ្សេងទៀត។
Glyphicons បានផ្តល់ឱ្យយើងនូវការប្រើប្រាស់ Halflings ដែលបានកំណត់នៅក្នុងប្រអប់ឧបករណ៍ប្រភពបើកចំហរបស់យើង ដរាបណាយើងផ្តល់តំណ និងឥណទាននៅទីនេះក្នុងឯកសារ។ សូមពិចារណាធ្វើដូចគ្នានៅក្នុងគម្រោងរបស់អ្នក។
ជាមួយនឹង v2.0.1 យើងបានជ្រើសរើសប្រើ <i>
ស្លាកសម្រាប់រូបតំណាងទាំងអស់របស់យើង ប៉ុន្តែពួកវាមិនមានថ្នាក់ករណីទេ មានតែបុព្វបទដែលបានចែករំលែកប៉ុណ្ណោះ។ ដើម្បីប្រើ សូមដាក់កូដខាងក្រោមនៅគ្រប់ទីកន្លែង៖
- <i class = "icon-search" ></i>
វាក៏មានរចនាប័ទ្មដែលអាចរកបានសម្រាប់រូបតំណាងដាក់បញ្ច្រាស (ពណ៌ស) ដែលរៀបចំរួចរាល់ជាមួយនឹងថ្នាក់បន្ថែមមួយ៖
- <i class = "icon-search icon-white" ></i>
មាន 120 ថ្នាក់ដែលត្រូវជ្រើសរើសសម្រាប់រូបតំណាងរបស់អ្នក។ គ្រាន់តែបន្ថែម <i>
ស្លាកជាមួយថ្នាក់ដែលត្រឹមត្រូវហើយអ្នកបានកំណត់។ អ្នកអាចស្វែងរកបញ្ជីពេញលេញនៅក្នុង sprites.less ឬនៅទីនេះក្នុងឯកសារនេះ។
រូបតំណាងគឺអស្ចារ្យណាស់ ប៉ុន្តែតើកន្លែងណានឹងប្រើវា? នេះគឺជាគំនិតមួយចំនួន៖
សំខាន់ កន្លែងណាដែលអ្នកអាចដាក់ <i>
ស្លាកបាន អ្នកអាចដាក់រូបតំណាងបាន។
ប្រើពួកវានៅក្នុងប៊ូតុង ក្រុមប៊ូតុងសម្រាប់របារឧបករណ៍ ការរុករក ឬការបញ្ចូលទម្រង់ដែលបានភ្ជាប់ជាមុន។