Bootstrap ৰ CSS নিৰ্মাণ কৰিবলে ব্যৱহৃত চলকসমূহ, মিক্সিনসমূহ, আৰু অধিক সুবিধা ল'বলৈ LESS , এটা CSS প্ৰিপ্ৰচেছৰৰ সৈতে Bootstrap স্বনিৰ্বাচিত আৰু সম্প্ৰসাৰিত কৰক ।
বুটষ্ট্ৰেপ ইয়াৰ মূলত LESS ৰ সৈতে তৈয়াৰ কৰা হৈছে, আমাৰ ভাল বন্ধু, Alexis Sellier দ্বাৰা সৃষ্টি কৰা এটা গতিশীল ষ্টাইলশ্বীট ভাষা । ই চিস্টেম-ভিত্তিক CSS বিকাশ কৰাটো দ্ৰুত, সহজ, আৰু অধিক মজাদাৰ কৰে।
CSS ৰ এটা সম্প্ৰসাৰণ হিচাপে, LESS এ চলকসমূহ, ক'ডৰ পুনৰ ব্যৱহাৰযোগ্য স্নিপেটসমূহৰ বাবে মিক্সিনসমূহ, সৰল গণিতৰ বাবে কাৰ্য্যসমূহ, নেষ্টিং, আৰু আনকি ৰঙৰ ফলনসমূহ অন্তৰ্ভুক্ত কৰে।
CSS ত ৰং আৰু পিক্সেল মান পৰিচালনা কৰাটো অলপ কষ্টদায়ক হ’ব পাৰে, সাধাৰণতে কপি আৰু পেষ্টেৰে ভৰা। LESS ৰ সৈতে নহয় যদিও—ৰং বা পিক্সেল মানসমূহ চলক হিচাপে নিযুক্ত কৰক আৰু সিহতক এবাৰ সলনি কৰক।
সেই তিনিটা সীমা-ব্যাসাৰ্ধ ঘোষণা আপুনি নিয়মীয়া ol' CSS ত কৰিব লাগিব? এতিয়া সেইবোৰ মিক্সিনৰ সহায়ত এটা শাৰীলৈ নামি গৈছে, আপুনি যিকোনো ঠাইতে পুনৰ ব্যৱহাৰ কৰিব পৰা ক'ডৰ স্নিপেট।
অপাৰেচনসমূহৰ সৈতে গণিত অন দ্য ফ্লাই কৰি আপোনাৰ গ্ৰীড, লিডিং, আৰু অধিক ছুপাৰ নমনীয় কৰক। CSS sanity লৈ আপোনাৰ পথ গুণ কৰক, ভাগ কৰক, যোগ কৰক, আৰু বিয়োগ কৰক।
@bodyBackground |
@white |
পৃষ্ঠাৰ পটভূমিৰ ৰং | |
@textColor |
@grayDark |
সম্পূৰ্ণ দেহ, শিৰোনাম, আৰু অধিক ৰ বাবে অবিকল্পিত লিখনী ৰং | |
@linkColor |
#08c |
অবিকল্পিত সংযোগ লিখনী ৰং | |
@linkColorHover |
darken(@linkColor, 15%) |
অবিকল্পিত সংযোগ লিখনী হোভাৰ ৰং |
@gridColumns |
১২ |
@gridColumnWidth |
৬০পিক্সেল |
@gridGutterWidth |
২০পিক্সেল |
@fluidGridColumnWidth |
৬.৩৮২৯৭৮৭২৩% |
@fluidGridGutterWidth |
২.১২৭৬৫৯৫৭৪% |
@sansFontFamily |
"হেলভেটিকা নিউ", হেলভেটিকা, এৰিয়াল, ছান্স-চেৰিফ | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
মেনলো, মনাকো, "কুৰিয়ৰ নতুন", মনোস্পেচ | |
@baseFontSize |
13px | পিক্সেল হ’ব লাগিব |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
১৮পিক্সেল | পিক্সেল হ’ব লাগিব |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
@black |
#০০০ | |
@grayDarker |
#২২২ | |
@grayDark |
#৩৩৩ | |
@gray |
#৫৫৫ | |
@grayLight |
#৯৯৯ | |
@grayLighter |
#eee | |
@white |
#fff |
@blue |
#০৪৯চিডিবি | |
@green |
#৪৬ক৫৪৬ | |
@red |
#৯ঘ২৬১ঘ | |
@yellow |
#ffc40d | |
@orange |
#f৮৯৪০৬ | |
@pink |
#c৩৩২৫f | |
@purple |
#৭ক৪৩খ৬ |
@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 |
#গ০৯৮৫৩ | |
@warningBackground |
#f3edd2 | |
@errorText |
#খ৯৪ক৪৮ | |
@errorBackground |
#f2dede | |
@successText |
#৪৬৮৮৪৭ | |
@successBackground |
#dff0d8 | |
@infoText |
#৩a৮৭ad | |
@infoBackground |
#d9edf7 |
@navbarHeight |
৪০পিক্সেল | |
@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 |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
এটা মূল মিক্সিন মূলতঃ এটা অন্তৰ্ভুক্ত বা CSS ৰ এটা স্নিপেটৰ বাবে এটা আংশিক। চি এছ এছ ক্লাছৰ দৰেই লিখা হৈছে আৰু যিকোনো ঠাইতে কল কৰিব পাৰি।
- . উপাদান {
- . ক্লিয়াৰফিক্স ();
- }
এটা পেৰামেট্ৰিক মিক্সিন এটা মূল মিক্সিনৰ দৰেই, কিন্তু ই বৈকল্পিক অবিকল্পিত মানসমূহৰ সৈতে প্ৰাচলসমূহো গ্ৰহণ কৰে (সেয়েহে নামটো)।
- . উপাদান {
- . সীমা - ব্যাসাৰ্ধ ( 4px );
- }
Bootstrap ৰ প্ৰায় সকলো মিক্সিন mixins.less ত সংৰক্ষণ কৰা হয়, এটা আচৰিত সঁজুলি .less নথিপত্ৰ যি আপোনাক সঁজুলিকিটৰ যিকোনো .less নথিপত্ৰত এটা মিক্সিন ব্যৱহাৰ কৰিবলে সামৰ্থবান কৰে ।
গতিকে, আগবাঢ়ি যাওক আৰু বৰ্তমানৰবোৰ ব্যৱহাৰ কৰক বা প্ৰয়োজন অনুসৰি নিজৰ যোগ কৰিবলৈ নিঃসংকোচে অনুভৱ কৰক।
মিক্সিন | প্ৰাচলসমূহ | ব্যৱহাৰ |
---|---|---|
.clearfix() |
একো নাই | ভিতৰত ফ্ল'টসমূহ ক্লিয়াৰ কৰিবলৈ যিকোনো অভিভাৱকত যোগ কৰক |
.tab-focus() |
একো নাই | Webkit ফ'কাচ শৈলী আৰু ঘূৰণীয়া Firefox ৰূপৰেখা প্ৰয়োগ কৰক |
.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() |
একো নাই | এটা উপাদানক এটা serif ফন্ট ষ্টেক ব্যৱহাৰ কৰা কৰক |
#font > #family > .sans-serif() |
একো নাই | এটা উপাদানক এটা sans-serif ফন্ট ষ্টেক ব্যৱহাৰ কৰা কৰক |
#font > #family > .monospace() |
একো নাই | এটা উপাদানক এটা মনোস্পেচ ফন্ট ষ্টেক ব্যৱহাৰ কৰা কৰক |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
সহজে ফন্টৰ আকাৰ, ওজন, আৰু লিডিং ছেট কৰক |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ফন্ট পৰিয়ালক serif লে সংহতি কৰক, আৰু আকাৰ, ওজন, আৰু লিডিং নিয়ন্ত্ৰণ কৰক |
#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* |
মিক্সিন | প্ৰাচলসমূহ | ব্যৱহাৰ |
---|---|---|
.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 স্তম্ভ ব্যৱহাৰ কৰা কৰক |
.hyphens() |
@mode: auto |
আপুনি বিচৰাৰ সময়ত CSS3 হাইফেনেচন (অন্তৰ্ভুক্ত কৰা হৈছে word-wrap: break-word ) |
মিক্সিন | প্ৰাচলসমূহ | ব্যৱহাৰ |
---|---|---|
#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 |
এটা গ্ৰেডিয়েন্ট আৰু অলপ গাঢ় সীমা নিৰ্ধাৰণ কৰিবলে বুটামসমূহৰ বাবে ব্যৱহাৰ কৰা হয় |
LESS আদেশ শাৰী কমপাইলাৰ, JSHint, Recess, আৰু uglify-js গোলকীয়ভাৱে npm ৰ সৈতে সংস্থাপন কৰক নিম্নলিখিত আদেশ চলাই:
$ npm সংস্থাপন কৰক -g কম jshint ৰিচেছ uglify-js
এবাৰ সংস্থাপন make
কৰিলে আপোনাৰ bootstrap পঞ্জিকাৰ ৰূটৰ পৰা চলাওক আৰু আপুনি সকলো সংহতি কৰিছে ।
অতিৰিক্তভাৱে, যদি আপুনি watchr সংস্থাপন কৰিছে, আপুনি make watch
bootstrap স্বয়ংক্ৰিয়ভাৱে পুনৰ নিৰ্মাণ কৰিবলে চলাব পাৰে প্ৰতিবাৰ আপুনি bootstrap lib ত এটা নথিপত্ৰ সম্পাদন কৰাৰ সময়ত (এইটোৰ প্ৰয়োজন নাই, কেৱল এটা সুবিধা পদ্ধতি) ।
Node ৰ যোগেদি LESS আদেশ শাৰী সঁজুলি সংস্থাপন কৰক আৰু নিম্নলিখিত আদেশ চলাওক:
$ lessc ./less/বুটষ্ট্ৰেপ.লেছ > বুটষ্ট্ৰেপ.css
--compress
যদি আপুনি কিছুমান বাইট সংৰক্ষণ কৰিবলৈ চেষ্টা কৰিছে তেন্তে সেই আদেশত অন্তৰ্ভুক্ত কৰাটো নিশ্চিত কৰক !
শেহতীয়া Less.js ডাউনল'ড কৰক আৰু ইয়াৰ পথ (আৰু Bootstrap) ত অন্তৰ্ভুক্ত কৰক <head>
।
<link rel = "ষ্টাইলশ্বীট/কম" href = "/পথ/ৰ পৰা/বুটষ্ট্ৰেপ.কম" > <script src = "/পথ/ৰ পৰা/কম.js" ></script>
.less নথিপত্ৰসমূহ পুনৰায় কম্পাইল কৰিবলে, মাত্ৰ সিহতক সংৰক্ষণ কৰক আৰু আপোনাৰ পৃষ্ঠা পুনৰায় ল'ড কৰক । Less.js এ সিহতক কম্পাইল কৰে আৰু স্থানীয় সংৰক্ষণত সংৰক্ষণ কৰে।
বেচৰকাৰী Mac এপটোৱে .less ফাইলসমূহৰ ডাইৰেকটৰীসমূহ চায় আৰু এটা চোৱা .less ফাইলৰ প্ৰতিটো সংৰক্ষণৰ পিছত ক'ডটো স্থানীয় ফাইলসমূহলৈ কম্পাইল কৰে।
যদি আপুনি বিচাৰে, আপুনি স্বয়ংক্ৰিয় ক্ষুদ্ৰকৰণৰ বাবে এপটোত পছন্দসমূহ টগল কৰিব পাৰে আৰু কম্পাইল কৰা ফাইলসমূহ কোনটো ডাইৰেকটৰীত শেষ হয়।
ক্ৰাঞ্চ হৈছে এড’ব এয়াৰত নিৰ্মিত এটা ডাঙৰ দেখা LESS সম্পাদক আৰু কম্পাইলাৰ।
বেচৰকাৰী মেক এপৰ দৰে একেজন ল'ৰাই সৃষ্টি কৰা, CodeKit হৈছে এটা মেক এপ যিয়ে LESS, SASS, Stylus, আৰু CoffeeScript কম্পাইল কৰে।
LESS ফাইলসমূহৰ ড্ৰেগ আৰু ড্ৰপ কম্পাইলিঙৰ বাবে মেক, লিনাক্স, আৰু পিচি এপ। ইয়াৰ উপৰিও, উৎস ক'ড GitHub ত আছে ।