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 ។
ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមដែលបានផ្តល់ជាផ្នែកនៃ 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>
ឋានានុក្រមវាយអក្សរស្តង់ដារសម្រាប់រៀបចំរចនាសម្ព័ន្ធគេហទំព័ររបស់អ្នក។
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
ត្រូវបានប្រើសម្រាប់—អ្នកទាយវា!—អាសយដ្ឋាន។ នេះជារបៀបដែលវាមើលទៅ៖
ចំណាំ៖ បន្ទាត់នីមួយៗ 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>
<ul.unstyled>
<ol>
dl
<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>
ដោយលើកយកឧទាហរណ៍ពីមុន យើងធ្វើឱ្យប្រសើរឡើងនូវអត្ថប្រយោជន៍នៃតារាងរបស់យើងដោយផ្តល់នូវមុខងារតម្រៀបតាមរយៈ 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>
ទម្រង់ទាំងអស់ត្រូវបានផ្តល់រចនាប័ទ្មលំនាំដើមដើម្បីបង្ហាញពួកវាតាមរបៀបដែលអាចអានបាន និងអាចធ្វើមាត្រដ្ឋានបាន។ រចនាប័ទ្មត្រូវបានផ្តល់ជូនសម្រាប់ការបញ្ចូលអត្ថបទ បញ្ជីជ្រើសរើស តំបន់អត្ថបទ ប៊ូតុងមូល និងប្រអប់ធីក និងប៊ូតុង។
បន្ថែម .form-stacked
ទៅ HTML នៃទម្រង់របស់អ្នក ហើយអ្នកនឹងមានស្លាកនៅលើកំពូលនៃវាលរបស់ពួកគេ ជំនួសឱ្យនៅខាងឆ្វេងរបស់វា។ វាដំណើរការល្អប្រសិនបើទម្រង់របស់អ្នកខ្លី ឬអ្នកមានជួរបញ្ចូលពីរសម្រាប់ទម្រង់ធ្ងន់ជាង។
ក្នុងនាមជាអនុសញ្ញា ប៊ូតុងត្រូវបានប្រើសម្រាប់សកម្មភាព ខណៈពេលដែលតំណភ្ជាប់ត្រូវបានប្រើសម្រាប់វត្ថុ។ ឧទាហរណ៍ "ទាញយក" អាចជាប៊ូតុងមួយ ហើយ "សកម្មភាពថ្មីៗ" អាចជាតំណ។
ប៊ូតុងទាំងអស់លំនាំដើមទៅជារចនាប័ទ្មពណ៌ប្រផេះស្រាល ប៉ុន្តែ .primary
ថ្នាក់ពណ៌ខៀវអាចប្រើបាន។ លើសពីនេះ ការរំកិលស្ទីលផ្ទាល់ខ្លួនរបស់អ្នកគឺងាយស្រួល។
រចនាប័ទ្មប៊ូតុងអាចត្រូវបានអនុវត្តទៅអ្វីទាំងអស់ជាមួយនឹង .btn
ការអនុវត្ត។ ជាធម្មតា អ្នកនឹងចង់អនុវត្តទាំងនេះសម្រាប់តែ a
, button
និងជ្រើសរើស input
ធាតុប៉ុណ្ណោះ។ នេះជារបៀបដែលវាមើលទៅ៖
ចង់បានប៊ូតុងធំ ឬតូចជាងនេះទេ? មាននៅវា!
សម្រាប់ប៊ូតុងដែលមិនសកម្ម ឬត្រូវបានបិទដោយកម្មវិធីសម្រាប់ហេតុផលមួយ ឬមួយផ្សេងទៀត សូមប្រើស្ថានភាពបិទ។ នោះគឺ .disabled
សម្រាប់តំណភ្ជាប់ និង :disabled
សម្រាប់ button
ធាតុ។
សារមួយបន្ទាត់សម្រាប់គូសបញ្ជាក់ពីការបរាជ័យ ការបរាជ័យដែលអាចកើតមាន ឬជោគជ័យនៃសកម្មភាព។ មានប្រយោជន៍ជាពិសេសសម្រាប់ទម្រង់។
សម្រាប់សារដែលទាមទារការពន្យល់បន្តិច យើងមានការជូនដំណឹងរចនាប័ទ្មកថាខណ្ឌ។ ទាំងនេះគឺល្អឥតខ្ចោះសម្រាប់ការផុសសារកំហុសយូរជាងនេះ ព្រមានអ្នកប្រើប្រាស់អំពីសកម្មភាពដែលមិនទាន់សម្រេច ឬគ្រាន់តែបង្ហាញព័ត៌មានសម្រាប់ការសង្កត់ធ្ងន់បន្ថែមទៀតនៅលើទំព័រ។
ម៉ូឌុល—ប្រអប់ ឬប្រអប់ពន្លឺ—គឺល្អសម្រាប់សកម្មភាពបរិបទក្នុងស្ថានភាពដែលមានសារៈសំខាន់ដែលបរិបទផ្ទៃខាងក្រោយត្រូវបានរក្សា។
រាងស្អាតមួយ...
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 ។
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 ។
- // នេះជាមតិ
- // នេះក៏ជាមតិផងដែរ*/
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 )) ! សំខាន់ ;
- }