বুটস্ট্র্যাপের সাথে কম ব্যবহার করা
বুটস্ট্র্যাপের সিএসএস তৈরি করতে ব্যবহৃত ভেরিয়েবল, মিক্সিন এবং আরও অনেক কিছুর সুবিধা নিতে LESS , একটি CSS প্রিপ্রসেসর দিয়ে বুটস্ট্র্যাপ কাস্টমাইজ এবং প্রসারিত করুন ।
কম দিয়ে তৈরি
কেন কম?
বুটস্ট্র্যাপ এর মূল অংশে কম দিয়ে তৈরি করা হয়েছে, একটি গতিশীল স্টাইলশীট ভাষা যা আমাদের ভালো বন্ধু অ্যালেক্সিস সেলিয়ার তৈরি করেছেন । এটি সিস্টেম-ভিত্তিক সিএসএসকে দ্রুত, সহজ এবং আরও মজাদার করে তোলে।
কি অন্তর্ভুক্ত?
CSS-এর একটি এক্সটেনশন হিসেবে, LESS-এর মধ্যে ভেরিয়েবল, কোডের পুনঃব্যবহারযোগ্য স্নিপেটগুলির জন্য মিশ্রণ, সাধারণ গণিতের জন্য অপারেশন, নেস্টিং এবং এমনকি রঙ ফাংশন অন্তর্ভুক্ত রয়েছে।
ভেরিয়েবল
CSS-এ রঙ এবং পিক্সেল মান পরিচালনা করা কিছুটা কষ্টের হতে পারে, সাধারণত কপি এবং পেস্টে পূর্ণ। যদিও কম দিয়ে নয়—ভেরিয়েবল হিসেবে রঙ বা পিক্সেল মান নির্ধারণ করুন এবং একবার পরিবর্তন করুন।
মিক্সিন
এই তিনটি সীমানা-ব্যাসার্ধ ঘোষণা আপনাকে নিয়মিত OL' CSS-এ করতে হবে? এখন তারা মিক্সিন, কোডের স্নিপেটগুলির সাহায্যে এক লাইনে নেমে গেছে যা আপনি যে কোনও জায়গায় পুনরায় ব্যবহার করতে পারেন।
অপারেশন
আপনার গ্রিড, নেতৃস্থানীয়, এবং আরো সুপার নমনীয় করুন অপারেশনের সাথে উড়তে থাকা গণিত করে। একাধিক, ভাগ, যোগ, এবং বিয়োগ আপনার উপায় সিএসএস বিচক্ষণতা.
বুটস্ট্র্যাপ ভেরিয়েবল কম ভেরিয়েবল, তাদের মান এবং ব্যবহারের নির্দেশিকা
হাইপারলিঙ্ক
@linkColor |
#08c | ডিফল্ট লিঙ্ক পাঠ্য রঙ | |
@linkColorHover |
darken(@linkColor, 15%) |
ডিফল্ট লিঙ্ক পাঠ্য হোভার রঙ |
গ্রিড সিস্টেম
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
টাইপোগ্রাফি
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
গ্রেস্কেল রং
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#ইইই | |
@white |
#fff |
উচ্চারণ রং
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
উপাদান
বোতাম
@primaryButtonBackground |
@linkColor |
ফর্ম
@placeholderText |
@grayLight |
নববার
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
ফর্ম রাজ্য এবং সতর্কতা
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
বুটস্ট্র্যাপ মিক্সিন
মিক্সিং সম্পর্কে
মৌলিক মিশ্রণ
একটি মৌলিক মিশ্রণ মূলত CSS-এর একটি স্নিপেটের জন্য একটি অন্তর্ভুক্ত বা একটি আংশিক। এগুলি সিএসএস ক্লাসের মতোই লেখা এবং যে কোনও জায়গায় কল করা যেতে পারে।
- . উপাদান {
- . clearfix ();
- }
প্যারামেট্রিক মিশ্রণ
একটি প্যারামেট্রিক মিক্সিন একটি মৌলিক মিশ্রণের মতই, তবে এটি ঐচ্ছিক ডিফল্ট মান সহ প্যারামিটার (অতএব নাম) গ্রহণ করে।
- . উপাদান {
- . সীমানা - ব্যাসার্ধ ( 4px );
- }
সহজেই আপনার নিজের যোগ করুন
বুটস্ট্র্যাপের প্রায় সমস্ত মিক্সিন mixins.less-এ সংরক্ষিত আছে, একটি চমৎকার ইউটিলিটি .less ফাইল যা আপনাকে টুলকিটের যেকোনো .less ফাইলে একটি মিক্সিন ব্যবহার করতে সক্ষম করে।
সুতরাং, এগিয়ে যান এবং বিদ্যমানগুলি ব্যবহার করুন বা আপনার প্রয়োজন অনুসারে আপনার নিজস্ব যোগ করতে দ্বিধা বোধ করুন৷
মিশ্রণ অন্তর্ভুক্ত
ইউটিলিটিস
| মিক্সিন | পরামিতি | ব্যবহার |
|---|---|---|
.clearfix() |
কোনটি | ভিতরে ফ্লোটগুলি পরিষ্কার করতে যেকোন পিতামাতার সাথে যোগ করুন |
.tab-focus() |
কোনটি | ওয়েবকিট ফোকাস শৈলী এবং বৃত্তাকার ফায়ারফক্স রূপরেখা প্রয়োগ করুন |
.center-block() |
কোনটি | অটো সেন্টার ব্যবহার করে একটি ব্লক-স্তরের উপাদানmargin: auto |
.ie7-inline-block() |
কোনটি | display: inline-blockIE7 সমর্থন পেতে নিয়মিত ছাড়াও ব্যবহার করুন |
.size() |
@height: 5px, @width: 5px |
দ্রুত উচ্চতা এবং প্রস্থ এক লাইনে সেট করুন |
.square() |
@size: 5px |
.size()একই মান হিসাবে প্রস্থ এবং উচ্চতা সেট করার জন্য তৈরি করে |
.opacity() |
@opacity: 100 |
পূর্ণ সংখ্যায়, অস্বচ্ছতা শতাংশ সেট করুন (যেমন, "50" বা "75") |
ফর্ম
| মিক্সিন | পরামিতি | ব্যবহার |
|---|---|---|
.placeholder() |
@color: @placeholderText |
placeholderইনপুটগুলির জন্য পাঠ্যের রঙ সেট করুন |
টাইপোগ্রাফি
| মিক্সিন | পরামিতি | ব্যবহার |
|---|---|---|
#font > #family > .serif() |
কোনটি | সেরিফ ফন্ট স্ট্যাক ব্যবহার করে একটি উপাদান তৈরি করুন |
#font > #family > .sans-serif() |
কোনটি | একটি সান-সেরিফ ফন্ট স্ট্যাক ব্যবহার করে একটি উপাদান তৈরি করুন |
#font > #family > .monospace() |
কোনটি | একটি মনোস্পেস ফন্ট স্ট্যাক ব্যবহার করে একটি উপাদান তৈরি করুন |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
সহজেই ফন্টের আকার, ওজন এবং অগ্রণী সেট করুন |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ফন্ট ফ্যামিলিকে সেরিফে সেট করুন এবং সাইজ, ওজন এবং লিডিং নিয়ন্ত্রণ করুন |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ফন্ট ফ্যামিলি sans-serif-এ সেট করুন এবং সাইজ, ওজন এবং লিডিং নিয়ন্ত্রণ করুন |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ফন্ট পরিবারকে মনোস্পেসে সেট করুন এবং আকার, ওজন এবং অগ্রণী নিয়ন্ত্রণ করুন |
গ্রিড সিস্টেম
| মিক্সিন | পরামিতি | ব্যবহার |
|---|---|---|
.container-fixed() |
কোনটি | @siteWidthআপনার বিষয়বস্তু ধারণ করার জন্য একটি নির্দিষ্ট-প্রস্থ (এর সাথে সেট ) কন্টেইনার প্রদান করুন |
.columns() |
@columns: 1 |
একটি গ্রিড কলাম তৈরি করুন যা যেকোনো সংখ্যক কলামকে বিস্তৃত করে (ডিফল্ট 1 কলামে) |
.offset() |
@columns: 1 |
বাম মার্জিন সহ একটি গ্রিড কলাম অফসেট করুন যা যেকোন সংখ্যক কলাম বিস্তৃত করে |
.gridColumn() |
কোনটি | একটি গ্রিড কলামের মত একটি উপাদান ভাসমান করুন |
CSS3 বৈশিষ্ট্য
| মিক্সিন | পরামিতি | ব্যবহার |
|---|---|---|
.border-radius() |
@radius: 5px |
একটি উপাদানের কোণে বৃত্তাকার. একটি একক মান বা চারটি স্থান-বিচ্ছিন্ন মান হতে পারে |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
একটি উপাদান একটি ড্রপ ছায়া যোগ করুন |
.transition() |
@transition |
CSS3 রূপান্তর প্রভাব যোগ করুন (যেমন, all .2s linear) |
.rotate() |
@degrees |
একটি উপাদান n ডিগ্রি ঘোরান |
.scale() |
@ratio |
একটি উপাদানকে এটির আসল আকারের n গুণে স্কেল করুন |
.translate() |
@x: 0, @y: 0 |
x এবং y সমতলগুলিতে একটি উপাদান সরান |
.background-clip() |
@clip |
একটি উপাদানের ব্যাকগ্রাউড ক্রপ করুন (এর জন্য দরকারী border-radius) |
.background-size() |
@size |
CSS3 এর মাধ্যমে ব্যাকগ্রাউন্ড ইমেজের আকার নিয়ন্ত্রণ করুন |
.box-sizing() |
@boxmodel |
একটি উপাদানের জন্য বক্স মডেল পরিবর্তন করুন (যেমন, border-boxএকটি পূর্ণ-প্রস্থের জন্য input) |
.user-select() |
@select |
একটি পৃষ্ঠায় পাঠ্যের কার্সার নির্বাচন নিয়ন্ত্রণ করুন |
.resizable() |
@direction: both |
ডান এবং নীচে যে কোনো উপাদানের আকার পরিবর্তনযোগ্য করুন |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
CSS3 কলাম ব্যবহার করে যেকোনো উপাদানের বিষয়বস্তু তৈরি করুন |
পটভূমি এবং গ্রেডিয়েন্ট
| মিক্সিন | পরামিতি | ব্যবহার |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
একটি উপাদানকে একটি স্বচ্ছ পটভূমির রঙ দিন |
.#translucent > .border() |
@color: @white, @alpha: 1 |
একটি উপাদানকে একটি স্বচ্ছ বর্ডার রঙ দিন |
.#gradient > .vertical() |
@startColor, @endColor |
একটি ক্রস-ব্রাউজার উল্লম্ব পটভূমি গ্রেডিয়েন্ট তৈরি করুন |
.#gradient > .horizontal() |
@startColor, @endColor |
একটি ক্রস-ব্রাউজার অনুভূমিক ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট তৈরি করুন |
.#gradient > .directional() |
@startColor, @endColor, @deg |
একটি ক্রস-ব্রাউজার দিকনির্দেশক পটভূমি গ্রেডিয়েন্ট তৈরি করুন |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
একটি ক্রস-ব্রাউজার তিন-রঙের পটভূমি গ্রেডিয়েন্ট তৈরি করুন |
.#gradient > .radial() |
@innerColor, @outerColor |
একটি ক্রস-ব্রাউজার রেডিয়াল ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট তৈরি করুন |
.#gradient > .striped() |
@color, @angle |
একটি ক্রস-ব্রাউজার স্ট্রাইপড ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট তৈরি করুন |
.#gradientBar() |
@primaryColor, @secondaryColor |
একটি গ্রেডিয়েন্ট এবং সামান্য গাঢ় সীমানা নির্ধারণের জন্য বোতামগুলির জন্য ব্যবহৃত হয় |
কম দিয়ে বুটস্ট্র্যাপ কম্পাইল করা হচ্ছে
কম্পাইল করার জন্য টুল
মেকফাইল সহ নোড
নিম্নোক্ত কমান্ডটি চালিয়ে npm সহ কম কমান্ড লাইন কম্পাইলার ইনস্টল করুন:
$npm কম ইন্সটল করুন
একবার ইনস্টল হয়ে গেলে makeআপনার বুটস্ট্র্যাপ ডিরেক্টরির রুট থেকে চালান এবং আপনি সম্পূর্ণ প্রস্তুত।
অতিরিক্তভাবে, যদি আপনার ওয়াচার ইন্সটল করা থাকে, আপনি বুটস্ট্র্যাপ lib-make watch এ ফাইল এডিট করার সময় বুটস্ট্র্যাপ স্বয়ংক্রিয়ভাবে পুনর্নির্মাণ করতে পারেন (এটির প্রয়োজন নেই, শুধুমাত্র একটি সুবিধার পদ্ধতি)।
কমান্ড লাইন
নোডের মাধ্যমে LESS কমান্ড লাইন টুলটি ইনস্টল করুন এবং নিম্নলিখিত কমান্ডটি চালান:
$lessc ./lib/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, এবং PC অ্যাপ। এছাড়াও, সোর্স কোডটি GitHub-এ রয়েছে ।