Etiam porta sem malesuada magna mollis euismod ។ Maecenas faucibus mollis interdum ។ Morbi leo risus, porta ac consectetur ac, vestibulum និង eros ។
Bootstrap គឺជាកញ្ចប់ឧបករណ៍ពី Twitter ដែលត្រូវបានរចនាឡើងដើម្បីចាប់ផ្តើមការអភិវឌ្ឍន៍កម្មវិធី និងគេហទំព័រ។
វារួមបញ្ចូលមូលដ្ឋាន CSS និង HTML សម្រាប់វាយអក្សរ ទម្រង់ ប៊ូតុង តារាង ក្រឡាចត្រង្គ រុករក និងច្រើនទៀត។
ការដាស់តឿន Nerd៖ Bootstrap ត្រូវ បានបង្កើតឡើងដោយ Less ហើយត្រូវបានរចនាឡើងដើម្បីដំណើរការចេញពីច្រកទ្វារជាមួយនឹងកម្មវិធីរុករកទំនើបនៅក្នុងចិត្ត។
សម្រាប់ការចាប់ផ្តើមលឿនបំផុត និងងាយស្រួលបំផុត គ្រាន់តែចម្លងអត្ថបទនេះទៅក្នុងគេហទំព័ររបស់អ្នក។
អ្នកគាំទ្រប្រើតិច? គ្មានបញ្ហាទេ គ្រាន់តែក្លូន repo ហើយបន្ថែមបន្ទាត់ទាំងនេះ៖
ទាញយក បំបែក ទាញ បញ្ហាឯកសារ និងច្រើនទៀតជាមួយ Bootstrap repo ផ្លូវការនៅលើ Github ។
បច្ចុប្បន្ន v1.3.0
វិស្វករនៅ Twitter បានប្រើជាប្រវត្តិសាស្ត្រស្ទើរតែគ្រប់បណ្ណាល័យដែលពួកគេធ្លាប់ស្គាល់ ដើម្បីបំពេញតម្រូវការផ្នែកខាងមុខ។ Bootstrap បានចាប់ផ្តើមជាចម្លើយចំពោះបញ្ហាប្រឈមដែលបានបង្ហាញ។ ដោយមានជំនួយពីមនុស្សអស្ចារ្យជាច្រើន Bootstrap បានរីកចម្រើនយ៉ាងខ្លាំង។
អានបន្ថែមនៅលើ dev.twitter.com ›
Bootstrap ត្រូវបានសាកល្បង និងគាំទ្រនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតទំនើបធំៗដូចជា Chrome, Safari, Internet Explorer និង Firefox ។
Bootstrap ភ្ជាប់មកជាមួយនូវ CSS ដែលបានចងក្រង មិនចងក្រង និងគំរូគំរូ។
ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមដែលបានផ្តល់ជាផ្នែកនៃ Bootstrap គឺជាក្រឡាចត្រង្គជួរឈរ 16 ទទឹង 940px ។ វាជារសជាតិនៃប្រព័ន្ធក្រឡាចត្រង្គ 960 ដ៏ពេញនិយម ប៉ុន្តែដោយគ្មានរឹម/ទ្រនាប់បន្ថែមនៅផ្នែកខាងឆ្វេង និងខាងស្តាំ។
ដូចដែលបានបង្ហាញនៅទីនេះ ប្លង់មូលដ្ឋានអាចត្រូវបានបង្កើតជាមួយ "ជួរឈរ" ពីរដែលនីមួយៗលាតសន្ធឹងលើចំនួននៃ 16 ជួរឈរគ្រឹះដែលយើងបានកំណត់ថាជាផ្នែកនៃប្រព័ន្ធក្រឡាចត្រង្គរបស់យើង។ សូមមើលឧទាហរណ៍ខាងក្រោមសម្រាប់ការប្រែប្រួលបន្ថែម។
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
លាក់មាតិការបស់អ្នក ប្រសិនបើអ្នកត្រូវតែបង្កើត .row
នៅក្នុងជួរឈរដែលមានស្រាប់។
- <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 លំនាំដើមតាមបំណង។ ជាមួយនឹងការប្ដូរតាមបំណងបន្តិច អ្នកអាចកែប្រែទំហំនៃជួរឈរ បំពង់ទឹក និងធុងដែលពួកគេស្នាក់នៅ។
អថេរដែលត្រូវការដើម្បីកែប្រែប្រព័ន្ធក្រឡាចត្រង្គដែលបច្ចុប្បន្នទាំងអស់ស្ថិតនៅក្នុង variables.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 ពីរនៅក្នុងឯកសារ variables.less របស់យើង៖ @basefont
និង @baseline
. ទីមួយគឺទំហំពុម្ពអក្សរមូលដ្ឋានដែលបានប្រើពេញមួយ ហើយទីពីរគឺកម្ពស់បន្ទាត់មូលដ្ឋាន។
យើងប្រើអថេរទាំងនោះ និងគណិតវិទ្យាមួយចំនួន ដើម្បីបង្កើតរឹម បន្ទះ និងបន្ទាត់កម្ពស់នៃប្រភេទរបស់យើង និងច្រើនទៀត។
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>
ត្រូវបានប្រើសម្រាប់ព័ត៌មានទំនាក់ទំនងសម្រាប់បុព្វបុរសដែលនៅជិតបំផុតរបស់វា ឬផ្នែកទាំងមូលនៃការងារ។ នេះគឺជាឧទាហរណ៍ពីរនៃរបៀបដែលវាអាចប្រើបាន៖
ចំណាំ៖ បន្ទាត់នីមួយៗ <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>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pimp កូដរបស់អ្នកតាមរចនាប័ទ្មជាមួយនឹងស្លាកសាមញ្ញពីរ។ ដើម្បីឱ្យកាន់តែអស្ចារ្យតាមរយៈ javascript ទម្លាក់ក្នុងបណ្ណាល័យកែកូដរបស់ Google ហើយអ្នកត្រូវបានកំណត់។
កូដ ប្លុក ឬគ្រាន់តែខ្ទាស់ក្នុងជួរ អាចត្រូវបានបង្ហាញជាមួយរចនាប័ទ្មដោយគ្រាន់តែរុំក្នុងស្លាកត្រឹមត្រូវ។ សម្រាប់ប្លុកកូដដែលលាតសន្ធឹងលើបន្ទាត់ច្រើន ប្រើ <pre>
ធាតុ។ សម្រាប់កូដក្នុងបន្ទាត់ សូមប្រើ <code>
ធាតុ។
ធាតុ | លទ្ធផល |
---|---|
<code> |
នៅក្នុងបន្ទាត់នៃអត្ថបទដូចនេះ លេខកូដរុំរបស់អ្នកនឹងមើលទៅដូច <html> ធាតុនេះ។ |
<pre> |
<div> <h1>ក្បាល</h1> <p>មានអ្វីមួយនៅទីនេះ...</p> </div> ចំណាំ៖ ត្រូវប្រាកដថារក្សាកូដនៅក្នុង |
<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>
សម្រាប់តារាងដែលទាមទារទិន្នន័យបន្ថែមក្នុងចន្លោះកាន់តែតឹង សូមប្រើរសជាតិខាប់ដែលកាត់បន្ថយចន្លោះពាក់កណ្តាល។ វាក៏អាចត្រូវបានប្រើដោយភ្ជាប់ជាមួយស៊ុម និងឆ្នូតសេះបង្កង់ដែរ ដូចជារចនាប័ទ្មតារាងលំនាំដើម។
# | ឈ្មោះដំបូង | នាមត្រកូល | ភាសា |
---|---|---|---|
១ | ខ្លះ | មួយ។ | ភាសាអង់គ្លេស |
២ | ចូ | ប្រាំមួយកញ្ចប់ | ភាសាអង់គ្លេស |
៣ | ស្ទូ | ធ្មេញ | កូដ |
ធ្វើឱ្យតុរបស់អ្នកមើលទៅរលោងបន្តិចដោយបង្គត់ជ្រុងរបស់វា និងបន្ថែមស៊ុមនៅគ្រប់ជ្រុងទាំងអស់។
# | ឈ្មោះដំបូង | នាមត្រកូល | ភាសា |
---|---|---|---|
១ | ខ្លះ | មួយ។ | ភាសាអង់គ្លេស |
២ | ចូ | ប្រាំមួយកញ្ចប់ | ភាសាអង់គ្លេស |
៣ | ស្ទូ | ធ្មេញ | កូដ |
- <table class = "bordered-table" >
- ...
- </table>
ទទួលបានភាពស្រើបស្រាលជាមួយតុរបស់អ្នកដោយបន្ថែមការឆ្នូតសេះបង្កង់ - គ្រាន់តែបន្ថែម .zebra-striped
ថ្នាក់។
# | ឈ្មោះដំបូង | នាមត្រកូល | ភាសា |
---|---|---|---|
១ | ខ្លះ | មួយ។ | ភាសាអង់គ្លេស |
២ | ចូ | ប្រាំមួយកញ្ចប់ | ភាសាអង់គ្លេស |
៣ | ស្ទូ | ធ្មេញ | កូដ |
លាតសន្ធឹង 4 ជួរ | |||
លាតសន្ធឹង 2 ជួរ | លាតសន្ធឹង 2 ជួរ |
ចំណាំ៖ Zebra-striping គឺជាការពង្រឹងរីកចម្រើនដែលមិនមានសម្រាប់កម្មវិធីរុករកចាស់ៗដូចជា IE8 និងខាងក្រោម។
- <table class = "zebra-striped" >
- ...
- </table>
ដោយលើកយកឧទាហរណ៍ពីមុន យើងធ្វើឱ្យប្រសើរឡើងនូវអត្ថប្រយោជន៍នៃតារាងរបស់យើងដោយផ្តល់នូវមុខងារតម្រៀបតាមរយៈ jQuery និង កម្មវិធីជំនួយ Tablesorter ។ ចុចបឋមកថានៃជួរឈរណាមួយដើម្បីផ្លាស់ប្តូរការតម្រៀប។
# | ឈ្មោះដំបូង | នាមត្រកូល | ភាសា |
---|---|---|---|
២ | ចូ | ប្រាំមួយកញ្ចប់ | ភាសាអង់គ្លេស |
៣ | ស្ទូ | ធ្មេញ | កូដ |
១ | របស់អ្នក។ | មួយ។ | ភាសាអង់គ្លេស |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( មុខងារ () {
- $ ( "table #sortTableExample" ) ។ tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
ទម្រង់ទាំងអស់ត្រូវបានផ្តល់រចនាប័ទ្មលំនាំដើមដើម្បីបង្ហាញពួកវាតាមរបៀបដែលអាចអានបាន និងអាចធ្វើមាត្រដ្ឋានបាន។ រចនាប័ទ្មត្រូវបានផ្តល់ជូនសម្រាប់ការបញ្ចូលអត្ថបទ បញ្ជីជ្រើសរើស តំបន់អត្ថបទ ប៊ូតុងមូល និងប្រអប់ធីក និងប៊ូតុង។
បន្ថែម .form-stacked
ទៅ HTML នៃទម្រង់របស់អ្នក ហើយអ្នកនឹងមានស្លាកនៅលើកំពូលនៃវាលរបស់ពួកគេ ជំនួសឱ្យនៅខាងឆ្វេងរបស់វា។ វាដំណើរការល្អប្រសិនបើទម្រង់របស់អ្នកខ្លី ឬអ្នកមានជួរបញ្ចូលពីរសម្រាប់ទម្រង់ធ្ងន់ជាង។
ប្ដូរទម្រង់បែបបទ ឬ ទទឹងណាមួយតាមបំណង input
ដោយ បន្ថែមថ្នាក់មួយចំនួនទៅការសម្គាល់របស់អ្នក។select
textarea
គិតត្រឹម v1.3.0 យើងបានបន្ថែមថ្នាក់ទំហំផ្អែកលើក្រឡាចត្រង្គសម្រាប់ធាតុទម្រង់។ សូមប្រើវានៅលើថ្នាក់ , , etc ដែលមានស្រាប់ ។.mini
.small
ក្នុងនាមជាអនុសញ្ញា ប៊ូតុងត្រូវបានប្រើសម្រាប់សកម្មភាព ខណៈពេលដែលតំណភ្ជាប់ត្រូវបានប្រើសម្រាប់វត្ថុ។ ឧទាហរណ៍ "ទាញយក" អាចជាប៊ូតុងមួយ ហើយ "សកម្មភាពថ្មីៗ" អាចជាតំណ។
ប៊ូតុងទាំងអស់លំនាំដើមទៅជារចនាប័ទ្មពណ៌ប្រផេះស្រាល ប៉ុន្តែថ្នាក់មុខងារមួយចំនួនអាចត្រូវបានអនុវត្តសម្រាប់រចនាប័ទ្មពណ៌ផ្សេងគ្នា។ ថ្នាក់ទាំងនេះរួមមាន ថ្នាក់ពណ៌ខៀវ .primary
ថ្នាក់ពណ៌ខៀវស្រាល .info
ថ្នាក់ពណ៌បៃតង .success
និងថ្នាក់ក្រហម .danger
។
រចនាប័ទ្មប៊ូតុងអាចត្រូវបានអនុវត្តទៅអ្វីទាំងអស់ជាមួយនឹង .btn
ការអនុវត្ត។ ជាធម្មតា អ្នកនឹងចង់អនុវត្តទាំងនេះសម្រាប់តែ <a>
, <button>
និងជ្រើសរើស <input>
ធាតុប៉ុណ្ណោះ។ នេះជារបៀបដែលវាមើលទៅ៖
ចង់បានប៊ូតុងធំ ឬតូចជាងនេះទេ? មាននៅវា!
សម្រាប់ប៊ូតុងដែលមិនសកម្ម ឬត្រូវបានបិទដោយកម្មវិធីសម្រាប់ហេតុផលមួយ ឬមួយផ្សេងទៀត សូមប្រើស្ថានភាពបិទ។ នោះគឺ .disabled
សម្រាប់តំណភ្ជាប់ និង :disabled
សម្រាប់ <button>
ធាតុ។
.alert-message
សារមួយបន្ទាត់សម្រាប់គូសបញ្ជាក់ពីការបរាជ័យ ការបរាជ័យដែលអាចកើតមាន ឬជោគជ័យនៃសកម្មភាព។ មានប្រយោជន៍ជាពិសេសសម្រាប់ទម្រង់។
- <div class = "ការព្រមានសារព្រមាន" >
- <a class="close" href="#"> × </a> _ _ _ _ _
- <p><strong> បរិសុទ្ធ guacamole! ពិនិត្យមើលខ្លួនឯង ឱ្យ បានល្អបំផុត អ្នកមើលទៅមិនល្អពេកទេ។ </p>
- </div>
.alert-message.block-message
សម្រាប់សារដែលទាមទារការពន្យល់បន្តិច យើងមានការជូនដំណឹងរចនាប័ទ្មកថាខណ្ឌ។ ទាំងនេះគឺល្អឥតខ្ចោះសម្រាប់ការផុសសារកំហុសយូរជាងនេះ ព្រមានអ្នកប្រើប្រាស់អំពីសកម្មភាពដែលមិនទាន់សម្រេច ឬគ្រាន់តែបង្ហាញព័ត៌មានសម្រាប់ការសង្កត់ធ្ងន់បន្ថែមទៀតនៅលើទំព័រ។
- <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>
ម៉ូឌុល—ប្រអប់ ឬប្រអប់ពន្លឺ—គឺល្អសម្រាប់សកម្មភាពបរិបទក្នុងស្ថានភាពដែលមានសារៈសំខាន់ដែលបរិបទផ្ទៃខាងក្រោយត្រូវបានរក្សា។
រាងកាយល្អមួយ…
Twipsies មានប្រយោជន៍ខ្លាំងណាស់សម្រាប់ការជួយអ្នកប្រើប្រាស់ដែលយល់ច្រលំ និងចង្អុលពួកគេក្នុងទិសដៅត្រឹមត្រូវ។
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 ដើម្បីផ្តល់ព័ត៌មានអត្ថបទរងទៅទំព័រមួយដោយមិនប៉ះពាល់ដល់ប្លង់។
Etiam porta sem malesuada magna mollis euismod ។ Maecenas faucibus mollis interdum ។ Morbi leo risus, porta ac consectetur ac, vestibulum និង eros ។
ការរួមបញ្ចូល javascript ជាមួយបណ្ណាល័យ Bootstrap គឺងាយស្រួលណាស់។ ខាងក្រោមនេះ យើងនិយាយអំពីមូលដ្ឋានគ្រឹះ និងផ្ដល់ឱ្យអ្នកនូវកម្មវិធីជំនួយដ៏អស្ចារ្យមួយចំនួន ដើម្បីឱ្យអ្នកចាប់ផ្ដើម!
នាំយកសមាសធាតុចម្បងមួយចំនួនរបស់ Bootstrap មកជាមួយនឹងកម្មវិធីជំនួយផ្ទាល់ខ្លួនថ្មីដែលដំណើរការជាមួយ jQuery និង Ender ។ យើងលើកទឹកចិត្តឱ្យអ្នកពង្រីក និងកែប្រែពួកវាឱ្យសមនឹងតម្រូវការអភិវឌ្ឍន៍ជាក់លាក់របស់អ្នក។
ឯកសារ | ការពិពណ៌នា |
---|---|
bootstrap-modal.js | កម្មវិធីជំនួយ Modal របស់យើងគឺជាកម្មវិធីជំនួយ Js ដ៏ ស្ដើងបំផុត! យើងបានយកចិត្តទុកដាក់ជាពិសេសដើម្បីរួមបញ្ចូលតែមុខងារទទេដែលយើងត្រូវការនៅ twitter ។ |
bootstrap-alerts.js | កម្មវិធីជំនួយការជូនដំណឹងគឺជាថ្នាក់តូចមួយសម្រាប់បន្ថែមមុខងារជិតស្និទ្ធទៅនឹងការជូនដំណឹង។ |
bootstrap-dropdown.js | កម្មវិធីជំនួយនេះគឺសម្រាប់បន្ថែមអន្តរកម្មទម្លាក់ចុះទៅរបារខាងលើ bootstrap ឬការរុករកផ្ទាំង។ |
bootstrap-scrollspy.js | កម្មវិធីជំនួយ ScrollSpy គឺសម្រាប់បន្ថែមការអាប់ដេតដោយស្វ័យប្រវត្តិ nav ដោយផ្អែកលើទីតាំងរមូរទៅកាន់របារ bootstrap topbar។ |
bootstrap-buttons.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 នៅក្នុងគម្រោងរបស់អ្នក! |
ទេ!Bootstrap ត្រូវបានរចនាឡើងជាបណ្ណាល័យ CSS ដំបូងបង្អស់។ javascript នេះផ្តល់នូវស្រទាប់អន្តរកម្មជាមូលដ្ឋាននៅផ្នែកខាងលើនៃរចនាប័ទ្មដែលបានរួមបញ្ចូល។
ទោះយ៉ាងណាក៏ដោយ សម្រាប់អ្នកដែលត្រូវការ javascript យើងបានផ្តល់កម្មវិធីជំនួយខាងលើ ដើម្បីជួយអ្នកឱ្យយល់ពីរបៀបរួមបញ្ចូល Bootstrap ជាមួយ javascript និងផ្តល់ឱ្យអ្នកនូវជម្រើសដ៏រហ័ស និងស្រាលសម្រាប់មុខងារជាមូលដ្ឋានភ្លាមៗ។
សម្រាប់ព័ត៌មានបន្ថែម និងដើម្បីមើលការបង្ហាញបន្តផ្ទាល់ សូមមើល ទំព័រឯកសារកម្មវិធីជំនួយ របស់យើង ។
Bootstrap ត្រូវបានបង្កើតឡើងពី Preboot ដែលជាកញ្ចប់ប្រភពបើកចំហនៃ mixins និង variables ដែលត្រូវប្រើជាមួយ 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 ។
- // នេះជាមតិ
- // នេះក៏ជាមតិផងដែរ*/
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 នៅពេលដំឡើងរួច គ្រាន់តែដំណើរការ លើសពីនេះ ប្រសិនបើអ្នកបាន ដំ��ើង watchr អ្នកអាចដំណើរការ |
Javascript | ទាញយក Less.js ចុងក្រោយបង្អស់ ហើយបញ្ចូលផ្លូវទៅកាន់វា (និង Bootstrap) នៅក្នុង
ដើម្បីចងក្រងឯកសារ .less ឡើងវិញ គ្រាន់តែរក្សាទុកពួកវា ហើយផ្ទុកទំព័ររបស់អ្នកឡើងវិញ។ Less.js ចងក្រងពួកវា ហើយរក្សាទុកពួកវានៅក្នុងកន្លែងផ្ទុកក្នុងតំបន់។ |
បន្ទាត់ពាក្យបញ្ជា | ប្រសិនបើអ្នកបានដំឡើងឧបករណ៍បន្ទាត់ពាក្យបញ្ជាតិចជាងមុនរួចហើយ សូមដំណើរការពាក្យបញ្ជាខាងក្រោម៖ $ lessc ./lib/bootstrap.less > bootstrap.css ត្រូវប្រាកដថាបញ្ចូលទៅ |
កម្មវិធី Mac តិច | កម្មវិធី Mac ដែលមិនផ្លូវការ មើលថតឯកសារ .less និងចងក្រងកូដទៅជាឯកសារមូលដ្ឋានបន្ទាប់ពីការរក្សាទុករាល់ឯកសារ .less ដែលបានមើល។ ប្រសិនបើអ្នកចូលចិត្ត អ្នកអាចបិទបើកចំណូលចិត្តនៅក្នុងកម្មវិធីសម្រាប់ការបង្រួមតូចដោយស្វ័យប្រវត្តិ ហើយថតឯកសារណាដែលចងក្រងនឹងបញ្ចប់។ |