ဒေါင်းလုဒ်လုပ်ပါ။

Bootstrap (လောလောဆယ် v3.3.7) တွင် လျင်မြန်စွာ စတင်ရန် လွယ်ကူသော နည်းလမ်းအချို့ ရှိပြီး တစ်ခုစီသည် မတူညီသော ကျွမ်းကျင်မှု အဆင့်နှင့် အသုံးပြုမှု အခြေအနေတို့ကို နှစ်သက်စေပါသည်။ သင်၏ သီးခြားလိုအပ်ချက်များနှင့် ကိုက်ညီသည်များကို ကြည့်ရှုရန် ဖတ်ရှုပါ။

Bootstrap CDN

jsDelivr ရှိ လူများသည် Bootstrap ၏ CSS နှင့် JavaScript အတွက် CDN ပံ့ပိုးမှုကို ကြင်နာစွာ ပံ့ပိုးပေးသည်။ ဤ Bootstrap CDN လင့်ခ်များကိုသာ အသုံးပြုပါ။

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bower ဖြင့် install လုပ်ပါ။

Bower ကို အသုံးပြု၍ Bootstrap ၏ Less၊ CSS၊ JavaScript နှင့် ဖောင့်များကို ထည့်သွင်းပြီး စီမံခန့်ခွဲနိုင်သည် ။

$ bower install bootstrap

npm ဖြင့် install လုပ်ပါ။

npm ကိုအသုံးပြု၍ Bootstrap ကိုထည့်သွင်းနိုင်သည် ။

$ npm install bootstrap@3

require('bootstrap')Bootstrap ၏ jQuery ပလပ်အင်များအားလုံးကို jQuery အရာဝတ္တုပေါ်သို့ တင်ပါမည်။ မော် bootstrapဂျူးကိုယ်တိုင်က ဘာကိုမှ မတင်ပို့ပါဘူး။ /js/*.jsပက် ကေ့ဂျ်၏ ထိပ်တန်းအဆင့်လမ်းညွှန်အောက်တွင် ဖိုင်များကို တင်ခြင်းဖြင့် Bootstrap ၏ jQuery ပလပ်အင်များကို တစ်ဦးချင်းစီ ကိုယ်တိုင်တင်နိုင်သည် ။

Bootstrap package.jsonတွင် အောက်ပါသော့များအောက်တွင် နောက်ထပ် မက်တာဒေတာအချို့ပါရှိသည်။

• less- Bootstrap ၏ ပင်မ အရင်းအမြစ်ဖိုင် နည်း သော လမ်းကြောင်း
• style- ပုံသေဆက်တင်များကို အသုံးပြု၍ ကြိုတင်စုစည်းထားသော Bootstrap ၏မဟုတ်သော CSS သို့လမ်းကြောင်း (စိတ်ကြိုက်ပြုပြင်ခြင်းမရှိပါ)

Composer ဖြင့် ထည့်သွင်းပါ။

Composer ကို အသုံးပြု၍ Bootstrap ၏ Less၊ CSS၊ JavaScript နှင့် ဖောင့်များကိုလည်း ထည့်သွင်းစီမံနိုင်သည် -

$ composer require twbs/bootstrap

Less/Sass အတွက် အလိုအလျောက် ကြိုတင်ပြင်ဆင်မှု လိုအပ်ပါသည်။

Bootstrap သည် CSS ရောင်းသူ၏ရှေ့ဆက် များကိုကိုင်တွယ်ရန် Autoprefixer ကိုအသုံးပြုသည် ။ အကယ်၍ သင်သည် ၎င်း၏ Less/Sass အရင်းအမြစ်မှ Bootstrap ကိုစုစည်းပြီး ကျွန်ုပ်တို့၏ Gruntfile ကိုအသုံးမပြုပါက၊ သင်သည် Autoprefixer ကို သင်၏တည်ဆောက်မှုလုပ်ငန်းစဉ်တွင် သင်ကိုယ်တိုင်ပေါင်းစပ်ရန် လိုအပ်မည်ဖြစ်သည်။ အကယ်၍ သင်သည် ကြိုတင်စုစည်းထားသော Bootstrap ကို အသုံးပြုနေသည် သို့မဟုတ် ကျွန်ုပ်တို့၏ Gruntfile ကို အသုံးပြုနေပါက၊ Autoprefixer သည် ကျွန်ုပ်တို့၏ Gruntfile တွင် ပေါင်းစည်းထားပြီးဖြစ်သောကြောင့် ၎င်းအတွက် စိုးရိမ်စရာမလိုအပ်ပါ။

ဘာတွေပါဝင်လဲ။

Bootstrap ကို ပုံစံနှစ်မျိုးဖြင့် ဒေါင်းလုဒ်လုပ်နိုင်ပြီး အောက်ပါလမ်းညွှန်ချက်များနှင့် ဖိုင်များကို တွေ့ရှိရမည်ဖြစ်ကာ ဘုံအရင်းအမြစ်များကို ယုတ္တိနည်းကျကျ အုပ်စုဖွဲ့ကာ စုစည်းထားသော နှင့် အနည်းအကျဉ်းဗားရှင်းနှစ်မျိုးစလုံးကို ပံ့ပိုးပေးမည်ဖြစ်သည်။

ကြိုတင်စုစည်းထားသော Bootstrap

ဒေါင်းလုဒ်လုပ်ပြီးသည်နှင့် (စုစည်းထားသော) Bootstrap ၏ဖွဲ့စည်းပုံကိုကြည့်ရန် compressed folder ကိုဇစ်ဖွင့်ပါ။ ဤကဲ့သို့ တစ်ခုခုကို သင်မြင်ရပါမည်-

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

ဤသည်မှာ Bootstrap ၏ အခြေခံအကျဆုံးပုံစံဖြစ်သည်- မည်သည့်ဝဘ်ပရောဂျက်နီးပါးတွင်မဆို အမြန် drop-in အသုံးပြုမှုအတွက် ကြိုတင်စုစည်းထားသောဖိုင်များ။ ကျွန်ုပ်တို့သည် စုစည်းထားသော CSS နှင့် JS ( bootstrap.*) တို့အပြင် စုစည်းပြီး CSS နှင့် JS ( ) ကို ပြုစု bootstrap.min.*ပေးပါသည်။ CSS အရင်းအမြစ်မြေပုံများ ( bootstrap.*.map) ကို အချို့သောဘရောက်ဆာများ၏ developer ကိရိယာများဖြင့် အသုံးပြုနိုင်သည်။ ရွေးချယ်နိုင်သော Bootstrap အပြင်အဆင်ကဲ့သို့ Glyphicons မှဖောင့်များပါဝင်သည်။

Bootstrap အရင်းအမြစ်ကုဒ်

Bootstrap အရင်းအမြစ်ကုဒ်ကို ဒေါင်းလုဒ်ဆွဲရာတွင် ကြိုတင်စုစည်းထားသော CSS၊ JavaScript၊ နှင့် ဖောင့်ပိုင်ဆိုင်မှုများ၊ အရင်းအမြစ်နည်းသော၊ JavaScript နှင့် စာရွက်စာတမ်းများ ပါဝင်သည်။ အထူးသဖြင့်၊ ၎င်းတွင် အောက်ပါနှင့် အခြားအရာများ ပါဝင်သည်။

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, less/နှင့် js/တို့သည် fonts/ကျွန်ုပ်တို့၏ CSS၊ JS နှင့် အိုင်ကွန်ဖောင့်များ (အသီးသီး) အတွက် အရင်းအမြစ်ကုဒ်များဖြစ်သည်။ ဖိုလ်ဒါတွင် အထက်ဖော်ပြပါ dist/ကြိုတင်စုစည်းထားသော ဒေါင်းလုဒ်အပိုင်းတွင် ဖော်ပြထားသော အရာအားလုံး ပါဝင်ပါသည်။ ဖိုင်တွဲ တွင် ကျွန်ုပ်တို့၏ docs/စာရွက်စာတမ်းများအတွက် အရင်းအမြစ်ကုဒ်နှင့် examples/Bootstrap အသုံးပြုမှုတို့ ပါဝင်သည်။ ထို့အပြင်၊ အခြားပါဝင်သည့်ဖိုင်သည် ပက်ကေ့ဂျ်များ၊ လိုင်စင်အချက်အလက်နှင့် ဖွံ့ဖြိုးတိုးတက်မှုအတွက် ပံ့ပိုးပေးပါသည်။

CSS နှင့် JavaScript ကို ပြုစုခြင်း။

Bootstrap သည် ၎င်း၏တည်ဆောက်မှုစနစ်အတွက် Grunt ကိုအသုံးပြုပြီး framework နှင့်အလုပ်လုပ်ရန်အတွက်အဆင်ပြေသောနည်းလမ်းများရှိသည်။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ကုဒ်ကို စုစည်းပုံ၊ စမ်းသပ်မှုများ လုပ်ဆောင်ပုံနှင့် အခြားအရာများဖြစ်သည်။

Grunt ကို ထည့်သွင်းခြင်း။

Grunt ကိုထည့်သွင်းရန်၊ သင် ဦးစွာ node.js ကိုဒေါင်းလုဒ်လုပ်ပြီး install လုပ် ရမည် (npm ပါ၀င်သည်)။ npm သည် node ထုပ်ပိုးထားသော module များကို ကိုယ်စားပြုပြီး node.js မှတဆင့် ဖွံ့ဖြိုးတိုးတက်မှုဆိုင်ရာ မှီခိုမှုကို စီမံခန့်ခွဲရန် နည်းလမ်းတစ်ခုဖြစ်သည်။

1. grunt-cliတစ်ကမ္ဘာလုံးဖြင့် တပ်ဆင်ပါ npm install -g grunt-cli။
2. root /bootstrap/directory သို့သွားပါ၊ ထို့နောက် run npm installပါ။ npm သည် ဖိုင်ကို ကြည့်ရှုပြီး package.jsonထိုနေရာတွင် ဖော်ပြထားသော လိုအပ်သော ဒေသဆိုင်ရာ မှီခိုမှုများကို အလိုအလျောက် ထည့်သွင်းမည်ဖြစ်သည်။

ပြီးသွားသောအခါ၊ သင်သည် command line မှပေးထားသော Grunt command အမျိုးမျိုးကို run နိုင်မည်ဖြစ်သည်။

ရနိုင်သော Grunt အမိန့်များ

grunt dist(CSS နှင့် JavaScript ကို compile လုပ်ပါ)

/dist/စုစည်းပြီး အသေးစိပ် CSS နှင့် JavaScript ဖိုင်များဖြင့် လမ်းညွှန်ကို ပြန်လည် ထုတ်ပေးသည်။ Bootstrap အသုံးပြုသူတစ်ဦးအနေဖြင့်၊ ၎င်းသည် ပုံမှန်အားဖြင့် သင်အလိုရှိသော command ဖြစ်သည်။

grunt watch(စိုးမြတ်သူဇာ)

အရင်းအမြစ်နည်းသော ဖိုင်များကို ကြည့်ရှုပြီး အပြောင်းအလဲတစ်ခု သိမ်းဆည်းသည့်အခါတိုင်း ၎င်းတို့ကို CSS တွင် အလိုအလျောက် ပြန်လည်စုစည်းပေးပါသည်။

grunt test(စမ်းသပ်မှုများ လုပ်ဆောင်ရန်)

JSHint ကိုလုပ်ဆောင် ပြီး QUnit စမ်းသပ်မှုများကို PhantomJS တွင် ဦးခေါင်း မပါဘဲ လုပ်ဆောင် သည် ။

grunt docs(စာရွက်စာတမ်းပိုင်ဆိုင်မှုများကို တည်ဆောက်ပြီး စမ်းသပ်ပါ)

စာရွက်စာတမ်းကို စက်တွင်းမှတဆင့် လုပ်ဆောင်သည့်အခါ အသုံးပြုသည့် CSS၊ JavaScript နှင့် အခြားပိုင်ဆိုင်မှုများကို တည်ဆောက်ပြီး စမ်းသပ်သည် bundle exec jekyll serve။

grunt(အရာရာအားလုံးကို တည်ဆောက်ပြီး စမ်းသပ်မှုများ လုပ်ဆောင်ပါ)

CSS နှင့် JavaScript တို့ကို စုစည်းပြီး သေးငယ်အောင်၊ စာရွက်စာတမ်းဆိုင်ရာ ဝဘ်ဆိုဒ်ကို တည်ဆောက်ပေးသည်၊ HTML5 validator ကို docs နှင့် ဆန့်ကျင်ပြီး၊ Customizer ပိုင်ဆိုင်မှုများကို ပြန်လည်ထုတ်ပေးသည်နှင့် အခြားအရာများ။ Jekyll လိုအပ်သည် ။ သင် Bootstrap ကိုယ်တိုင် ဟက်ကင်းလုပ်ထားမှသာလျှင် လိုအပ်ပါသည်။

ပြသာနာရှာဖွေရှင်းပေးခြင်း

မှီခိုမှုထည့်သွင်းခြင်း သို့မဟုတ် Grunt ညွှန်ကြားချက်များကို လုပ်ဆောင်ခြင်းတွင် ပြဿနာများကြုံတွေ့ပါက၊ /node_modules/npm မှထုတ်လုပ်သည့်လမ်းညွှန်ကို ဦးစွာဖျက်ပါ။ ပြီးရင် ပြန် run လိုက်ပါ npm install။

အခြေခံပုံစံ

ဤအခြေခံ HTML နမူနာပုံစံဖြင့် စတင်ပါ၊ သို့မဟုတ် ဤဥပမာ များကို ပြင်ဆင်ပါ ။ ကျွန်ုပ်တို့၏ နမူနာများနှင့် နမူနာများကို သင့်လိုအပ်ချက်များနှင့် ကိုက်ညီအောင် ပြုပြင်ပြောင်းလဲပေးမည်ဟု မျှော်လင့်ပါသည်။

အနည်းငယ်မျှသာ Bootstrap စာရွက်စာတမ်းဖြင့် စတင်လုပ်ဆောင်ရန် အောက်ပါ HTML ကို ကူးယူပါ။

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

ဥပမာများ

Bootstrap ၏ အစိတ်အပိုင်းများစွာဖြင့် အထက်ဖော်ပြပါ အခြေခံ နမူနာပုံစံကို တည်ဆောက်ပါ။ သင့်ပရောဂျက်တစ်ခုချင်းစီ၏ လိုအပ်ချက်များနှင့်အညီ Bootstrap ကို စိတ်ကြိုက်ပြင်ဆင်ပြီး ပြုပြင်ပြောင်းလဲရန် ကျွန်ုပ်တို့ တိုက်တွန်းပါသည်။

Bootstrap repository ကို ဒေါင်းလုဒ်လုပ်ခြင်း ဖြင့် အောက်ပါ ဥပမာတိုင်းအတွက် အရင်းအမြစ်ကုဒ်ကို ရယူပါ ။ docs/examples/ဥပမာများကို directory တွင်တွေ့နိုင်သည် ။

မူဘောင်ကိုအသုံးပြုခြင်း။

စတင်သူပုံစံ

အခြေခံများမှလွဲ၍ ဘာမှမရှိပါ- CSS နှင့် JavaScript တို့ကို container တစ်ခုနှင့်အတူ စုစည်းထားသည်။

Bootstrap အပြင်အဆင်

အမြင်အာရုံကောင်းမွန်သော အတွေ့အကြုံအတွက် ရွေးချယ်နိုင်သော Bootstrap အပြင်အဆင်ကို တင်ပါ။

ဇယားကွက်များ

အလွှာလေးခု၊ nesting နှင့် အခြားအရာများပါရှိသော ဇယားကွက်အပြင်အဆင် နမူနာများစွာ။

Jumbotron

jumbotron ကို navbar နှင့် အခြေခံ ဂရစ်ကော်လံအချို့ဖြင့် တည်ဆောက်ပါ။

ကျဉ်းမြောင်းသော jumbotron

ပုံသေကွန်တိန်နာနှင့် jumbotron ကို ကျဉ်းမြောင်းခြင်းဖြင့် ပိုမိုစိတ်ကြိုက်စာမျက်နှာတစ်ခုကို တည်ဆောက်ပါ။

လုပ်ဆောင်ချက်တွင် Navbar များ

Navbar

နောက်ထပ်အကြောင်းအရာအချို့နှင့်အတူ navbar ပါ ၀ င်သည့်စူပါအခြေခံပုံစံပုံစံ။

Static top navbar

နောက်ထပ်အကြောင်းအရာအချို့နှင့်အတူ static top navbar ပါရှိသော အခြေခံပုံစံပုံစံ။

navbar ကို ပုံသေ

ထပ်လောင်းအကြောင်းအရာအချို့နှင့်အတူ ပုံသေထိပ်တန်း navbar ပါရှိသော အခြေခံပုံစံပုံစံ။

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

ကာဗာ

ရိုးရှင်းပြီး လှပသော ပင်မစာမျက်နှာများကို တည်ဆောက်ရန်အတွက် တစ်မျက်နှာပါ နမူနာပုံစံ။

ဝိုင်းလေး

navbar နှင့် အဝိုင်းလေးကို စိတ်ကြိုက်လုပ်ပါ၊ ထို့နောက် အစိတ်အပိုင်းအသစ်အချို့ကို ထည့်ပါ။

ဘလော့

စိတ်ကြိုက်လမ်းညွှန်မှု၊ ခေါင်းစီးနှင့် အမျိုးအစားတို့ပါရှိသော ရိုးရှင်းသော ကော်လံနှစ်ခုပါသော ဘလော့ဂ်အပြင်အဆင်။

ဒိုင်ခွက်

fixed sidebar နှင့် navbar ပါရှိသော admin dashboard အတွက် အခြေခံဖွဲ့စည်းပုံ။

ဝင်ရောက်စာမျက်နှာ

ရိုးရှင်းသော ဆိုင်းဘုတ်ပုံစံအတွက် စိတ်ကြိုက်ပုံစံ အပြင်အဆင်နှင့် ဒီဇိုင်း။

nav ကုသိုလ်

မျှတသောလင့်ခ်များဖြင့် စိတ်ကြိုက် navbar တစ်ခုကို ဖန်တီးပါ။ ကြိုတင်အသိပေးသည်! Safari နဲ့လည်း မလိုက်ဖက်ပါဘူး။

ကပ်စေးနဲသော အောက်ခြေမှတ်စု

အကြောင်းအရာသည် ၎င်းထက်တိုသောအခါ အောက်ခြေမှတ်စုကို မြင်ကွင်းပို့တ်၏အောက်ခြေတွင် ပူးတွဲပါ။

navbar ဖြင့် ကပ်နေသော အောက်ခြေမှတ်စု

ထိပ်တွင် ပုံသေ navbar တစ်ခုဖြင့် viewport ၏အောက်ခြေတွင် အောက်ခြေကို ပူးတွဲပါ။

စမ်းသပ်မှုများ

တုံ့ပြန်မှုမရှိသော Bootstrap

ကျွန်ုပ်တို့၏ စာရွက်စာတမ်းများအတွက် Bootstrap ၏တုံ့ပြန်မှုကို အလွယ်တကူပိတ်လိုက် ပါ ။

ကင်းဗတ်စ်

Bootstrap နှင့်အသုံးပြုရန်အတွက် toggleable off-canvas navigation menu ကိုတည်ဆောက်ပါ။

ကိရိယာများ

Bootlint

Bootlint သည် တရားဝင် Bootstrap HTML linter tool ဖြစ်သည်။ ၎င်းသည် မျှတသော "vanilla" နည်းလမ်းဖြင့် Bootstrap ကိုအသုံးပြုနေသည့် ဝဘ်စာမျက်နှာများရှိ သာမန် HTML အမှားများစွာကို အလိုအလျောက် စစ်ဆေးပေးပါသည်။ Vanilla Bootstrap ၏ အစိတ်အပိုင်းများ/ဝစ်ဂျက်များသည် အချို့သော ဖွဲ့စည်းပုံများနှင့် ကိုက်ညီရန် DOM ၏ ၎င်းတို့၏ အစိတ်အပိုင်းများ လိုအပ်သည်။ Bootstrap အစိတ်အပိုင်းများတွင် မှန်ကန်စွာ ဖွဲ့စည်းတည်ဆောက်ထားသော HTML ရှိကြောင်း Bootlint စစ်ဆေးသည်။ သင့်ပရောဂျက်၏ဖွံ့ဖြိုးတိုးတက်မှုကို နှောင့်နှေးစေသော ဘုံအမှားတစ်ခုမျှမရှိစေရန်အတွက် သင့် Bootstrap ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုကိရိယာချိတ်ဆက်မှုတွင် Bootlint ကို ထည့်သွင်းစဉ်းစားပါ။

ရပ်ရွာ

Bootstrap ဖွံ့ဖြိုးတိုးတက်မှုအတွက် နောက်ဆုံးရသတင်းရယူပြီး ဤအသုံးဝင်သောအရင်းအမြစ်များဖြင့် အသိုင်းအဝိုင်းထံ ဆက်သွယ်ပါ။

• တရားဝင် Bootstrap Blog ကိုဖတ်ပြီး စာရင်းသွင်းပါ ။
• ##bootstrap ချန်နယ်irc.freenode.net ရှိ ဆာဗာ ရှိ IRC ကို အသုံးပြု၍ Bootstrappers များနှင့် ချတ်လုပ်ပါ ။
• Bootstrap အသုံးပြုခြင်းအကူအညီအတွက်၊ tag ကိုအသုံးပြု၍ StackOverflowtwitter-bootstrap-3 တွင်မေးပါ ။
• ဆော့ဖ်ဝဲရေးသားသူများသည် npm သို့မဟုတ် အလားတူပေးပို့မှုယန္တရားများ bootstrapမှတဆင့် ဖြန့်ဝေသောအခါတွင် Bootstrap ၏လုပ်ဆောင်နိုင်စွမ်းကို ပြုပြင်မွမ်းမံခြင်း သို့မဟုတ် ပေါင်းထည့်သည့် အထုပ်များတွင် အဓိကစကားလုံးကို အသုံးပြုသင့်သည် ။
• Bootstrap Expo တွင် Bootstrap ဖြင့်တည်ဆောက်သူများ၏စိတ်အားထက်သန်သောဥပမာများကိုရှာဖွေပါ ။

နောက်ဆုံးထွက် အတင်းအဖျင်းနှင့် အမိုက်စား တေးဂီတဗီဒီယိုများအတွက် Twitter တွင် @getbootstrap ကိုလည်း လိုက် ကြည့်နိုင်ပါသည်။

တုံ့ပြန်မှုကို ပိတ်ထားခြင်း။

Bootstrap သည် သင့်စာမျက်နှာများကို မျက်နှာပြင်အရွယ်အစားအမျိုးမျိုးအတွက် အလိုအလျောက် လိုက်လျောညီထွေဖြစ်စေသည်။ ဤသည်မှာ ဤအင်္ဂါရပ်ကို မည်သို့ပိတ်ရမည်နည်း၊ သင့်စာမျက်နှာသည် ဤတုံ့ပြန်မှုမဟုတ်သော ဥပမာ ကဲ့သို့ အလုပ်လုပ် ပါသည်။

စာမျက်နှာ တုံ့ပြန်မှုကို ပိတ်ရန် အဆင့်များ

1. CSS docs<meta> တွင်ဖော်ပြထားသော viewport ကို ချန်လှပ် ထားပါ။
2. ဥပမာအားဖြင့် grid အဆင့်တစ်ခုစီအတွက် အကျယ်အဝန်းတစ်ခုစီကို အစားထိုးပါ၊ ဥပမာ၊ width၎င်းသည် default Bootstrap CSS ပြီးနောက် ၎င်းသည် လာကြောင်းသေချာပါစေ။ မီဒီယာမေးမြန်းချက် သို့မဟုတ် ရွေးချယ်မှု-fu အချို့ဖြင့် စိတ်ကြိုက်ရွေးချယ်နိုင်သည် ။.containerwidth: 970px !important;!important
3. navbars ကိုအသုံးပြုပါက၊ navbar ပြိုကျခြင်းနှင့် ချဲ့ခြင်းအပြုအမူအားလုံးကို ဖယ်ရှားပါ။
4. ဇယားကွက်အပြင်အဆင်များအတွက်၊ .col-xs-*အလယ်အလတ်/အကြီးအစားများအပြင် အတန်းများကိုသုံးပါ။ စိတ်မပူပါနှင့်၊ ပိုသေးငယ်သော စက်ဂရစ်စကေးသည် ပုံရိပ်ပြတ်သားမှုအားလုံးသို့ ချိန်ညှိပေးသည်။

သင်သည် IE8 အတွက် Respond.js လိုအပ်နေသေးသည် (ကျွန်ုပ်တို့၏မီဒီယာမေးမြန်းမှုများရှိနေဆဲဖြစ်ပြီး လုပ်ဆောင်ရန် လိုအပ်နေသေးသောကြောင့်)။ ၎င်းသည် Bootstrap ၏ "မိုဘိုင်းဆိုက်" အသွင်အပြင်များကို ပိတ်ထားသည်။

တုံ့ပြန်မှုပိတ်ထားသော Bootstrap နမူနာပုံစံ

ကျွန်ုပ်တို့သည် ဤအဆင့်များကို နမူနာအဖြစ် အသုံးပြုထားပါသည်။ သတ်သတ်မှတ်မှတ် ပြောင်းလဲမှုများကို အကောင်အထည် ဖော်ရန် ၎င်း၏ အရင်းအမြစ်ကုဒ်ကို ဖတ်ပါ။

တုံ့ပြန်မှုမရှိသော ဥပမာကို ကြည့်ပါ။

ဘရောက်ဆာနှင့် စက်ပံ့ပိုးမှု

Bootstrap သည် နောက်ဆုံးပေါ် ဒက်စ်တော့နှင့် မိုဘိုင်းဘရောက်ဆာများတွင် အကောင်းဆုံးအလုပ်လုပ်ရန် တည်ဆောက်ထားပြီး ဆိုလိုသည်မှာ ဘရောက်ဆာအဟောင်းများသည် အပြည့်အဝလုပ်ဆောင်နိုင်သော်လည်း အချို့သောအစိတ်အပိုင်းများ၏ သရုပ်ဖော်ပုံများသည် ပုံစံကွဲပြားစွာပြသနိုင်သည် ဟု ဆိုလိုသည်။

ပံ့ပိုးထားသောဘရောက်ဆာများ

အထူးသဖြင့်၊ ကျွန်ုပ်တို့သည် အောက်ပါဘရောက်ဆာများနှင့် ပလပ်ဖောင်းများ၏ နောက်ဆုံးဗားရှင်းများကို ပံ့ပိုးပေးပါသည်။

WebKit၊ Blink၊ သို့မဟုတ် Gecko ၏ နောက်ဆုံးဗားရှင်းကို အသုံးပြုသည့် အခြားဘရောက်ဆာများကို တိုက်ရိုက် သို့မဟုတ် ပလပ်ဖောင်း၏ ဝဘ်မြင်ကွင်း API မှတဆင့်ဖြစ်စေ ပြတ်သားစွာ ပံ့ပိုးမထားပါ။ သို့သော်၊ Bootstrap (အများစုတွင်) ဤဘရောက်ဆာများတွင်လည်း မှန်မှန်ကန်ကန်ပြသပြီး လုပ်ဆောင်နိုင်ရပါမည်။ ပိုမိုတိကျသောပံ့ပိုးကူညီမှုအချက်အလက်များကိုအောက်တွင်ဖော်ပြထားသည်။

မိုဘိုင်းကိရိယာများ

ယေဘုယျအားဖြင့်ပြောရလျှင်၊ Bootstrap သည် အဓိကပလပ်ဖောင်းတစ်ခုစီ၏ မူရင်းဘရောက်ဆာများ၏ နောက်ဆုံးဗားရှင်းများကို ပံ့ပိုးပေးသည်။ ပရောက်စီဘရောက်ဆာများ (ဥပမာ Opera Mini၊ Opera Mobile ၏ Turbo မုဒ်၊ UC Browser Mini၊ Amazon Silk) ကို ပံ့ပိုးမထားကြောင်း သတိပြုပါ။

ဒက်စ်တော့ဘရောက်ဆာများ

အလားတူ၊ ဒက်စတော့ဘရောက်ဆာအများစု၏ နောက်ဆုံးဗားရှင်းများကို ပံ့ပိုးထားသည်။

Windows တွင်၊ ကျွန်ုပ်တို့သည် Internet Explorer 8-11 ကို ပံ့ပိုးပေးသည် ။

Firefox အတွက်၊ နောက်ဆုံးထွက် ပုံမှန်တည်ငြိမ်သော ထုတ်ဝေမှုအပြင်၊ Firefox ၏ နောက်ဆုံးထွက် ပံ့ပိုးကူညီမှု ဖြန့်ချိမှု (ESR) ဗားရှင်းကိုလည်း ကျွန်ုပ်တို့ ပံ့ပိုး ပေးပါသည်။

တရားဝင်မဟုတ်သောအားဖြင့်၊ Bootstrap သည် Linux အတွက် Chromium နှင့် Chrome၊ Linux အတွက် Firefox နှင့် Internet Explorer 7 နှင့် Microsoft Edge တို့အပြင် Microsoft Edge တို့တွင် ကောင်းမွန်စွာကြည့်ရှုပြီး ပြုမူသင့်သည်။

Bootstrap နှင့် ကိုင်တွယ်ဖြေရှင်းရမည့် ဘရောက်ဆာ ချို့ယွင်းချက်အချို့စာရင်းအတွက်၊ ကျွန်ုပ်တို့၏ Wall of browser bugs ကိုကြည့်ပါ ။

Internet Explorer 8 နှင့် 9

Internet Explorer 8 နှင့် 9 တို့ကိုလည်း ပံ့ပိုးပေးထားသော်လည်း၊ အချို့သော CSS3 ဂုဏ်သတ္တိများနှင့် HTML5 အစိတ်အပိုင်းများကို ဤဘရောက်ဆာများက အပြည့်အဝ မပံ့ပိုးပေးနိုင်ကြောင်း ကျေးဇူးပြု၍ သတိပြုပါ။ ထို့အပြင်၊ Internet Explorer 8 သည် မီဒီယာမေးမြန်းမှုအကူအညီကိုဖွင့်ရန် Respond.js ကိုအသုံးပြုရန်လိုအပ်သည်။

CSS3 နှင့် HTML5 အင်္ဂါရပ်များ၏ ဘရောက်ဆာပံ့ပိုးမှုဆိုင်ရာ အသေးစိတ်အတွက် ကျွန်ုပ် အသုံးပြုနိုင် ပါသလား .

Internet Explorer 8 နှင့် Respond.js

Internet Explorer 8 အတွက် သင်၏ ဖွံ့ဖြိုးတိုးတက်မှုနှင့် ထုတ်လုပ်ရေးပတ်ဝန်းကျင်များတွင် Respond.js ကိုအသုံးပြုသည့်အခါ အောက်ပါသတိထားစရာများကို သတိပြုပါ။

Respond.js နှင့် cross-domain CSS

Respond.js ကိုအသုံးပြုခြင်းဖြင့် မတူညီသော (sub)domain (ဥပမာ၊ CDN တွင်) တွင်လက်ခံထားသော CSS ဖြင့် ထပ်လောင်းထည့်သွင်းမှုအချို့ လိုအပ်ပါသည်။ အသေးစိတ်အတွက် Respond.js docs ကို ကြည့်ပါ။

Respond.js နှင့်file://

ဘရောက်ဆာလုံခြုံရေးစည်းမျဉ်းများကြောင့် Respond.js သည် file://ပရိုတိုကောမှတစ်ဆင့် ကြည့်ရှုသည့်စာမျက်နှာများ (ဒေသခံ HTML ဖိုင်တစ်ခုဖွင့်သည့်အခါကဲ့သို့) နှင့် အလုပ်မလုပ်ပါ။ IE8 တွင်တုံ့ပြန်မှုရှိသောအင်္ဂါရပ်များကိုစမ်းသပ်ရန် HTTP(S) မှတဆင့် သင့်စာမျက်နှာများကို ကြည့်ရှုပါ။ အသေးစိတ်အတွက် Respond.js docs ကို ကြည့်ပါ။

Respond.js နှင့်@import

Respond.js မှတဆင့် ကိုးကားထားသော CSS နှင့် အလုပ်မလုပ်ပါ @import။ အထူးသဖြင့်၊ အချို့သော Drupal configurations ကိုအသုံးပြုရန်လူသိများသည် @import။ အသေးစိတ်အတွက် Respond.js docs ကို ကြည့်ပါ။

Internet Explorer 8 နှင့် box-sizing

, , , box-sizing: border-box;သို့မဟုတ် . _ ထို့ကြောင့်၊ v3.0.1 တွင် ကျွန်ုပ်တို့သည် s တွင် အသုံးမပြုတော့ပါ ။min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 နှင့် @font-face

@font-faceIE8 နှင့် ပေါင်းလိုက်သော အခါတွင် ပြဿနာအချို့ :beforeရှိသည်။ Bootstrap သည် ၎င်း၏ Glyphicons များနှင့် ပေါင်းစပ်အသုံးပြုသည်။ စာမျက်နှာတစ်ခုကို ကက်ရှ်လုပ်ပြီး ဝင်းဒိုးပေါ်မှ မောက်စ်မပါဘဲ တင်နေပါက (ဆိုလိုသည်မှာ ပြန်လည်ဆန်းသစ်ရန် ခလုတ်ကို နှိပ်ပါ သို့မဟုတ် iframe တွင် တစ်ခုခုကို တင်ပါ)၊ ထို့နောက် ဖောင့်မဖွင့်မီ စာမျက်နှာကို ပြန်ဆိုပါမည်။ စာမျက်နှာ (ကိုယ်ထည်) ပေါ်တွင် ပျံဝဲနေသည့် အိုင်ကွန်အချို့ကို ပြသမည်ဖြစ်ပြီး ကျန်အိုင်ကွန်များပေါ်တွင် ပျံဝဲနေပါက ၎င်းတို့ကိုလည်း ပြသမည်ဖြစ်သည်။ အသေးစိတ်အတွက် စာစောင်နံပါတ် 13863 ကို ကြည့်ပါ ။

IE လိုက်ဖက်ညီသောမုဒ်များ

bootstrap ကို Internet Explorer နှင့် လိုက်ဖက်ညီသော မုဒ်ဟောင်းများတွင် ပံ့ပိုးမထားပါ။ IE အတွက် နောက်ဆုံးပေါ် rendering mode ကို သင်အသုံးပြုနေသည်သေချာစေရန်၊ <meta>သင့်စာမျက်နှာများတွင် သင့်လျော်သော tag ကို ထည့်သွင်းစဉ်းစားပါ-

<meta http-equiv="X-UA-Compatible" content="IE=edge">

အမှားရှာပြင်ကိရိယာများကိုဖွင့်ခြင်းဖြင့် စာရွက်စာတမ်းမုဒ်ကို အတည်ပြုပါ- နှိပ်ပြီး F12"စာရွက်စာတမ်းမုဒ်" ကို စစ်ဆေးပါ။

ဤတဂ်သည် Internet Explorer ၏ ပံ့ပိုးပေးထားသော ဗားရှင်းတစ်ခုစီတွင် အကောင်းဆုံး တင်ဆက်မှု ဖြစ်နိုင်ကြောင်း သေချာစေရန် Bootstrap ၏ စာရွက်စာတမ်းနှင့် နမူနာများ အားလုံးတွင် ပါဝင်သည်။

နောက်ထပ်အချက်အလက်များအတွက် ဤ StackOverflow မေးခွန်းကို ကြည့်ပါ ။

Windows 8 နှင့် Windows Phone 8 တို့တွင် Internet Explorer 10

Internet Explorer 10 သည် စက်၏အကျယ် ကို viewport width နှင့် မခွဲခြားဘဲ၊ ထို့ကြောင့် Bootstrap ၏ CSS တွင် မီဒီယာမေးမြန်းချက်များကို ကောင်းစွာမကျင့်သုံးပါ။ သာမာန်အားဖြင့် သင်သည် ၎င်းကိုဖြေရှင်းရန် CSS ၏ အမြန်အတိုအထွာတစ်ခုကို ထည့်လိုက်သည်-

@-ms-viewport       { width: device-width; }

သို့သော်၊ Update 3 (aka GDR3) ထက် ပိုကြီးသော Windows Phone 8 ဗားရှင်းများ အသုံးပြုသည့် စက်များအတွက် ၎င်းသည် အလုပ်မဖြစ်ပါ၊ အဘယ် ကြောင့်ဆိုသော် ၎င်းသည် ကျဉ်းမြောင်းသော "ဖုန်း" မြင်ကွင်းအစား အများစုသော ဒက်စ်တော့မြင်ကွင်းကို ပြသစေသောကြောင့် ၎င်းသည် စက်များတွင် အလုပ်မဖြစ်ပါ။ ၎င်းကိုဖြေရှင်းရန်၊ သင်သည် bug ကိုဖြေရှင်းရန်အောက်ပါ CSS နှင့် JavaScript ကိုထည့်သွင်း ရန်လိုအပ်သည် ။

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

နောက်ထပ်အချက်အလက်များနှင့် အသုံးပြုမှုလမ်းညွှန်ချက်များအတွက်၊ Windows Phone 8 နှင့် Device-Width ကို ဖတ်ရှုပါ ။

ဦးခေါင်းအနေဖြင့်၊ ကျွန်ုပ်တို့သည် ဤအရာကို Bootstrap ၏ စာရွက်စာတမ်းများနှင့် နမူနာများအားလုံးကို သရုပ်ပြအဖြစ် ထည့်သွင်းထားသည်။

Safari ရာခိုင်နှုန်းကို ရှာနိုင်ပါတယ်။

iOS v8.0 အတွက် Safari ၏ v7.1 မတိုင်မီ ဗားရှင်းများ၏ rendering engine သည် ကျွန်ုပ်တို့၏ .col-*-1grid အတန်းများတွင် အသုံးပြုသည့် ဒဿမနေရာများနှင့် ပြဿနာအချို့ရှိနေသည်။ ထို့ကြောင့် သင့်တွင် ဇယားကွက်တစ်ခုစီတွင် ကော်လံ 12 ခုရှိပါက၊ ၎င်းတို့သည် အခြားကော်လံအတန်းများနှင့် နှိုင်းယှဉ်ပါက တိုတောင်းလာသည်ကို သတိပြုမိမည်ဖြစ်သည်။ Safari/iOS ကို အဆင့်မြှင့်တင်ခြင်းအပြင်၊ သင့်တွင် ဖြေရှင်းရန် ရွေးချယ်စရာအချို့ရှိသည်။

• .pull-rightခက်ခဲ-ညာဘက် ချိန်ညှိမှုကို ရယူရန် သင်၏နောက်ဆုံးဇယားကွက်တွင် ထည့်ပါ ။
• Safari အတွက် ပြီးပြည့်စုံသော လှည့်ကွက်ကို ရရှိရန် သင်၏ ရာခိုင်နှုန်းများကို ကိုယ်တိုင် ပြုပြင်ပြောင်းလဲပါ (ပထမရွေးချယ်မှုထက် ပိုခက်ခဲသည်)

Modals၊ navbars နှင့် virtual ကီးဘုတ်များ

လျှံတက်လာပြီး လှိမ့်လိုက်

overflow: hiddenဒြပ်စင်ပေါ် ရှိ ပံ့ပိုး <body>မှုသည် iOS နှင့် Android တို့တွင် အတော်လေး အကန့်အသတ်ရှိသည်။ ယင်းအတွက်၊ သင်သည် ထိုကိရိယာများ၏ ဘရောက်ဆာများထဲမှ modal တစ်ခု၏ အပေါ် သို့မဟုတ် အောက်ခြေကို ကျော်သွားသောအခါ၊ <body>အကြောင်းအရာသည် စတင်လှိမ့်မည်ဖြစ်သည်။ Chrome bug #175502 (Chrome v40 တွင် ပြင်ဆင်ထားသည်) နှင့် WebKit bug #153852 ကိုကြည့်ပါ ။

iOS စာသားအကွက်များနှင့် လှိမ့်ခြင်း။

<input>iOS 9.3 တွင် modal တစ်ခုကို ဖွင့်ထားစဉ်တွင်၊ scroll gesture တစ်ခု၏ ကနဦးထိတွေ့မှုသည် textual သို့မဟုတ် a ၏ နယ်နိမိတ်အတွင်းတွင် ရှိနေပါက <textarea>၊ <body>modal အောက်ရှိ အကြောင်းအရာသည် modal ကိုယ်တိုင်အစား လှိမ့်သွားမည်ဖြစ်သည်။ WebKit bug #153856 ကိုကြည့်ပါ ။

လက်ကွက်အတုများ

ထို့အပြင်၊ သင်သည် ပုံသေ navbar ကို အသုံးပြုနေပါက သို့မဟုတ် modal တစ်ခုအတွင်း ထည့်သွင်းမှုများကို အသုံးပြုနေပါက၊ iOS တွင် virtual keyboard ကို အစပျိုးလိုက်သောအခါ ပုံသေဒြပ်စင်များ၏ အနေအထားကို မွမ်းမံမွမ်းမံသည့် rendering bug ရှိသည်ကို သတိပြုပါ။ ၎င်းအတွက် ဖြေရှင်းနည်းအချို့တွင် သင့်ဒြပ်စင်များကို position: absoluteနေရာချထားမှုကို ကိုယ်တိုင်ပြင်ရန် ကြိုးစားရန် အာရုံစိုက်မှုအပေါ် အချိန်တိုင်းကိရိယာတစ်ခုသို့ ခေါ်ဆိုခြင်း ပါဝင်သည်။ ၎င်းကို Bootstrap က မကိုင်တွယ်ပါ၊ ထို့ကြောင့် သင့်အပလီကေးရှင်းအတွက် မည်သည့်ဖြေရှင်းချက်သည် အကောင်းဆုံးဖြစ်မည်ကို ဆုံးဖြတ်ရန် သင့်အပေါ်တွင် မူတည်သည်။

Navbar Dropdowns

z-indexing ၏ .dropdown-backdropရှုပ်ထွေးမှုကြောင့် nav တွင်ဒြပ်စင်ကို iOS တွင်အသုံးမပြုပါ။ ထို့ကြောင့်၊ navbars တွင် dropdowns များကိုပိတ်ရန်၊ သင်သည် dropdown element (သို့မဟုတ် iOS တွင် click event ကိုဖွင့်မည့်အခြားဒြပ်စင် ) ကိုတိုက်ရိုက်နှိပ်ရပါမည် ။

ဘရောင်ဇာချဲ့ခြင်း။

စာမျက်နှာကို ဇူးမ်ဆွဲခြင်းသည် Bootstrap နှင့် အခြားဝဘ်၏ အခြားအစိတ်အပိုင်းများတွင် အချို့သော အစိတ်အပိုင်းများတွင် သရုပ်ဖော်ခြင်းကို မလွှဲမရှောင်သာ တင်ဆက်သည်။ ပြဿနာပေါ် မူတည်၍ ကျွန်ုပ်တို့က ၎င်းကို ပြင်နိုင်သည် (လိုအပ်ပါက ပြဿနာကို ဦးစွာရှာဖွေပြီးနောက် ဖွင့်ပါ)။ သို့သော်၊ ၎င်းတို့သည် ဟက်ကာဖြေရှင်းခြင်းမှလွဲ၍ တိုက်ရိုက်ဖြေရှင်းချက်မရှိသောကြောင့် ၎င်းတို့ကို လျစ်လျူရှုလေ့ရှိသည်။

Sticky :hover/ :focusမိုဘိုင်းတွင်

ထိတွေ့မျက်နှာပြင်အများစုတွင် အမှန်တကယ် ပျံဝဲခြင်းကို မဖြစ်နိုင်သော်လည်း၊ မိုဘိုင်းဘရောက်ဆာအများစုသည် ပျံဝဲနေသည့် ပံ့ပိုးမှုကို အတုယူကာ :hover"စေးကပ်ခြင်း" ဖြစ်စေသည်။ တစ်နည်းဆိုရသော်၊ :hoverစတိုင်များသည် ဒြပ်စင်တစ်ခုအား နှိပ်ပြီးနောက် စတိုင်များ စတင်အသုံးပြုလာပြီး အသုံးပြုသူသည် အခြားဒြပ်စင်အချို့ကို နှိပ်ပြီးနောက်တွင်သာ လျှောက်ထားခြင်းကို ရပ်လိုက်ပါ။ ၎င်းသည် Bootstrap ၏ :hoverအခြေအနေများကိုထိုကဲ့သို့သောဘရောက်ဆာများတွင်မလိုလားအပ်သော "ပိတ်မိ" ဖြစ်လာစေနိုင်သည်။ အချို့သောမိုဘိုင်းဘရောက်ဆာများ :focusသည်လည်း အလားတူစေးကပ်စေပါသည်။ ဤကဲ့သို့သော စတိုင်များကို လုံးဝဖယ်ရှားခြင်းမှလွဲ၍ ဤပြဿနာများအတွက် ရိုးရှင်းသော ဖြေရှင်းနည်းမရှိပါ။

ပုံနှိပ်ခြင်း။

အချို့သော ခေတ်မီဘရောက်ဆာများတွင်ပင် ပရင့်ထုတ်ခြင်းသည် ထူးဆန်းနိုင်သည်။

အထူးသဖြင့်၊ Chrome v32 နှင့် အနားသတ်ဆက်တင်များမခွဲခြားဘဲ၊ Chrome သည် ဝဘ်စာမျက်နှာကိုပုံနှိပ်နေစဉ် မီဒီယာမေးမြန်းချက်များကို ဖြေရှင်းသည့်အခါ ရုပ်ပိုင်းဆိုင်ရာစာရွက်အရွယ်အစားထက် သိသိသာသာကျဉ်းမြောင်းသည့် viewport အကျယ်ကို အသုံးပြုသည်။ ၎င်းသည် ပရင့်ထုတ်သောအခါတွင် Bootstrap ၏ ပိုသေးငယ်သော ဂရစ်ကွက်ကို မထင်မှတ်ပဲ အသက်သွင်းစေနိုင်သည်။ အချို့အသေးစိတ်အတွက် ပြဿနာ #12078 နှင့် Chrome bug #273306 ကိုကြည့်ပါ။ အကြံပြုထားသော ဖြေရှင်းနည်းများ-

• ပိုသေးငယ်သော ဇယားကွက်ကို တွယ်ပြီး သင့်စာမျက်နှာသည် ၎င်းအောက်တွင် လက်ခံနိုင်ဖွယ်ရှိကြောင်း သေချာပါစေ။
• @screen-*သင့်ပရင်တာစက္ကူသည် ပိုသေးသည်ထက် ပိုကြီးသည်ဟု ယူဆနိုင်စေရန် Less variable များ၏ တန်ဖိုးများကို စိတ်ကြိုက်ပြင်ဆင် ပါ။
• ပုံနှိပ်မီဒီယာအတွက်သာ ဇယားကွက်အရွယ်အစား ဖြတ်တောက်မှတ်များကို ပြောင်းလဲရန် စိတ်ကြိုက်မီဒီယာမေးခွန်းများကို ထည့်ပါ။

Safari v8.0 တွင် ပုံသေအနံ .containers သည် ပုံနှိပ်သည့်အခါတွင် ပုံမှန်မဟုတ်သော သေးငယ်သောဖောင့်အရွယ်အစားကို Safari ကို အသုံးပြုစေနိုင်သည်။ အသေးစိတ် အချက်အလက်များအတွက် # 14868 နှင့် WebKit bug #138192 ကို ကြည့်ပါ။ ဤအတွက် ဖြစ်နိုင်ချေရှိသော ဖြေရှင်းနည်းတစ်ခုမှာ အောက်ပါ CSS ကို ထည့်သွင်းခြင်းဖြစ်သည် ။

@media print {
  .container {
    width: auto;
  }
}

Android စတော့ဘရောက်ဆာ

အကွက်အပြင်တွင်၊ Android 4.1 (နှင့် အချို့သော အသစ်ထွက်ရှိမှုများပင်) သည် ရွေးချယ်မှု၏ မူရင်းဝဘ်ဘရောက်ဆာ (Chrome နှင့် ဆန့်ကျင်ဘက်) အဖြစ် Browser အက်ပ်ကို ပို့ဆောင်ပေးပါသည်။ ကံမကောင်းစွာဖြင့်၊ Browser အက်ပ်တွင် ယေဘုယျအားဖြင့် CSS နှင့် ရှေ့နောက်မညီသော ချို့ယွင်းချက်များစွာရှိသည်။

မီနူးများကို ရွေးပါ။

ဒြပ်စင်များတွင် ၊ Android စတော့ဘရောက်ဆာသည် နှင့်/သို့မဟုတ် အသုံးပြု <select>ပါက ဘေးထွက်ထိန်းချုပ်မှုများကို ပြသမည်မဟုတ်ပါ ။ ( အသေးစိတ်အတွက် ဤ StackOverflow မေးခွန်းကို ကြည့်ပါ ။) ထိခိုက်စေသော CSS ကိုဖယ်ရှားပြီး ၎င်းကို Android စတော့ဘရောက်ဆာတွင် ပုံစံမပြသောဒြပ်စင်အဖြစ် တင်ဆက်ရန် အောက်ပါကုဒ်အတိုအထွာကို အသုံးပြုပါ။ အသုံးပြုသူအေးဂျင့် sniffing သည် Chrome၊ Safari နှင့် Mozilla ဘရောက်ဆာများကို အနှောင့်အယှက်မဖြစ်စေပါ။border-radiusborder<select>

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

ဥပမာတစ်ခုကြည့်လိုပါသလား။ ဤ JS Bin သရုပ်ပြကိုကြည့်ပါ။

အတည်ပြုသူများ

ဟောင်းပြီး ဘာဂီဘရောက်ဆာများအတွက် အကောင်းဆုံးဖြစ်နိုင်ချေရှိသော အတွေ့အကြုံကို ပေးစွမ်းရန်အတွက်၊ Bootstrap သည် ဘရောက်ဆာများအတွင်းရှိ bug များကို ၎င်းတို့ကိုယ်တိုင်လုပ်ဆောင်ရန်အတွက် အချို့သောဘရောက်ဆာဗားရှင်းများသို့ အထူး CSS အား ပစ်မှတ်ထားရန် နေရာများစွာတွင် CSS ဘရောက်ဆာ ဟက်ခ်များကို အသုံးပြုပါသည်။ ဤဟက်ကာများသည် CSS စစ်ဆေးမှုအား ၎င်းတို့မမှန်ကန်ကြောင်း တိုင်ကြားရန် နားလည်သဘောပေါက်စေသည်။ အချို့နေရာများတွင် ကျွန်ုပ်တို့သည် စံချိန်စံညွှန်းမပြည့်မီသေးသော bleeding-edge CSS အင်္ဂါရပ်များကိုလည်း အသုံးပြုသည်၊ သို့သော် ၎င်းတို့ကို တိုးတက်မှုအဆင့်မြှင့်တင်ရန်အတွက် သက်သက်အသုံးပြုပါသည်။

ကျွန်ုပ်တို့၏ CSS ၏ hacky မဟုတ်သောအပိုင်းသည် အပြည့်အဝ တရားဝင်ကြောင်းနှင့် hacky အပိုင်းများသည် ဟက်ကင်းမဟုတ်သောအပိုင်း၏ သင့်လျော်သောလုပ်ဆောင်မှုကို အနှောင့်အယှက်မပေးသည့်အတွက်ကြောင့် ဤတရားဝင်သောသတိပေးချက်များသည် လက်တွေ့တွင် အရေးမကြီးပါ။

ကျွန်ုပ်တို့၏ HTML docs တွင်လည်း အချို့သော အသေးအဖွဲ နှင့် အကျိုးမရှိသော HTML တရားဝင်ကြောင်း သတိပေးချက်များ အချို့သည် Firefox တွင် ချို့ယွင်းချက် တစ်ခုအတွက် ဖြေရှင်းချက်တစ်ခု ပါဝင်နေသောကြောင့် ဖြစ်သည်။

တတိယပါတီထောက်ခံမှု

ကျွန်ုပ်တို့သည် မည်သည့်ပြင်ပအဖွဲ့အစည်းမှ ပလပ်အင်များ သို့မဟုတ် အပိုပရိုဂရမ်များကို တရားဝင်မပံ့ပိုးသော်လည်း၊ သင့်ပရောဂျက်များတွင် ဖြစ်နိုင်ချေရှိသော ပြဿနာများကို ရှောင်ရှားနိုင်ရန် အသုံးဝင်သော အကြံဉာဏ်အချို့ကို ကျွန်ုပ်တို့ ကမ်းလှမ်းပါသည်။

သေတ္တာအရွယ်အစား

Google Maps နှင့် Google Custom Search Engine အပါအဝင် ပြင်ပဆော့ဖ်ဝဲလ်အချို့သည် Bootstrap နှင့် ကွဲလွဲနေသောကြောင့် ၎င်းသည် ဒြပ်စင်တစ်ခု၏ နောက်ဆုံးတွက်ချက်ထားသော width ကို မထိခိုက်စေ * { box-sizing: border-box; }သည့် စည်းမျဉ်းတစ်ခု ကြောင့်ဖြစ်သည်။ CSS Tricks တွင် အကွက်ပုံစံနှင့် အရွယ်အစားpadding အကြောင်း ပိုမိုလေ့လာပါ ။

အကြောင်းအရာပေါ်မူတည်၍ လိုအပ်သလို အစားထိုးနိုင်သည် (ရွေးချယ်မှု 1) သို့မဟုတ် ဒေသတစ်ခုလုံးအတွက် အကွက်အရွယ်အစားကို ပြန်လည်သတ်မှတ်နိုင်သည် (ရွေးချယ်မှု 2)။

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

သုံးစွဲနိုင်မှု

Bootstrap သည် သာမန်ဝဘ်စံနှုန်းများကို လိုက်နာပြီး—အနည်းငယ်မျှသာ အပိုအားထုတ်မှုဖြင့် —AT ကို အသုံးပြုသူများ ဝင်ရောက်နိုင်သော ဆိုက်များကို ဖန်တီးရန် အသုံးပြုနိုင်သည် ။

လမ်းညွှန်မှုကို ကျော်ပါ။

သင့်လမ်းညွှန်ချက်တွင် လင့်ခ်များစွာပါရှိပြီး DOM အတွင်းရှိ အဓိကအကြောင်းအရာရှေ့တွင် အကယ်၍ လမ်းကြောင်းပြခြင်း Skip to main contentမပြုမီ လင့်ခ်တစ်ခုထည့်ပါ (ရိုးရှင်းသောရှင်းလင်းချက်အတွက်၊ ဤ A11Y Project ဆောင်းပါးကို skip navigation links တွင် ကြည့်ပါ )။ အတန်း ကိုအသုံးပြုခြင်းသည် .sr-onlyskip link ကို အမြင်အာရုံဖြင့် ဖျောက်ထားမည်ဖြစ်ပြီး၊ .sr-only-focusableအတန်းသည် အာရုံစိုက်ပြီးသည်နှင့် လင့်ခ်ကို မြင်နိုင်စေရန် သေချာစေမည် (မျက်စိမြင်သောကီးဘုတ်အသုံးပြုသူများအတွက်)။

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

အစုအဝေး ခေါင်းစဉ်များ

<h1>ခေါင်းစီးများ ( - ) ကို nesting လုပ်သောအခါတွင် <h6>သင်၏မူလစာတမ်းခေါင်းစီးသည် တစ်ခုဖြစ်သင့်သည် <h1>။ နောက်ဆက်တွဲ ခေါင်းစီးများသည် ယုတ္တိရှိရှိ အသုံးပြုသင့်သည် <h2>- <h6>ထိုသို့သောအားဖြင့် စခရင်ဖတ်သူများသည် သင့်စာမျက်နှာများအတွက် အကြောင်းအရာဇယားတစ်ခုကို ဖန်တီးနိုင်သည်။

HTML CodeSniffer နှင့် Penn State ၏ AccessAbility တွင် ပိုမိုလေ့လာပါ ။

အရောင်ခြားနားမှု

လောလောဆယ်တွင်၊ Bootstrap တွင်ရရှိနိုင်သော ပုံသေအရောင်ပေါင်းစပ်မှုအချို့ (ဥပမာ- ပုံစံအမျိုးမျိုးသောခလုတ် အတန်းများ၊ အခြေခံကုဒ်တုံး များအတွက်အသုံးပြုသည့်ကုဒ်မီးမောင်းထိုးပြသည့်အရောင်အချို့ ၊ .bg-primary ဆက်စပ်နောက်ခံနောက်ခံ အထောက်အကူအတန်းနှင့် အဖြူရောင်နောက်ခံတွင်အသုံးပြုသည့်အခါ မူရင်းလင့်ခ်အရောင်) ခြားနားမှု အချိုးအစား နည်းပါးသည် ( အကြံပြုထားသော အချိုးအစား 4.5:1 အောက်တွင် )။ ၎င်းသည် အမြင်အာရုံအားနည်းသော သို့မဟုတ် အရောင်ကန်းနေသော သုံးစွဲသူများအတွက် ပြဿနာဖြစ်စေနိုင်သည်။ ၎င်းတို့၏ ခြားနားမှုနှင့် ကြည်လင်ပြတ်သားမှု တိုးမြင့်လာစေရန် ဤပုံသေအရောင်များကို ပြုပြင်ရန် လိုအပ်ပါသည်။

နောက်ထပ်အရင်းအမြစ်များ

• ဝင်ရောက်နိုင်မှုဆိုင်ရာ ပြဿနာများကို ဖော်ထုတ်ရန်အတွက် "HTML Codesniffer" bookmarklet
• Chrome ၏ Accessibility Developer Tools တိုးချဲ့မှု
• အရောင်အလင်းအမှောင်ခွဲခြမ်းစိတ်ဖြာမှု
• A11Y ပရောဂျက်
• MDN သုံးစွဲနိုင်မှု စာရွက်စာတမ်း

လိုင်စင် FAQs

Bootstrap သည် MIT လိုင်စင်အောက်တွင် ထွက်ရှိထားပြီး မူပိုင်ခွင့် 2016 Twitter ဖြစ်သည်။ အတုံးသေးသေးလေးတွေအထိ ပြုတ်ပြီး အောက်ပါအခြေအနေတွေနဲ့ ဖော်ပြနိုင်ပါတယ်။

၎င်းသည် သင့်အား လိုအပ်သည်-

• သင့်အလုပ်များတွင် ၎င်းတို့ကို သင်အသုံးပြုသည့်အခါ Bootstrap ၏ CSS နှင့် JavaScript ဖိုင်များတွင် ပါဝင်သောလိုင်စင်နှင့် မူပိုင်ခွင့်သတိပေးချက်ကို သိမ်းဆည်းထားပါ။

၎င်းသည် သင့်ကိုခွင့်ပြုသည်-

• ကိုယ်ရေးကိုယ်တာ၊ ပုဂ္ဂလိက၊ ကုမ္ပဏီတွင်း သို့မဟုတ် စီးပွားဖြစ်ရည်ရွယ်ချက်များအတွက် တစ်ခုလုံး သို့မဟုတ် တစ်စိတ်တစ်ပိုင်းအတွက် Bootstrap ကို လွတ်လပ်စွာဒေါင်းလုဒ်လုပ်ပြီး အသုံးပြုပါ။
• သင်ဖန်တီးသော ပက်ကေ့ဂျ်များ သို့မဟုတ် ဖြန့်ဝေမှုများတွင် Bootstrap ကိုသုံးပါ။
• အရင်းအမြစ်ကုဒ်ကို မွမ်းမံပါ။
• လိုင်စင်တွင်မပါဝင်သည့်တတိယပါတီများသို့ Bootstrap ကိုမွမ်းမံခြင်းနှင့် ဖြန့်ဝေရန် လိုင်စင်ခွဲတစ်ခုပေးပါ။

၎င်းသည် သင့်ကို တားမြစ်ထားသည်-

• Bootstrap ကို အာမခံမပေးဘဲ ပေးဆောင်ထားသောကြောင့် ပျက်စီးဆုံးရှုံးမှုများအတွက် တာဝန်ရှိသော စာရေးဆရာများနှင့် လိုင်စင်ပိုင်ရှင်များကို ထိန်းထားပါ။
• Bootstrap ၏ ဖန်တီးသူများ သို့မဟုတ် မူပိုင်ခွင့်ကိုင်ဆောင်သူများကို တာဝန်ရှိကြောင်း ထိန်းထားပါ။
• သင့်လျော်သောထည့်ဝင်မှုမရှိဘဲ Bootstrap ၏ မည်သည့်အပိုင်းကိုမဆို ပြန်လည်ဖြန့်ဝေပါ။
• Twitter မှ ပိုင်ဆိုင်သည့် အမှတ်အသားများကို အသုံးပြုပါ သို့မဟုတ် Twitter မှ သင့်ဖြန့်ဖြူးမှုကို ထောက်ခံကြောင်း ဖော်ပြနိုင်သော သို့မဟုတ် အဓိပ္ပာယ်သက်ရောက်စေသော မည်သည့်နည်းဖြင့်မဆို အသုံးပြုပါ။
• သင် Twitter ဆော့ဖ်ဝဲလ်ကို ဖန်တီးခဲ့သည်ဟု သံသယဖြစ်ဖွယ်ဖြစ်စေနိုင်သော သို့မဟုတ် အဓိပ္ပာယ်သက်ရောက်စေသည့်နည်းလမ်းဖြင့် Twitter ပိုင်ဆိုင်သည့် အမှတ်အသားများကို အသုံးပြုပါ။

၎င်းသည် သင့်အား မလိုအပ်ပါ

• Bootstrap ၏ရင်းမြစ်ကို ထည့်သွင်းပါ သို့မဟုတ် သင်ပြုလုပ်ထားသော ပြုပြင်မွမ်းမံမှုတစ်ခုခုတွင် ၎င်းပါဝင်သည့် ပြန်လည်ဖြန့်ဝေမှုတွင် သင်ထည့်သွင်းနိုင်သည်။
• Bootstrap တွင် သင်ပြုလုပ်သော အပြောင်းအလဲများကို Bootstrap ပရောဂျက်သို့ ပြန်တင်ပြပါ (ထိုကဲ့သို့သော အကြံပြုချက်ကို အားပေးသော်လည်း)

နောက်ထပ်အချက်အလက်များအတွက် Bootstrap လိုင်စင်အပြည့်အစုံ သည် ပရောဂျက်သိုလှောင်မှု တွင် တည်ရှိသည်။

ဘာသာပြန်များ

အသိုင်းအဝိုင်းအဖွဲ့ဝင်များသည် Bootstrap ၏စာရွက်စာတမ်းများကို ဘာသာစကားအမျိုးမျိုးသို့ ဘာသာပြန်ဆိုကြသည်။ မည်သည့်အရာကိုမျှ တရားဝင် ပံ့ပိုးထားခြင်း မရှိသေးဘဲ ၎င်းတို့သည် အမြဲတမ်း နောက်ဆုံးပေါ် ဖြစ်နေနိုင်သည် ။

• Bootstrap 中文文档 (တရုတ်)
• Bootstrap 3 中文手冊 (တရုတ် (ရိုးရာ))
• Bootstrap på Dansk (ဒိန်းမတ်)
• Bootstrap en Français (ပြင်သစ်)
• Bootstrap auf Deutsch (ဂျာမန်)
• Italiano (အီတလီ) တွင် Bootstrap
• Bootstrap 한국어 (ကိုရီးယား)
• Bootstrap em Português do Brasil (ဘရာဇီး ပေါ်တူဂီ)
• Bootstrap по-русски (ရုရှား)
• Bootstrap en Español (စပိန်)
• Türkçe Bootstrap (တူရကီ)
• Bootstrap українською (ယူကရိန်း)
• Bootstrap bằng tiếng Việt (ဗီယက်နမ်)

ဘာသာပြန်ဆိုမှုများကို စီစဉ်ပေးခြင်း သို့မဟုတ် လက်ခံဆောင်ရွက်ပေးခြင်းတို့ကို ကျွန်ုပ်တို့ မကူညီဘဲ ၎င်းတို့နှင့် လင့်ခ်ချိတ်ရုံသာဖြစ်သည်။

အသစ် သို့မဟုတ် ပိုမိုကောင်းမွန်သော ဘာသာပြန်ကို ပြီးမြောက်ပါသလား။ ၎င်းကိုကျွန်ုပ်တို့၏စာရင်းတွင်ထည့်ရန်ဆွဲထုတ်တောင်းဆိုချက်ကိုဖွင့်ပါ။