ပုံစံများပြတင်းပေါက် Bootstrap: ရည်ရွယ်ချက်နှင့်အသုံးပြုမှု

ဘာပုံစံများပြတင်းပေါက် Bootstrap သည်နှင့်အဘယ်ကြောင့်လိုအပ်သနည်း ယင်း၏အစိတ်အပိုင်းအင်္ဂါရပ်များ, အားသာချက်များနှင့်အားနည်းချက်များကိုဘာတွေလဲ? "ပုံစံများ window ကို" ၏အယူအဆကတော့ GUI ကိုအတွက်အသုံးပြုသည်။ မကြာခဏအချို့အရေးကြီးသောအဖြစ်အပျက်မှအာရုံစိုက်ဖို့အသုံးပြုနိုင်ပါသည်။ ပုံစံများပြတင်းပေါက် setting များကိုပြောင်းလဲပစ်, ဒေတာကိုမဆိုသတင်းအချက်အလက်ထည့်သွင်းအသုံးပြုကြသည်။ သူတို့ဟာနေသမျှကာလပတ်လုံးပြဿနာသို့မဟုတ် action ကိုအဆုံးသတ်မှမဆောင်ခဲ့အတိုင်း, အသုံးပြုသူရဲ့လုပ်ငန်းအသွားအလာပိတ်ဆို့။ ပြတင်းပေါက်လည်းဝဘ်စာမျက်နှာများကိုဖွံ့ဖြိုးတိုးတက်ဖို့အသုံးပြုကြသည်။

ဒီကဘာလဲ

အလွယ်တကူစိတ်ကြိုက်နှင့် သပ္ပါယ်ဒီဇိုင်း, ဒီလူကြိုက်များယနေ့ Bootstrap ကမ်းလှမ်းအရာဖြစ်တယ်။ ပုံစံများင်းဒိုးကို web sites များဖန်တီးရန်အသုံးပြုနိုင်သည့်များ၏အသွင်သဏ္ဌာန်, display ကိုရုပ်ပုံများ, ဗီဒီယိုများ, နှင့်အခြားပစ္စည်းများကူညီပေးသည်။ pop-up window ကို header ကို, ခန္ဓာကိုယ်နှင့်အောက်ခြေ: ဒေါင်းလုဒ်၏ကွဲပြားအစိတ်အပိုင်းများကိုတက်လုပ်ဖြစ်ပါတယ်။ ဤအ element တွေကိုတစ်ခုချင်းစီ၎င်း၏ကိုယ်ပိုင်တန်ဖိုးကိုရှိပါတယ်။ တစ်ပုံစံများပြတင်းပေါက် Bootstrap ၏အဓိကရည်ရွယ်ချက်မှာ - ဆိုအပိုဆောင်းကုဒ်ရေးသားခြင်းမရှိဘဲက်ဘ်စာမျက်နှာများကိုဖန်တီးရန်ထွန်းသစ်စဒီဇိုင်နာများကိုသုံးနိုင်သည်။ ပုံစံများပြတင်းပေါက် - ရေးသားထားသောအကြောင်းအရာဖော်ပြပေးသောကွန်တိန်နာတစျမြိုး။ ပုံစံများနှင့်ကြီးမားသောစက်ဝိုင်းအစိတ်အပိုင်းရည်မှန်းချက်များဖြေရှင်း။

မည်သို့ဖြစ်စေ?

တစ်ပုံစံများပြတင်းပေါက် Creating အဖြစ်ယင်း၏ထိန်းချုပ်မှု JavaScript ကိုနည်းလမ်းများ, ဒေတာနဲ့ css သုံးပြီးဖျော်ဖြေနေသည်။ ပထမဦးစွာကျွန်တော်တစ်ဦး layout ကိုလုပ်ဖို့လိုအပ်ပါတယ်။ ဒါဟာဘောင် header ကို, အဓိကအကြောင်းအရာနှင့်အောက်ခြေပါဝင်ပါသည်။ ဤနေရာတွင်တောင်းဆိုနေတဲ့ဒြပ်စင် - ကာမြေအောက်ခန်း (ပိတ်ပင်တားဆီးမှု) နှင့်တစ်ဦးအသေကောင်။ ခေါ်ဆိုခများ၏အကောင်အထည်ဖော်မှုတစ်ခုပုံစံများဝင်းဒိုးကိုရွှေ့ဖို့လိုအပ်ကြောင်း marking ပြီးနောက်။ မကြာခဏကြောင့်ဝဘ်စာမျက်နှာကို loading နှင့်သင့်လျော်သော button ကိုနှိပ်ခြင်းအားပြီးနောက် 'ဟုဆိုအပ်၏။ ခေါ်ဆိုမှုအချက်အလက်များနှင့် JavaScript ကိုသုံးပြီးလုပ်ဖြစ်ပါတယ်။ Bootstrap ပုံစံများပြတင်းပေါက်ပိတ်ပြီးယခင်က created နှင့်ကယ်တင်ခြင်းသို့ရောက်ရ၏တာဝန်များကိုပြီးဆုံး။

အတွက် Model ဝင်းဒိုးကို၎င်း၏ကိုယ်ပိုင်ဝိသေသလက္ခဏာများရှိကြောင်းသတိရပါ။ နည်းလမ်းအဖုံဖုံပြတင်းပေါက်ဖွင့်လှစ်ရန်, သငျသညျအပိုဆောင်းကုဒ်ရေးသားဖို့လိုအပ်ပါတယ်။ positioning html-code ကိုယျခန်ဓာကို tag ကိုအပြီး, စာရွက်စာတမ်းရဲ့ထိပ်မှာအကောင်းဆုံးဖြစ်ပါတယ်။ ဒါက window ၏ function ကိုနှင့်ပုံပန်းသဏ္ဌာန်ကိုစောင့်ရှောက်ရန်ကူညီပေးသည်။ မိုဘိုင်းထုတ်ကုန်တွင်, "ပုံစံများပြတင်းပေါက်" အစိတ်အပိုင်း၏အသုံးပြုမှုကိုဆက်စပ်ကြောင်းသတိပေးချက်များရှိပါတယ်။ သူတို့ကယင်း၏အပြည့်အဝအသုံးပြုမှုကိုကန့်သတ်။ 3 bootstrap သင် window size ကိုချိန်ညှိ, နှင့်ဇယားကွက်များသုံးစွဲဖို့ခွင့်ပြုပါတယ်။

အစိတ်အပိုင်းများ

Bootstrap နှင့်အတူအလုပ်မစတင်မီသင်ကပါဝင်ပါသည်သောအရာကိုနားလည်သဘောပေါက်ဖို့လိုအပ်ပါတယ်။ အဆိုပါအစီအစဉ်ကိုက်ဘ်ဆိုက်များကိုဖန်တီးရန်အသုံးပြုကြသည်ကြောင်းအဆင်သင့်လုပ် tools တွေကိုအစုတခုလည်းပါဝင်သည်။ အဆင်သင့်စတိုင်များ JavaScript ကို, CSS နဲ့ HTML ကိုတစ်ဦးသပ္ပါယ်ဇယားကွက်, display ကိုခလုတ်, menus တွေ, icon များနှင့်အခြားအကြံပေးချက်များကိုတည်ဆောက်စေ။ အပြင်အဆင်စတိုင်များအတွက်လိုအပ်သောအခြေခံဆော့ဖ်ဝဲ။ ပုံနှိပ်စာသားစတိုင်များ၏ရရှိနိုင်မှုနှင့်စာမျက်နှာ print ထုတ်ခြင်းနှင့် site ရဲ့အကြောင်းအရာစာသားဒီဇိုင်းကိုဖြစ်စေခြင်းငှါ browser ကိုကွိုတငျပွငျဆငျဖို့ခွင့်ပြု။ သငျသညျပုံစံများ, ခလုတ်နှင့် Bootstrap အစိတ်အပိုင်းများကိုအသုံးပြုခြင်းသည်အခြားဒြပ်စင်များဖန်တီးနိုင်ပါတယ်။ အဆိုပါအစီအစဉ်ကိုမြန်မြန်ဆန်ဆန်နဲ့လွယ်လွယ်ကူကူမိုဘိုင်း device များအတွက်စာမျက်နှာများကိုစည်းကြပ်ဖို့ tools တွေကိုတစ်ဦးပြည့်စုံအစုံရှိပါတယ်။ bootstrap တစ်ဦးကအခြားအစိတ်အပိုင်းအမျိုးမျိုးအဖြစ် JavaScript ကိုတက်လုပ်ဖြစ်ပါတယ်။ ပင်အစပြုသူအတွက်လုံလောက်သောရိုးရှင်းသောသူတို့ကိုကျွမ်းကျင်။ သီအိုရီများတွင် program ကိုအခြေခံမှတရားမျှတစွာခက်ခဲသည် "Bustrap" ကိုနားလည်သဘောပေါက်ရန်။ လက်တွေ့တွင်ဤအများအပြား Pre-built အစိတ်အပိုင်းများမှဒီဇိုင်နာနှင့်ဝိဉာဉ်ကျေးဇူးတင်စကားဖွံ့ဖြိုးတိုးတက်ရေးအတွက်ရိုးရှင်းစွာ။

အင်္ဂါရပ်များ

ပုံစံများပြတင်းပေါက် bootstrap အထူးအားသာချက်ရှိပါတယ်။ ဖှံ့ဖွိုးတိုးတက်ဘ်ဆိုက်များစာမျက်နှာအပြင်အဆင်၏အကူအညီဖြင့်မြန်နှုန်းမြင့်မှာဖြတ်သန်းပါတယ်။ ပြတင်းပေါက်ဒြပ်စင်များနှင့်ဖြေရှင်းနည်းများ၏ကြီးမားသောထားပါဝင်သည်။ တိုးမြှင့အလိုက်အထိုက်နေတတ် Bootstrap site ကိုမှမှုကြောင့်။ မူဘောင် (software ကို) အားလုံး browser များအဘို့သင့်လျော်သည်မှန်ကန်စွာသူတို့ကိုထဲမှာဖော်ပြပါတယ်။ ဤသည်ပုံစံများဝင်းဒိုးကိုသုံးစွဲဖို့လွယ်ကူပါတယ်။ bootstrap ပင် HTML နဲ့ CSS ကိုအခြေခံအသိပညာရှိသည်သောသူအရင်ကဆိုရင်အဘို့, သင် web စာမျက်နှာများတွင်ကိုဖန်တီးရန်ခွင့်ပြုပါတယ်။

ဒါဟာအသုံးပြုသူများကိုလွယ်ကူစွာပြုလုပ်လိုက်လျောညီထွေဖြစ်အောင်နိုငျသောပုံစံများပြတင်းပေါက်ပါရှိပါတယ်။ အချောကုဒ်နှင့်အလွန်အစွမ်းထက်တဲ့စာရွက်စာတမ်းများထဲကအတော်များများဥပမာ Bootstrap ၏လျင်မြန်သောဖွံ့ဖြိုးတိုးတက်မှုအတွက်အကျိုးသက်ရောက်စေသည်။ အလှဆင်ဘို့အကြောင်းအရာများ၏ကြီးမားသောရွေးချယ်ရေးအပေါ်တတ်နိုင်သမျှ၎င်း၏အနှစ်သာရအကြောင်း။ ဒီနည်းလမ်းပြတင်းပေါက်နှင့်အတူ Wordpress ကို, CMS သို့, Joomla ကိုဒီဇိုင်းရေးဆွဲခဲ့ကြသည်။ bootstrap - လိုအပ်သောအစိတ်အပိုင်းများပါဝင်သည်နှင့်၎င်း၏ကိုယ်ပိုင် ikonochnym ဖောင်နှင့်ပြည့်စုံစေတဲ့ web application ကိုမူဘောင်ဖြစ်ပါတယ်။ ဒါဟာအခြေစိုက်စခန်းအပါအဝင်ထက်ပိုနှစ်ရာ icon များ, ပါဝင်သည်။

cons

ပုံစံများပြတင်းပေါက် bootstrap ၎င်း၏အားနည်းချက်များရှိသည်။

• ဒါကြောင့်အသုံးပြုက်ဘ်ဆိုက်များ, တစ်ဦးချင်းစီစတိုင်ရဲ့ features တွေကိုဆုံးရှုံး။ သူတို့ကတစ်ဦးချင်းစီကတခြားဆင်တူအသွင်အပြင်နှင့်တည်ဆောက်ပုံ၌ရှိသကဲ့သို့, ထူးခြားတဲ့ဖြစ်ငြိမ်း။
• ပြောင်းလွယ်ပြင်လွယ်မရှိခြင်း, မကြာခဏမိမိတို့ကိုယ်ပိုင်စတိုင်များကိုဖန်တီးရန်လိုအပ်ပါတယ်နှင့်မလိုအပ်သောစစ်ဆင်ရေးဖျော်ဖြေ။
• ဝန်ကုဒ်အလုပ်နာရီအတွင်းဖြစ်ပေါ်နိုင်ပါတယ်ပြောင်းလဲပါ။
• မကြာခဏအသုံးပြုသူများသည်အခြားရည်ရွယ်ချက်များအတွက်အသုံးပြု Bootstrap အစိတ်အပိုင်းများကို။

တစ်ဦး Front-အဆုံးဖှံ့ဖွိုးတိုးတအဖြစ်ဒီ tool ကိုသုံးပါ။ ကို web developer များအဘို့အပြီးပြည့်စုံသောဖြေရှင်းချက် - Bootstrap သုံးပြီးမူဘောင်၏အသုံးပြုသူများသိသာပါလိမ့်မည်သည့်ချို့ယွင်းချက်, layout ကိုနေသော်လည်း။ ဒါဟာသင်တိုတောင်းတဲ့အချိန်အတွက်အများကြီးကြိုးစားအားထုတ်မှုမပါဘဲရိုးရှင်းပြီးအလိုလိုသိ interface ကိုဖန်တီးရန်ခွင့်ပြုပါတယ်။

တုံ့ပြန်မှုဒီဇိုင်း

လူကြိုက်အများဆုံးမူဘောင်တစ်ခုမှာ, အချိန်နှင့်စွမ်းအင်သုံးစွဲခြင်းမရှိဘဲ, ဒီဇိုင်နာများအရည်အသွေးမြင့်ကို web sites များနှင့် applications များဖန်တီးရန်ခွင့်ပြုသည် - ကအတွက် Model ဝင်းဒိုးကိုအခမဲ့ tools များ၏အခြေခံသတ်မှတ်ချက်တွေနဲ့အသုံးပြုသူကိုထောက်ပံ့ပေး Bootstrap 3. ပါပဲ။ ကို C ဒါဟာသင် JavaScript ကို, CSS ကို, html ကိုအသုံးပြုဖို့ကူညီနိုင်ပါတယ်။ ဒီဆော့ဗ်ဝဲကို Twitter အသုံးပြုနေသူများကဖန်တီး, ထိုသို့ features နဲ့အကျိုးခံစားခွင့်များအများအပြားရှိပါတယ်ခဲ့သည်။ အဆိုပါမူဘောင်မိုဘိုင်း device များအတွက်ဒီဇိုင်းရေးဆွဲခဲ့ပါတယ်, ဒါကြောင့်သူ့ရဲ့အသားတင်သေးငယ်တဲ့ screen များအတွက်ဒီဇိုင်းပြုလုပ်ထားသည်။ ယနေ့တွင် Bootstrap 3 နှင့်အကြီးစားစက်ပစ္စည်းများအတွက်အသုံးပြုခဲ့သည်။ အဆိုပါအစီအစဉ်တွင်ထုတ်လုပ်သူများကချဲ့ထွင်ထားပြီးဖြစ်သောတစ်ဦးတည်းသာတုံ့ပြန်မှုဇယားကွက်စနစ်, ရှိနေပါသည်။

အပြီးအစီးမူဘောင်ဖောင့်ပေးခဲ့သည်။ သူတို့က icon များအဖြစ်အသုံးပြုကြသည်။ ဤအစီအစဉ်အတွက်, ဒီဇိုင်နာများသင့်ရဲ့ကိုယ်ပိုင်ဆုံးဖြတ်ချက်မှာပြောင်းလဲသွားတယ်နိုင်အားနည်းချက်ကိုဖောင့်နဲ့ပုံရိပ်တွေနှင့်အတူပြီးသားဆက်ဆံနေကြပါတယ်။ Bootstrap 3 အဟောင်းတွေ browser များပံ့ပိုးမ Features ။ တုံ့ပြန်မှုဒီဇိုင်းအယူအဆရိုးရှင်းတဲ့ဖြစ်ပါသည်: ဆိုက်လွတ်လပ်စွာမသက်ဆိုင်အသုံးပြုသူကသွားပြီဖြစ်သောကိရိယာ၏, မျက်နှာပြင်အရွယ်အစားညှိ။ တုံ့ပြန်မှုဒီဇိုင်းဖွံ့ဖြိုးရေးကောင်စီကိုအထူးအသိပညာနှင့်ပရော်ဖက်ရှင်နယ်ကျွမ်းကျင်မှုလိုအပ်သည်။

Bootstrap နှငျ့အလုပျလုပျ

Bootstrap နှင့်အတူအသိအကျွမ်းခြင်းမပြုမီ, ကလွတ်လပ်စွာရရှိနိုင်ပါ download လုပ်ပါ။ နောက်ဆက်တွဲအသုံးပြုသူဒေါင်းလုဒ် unzipping ပြီးနောက်ဖော ikonochnye အဆိုပါစတိုင်များနှင့် script များဆံ့ကြောင်းသုံးဖိုင်တွဲများရှိပါလိမ့်မယ်။ ဤအမှုအလုံးစုံတို့ကို၎င်း Bootstrap သည်။ တစ်ပုံစံများပြတင်းပေါက်ထို့နောက်မူဘောင်၏အမည်နှင့်အတူတစ်ဖိုင်တွဲကိုဖန်တီးနိုင်သည်ကိုဖွင့်။ ဒါဟာတစ်ဦးအချည်းနှီးသောဖိုင်ကို« ndex.html »ကိုဖန်တီးရန်လိုအပ်ပေသည်။ ဒေါင်း software ကိုအပြည့်အဝသက်ဆိုင်တဲ့ folder မှစတိုင်နှင့်« bookstrap.css »ဖိုင်တွဲ«ဖောင့်»ကို select ဖြစ်ပါတယ်။ ထို့အပြင်« bootstrap.js » script ကိုအကြောင်းကိုမေ့လျော့မနေပါနဲ့။ အလားတူအမည်ဖြင့်« css »အတူရှိပြီးသားဖိုင်တွဲ Create « bootstrap.min.css »ထားလေ၏။ « style.css »ဗလာဖိုင်နှင့်အတူအခြား« css »ထားပါ။ သူမသည်သင့်ကိုယ်ပိုင်စတိုင်များကိုထည့်သွင်းဖို့လိုအပ်ပါလိမ့်မယ်။

အားလုံးသင်ဖန်တီးရန်လိုအပ်တဲ့အခါ, နောက်ထပ်အလုပ်သာ« ndex.html »နှင့်အတူထွက်သယ်ဆောင်ပါလိမ့်မည်။ သငျသညျကို manually codes တွေကိုရေးသားဖို့မလိုချင်ကြဘူးလျှင်, ချောအရိုးစု html-စာရွက်စာတမ်းရည်ညွှန်း။ ဖိုင်ကိုထဲသို့ code များကို copy နဲ့ paste ။ ထုတ်လုပ်လိုက်တဲ့အရိုးစုဟာစတိုင်များစာကြည့်တိုက်များနှင့် script ကိုချိတ်ဆက်ထားလိမ့်မည်။ ဇာတ်ညွှန်း« JS » - ခန္ဓာကိုယ် tag ကိုပု« jQuery »စာကြည့်တိုက်နှင့်ချိတ်ဆက်ရန်မေ့လျော့ခြင်းနှင့်အပြီးမထားဘူးခြင်းမပြုမီ။

ပိုက်

ပုံစံများပြတင်းပေါက် bootstrap ဆိုဒ်၏ဂန္ layout ကိုဖန်တီးရန်အသုံးပြုသည်။ ဒါဟာဦးထုပ်အဓိကကိုယ်ထည်, ထိုနှစ်ဦးနှစ်ဖက်ကော်လံနှင့်မြေအောက်ခန်းပါဝင်ပါသည်။ မှန်ကန်စွာအားလုံးပြသရန်အလို့ငှာ, ကတစ်ဦးချင်းစီစီးဆင်းမှုနှင့်အတူရာခိုင်နှုန်းအတွက်တစ်ဦးချင်းစီကို item ရဲ့ width တွက်ချက်ရန်လိုအပ်ပါသည်။ မြေအောက်ခန်းဦးထုပ် site ကို 100% ၏အကျယ်ကို၎င်း, ဘေးထွက်ကော်လံ၏အမြောက်အများရှိရမည်သေးငယ်စေနိုင်ပါတယ်။

grid Bootstrap ရုံလုပ်ကွက်များ၏အလိုရှိသော width ကိုသတ်မှတ်ရန်လိုသည်။ ဇယားကွက်လည်ပတ်ကော်လံများနှင့်အတန်းရှိပြီးတစ်စားပွဲ၏အကူအညီနှင့်အတူတွေ့ရှိနိုင်ပါသည်။ အဆိုပါဇယားကွက်အကြိမ်အခြားဇယားကွက်န့်အသတ်အရေအတွက်ကအတွင်းလုပ်ဆောင်နိုင်တယ်။ အဆိုပါ site ၏အစိတ်အပိုင်းများကလုပ်နေတယ်ဆိုရင်, မိမိတို့ကိုယ်ပိုင်သပ္ပါယ်လိုအပ်ချက်များကိုရေးသားဖို့မလိုအပ်လည်းမရှိ။ လျှပ်စစ်လိုင်းအပြင်, တစ်ဦးပုံစံများ window ကိုအပိုဆောင်းအစိတ်အပိုင်းများကို (menus တွေ, စားပွဲ, tabs များ, အကြံပြုချက်များကို) ၏နံပါတ်ပါရှိသည်။

အမှားများ

တခါတရံမှာတစ်ချိန်တည်းမှာပွင့်လင်းအများအပြား Bootstrap ပုံစံများပြတင်းပေါက်, မှားယွင်းမှုတစ်ခုဆီသို့ဦးတည်နိုင်ပါတယ်။ Windows ကိုစနစ်တကျ html ဖိုင် type ကို load နိုင်ခြင်းလျှင်ဤသည်ဖြစ်နိုင်သည်။ အမှားအန္တရာယ်ရှိတဲ့ဆော့ဗ်ဝဲသို့မဟုတ်ဗိုင်းရပ်စ်ပိုးနှင့်အတူဖိုင်ရဲ့ရှုံးနိမ့်ဖော်ပြသည်။ ဖိုင်ကို Bootstrap နှင့်ဆက်စပ်အသုံးအများဆုံးပြဿနာများ, Startup programs တစ်ချို့, ကွန်ပျူတာစဉ်အတွင်း, ဒါမှမဟုတ်မည်သည့်အရေးယူဆောင်ရွက်မှုဖျော်ဖြေပြီးနောက်ပေါ်ပေါက်ပါတယ်။ အသုံးအများဆုံး - တစ်ပုံစံများပြတင်းပေါက်နှင့်ဆက်စပ်လျက်ရှိသောသူတို့ကိုဖြစ်ကြသည်: "ဖိုင်ထဲမှာမှားယွင်းနေသည်" "ဘယ်သူမျှမက file ကို", "တွေ့မ", "load ရန်မအောင်မြင်ခဲ့ပါ", "", "Run ကိုအချိန်အမှားနှင့်ဝန်မှတ်ပုံတင်ရန်ရန်မအောင်မြင်ခဲ့ပါ" ။ အသုံးပြုသူတစ်ဦး program တစ်ခုဒါမှမဟုတ်ပြီးသားအပြေးနေသည်ဖြစ်စေ, အဖြစ်အပေါ် switching စဉ်နှင့်ကွန်ပျူတာကိုပိတ်ထားတပ်ဆင်ပြီးတဲ့အခါမှာသူတို့ကပေါ်လာနိုင်ပါတယ်။ ဒါဟာမှန်ကန်စွာ Bootstrap ၎င်းတို့၏ဖြစ်ပျက်မှုများ၏အကြောင်းရင်းဖယ်ရှားပစ်ရန်ကူညီပေးသည်ကတည်းကဒါဟာအနီးကပ်အမှားအယွင်းများ၏ဖြစ်ပျက်မှုစောင့်ကြည့်ဖို့အရေးကြီးပါတယ်။ တစ်ဦးကပုံစံများပြတင်းပေါက်ကြောင့်ပြည်တွင်းရေးမှားယွင်းမှုများအပေါ်မူတည်ပါဘူးကြောင့်မမှန်ကန်ကြောင်းခေါ်ဆိုခမှတစ်ခါတစ်ရံအလုပ်မလုပ်ပါဘူး။