တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်း - Grid-View
Grid-View ဆိုတာဘာလဲ။
ဝဘ်စာမျက်နှာအများအပြားသည် ဇယားကွက်မြင်ကွင်းတစ်ခုအပေါ် အခြေခံထားသောကြောင့် စာမျက်နှာကို ကော်လံများအဖြစ် ပိုင်းခြားထားသည်ဟု ဆိုလိုသည်-
ဇယားကွက်မြင်ကွင်းကို အသုံးပြုခြင်းသည် ဝဘ်စာမျက်နှာများကို ဒီဇိုင်းဆွဲသည့်အခါ အလွန်အသုံးဝင်သည်။ ၎င်းသည် စာမျက်နှာပေါ်တွင် အစိတ်အပိုင်းများကို ပိုမိုလွယ်ကူစေသည်။
တုံ့ပြန်မှုဇယားကွက်-မြင်ကွင်းတွင် မကြာခဏ ကော်လံ 12 ခု ပါရှိပြီး စုစုပေါင်း အကျယ် 100% ရှိပြီး ဘရောက်ဆာဝင်းဒိုးကို အရွယ်အစားပြောင်းသည့်အခါ ကျုံ့ကာ ချဲ့သွားမည်ဖြစ်သည်။
ဥပမာ- တုံ့ပြန်မှုဇယားကွက်မြင်ကွင်း
Responsive Grid-View တည်ဆောက်ခြင်း။
တုံ့ပြန်မှုဇယားကွက်-မြင်ကွင်းကို စတင်တည်ဆောက်ကြပါစို့။
ဦးစွာ HTML ဒြပ်စင်များအားလုံးတွင် box-sizing
သတ်မှတ်ထားသော ပိုင်ဆိုင်မှု
ရှိကြောင်း သေချာပါစေ border-box
။ ၎င်းသည် ဒြပ်စင်များ၏ စုစုပေါင်း အကျယ်နှင့် အမြင့်တွင် padding နှင့် border ကို ထည့်သွင်းထားကြောင်း သေချာစေပါသည်။
သင့် CSS တွင် အောက်ပါကုဒ်ကို ထည့်ပါ။
* {
box-sizing: border-box;
}
ကျွန်ုပ်တို့၏ CSS Box Sizing အခန်း box-sizing
တွင် ပိုင်ဆိုင်မှု အကြောင်း ပိုမိုဖတ်ရှုပါ ။
အောက်ပါဥပမာတွင် ကော်လံနှစ်ခုပါသော ရိုးရှင်းသောတုံ့ပြန်မှုရှိသော ဝဘ်စာမျက်နှာကို ပြသသည်-
ဥပမာ
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
ဝဘ်စာမျက်နှာတွင် ကော်လံနှစ်ခုသာ ပါလျှင် အထက်ဖော်ပြပါ ဥပမာသည် ကောင်းမွန်ပါသည်။
သို့သော်၊ ဝဘ်စာမျက်နှာကို ပိုမိုထိန်းချုပ်နိုင်စေရန် ကော်လံ 12 ခုပါသော တုံ့ပြန်မှုဇယားကွက်မြင်ကွင်းကို အသုံးပြုလိုပါသည်။
ပထမဆုံး ကော်လံတစ်ခုအတွက် ရာခိုင်နှုန်းကို တွက်ချက်ရပါမည်- 100% / 12 ကော်လံ = 8.33%။
ထို့နောက် 12 ကော်လံတစ်ခုစီအတွက် အတန်းတစ်ခုပြုလုပ်ပြီး class="col-"
အပိုင်းမည်မျှ ကော်လံမည်မျှရှိသည်ကို သတ်မှတ်သည့် နံပါတ်တစ်ခု ပြုလုပ်သည်-
CSS-
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
ဤကော်လံများအားလုံးသည် ဘယ်ဘက်တွင် လွင့်နေသင့်ပြီး 15px ၏ အကွက်တစ်ခုပါရှိသည်။
CSS-
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
အတန်းတစ်ခုစီကို တစ်ခုစီဖြင့် ပတ်ထားသင့်သည် <div>
။ အတန်းတစ်ခုအတွင်းရှိ ကော်လံအရေအတွက်သည် အမြဲတမ်း 12 အထိ ပေါင်းသင့်သည်-
HTML-
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
အတန်းတစ်ခုအတွင်းရှိ ကော်လံများအားလုံးသည် ဘယ်ဘက်တွင် လွင့်နေသောကြောင့် စာမျက်နှာ၏ စီးဆင်းမှုမှ ဖယ်ထုတ်ပြီး ကော်လံများမရှိသကဲ့သို့ အခြားဒြပ်စင်များကို ထားရှိမည်ဖြစ်သည်။ ၎င်းကို ကာကွယ်ရန်၊ ကျွန်ုပ်တို့သည် စီးဆင်းမှုကို ရှင်းပေးမည့် စတိုင်လ်တစ်ခုကို ထည့်ပါမည်-
CSS-
.row::after {
content: "";
clear: both;
display: table;
}
ပိုကောင်းလာစေရန် စတိုင်များနှင့် အရောင်အချို့ကိုလည်း ထည့်သွင်းလိုပါသည်-
ဥပမာ
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
ဘရောက်ဆာဝင်းဒိုးကို အလွန်သေးငယ်သော အကျယ်သို့ အရွယ်အစားပြောင်းသည့်အခါ နမူနာရှိ ဝဘ်စာမျက်နှာသည် အဆင်မပြေကြောင်း သတိပြုပါ ။ နောက်အခန်းမှာ အဲဒါကို ဘယ်လိုပြင်ရမလဲဆိုတာ လေ့လာပါလိမ့်မယ်။