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

বুটস্ট্র্যাপের সিএসএস তৈরি করতে ব্যবহৃত ভেরিয়েবল, মিক্সিন এবং আরও অনেক কিছুর সুবিধা নিতে LESS , একটি CSS প্রিপ্রসেসর দিয়ে বুটস্ট্র্যাপ কাস্টমাইজ এবং প্রসারিত করুন ।

কেন কম?

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

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

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

আরও জানুন

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

ভেরিয়েবল

CSS-এ রঙ এবং পিক্সেল মান পরিচালনা করা কিছুটা কষ্টের হতে পারে, সাধারণত কপি এবং পেস্টে পূর্ণ। যদিও কম দিয়ে নয়—ভেরিয়েবল হিসেবে রঙ বা পিক্সেল মান নির্ধারণ করুন এবং একবার পরিবর্তন করুন।

মিক্সিন

এই তিনটি সীমানা-ব্যাসার্ধ ঘোষণা আপনাকে নিয়মিত OL' CSS-এ করতে হবে? এখন তারা মিক্সিন, কোডের স্নিপেটগুলির সাহায্যে এক লাইনে নেমে গেছে যা আপনি যে কোনও জায়গায় পুনরায় ব্যবহার করতে পারেন।

অপারেশন

আপনার গ্রিড, নেতৃস্থানীয়, এবং আরো সুপার নমনীয় করুন অপারেশনের সাথে উড়তে থাকা গণিত করে। গুণ, ভাগ, যোগ, এবং বিয়োগ আপনার উপায় সিএসএস বিচক্ষণতা.

ভারা এবং লিঙ্ক

`@bodyBackground`	`@white`	পৃষ্ঠার পটভূমির রঙ
`@textColor`	`@grayDark`	পুরো শরীর, শিরোনাম এবং আরও অনেক কিছুর জন্য ডিফল্ট পাঠ্যের রঙ
`@linkColor`	`#08c`	ডিফল্ট লিঙ্ক পাঠ্য রঙ
`@linkColorHover`	`darken(@linkColor, 15%)`	ডিফল্ট লিঙ্ক পাঠ্য হোভার রঙ

গ্রিড সিস্টেম

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

টাইপোগ্রাফি

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	মেনলো, মোনাকো, "কুরিয়ার নিউ", মনোস্পেস
`@baseFontSize`	13px	পিক্সেল হতে হবে
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	পিক্সেল হতে হবে
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

টেবিল

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

গ্রেস্কেল রং

`@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

উপাদান

বোতাম

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

ফর্ম

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

ফর্ম রাজ্য এবং সতর্কতা

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

নববার

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

ড্রপডাউন

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`

হিরো ইউনিট

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

মিক্সিং সম্পর্কে

মৌলিক মিশ্রণ

একটি মৌলিক মিশ্রণ মূলত CSS-এর একটি স্নিপেটের জন্য একটি অন্তর্ভুক্ত বা একটি আংশিক। এগুলি সিএসএস ক্লাসের মতোই লেখা এবং যে কোনও জায়গায় কল করা যেতে পারে।

. উপাদান {
  . clearfix ();
}

প্যারামেট্রিক মিশ্রণ

একটি প্যারামেট্রিক মিক্সিন একটি মৌলিক মিশ্রণের মতই, তবে এটি ঐচ্ছিক ডিফল্ট মান সহ প্যারামিটার (অতএব নাম) গ্রহণ করে।

. উপাদান {
  . সীমানা - ব্যাসার্ধ ( 4px );
}

সহজেই আপনার নিজের যোগ করুন

বুটস্ট্র্যাপের প্রায় সমস্ত মিক্সিন mixins.less-এ সংরক্ষিত আছে, একটি চমৎকার ইউটিলিটি .less ফাইল যা আপনাকে টুলকিটের যেকোনো .less ফাইলে একটি মিক্সিন ব্যবহার করতে সক্ষম করে।

সুতরাং, এগিয়ে যান এবং বিদ্যমানগুলি ব্যবহার করুন বা আপনার প্রয়োজন অনুসারে আপনার নিজস্ব যোগ করতে দ্বিধা বোধ করুন৷

মিশ্রণ অন্তর্ভুক্ত

ইউটিলিটিস

মিক্সিন	পরামিতি	ব্যবহার
`.clearfix()`	কোনটি	ভিতরে ফ্লোটগুলি পরিষ্কার করতে যেকোন পিতামাতার সাথে যোগ করুন
`.tab-focus()`	কোনটি	ওয়েবকিট ফোকাস শৈলী এবং বৃত্তাকার ফায়ারফক্স রূপরেখা প্রয়োগ করুন
`.center-block()`	কোনটি	অটো সেন্টার ব্যবহার করে একটি ব্লক-স্তরের উপাদান`margin: auto`
`.ie7-inline-block()`	কোনটি	`display: inline-block`IE7 সমর্থন পেতে নিয়মিত ছাড়াও ব্যবহার করুন
`.size()`	`@height @width`	দ্রুত উচ্চতা এবং প্রস্থ এক লাইনে সেট করুন
`.square()`	`@size`	`.size()`একই মান হিসাবে প্রস্থ এবং উচ্চতা সেট করার জন্য তৈরি করে
`.opacity()`	`@opacity`	পূর্ণ সংখ্যায়, অস্বচ্ছতা শতাংশ সেট করুন (যেমন, "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()`	কোনটি	আপনার বিষয়বস্তু ধরে রাখার জন্য একটি অনুভূমিকভাবে কেন্দ্রীভূত ধারক তৈরি করুন
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	n কলাম এবং x পিক্সেল প্রশস্ত নর্দমা সহ একটি পিক্সেল গ্রিড সিস্টেম (ধারক, সারি এবং কলাম) তৈরি করুন
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	n কলাম এবং x % প্রশস্ত নর্দমা সহ একটি পূর্ববর্তী গ্রিড সিস্টেম তৈরি করুন
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	উপাদানগুলির জন্য পিক্সেল গ্রিড সিস্টেম তৈরি করুন `input`, প্যাডিং এবং সীমানাগুলির জন্য অ্যাকাউন্টিং
`.makeColumn`	`@columns: 1, @offset: 0`	ক্লাস ছাড়া যেকোনও `div`একটি গ্রিড কলামে পরিণত করুন`.span*`

CSS3 বৈশিষ্ট্য

মিক্সিন	পরামিতি	ব্যবহার
`.border-radius()`	`@radius`	একটি উপাদানের কোণে বৃত্তাকার. একটি একক মান বা চারটি স্থান-বিচ্ছিন্ন মান হতে পারে
`.box-shadow()`	`@shadow`	একটি উপাদান একটি ড্রপ ছায়া যোগ করুন
`.transition()`	`@transition`	CSS3 রূপান্তর প্রভাব যোগ করুন (যেমন, `all .2s linear`)
`.rotate()`	`@degrees`	একটি উপাদান n ডিগ্রি ঘোরান
`.scale()`	`@ratio`	একটি উপাদানকে তার আসল আকার n গুণ করুন
`.translate()`	`@x, @y`	x এবং y সমতলগুলিতে একটি উপাদান সরান
`.background-clip()`	`@clip`	একটি উপাদানের পটভূমি ক্রপ করুন (এর জন্য দরকারী `border-radius`)
`.background-size()`	`@size`	CSS3 এর মাধ্যমে ব্যাকগ্রাউন্ড ইমেজের আকার নিয়ন্ত্রণ করুন
`.box-sizing()`	`@boxmodel`	একটি উপাদানের জন্য বক্স মডেল পরিবর্তন করুন (যেমন, `border-box`একটি পূর্ণ-প্রস্থের জন্য `input`)
`.user-select()`	`@select`	একটি পৃষ্ঠায় পাঠ্যের কার্সার নির্বাচন নিয়ন্ত্রণ করুন
`.backface-visibility()`	`@visibility: visible`	CSS 3D ট্রান্সফর্ম ব্যবহার করার সময় বিষয়বস্তুর ঝিকিমিকি রোধ করুন
`.resizable()`	`@direction: both`	ডান এবং নীচে যে কোনো উপাদানের আকার পরিবর্তনযোগ্য করুন
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	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`	একটি গ্রেডিয়েন্ট এবং সামান্য গাঢ় সীমানা নির্ধারণের জন্য বোতামগুলির জন্য ব্যবহৃত হয়

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

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

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

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

$npm install -g less ugliify-js

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

অতিরিক্তভাবে, যদি আপনার ওয়াচার ইন্সটল করা থাকে, আপনি বুটস্ট্র্যাপ lib-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 ফাইলের প্রতিটি সংরক্ষণের পরে স্থানীয় ফাইলগুলিতে কোডটি কম্পাইল করে।

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

কম দিয়ে তৈরি

কেন কম?

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

আরও জানুন

ভেরিয়েবল

মিক্সিন

অপারেশন

বুটস্ট্র্যাপ ভেরিয়েবল কম ভেরিয়েবল, তাদের মান এবং ব্যবহারের নির্দেশিকা

ভারা এবং লিঙ্ক

গ্রিড সিস্টেম

টাইপোগ্রাফি

টেবিল

গ্রেস্কেল রং

উচ্চারণ রং

উপাদান

বোতাম

ফর্ম

ফর্ম রাজ্য এবং সতর্কতা

নববার

ড্রপডাউন

হিরো ইউনিট

বুটস্ট্র্যাপ মিক্সিন

মিক্সিং সম্পর্কে

মৌলিক মিশ্রণ

প্যারামেট্রিক মিশ্রণ

সহজেই আপনার নিজের যোগ করুন

মিশ্রণ অন্তর্ভুক্ত

ইউটিলিটিস

ফর্ম

টাইপোগ্রাফি

গ্রিড সিস্টেম

CSS3 বৈশিষ্ট্য

পটভূমি এবং গ্রেডিয়েন্ট

কম দিয়ে বুটস্ট্র্যাপ কম্পাইল করা হচ্ছে

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

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

কমান্ড লাইন

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

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

আরও ম্যাক অ্যাপ

ক্রাঞ্চ

কোডকিট

সরল