တိုးချဲ့ခြင်း · Bootstrap မြန်မာလို

Bootstrap သည် ကျွန်ုပ်တို့၏မိတ်ဆွေကောင်း Alexis Sellier မှ ဖန်တီးထားသော Dynamic Style Sheet ဘာသာစကားတစ်ခုဖြစ်ပြီး ၎င်း၏အဓိကအားဖြင့် LESS ဖြင့်ပြုလုပ်ထားသည် ။ ၎င်းသည် စနစ်အခြေခံ CSS ကို ပိုမိုမြန်ဆန်၊ ပိုမိုလွယ်ကူစေပြီး ပိုမိုပျော်စရာကောင်းစေသည်။

အဘယ်ကြောင့်နည်း။

Bootstrap ၏ ဖန်တီးသူ တစ်ဦးက ဤအကြောင်း အကျဉ်းချုပ် ဘလော့ဂ် ပို့စ် တစ်ခု ရေးသားခဲ့သည်၊

Bootstrap သည် Sass နှင့် နှိုင်းယှဉ်ပါက လျော့နည်းသဖြင့် ~6 ဆ ပိုမြန်သည်။
JavaScript တွင် ရေးသားထားသည်မှာ နည်းပါးသောကြောင့် Sass နှင့် Ruby နှင့် နှိုင်းယှဉ်ပါက ကျွန်ုပ်တို့အား အလွယ်တကူ ဝင်ရောက်ပြီး ဖာထေးရန် ပိုမိုလွယ်ကူစေသည်။
ပိုနည်းသည်; ကျွန်ုပ်တို့သည် CSS ကိုရေးသားပြီး Bootstrap ကိုအားလုံးအတွက်ချဉ်းကပ်နိုင်စေရန်ပြုလုပ်ထားသကဲ့သို့ခံစားရလိုပါသည်။

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

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

ပိုမိုသိရှိရန်

ပိုမိုလေ့လာသင်ယူရန် http://lesscss.org/ ရှိတရားဝင်ဝဘ်ဆိုဒ်သို့ဝင်ရောက် ပါ။

ကျွန်ုပ်တို့၏ CSS သည် Less ဖြင့်ရေးသားထားပြီး variable များနှင့် mixins များကိုအသုံးပြုထားသောကြောင့်၊ ၎င်းကို နောက်ဆုံးထုတ်လုပ်မှုအကောင်အထည်ဖော်ရန်အတွက် စုစည်းထားရန်လိုအပ်ပါသည်။ ဒါကတော့ ဘယ်လိုလဲ။

မှတ်ချက်- အကယ်၍ သင်သည် ပြုပြင်ထားသော CSS ဖြင့် GitHub သို့ ဆွဲယူတောင်းဆိုမှုတစ်ခုကို တင်သွင်းနေပါက၊ သင်သည် ဤနည်းလမ်းများထဲမှ CSS ကို ပြန်လည်ပေါင်းစည်း ရပါ မည်။

ပြုစုရန်ကိရိယာများ

makefile နှင့်အတူ Node

အောက်ဖော်ပြပါ command ကို run ခြင်းဖြင့် NPM ဖြင့် LESS command line compiler၊ JSHint၊ Recess နှင့် uglify-js ကို ထည့်သွင်းပါ။

$ npm install -g လျော့နည်း jshint recess uglify-js

makeထည့်သွင်းပြီး သည်နှင့် သင်၏ bootstrap directory ၏ root မှ run ပြီး အားလုံးပြီးသွားပါပြီ။

ထို့အပြင်၊ အကယ်၍ သင့်တွင် watchr ကို ထည့်သွင်းထားပါက၊ သင်သည် make watchbootstrap lib တွင် ဖိုင်တစ်ခုကို တည်းဖြတ်သည့်အခါတိုင်း bootstrap ကို အလိုအလျောက် ပြန်လည်တည်ဆောက်နိုင်သည် (၎င်းသည် မလိုအပ်ပါ၊ အဆင်ပြေသောနည်းလမ်းတစ်ခုသာဖြစ်သည်)။

Command line

Node မှတဆင့် LESS command line tool ကို install လုပ်ပြီး အောက်ပါ command ကို run ပါ။

$lessc ./less/bootstrap.less > bootstrap.css

--compressအကယ်၍ သင်သည် အချို့သော bytes ကို သိမ်းဆည်းရန် ကြိုးစားနေပါက ထို command တွင် ထည့်သွင်းရန် သေချာပါစေ ။

JavaScript

နောက်ဆုံးထွက် Less.js ကို ဒေါင်းလုဒ်လုပ်ပြီး ၎င်း သို့သွားသည့်လမ်းကြောင်း (နှင့် Bootstrap) တွင် <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

.less ဖိုင်များကို ပြန်လည်စုစည်းရန် ၎င်းတို့ကို သိမ်းဆည်းပြီး သင့်စာမျက်နှာကို ပြန်လည်စတင်ပါ။ Less.js သည် ၎င်းတို့ကို စုစည်းပြီး စက်တွင်းသိုလှောင်မှုတွင် သိမ်းဆည်းထားသည်။

တရားဝင်မဟုတ်သော Mac အက်ပ်

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

နောက်ထပ်အက်ပ်များ

အကြပ်အတည်း

Crunch သည် Adobe Air တွင် တည်ဆောက်ထားသော အလွန်သေးငယ်သော တည်းဖြတ်သူနှင့် စုစည်းမှုကောင်းတစ်ခုဖြစ်သည်။

CodeKit

တရားဝင်မဟုတ်သော Mac အက်ပ်နှင့် အလားတူလူက ဖန်တီးထားသည့် CodeKit သည် LESS၊ SASS၊ Stylus နှင့် CoffeeScript တို့ကို စုစည်းထားသည့် Mac အက်ပ်တစ်ခုဖြစ်သည်။

ရိုးရှင်းသော

ဖိုင်နည်းပါးသော ဖိုင်များကို ဆွဲယူ၍ စုစည်းမှုအတွက် Mac၊ Linux နှင့် Windows အက်ပ်။ ထို့အပြင်၊ အရင်းအမြစ်ကုဒ်သည် GitHub တွင် ရှိသည်။

စုစည်းထားသော သို့မဟုတ် အနည်းအကျဉ်း CSS နှင့် JS တို့ကို ချခြင်းဖြင့် ဝဘ်ပရောဂျက်ကို အမြန်စတင် ပါ။ အဆင့်မြှင့်တင်မှုများနှင့် ပြုပြင်ထိန်းသိမ်းမှုများကို လွယ်ကူစွာ ရှေ့ဆက်သွားနိုင်ရန် စိတ်ကြိုက်စတိုင်များကို သီးခြားစီ အလွှာထားပါ။

ဖိုင်ဖွဲ့စည်းပုံကို စနစ်ထည့်သွင်းပါ။

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

  အက်ပ်/
      အပြင်အဆင်များ/
      ပုံစံများ/
  အများသူငှာ/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

စတင်သည့်ပုံစံကိုအသုံးပြုပါ။

စတင်ရန် အောက်ပါအခြေခံ HTML ကို ကူးယူပါ။

<html>
  <head>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> မင်္ဂလာပါ ကမ္ဘာ။ </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

စိတ်ကြိုက်ကုဒ်အပေါ် အလွှာ

သင်၏ကိုယ်ပိုင် သီးခြား CSS နှင့် JS ဖိုင်များဖြင့် သင့်ကိုယ်ပိုင် Bootstrap ပြုလုပ်ရန် သင့်စိတ်ကြိုက် CSS၊ JS နှင့် အခြားအရာများတွင် လုပ်ဆောင်ပါ။

<html>
  <head>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- ပရောဂျက် -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> မင်္ဂလာပါ ကမ္ဘာ။ </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- ပရောဂျက် -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Bootstrap တိုးချဲ့ခြင်း။

LESS ဖြင့် တည်ဆောက်ထားသည်။