Bootstrap ကို တုံ့ပြန်မှု 12-ကော်လံဇယားကွက်များ၊ အပြင်အဆင်များနှင့် အစိတ်အပိုင်းများပေါ်တွင် တည်ဆောက်ထားသည်။
Bootstrap သည် HTML5 doctype ကိုအသုံးပြုရန်လိုအပ်သော အချို့သော HTML ဒြပ်စင်များနှင့် CSS ဂုဏ်သတ္တိများကို အသုံးပြုသည်။ သင့်ပရောဂျက်အားလုံး၏အစတွင် ၎င်းကို ထည့်သွင်းပါ။
- <!DOCTYPE html>
- <html lang = "en" >
- ...
- </html>
Bootstrap သည် အခြေခံ ကမ္ဘာလုံးဆိုင်ရာ ပြသမှု၊ စာစီစာရိုက်နှင့် လင့်ခ်ပုံစံများကို သတ်မှတ်ပေးသည်။ အတိအကျအားဖြင့်၊ ကျွန်ုပ်တို့:
margin
ခန္ဓာကိုယ်ပေါ်ရှိ ဖယ်ရှား ပါ။background-color: white;
ပေါ်တွင် သတ်မှတ်body
@baseFontFamily
, @baseFontSize
, နှင့် အရည်အချင်းများ ကို အသုံးပြုပါ။@baseLineHeight
@linkColor
လင့်ခ်မျဉ်းကြောင်းများကိုသာ ဖွင့်ပါ။:hover
ဤပုံစံများကို scaffolding.less တွင်တွေ့နိုင် သည် ။
Bootstrap 2 ဖြင့်၊ HTML5 Boilerplate ကို ပါဝါပေးသော Nicolas Gallagher ၏ ပရောဂျက်တစ်ခုဖြစ်သည့် Normalize.css ၏ မျက်နှာသာဖြင့် ပြန်လည်သတ်မှတ်ခြင်း အဟောင်းကို ဖယ်ရှား လိုက်ပါသည် ။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ reset.less တွင် Normalize အများအပြားကို အသုံးပြုနေစဉ် ၊ Bootstrap အတွက် အထူးပြုလုပ်ထားသော အစိတ်အပိုင်းအချို့ကို ကျွန်ုပ်တို့ ဖယ်ရှားလိုက်ပါသည်။
မူရင်း Bootstrap grid စနစ်သည် တုံ့ပြန်မှုအင်္ဂါရပ်များကို ဖွင့် ထားခြင်းမရှိဘဲ 940px ကျယ်သော ကွန်တိန်နာတစ်ခုအတွက် ကော်လံ 12 ခုကို အသုံးပြုသည် ။ တုံ့ပြန်မှုရှိသော CSS ဖိုင်ကို ထည့်သွင်းခြင်းဖြင့်၊ ဇယားကွက်သည် သင့်မြင်ကွင်းပို့တ်ပေါ်မူတည်၍ 724px နှင့် 1170px အနံအဖြစ် ပြောင်းလဲသည်။ 767px viewports အောက်တွင်၊ ကော်လံများသည် အရည်များဖြစ်လာပြီး ဒေါင်လိုက်အကွက်များ။
ရိုးရှင်းသော ကော်လံနှစ်ခု အပြင်အဆင်အတွက်၊ တစ်ခုဖန်တီးပြီး သင့်လျော်သော ကော်လံ .row
အရေအတွက်ကို ထည့်ပါ ။ .span*
၎င်းသည် 12 ကော်လံဇယားကွက်တစ်ခုဖြစ်သောကြောင့်၊ တစ်ခုစီ .span*
သည် ထိုကော်လံ 12 ခု၏ အရေအတွက်ကို ချဲ့ထွင်ပြီး အတန်းတစ်ခုစီအတွက် 12 အထိ အမြဲထည့်သင့်သည် (သို့မဟုတ် ပင်မရှိ ကော်လံအရေအတွက်)။
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ဤဥပမာဖြင့်၊ ကျွန်ုပ်တို့ တွင် စုစုပေါင်း ကော်လံ ၁၂ ခု .span4
နှင့် .span8
အတန်း အပြည့်အစုံကို ပြုလုပ်ထားသည်။
.offset*
အတန်း များကို အသုံးပြု၍ ကော်လံများကို ဘယ်ဘက်သို့ ရွှေ့ပါ ။ အတန်းတစ်ခုစီသည် ကော်လံတစ်ခု၏ ဘယ်ဘက်အနားသတ်ကို ကော်လံတစ်ခုလုံးဖြင့် တိုးစေသည်။ ဥပမာ၊ ကော်လံလေးခုကို .offset4
ရွှေ့ ပါ။.span4
- <div class = "row" >
- <div class = "span4" > ... </div>
- <div class = "span3 offset2" > ... </div>
- </div>
သင့်အကြောင်းအရာကို မူရင်းဇယားကွက်ဖြင့် စုစည်းရန်၊ ရှိပြီးသား ကော်လံတစ်ခုအတွင်း ကော်လံ အသစ် .row
နှင့် ကော်လံအစုံကို ပေါင်းထည့်ပါ ။ Nested အတန်းများတွင် ၎င်း၏ပင်မကော်လံအရေအတွက်အထိ ပေါင်းထည့်သည့် ကော်လံအစုတစ်ခု ပါဝင်သင့်သည်။.span*
.span*
ဤနေရာတွင် .span4
ကော်လံနှစ်ခုကို တစ်ခုအတွင်းတွင် ထည့်သွင်းထားသည် .span8
။
- <div class = "row" >
- <div class = "span9" >
- အဆင့် 1 ကော်လံ
- <div class = "row" >
- <div class = "span6" > အဆင့် 2 </div>
- <div class = "span3" > အဆင့် 2 </div>
- </div>
- </div>
- </div>
fluid grid စနစ်သည် ကော်လံအကျယ်အတွက် pixels အစား ရာခိုင်နှုန်းများကို အသုံးပြုသည်။ ၎င်းသည် ကျွန်ုပ်တို့၏ ပုံသေဂရစ်စနစ်ကဲ့သို့ တူညီသောတုံ့ပြန်မှုစွမ်းရည်များပါရှိပြီး သော့မျက်နှာပြင် ရုပ်ထွက်များနှင့် စက်များအတွက် သင့်လျော်သောအချိုးအစားများကို သေချာစေသည်။
.row
သို့ ပြောင်းခြင်းဖြင့် မည်သည့်အတန်းကိုမဆို "အရည်" ပြုလုပ်ပါ .row-fluid
။ ကော်လံအတန်းများသည် အတိအကျတူညီနေသဖြင့် fixed နှင့် fluid grid များကြား လှန်ရလွယ်ကူစေသည်။
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ပုံသေဂရစ်စနစ် အော့ဖ်ဆက်ခြင်းကဲ့သို့ အလားတူနည်းလမ်းဖြင့် လုပ်ဆောင်သည်- ထို .offset*
ကော်လံအများအပြားကို ချေဖျက်ရန် မည်သည့်ကော်လံကိုမဆို ပေါင်းထည့်ပါ။
- <div class = "row-fluid" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset2" > ... </div>
- </div>
fluid grid ဖြင့် အသိုက်ပြုလုပ်ခြင်းသည် အနည်းငယ်ကွဲပြားသည်- nested ကော်လံအရေအတွက်သည် မိဘ၏ ကော်လံအရေအတွက်နှင့် မကိုက်ညီသင့်ပါ။ ယင်းအစား၊ အတန်းတစ်ခုစီသည် ပင်မကော်လံ၏ 100% နေရာယူသောကြောင့် nested ကော်လံအဆင့်တစ်ခုစီကို ပြန်လည်သတ်မှတ်ထားသည်။
- <div class = "row-fluid" >
- <div class = "span12" >
- ကော်လံအဆင့် ၁
- <div class = "row-fluid" >
- <div class = "span6" > အဆင့် 2 </div>
- <div class = "span6" > အဆင့် 2 </div>
- </div>
- </div>
- </div>
လိုအပ် မှသာ ဘုံပုံသေ-အကျယ် (နှင့် ရွေးချယ်နိုင်သော တုံ့ပြန်မှု) အပြင်အဆင်ကို ပံ့ပိုးပေးသည် <div class="container">
။
- <body>
- <div class = "container" >
- ...
- </div>
- </body>
<div class="container-fluid">
— အပလီကေးရှင်းများနှင့် စာရွက်စာတမ်းများအတွက် အလွန်ကောင်းမွန်သော ကော်လံနှစ်ခုပါသော စာမျက်နှာတစ်ခု ဖန်တီးပါ ။
- <div class = "container-fluid" >
- <div class = "row-fluid" >
- <div class = "span2" >
- <!---Sidebar အကြောင်းအရာ-->
- </div>
- <div class = "span10" >
- <!---ကိုယ်ထည် အကြောင်းအရာ-->
- </div>
- </div>
- </div>
သင့်စာရွက်စာတမ်း အတွင်းရှိ သင့်လျော်သော မက်တာတက်ဂ်နှင့် အပိုစတိုင်စာရွက် အပါအဝင် သင့်ပရောဂျက်တွင် တုံ့ပြန်မှုရှိသော CSS ကို ဖွင့် <head>
ပါ။ အကယ်၍ သင်သည် စိတ်ကြိုက်ပြုလုပ်ခြင်းစာမျက်နှာမှ Bootstrap ကို ပြုစုပြီးပါက၊ သင်သည် meta tag ကိုသာ ထည့်သွင်းရန် လိုအပ်သည်။
- <meta name = "viewport" content = "width=device-width၊ initial-scale=1.0" >
- <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >
ကြိုတင်အသိပေးသည်! Bootstrap တွင် အရာအားလုံး တုံ့ပြန်မှု မလိုအပ်သောကြောင့် ယခုအချိန်တွင် မူရင်းအတိုင်း တုံ့ပြန်မှု အင်္ဂါရပ်များ မပါဝင်ပါ။ ဤအင်္ဂါရပ်ကို ဖယ်ရှားရန် ဆော့ဖ်ဝဲအင်ဂျင်နီယာများအား တိုက်တွန်းမည့်အစား လိုအပ်သလို ဖွင့်ထားရန် အကောင်းဆုံးဟု ကျွန်ုပ်တို့ ထင်မြင်ပါသည်။
မီဒီယာမေးမြန်းချက်များသည် အခြေအနေများစွာ—အချိုးအစား၊ အနံ၊ ဖော်ပြမှု အမျိုးအစားစသည်-စသည်တို့အပေါ် အခြေခံ၍ စိတ်ကြိုက် CSS ကို ခွင့်ပြုပေးသော်လည်း အများအားဖြင့် ပတ်လည် min-width
နှင့် max-width
.
မီဒီယာမေးခွန်းများကို တာဝန်သိသိနှင့် သင့်မိုဘိုင်းပရိသတ်များအတွက် စတင်မှုအဖြစ်သာ အသုံးပြုပါ။ ပိုကြီးသောပရောဂျက်များအတွက်၊ မီဒီယာမေးမြန်းချက်အလွှာများမဟုတ်ဘဲ သီးခြားကုဒ်အခြေခံများကို ထည့်သွင်းစဉ်းစားပါ။
Bootstrap သည် မတူညီသော စက်များနှင့် မျက်နှာပြင် ရုပ်ထွက်များပေါ်တွင် သင့်ပရောဂျက်များကို ပိုမိုသင့်လျော်စေရန် ကူညီပေးရန်အတွက် ဖိုင်တစ်ခုတည်းရှိ မီဒီယာမေးမြန်းချက်လက်တစ်ဆုပ်စာကို ပံ့ပိုးပေးပါသည်။ ဤတွင် ပါဝင်သည်-
တံဆိပ် | အပြင်အဆင် အကျယ် | ကော်လံအကျယ် | ရေမြောင်းအကျယ် |
---|---|---|---|
ဖုန်းများ | 480px နှင့် အောက် | အရည်ကော်လံများ၊ ပုံသေအကျယ်များမရှိပါ။ | |
တက်ဘလက်များသို့ဖုန်းများ | 767px နှင့် အောက် | အရည်ကော်လံများ၊ ပုံသေအကျယ်များမရှိပါ။ | |
ပုံတူတက်ဘလက်များ | 768px နှင့် အထက် | 42px | 20px |
ပုံသေ | 980px နှင့်အထက် | 60px | 20px |
ကြီးမားသောပြသမှု | 1200px နှင့်အထက် | 70px | 30px |
- /* Landscape ဖုန်းများနှင့် down*/
- @media ( အများဆုံး - အကျယ် : 480px ) { ... }
- /* ပုံတူတက်ဘလက်သို့ အခင်းအကျင်းဖုန်း*/
- @media ( အများဆုံး - အကျယ် : 767px ) { ... }
- /* ပုံတူတက်ဘလက်ကို ရှုခင်းနှင့် ဒက်စ်တော့ဆီသို့*/
- @media ( min - width : 768px ) နှင့် ( အများဆုံး - width : 979px ) { ... }
- /* ဒက်စ်တော့ကြီး */
- @media ( မိနစ် - အကျယ် : 1200px ) { ... }
ပိုမိုမြန်ဆန်သော မိုဘိုင်းလ်-ဖော်ရွေသော ဖွံ့ဖြိုးတိုးတက်မှုအတွက်၊ စက်ပစ္စည်းအလိုက် အကြောင်းအရာများကို ပြသရန်နှင့် ဝှက်ရန်အတွက် ဤအသုံးအဆောင်အတန်းများကို အသုံးပြုပါ။ အောက်တွင် ရရှိနိုင်သော အတန်းများ၏ ဇယားတစ်ခုဖြစ်ပြီး ပေးထားသော မီဒီယာမေးမြန်းမှု အပြင်အဆင် (စက်ဖြင့် အညွှန်းတပ်ထားသည်) ပေါ်တွင် ၎င်းတို့၏ သက်ရောက်မှု။ တွင်တွေ့နိုင်သည် responsive.less
။
အတန်း | ဖုန်းများ767px နှင့် အောက် | တက်ဘလက်များ979px မှ 768px | တော်ပြီ။ပုံသေ |
---|---|---|---|
.visible-phone |
မြင်သာသည်။ | ဝှက်ထားသည်။ | ဝှက်ထားသည်။ |
.visible-tablet |
ဝှက်ထားသည်။ | မြင်သာသည်။ | ဝှက်ထားသည်။ |
.visible-desktop |
ဝှက်ထားသည်။ | ဝှက်ထားသည်။ | မြင်သာသည်။ |
.hidden-phone |
ဝှက်ထားသည်။ | မြင်သာသည်။ | မြင်သာသည်။ |
.hidden-tablet |
မြင်သာသည်။ | ဝှက်ထားသည်။ | မြင်သာသည်။ |
.hidden-desktop |
မြင်သာသည်။ | မြင်သာသည်။ | ဝှက်ထားသည်။ |
ကန့်သတ်အခြေခံပေါ်တွင် အသုံးပြု၍ တူညီသောဆိုဒ်၏ ကွဲပြားသောဗားရှင်းများ ဖန်တီးခြင်းကို ရှောင်ကြဉ်ပါ။ ယင်းအစား၊ စက်တစ်ခုစီ၏ တင်ပြမှုကို ဖြည့်စွက်ရန် ၎င်းတို့ကို အသုံးပြုပါ။
အထက်ဖော်ပြပါ အတန်းများကို စမ်းသပ်ရန် သင့်ဘရောက်ဆာကို အရွယ်အစားပြောင်းပါ သို့မဟုတ် မတူညီသော စက်များတွင် တင်ပါ။
အစိမ်းရောင် checkmarks များသည် သင့်လက်ရှိ viewport တွင် class ကို မြင်နိုင်သည်ဟု ညွှန်ပြပါသည်။
ဤတွင်၊ အစိမ်းရောင် အမှတ်အသားများသည် သင်၏ လက်ရှိရှုထောင့်တွင် အတန်းကို ဝှက်ထားကြောင်း ဖော်ပြသည်။