অন্তর্ভুক্ত স্টাইল এবং উপাদানগুলির পাশাপাশি কম ভেরিয়েবল এবং মিক্সিনের সুবিধা নিতে বুটস্ট্র্যাপ প্রসারিত করুন।
বুটস্ট্র্যাপ এর মূল অংশে LESS দিয়ে তৈরি করা হয়েছে, একটি গতিশীল স্টাইলশীট ভাষা যা আমাদের ভালো বন্ধু অ্যালেক্সিস সেলিয়ার তৈরি করেছেন । এটি সিস্টেম-ভিত্তিক সিএসএসকে দ্রুত, সহজ এবং আরও মজাদার করে তোলে।
বুটস্ট্র্যাপের একজন নির্মাতা এই বিষয়ে একটি দ্রুত ব্লগ পোস্ট লিখেছেন , এখানে সংক্ষিপ্ত করা হয়েছে:
CSS-এর একটি এক্সটেনশন হিসাবে, LESS-এর মধ্যে ভেরিয়েবল, কোডের পুনঃব্যবহারযোগ্য স্নিপেটের জন্য মিক্সন, সাধারণ গণিতের জন্য অপারেশন, নেস্টিং এবং এমনকি রঙ ফাংশন অন্তর্ভুক্ত রয়েছে।
আরও জানতে http://lesscss.org/- এ অফিসিয়াল ওয়েবসাইট দেখুন।
যেহেতু আমাদের CSS Less দিয়ে লেখা এবং ভেরিয়েবল এবং মিক্সিন ব্যবহার করে, তাই এটি চূড়ান্ত উৎপাদন বাস্তবায়নের জন্য কম্পাইল করা দরকার। এখানে কিভাবে.
কমান্ড লাইনের মাধ্যমে কম্পাইল করার জন্য গিটহাবে প্রজেক্ট রিডমিতে নির্দেশাবলী অনুসরণ করুন।
সর্বশেষ 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>