প্রসারিত · বুটস্ট্র্যাপ বাংলায়

বুটস্ট্র্যাপ এর মূল অংশে LESS দিয়ে তৈরি করা হয়েছে, একটি গতিশীল স্টাইলশীট ভাষা যা আমাদের ভালো বন্ধু অ্যালেক্সিস সেলিয়ার তৈরি করেছেন । এটি সিস্টেম-ভিত্তিক সিএসএসকে দ্রুত, সহজ এবং আরও মজাদার করে তোলে।

কেন কম?

বুটস্ট্র্যাপের একজন নির্মাতা এই বিষয়ে একটি দ্রুত ব্লগ পোস্ট লিখেছেন , এখানে সংক্ষিপ্ত করা হয়েছে:

বুটস্ট্র্যাপ Sass এর তুলনায় কম সহ ~6x দ্রুত কম্পাইল করে
জাভাস্ক্রিপ্টে কম লেখা আছে, যা আমাদের জন্য ডাইভ ইন এবং প্যাচ করা সহজ করে তোলে Sass-এর সাথে রুবির তুলনায়।
কমই বেশি; আমরা মনে করতে চাই যে আমরা সিএসএস লিখছি এবং বুটস্ট্র্যাপকে সবার কাছে পৌঁছানোর উপযোগী করে তুলছি।

কি অন্তর্ভুক্ত?

CSS-এর একটি এক্সটেনশন হিসাবে, LESS-এর মধ্যে ভেরিয়েবল, কোডের পুনঃব্যবহারযোগ্য স্নিপেটের জন্য মিক্সন, সাধারণ গণিতের জন্য অপারেশন, নেস্টিং এবং এমনকি রঙ ফাংশন অন্তর্ভুক্ত রয়েছে।

আরও জানুন

আরও জানতে http://lesscss.org/- এ অফিসিয়াল ওয়েবসাইট দেখুন।

যেহেতু আমাদের CSS Less দিয়ে লেখা এবং ভেরিয়েবল এবং মিক্সিন ব্যবহার করে, তাই এটি চূড়ান্ত উৎপাদন বাস্তবায়নের জন্য কম্পাইল করা দরকার। এখানে কিভাবে.

দ্রষ্টব্য: আপনি যদি পরিবর্তিত CSS সহ GitHub-এ একটি পুল অনুরোধ জমা দেন, তাহলে আপনাকে অবশ্যই এই পদ্ধতিগুলির যেকোনো একটির মাধ্যমে CSS পুনরায় কম্পাইল করতে হবে।

কম্পাইল করার জন্য টুল

মেকফাইল সহ নোড

নিম্নোক্ত কমান্ডটি চালিয়ে npm সহ বিশ্বব্যাপী LESS কমান্ড লাইন কম্পাইলার, JSHint, Recess এবং uglify-js ইনস্টল করুন:

$npm install -g less jshint recess uglify-js

একবার ইনস্টল হয়ে গেলে makeআপনার বুটস্ট্র্যাপ ডিরেক্টরির রুট থেকে চালান এবং আপনি সম্পূর্ণ প্রস্তুত।

অতিরিক্তভাবে, যদি আপনার ওয়াচার ইন্সটল করা থাকে, আপনি make watchবুটস্ট্র্যাপ লিব-এ ফাইল এডিট করার সময় বুটস্ট্র্যাপ স্বয়ংক্রিয়ভাবে পুনর্নির্মাণ করতে পারেন (এটির প্রয়োজন নেই, শুধুমাত্র একটি সুবিধার পদ্ধতি)।

কমান্ড লাইন

নোডের মাধ্যমে LESS কমান্ড লাইন টুলটি ইনস্টল করুন এবং নিম্নলিখিত কমান্ডটি চালান:

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

--compressআপনি যদি কিছু বাইট সংরক্ষণ করার চেষ্টা করছেন তবে সেই কমান্ডে অন্তর্ভুক্ত করতে ভুলবেন না !

জাভাস্ক্রিপ্ট

সর্বশেষ Less.js ডাউনলোড করুন এবং এটিতে যাওয়ার পথ (এবং বুটস্ট্র্যাপ) অন্তর্ভুক্ত করুন <head>।

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

.less ফাইলগুলি পুনরায় কম্পাইল করতে, কেবল সেগুলি সংরক্ষণ করুন এবং আপনার পৃষ্ঠা পুনরায় লোড করুন৷ Less.js তাদের কম্পাইল করে এবং স্থানীয় স্টোরেজে সংরক্ষণ করে।

অনানুষ্ঠানিক ম্যাক অ্যাপ

অনানুষ্ঠানিক ম্যাক অ্যাপটি .less ফাইলের ডিরেক্টরি দেখে এবং একটি দেখা .less ফাইলের প্রতিটি সংরক্ষণের পরে স্থানীয় ফাইলগুলিতে কোডটি কম্পাইল করে। আপনি যদি চান, আপনি স্বয়ংক্রিয়ভাবে ছোট করার জন্য অ্যাপে পছন্দগুলি টগল করতে পারেন এবং কম্পাইল করা ফাইলগুলি কোন ডিরেক্টরিতে শেষ হবে।

আরো অ্যাপ্লিকেশান

ক্রাঞ্চ

Crunch হল Adobe Air-এ নির্মিত একটি দুর্দান্ত লুকিং কম এডিটর এবং কম্পাইলার।

কোডকিট

আনঅফিসিয়াল ম্যাক অ্যাপের মতো একই লোক দ্বারা তৈরি, কোডকিট হল একটি ম্যাক অ্যাপ যা কম, SASS, স্টাইলাস এবং কফিস্ক্রিপ্ট সংকলন করে।

সরল

কম ফাইল ড্র্যাগ এবং ড্রপ কম্পাইল করার জন্য Mac, Linux, এবং Windows অ্যাপ। এছাড়াও, সোর্স কোডটি GitHub-এ রয়েছে ।

কম্পাইল করা বা মিনিফাইড CSS এবং JS-এ ড্রপ করে যেকোনো ওয়েব প্রোজেক্ট দ্রুত শুরু করুন। সহজ আপগ্রেড এবং রক্ষণাবেক্ষণের জন্য আলাদাভাবে কাস্টম শৈলীতে স্তর রাখুন।

ফাইল কাঠামো সেটআপ করুন

সর্বশেষ সংকলিত বুটস্ট্র্যাপ ডাউনলোড করুন এবং আপনার প্রকল্পে রাখুন। উদাহরণস্বরূপ, আপনার কাছে এরকম কিছু থাকতে পারে:

  অ্যাপ/
      বিন্যাস/
      টেমপ্লেট/
  সর্বজনীন/
      css/
          bootstrap.min.css
      জেএস/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

স্টার্টার টেমপ্লেট ব্যবহার করুন

শুরু করতে নিচের বেস এইচটিএমএল কপি করুন।

<html>
  <মাথা>
    <title> বুটস্ট্র্যাপ 101 টেমপ্লেট </title>
    <!-- বুটস্ট্র্যাপ -->
    <link href = "public/css/bootstrap.min.css" rel = "স্টাইলশীট" >  
  </head>
  <body>
    <h1> হ্যালো, বিশ্ব! </h1>
    <!-- বুটস্ট্র্যাপ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

কাস্টম কোডের উপর স্তর

আপনার নিজস্ব CSS এবং JS ফাইলগুলির সাথে বুটস্ট্র্যাপকে আপনার নিজস্ব করার জন্য আপনার কাস্টম CSS, JS এবং আরও অনেক কিছুতে কাজ করুন।

<html>
  <মাথা>
    <title> বুটস্ট্র্যাপ 101 টেমপ্লেট </title>
    <!-- বুটস্ট্র্যাপ -->
    <link href = "public/css/bootstrap.min.css" rel = "স্টাইলশীট" >  
    <!-- প্রকল্প -->
    <link href = "public/css/application.css" rel = "স্টাইলশীট" >  
  </head>
  <body>
    <h1> হ্যালো, বিশ্ব! </h1>
    <!-- বুটস্ট্র্যাপ -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- প্রকল্প -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

বুটস্ট্র্যাপ প্রসারিত করা হচ্ছে

কম দিয়ে তৈরি