រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
in English

រូបភាព

ឯកសារ និងឧទាហរណ៍សម្រាប់ជ្រើសរើសរូបភាពទៅក្នុងឥរិយាបថឆ្លើយតប (ដូច្នេះពួកវាមិនដែលធំជាងធាតុមេរបស់ពួកគេទេ) ហើយបន្ថែមរចនាប័ទ្មស្រាលដល់ពួកគេ—ទាំងអស់តាមរយៈថ្នាក់។

នៅលើទំព័រនេះ។

រូបភាពដែលឆ្លើយតប

រូបភាពនៅក្នុង Bootstrap ត្រូវបានធ្វើឱ្យមានការឆ្លើយតបជាមួយ .img-fluid. វាអនុវត្ត max-width: 100%;និង height: auto;ចំពោះរូបភាព ដូច្នេះវាធ្វើមាត្រដ្ឋានជាមួយធាតុមេ។

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="...">

រូបភាពតូច

បន្ថែមពីលើ ឧបករណ៍ប្រើប្រាស់ព្រំដែន-កាំ របស់ យើង អ្នកអាចប្រើ .img-thumbnailដើម្បីផ្តល់ឱ្យរូបភាពនូវរូបរាងស៊ុម 1px រាងមូល។

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." class="img-thumbnail" alt="...">

ការតម្រឹមរូបភាព

តម្រឹមរូបភាពជាមួយ ថ្នាក់អណ្តែតជំនួយ ឬ ថ្នាក់តម្រឹមអត្ថបទ ។ blockរូបភាពកម្រិតអាចត្រូវបានដាក់កណ្តាលដោយប្រើ ថ្នាក់ .mx-autoឧបករណ៍ប្រើប្រាស់រឹម ។

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

រូបភាព

ប្រសិនបើអ្នកកំពុងប្រើ <picture>ធាតុដើម្បីបញ្ជាក់ <source>ធាតុជាច្រើនសម្រាប់ជាក់លាក់មួយ <img>ត្រូវប្រាកដថាបន្ថែម .img-*ថ្នាក់ទៅ <img>និងមិនទៅ <picture>ស្លាក។

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

សាស

អថេរ

អថេរមានសម្រាប់រូបភាពតូច។

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;