Bootstrap ត្រូវបានបង្កើតឡើងនៅលើក្រឡាចត្រង្គ 12-column ឆ្លើយតប។ យើងក៏បានរួមបញ្ចូលទាំងប្លង់ទទឹងថេរ និងលំហូរដោយផ្អែកលើប្រព័ន្ធនោះ។
Bootstrap ប្រើធាតុ HTML និងលក្ខណៈសម្បត្តិ CSS ដែលតម្រូវឱ្យប្រើប្រភេទឯកសារ HTML5 ។ ត្រូវប្រាកដថាបញ្ចូលវានៅដើមទំព័រ Bootstrapped ទាំងអស់នៅក្នុងគម្រោងរបស់អ្នក។
- <!DOCTYPE html>
- <html lang = "en" >
- ...
- </html>
នៅក្នុង ឯកសារ scaffolding.less យើងកំណត់ការបង្ហាញជាសកលជាមូលដ្ឋាន វាយអក្សរ និងរចនាប័ទ្មតំណ។ ជាពិសេស យើង៖
background-color: white;
នៅលើbody
@baseFontFamily
, @baseFontSize
, និង @baseLineHeight
គុណលក្ខណៈជាមូលដ្ឋានអក្សរពុម្ពរបស់យើង។@linkColor
និងអនុវត្តការគូសបន្ទាត់ក្រោមតំណតែប៉ុណ្ណោះ:hover
ចាប់តាំងពី Bootstrap 2 ការកំណត់ឡើងវិញ CSS ប្រពៃណីបានវិវត្តន៍ដើម្បីប្រើប្រាស់ធាតុពី Normalize.css ដែលជាគម្រោងដោយ Nicolas Gallagher ដែលផ្តល់ថាមពលដល់ HTML5 Boilerplate ផងដែរ។
ការកំណត់ឡើងវិញថ្មីនៅតែអាចត្រូវបានរកឃើញនៅក្នុង reset.less ប៉ុន្តែជាមួយនឹងធាតុជាច្រើនត្រូវបានដកចេញសម្រាប់ភាពសង្ខេប និងភាពត្រឹមត្រូវ។
ប្រព័ន្ធក្រឡាចត្រង្គលំនាំដើមដែលបានផ្តល់ជាផ្នែកនៃ Bootstrap គឺជា ក្រឡាចត្រង្គ 940px-wide, 12-column grid ។
វាក៏មានបំរែបំរួលឆ្លើយតបចំនួន 4 សម្រាប់ឧបករណ៍ និងដំណោះស្រាយផ្សេងៗផងដែរ៖ ទូរសព្ទ ថេប្លេតបញ្ឈរ ផ្ទៃតុ និងផ្ទៃតុតូច និងផ្ទៃតុធំទូលាយ។
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ដូចដែលបានបង្ហាញនៅទីនេះ ប្លង់មូលដ្ឋានអាចត្រូវបានបង្កើតជាមួយ "ជួរឈរ" ពីរដែលនីមួយៗលាតសន្ធឹងលើចំនួននៃជួរឈរគ្រឹះចំនួន 12 ដែលយើងកំណត់ថាជាផ្នែកនៃប្រព័ន្ធក្រឡាចត្រង្គរបស់យើង។
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
ជាមួយនឹងប្រព័ន្ធក្រឡាចត្រង្គឋិតិវន្ត (មិនរាវ) នៅក្នុង Bootstrap ការធ្វើសំបុកមានភាពងាយស្រួល។ ដើម្បីដាក់ខ្លឹមសាររបស់អ្នក គ្រាន់តែបន្ថែមជួរឈរថ្មី .row
និងសំណុំនៃ .span*
ជួរឈរនៅក្នុងជួរឈរដែលមានស្រាប់ .span*
។
ជួរដេកដែលបានបង្កប់គួរតែរួមបញ្ចូលសំណុំជួរឈរដែលបន្ថែមរហូតដល់ចំនួនជួរឈររបស់វាមេ។ ឧទាហរណ៍ .span3
ជួរឈរពីរគួរត្រូវបានដាក់ក្នុង .span6
.
- <div class = "row" >
- <div class = "span12" >
- កម្រិត 1 នៃជួរឈរ
- <div class = "row" >
- <div class = "span6" > កម្រិត 2 </div>
- <div class = "span6" > កម្រិត 2 </div>
- </div>
- </div>
- </div>
ប្រព័ន្ធក្រឡាចត្រង្គរាវប្រើភាគរយសម្រាប់ទទឹងជួរឈរជំនួសឱ្យភីកសែលថេរ។ វាក៏មានបំរែបំរួលឆ្លើយតបដូចគ្នាទៅនឹងប្រព័ន្ធក្រឡាចត្រង្គថេររបស់យើងផងដែរ ដោយធានានូវសមាមាត្រត្រឹមត្រូវសម្រាប់ដំណោះស្រាយអេក្រង់ និងឧបករណ៍សំខាន់ៗ។
ធ្វើឱ្យមានរាវជួរដេកណាមួយដោយគ្រាន់តែប្ដូរ .row
ទៅ .row-fluid
. ជួរឈរនៅដដែល ដែលធ្វើឱ្យវាមានភាពត្រង់បំផុតក្នុងការត្រឡប់រវាងប្លង់ថេរ និងវត្ថុរាវ។
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ការដាក់សំបុកជាមួយក្រឡាចត្រង្គរាវគឺខុសគ្នាបន្តិច៖ ចំនួនជួរឈរដែលដាក់ជាប់គ្នាមិនចាំបាច់ត្រូវគ្នានឹងមេនោះទេ។ ជំនួសមកវិញ ជួរឈររបស់អ្នកត្រូវបានកំណត់ឡើងវិញនៅកម្រិតនីមួយៗ ដោយសារជួរនីមួយៗមាន 100% នៃជួរមេ។
- <div class = "row-fluid" >
- <div class = "span12" >
- កម្រិត 1 នៃជួរឈរ
- <div class = "row-fluid" >
- <div class = "span6" > កម្រិត 2 </div>
- <div class = "span6" > កម្រិត 2 </div>
- </div>
- </div>
- </div>
អថេរ | តម្លៃលំនាំដើម | ការពិពណ៌នា |
---|---|---|
@gridColumns |
១២ | ចំនួនជួរឈរ |
@gridColumnWidth |
60px | ទទឹងនៃជួរឈរនីមួយៗ |
@gridGutterWidth |
20px | ចន្លោះអវិជ្ជមានរវាងជួរឈរ |
@siteWidth |
គណនាផលបូកនៃជួរឈរទាំងអស់ | រាប់ចំនួនជួរឈរ និងផ្លូវទឹកដើម្បីកំណត់ទទឹងរបស់ .container-fixed() mixin |
បានបង្កើតឡើងនៅក្នុង Bootstrap គឺជាអថេរមួយចំនួនសម្រាប់ប្ដូរតាមបំណងនូវប្រព័ន្ធក្រឡាចត្រង្គ 940px លំនាំដើម ដែលបានចងក្រងជាឯកសារខាងលើ។ អថេរទាំងអស់សម្រាប់ក្រឡាចត្រង្គត្រូវបានរក្សាទុកក្នុង variables.less ។
ការកែប្រែក្រឡាចត្រង្គមានន័យថាផ្លាស់ប្តូរ @grid*
អថេរទាំងបី និងការចងក្រង Bootstrap ឡើងវិញ។ ផ្លាស់ប្តូរអថេរក្រឡាចត្រង្គក្នុង variables.less ហើយប្រើវិធីមួយក្នុងចំណោម វិធីទាំងបួនដែលបានចងក្រងជាឯកសារដើម្បីចងក្រងឡើងវិញ ។ ប្រសិនបើអ្នកកំពុងបន្ថែមជួរឈរបន្ថែមទៀត ត្រូវប្រាកដថាបន្ថែម CSS សម្រាប់អ្នកនៅក្នុង grid.less ។
ការប្ដូរតាមបំណងនៃក្រឡាចត្រង្គដំណើរការតែនៅកម្រិតលំនាំដើមប៉ុណ្ណោះ ក្រឡាចត្រង្គ 940px ។ ដើម្បីរក្សាទិដ្ឋភាពឆ្លើយតបនៃ Bootstrap អ្នកក៏នឹងត្រូវប្ដូរក្រឡាចត្រង្គតាមបំណងក្នុង responsive.less ផងដែរ។
លំនាំដើម និងសាមញ្ញ 940px-wide ប្លង់កណ្តាលសម្រាប់គេហទំព័រ ឬទំព័រណាមួយដែលផ្តល់ដោយតែមួយ <div class="container">
។
- <រាងកាយ>
- <div class = "container" >
- ...
- </div>
- </body>
<div class="container-fluid">
ផ្តល់នូវរចនាសម្ព័ន្ធទំព័រដែលអាចបត់បែនបាន ទទឹងអប្បបរមា និងអតិបរមា និងរបារចំហៀងខាងឆ្វេង។ វាល្អសម្រាប់កម្មវិធី និងឯកសារ។
- <div class = "container-fluid" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!---មាតិការបារចំហៀង-->
- </div>
- <div class = "span10" >
- <!---មាតិការាងកាយ-->
- </div>
- </div>
- </div>
សំណួរប្រព័ន្ធផ្សព្វផ្សាយអនុញ្ញាតឱ្យមាន CSS ផ្ទាល់ខ្លួនដោយផ្អែកលើលក្ខខណ្ឌមួយចំនួន - សមាមាត្រ ទទឹង ប្រភេទការបង្ហាញ។ល។ - ប៉ុន្តែជាធម្មតាផ្តោតជុំវិញ min-width
និង max-width
.
Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.
Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:
Label | Layout width | Column width | Gutter width |
---|---|---|---|
Smartphones | 480px and below | Fluid columns, no fixed widths | |
Smartphones to tablets | 767px and below | Fluid columns, no fixed widths | |
Portrait tablets | 768px and above | 42px | 20px |
Default | 980px and up | 60px | 20px |
Large display | 1200px and up | 70px | 30px |
To ensure devices display responsive pages properly, include the viewport meta tag.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:
Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.
- // Landscape phones and down
- @media (max-width: 480px) { ... }
- // Landscape phone to portrait tablet
- @media (max-width: 768px) { ... }
- // Portrait tablet to landscape and desktop
- @media (min-width: 768px) and (max-width: 980px) { ... }
- // Large desktop
- @media (min-width: 1200px) { .. }
For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.
Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.
For example, you might show a <select>
element for nav on mobile layouts, but not on tablets or desktops.
Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less
.
Class | Phones 480px and below | Tablets 767px and below | Desktops 768px and above |
---|---|---|---|
.visible-phone |
Visible | Hidden | Hidden |
.visible-tablet |
Hidden | Visible | Hidden |
.visible-desktop |
Hidden | Hidden | Visible |
.hidden-phone |
Hidden | Visible | Visible |
.hidden-tablet |
Visible | Hidden | Visible |
.hidden-desktop |
Visible | Visible | Hidden |
Resize your browser or load on different devices to test the above clases.