Bootstrap ပုံများ
Bootstrap ရုပ်ပုံပုံစံများ
လုံးဝန်းသောထောင့်များ
စက်ဝိုင်း-
ပုံသေး-
လုံးဝန်းသောထောင့်များ
အတန်းသည် ပုံတစ်ပုံသို့ အဝိုင်းထောင့်များကို ပေါင်းထည့် သည် .img-rounded(IE8 သည် လုံးဝန်းသောထောင့်များကို မပံ့ပိုးပါ)။
ဥပမာ
<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">
စက်ဝိုင်း
အတန်း သည် .img-circleပုံအား စက်ဝိုင်းပုံသဏ္ဍာန်ပြုလုပ်သည် (IE8 သည် လုံးဝန်းသောထောင့်များကို မပံ့ပိုးပါ)။
ဥပမာ
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque
Terre">
ပုံသေး
အတန်း သည် .img-thumbnailပုံကို ပုံငယ်အဖြစ် ပုံသွင်းသည်-
ဥပမာ
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
တုံ့ပြန်မှုပုံရိပ်များ
ပုံများသည် အရွယ်အစားအားလုံးတွင် လာပါသည်။ ဖန်သားပြင်များထို့အတူလုပ်ပါ။ တုံ့ပြန်မှုရှိသောပုံများသည် မျက်နှာပြင်အရွယ်အစားနှင့် ကိုက်ညီစေရန် အလိုအလျောက်ချိန်ညှိပေးသည်။
တဂ် .img-responsiveသို့ အတန်း တစ်ခု ထည့်ခြင်းဖြင့် တုံ့ပြန်မှုရှိသော ပုံများကို ဖန်တီး ပါ။ <img>ထို့နောက် ပုံသည် ပင်မဒြပ်စင်သို့ ကောင်းမွန်စွာ အတိုင်းအတာဖြင့် ချိန်ညှိမည်ဖြစ်သည်။
အတန်း သည် .img-responsiveအကျုံး display: block;ဝင်ပြီး max-width: 100%;ပုံ
height: auto;တွင်
ဥပမာ
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
ရုပ်ပုံပြခန်း
.thumbnailပုံပြခန်းတစ်ခုဖန်တီးရန် အတန်း နှင့်တွဲဖက်၍ Bootstrap ၏ဇယားကွက်စနစ်ကိုလည်း အသုံးပြုနိုင်သည် ။
မှတ်ချက်- ဤကျူတိုရီရယ်တွင် Grid System အကြောင်း နောက်ထပ်လေ့လာရလိမ့်မည် (ကော်လံအရေအတွက် မတူညီသော layout တစ်ခုကို ဖန်တီးနည်း)။
ဥပမာ
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/lights.jpg">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/nature.jpg">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="/w3images/fjords.jpg">
<img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</a>
</div>
</div>
</div>
တုံ့ပြန်မှု မြှုပ်နှံမှုများ
ဗီဒီယိုများ သို့မဟုတ် စလိုက်ရှိုးများကို စက်ပစ္စည်းတိုင်းတွင် မှန်ကန်စွာ ချိန်ညှိခွင့်ပြုပါ။
အတန်းများကို <iframe>၊ <embed>၊ <video> နှင့် <object> ဒြပ်စင်များသို့ တိုက်ရိုက်အသုံးချနိုင်သည်။
The following example creates a responsive video by adding an .embed-responsive-item class
to an <iframe> tag (the video will then scale nicely to the parent element).
The containing <div> defines the aspect ratio of the video:
Example
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
What is aspect ratio?
The aspect ratio of an image
describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3
(the universal video format of the 20th
century), and 16:9 (universal for HD television and European digital
television).
You can choose between two aspect ratio classes:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Complete Bootstrap Image Reference
For a complete reference of all image classes, go to our complete Bootstrap Image Reference.