বুটষ্ট্ৰেপৰ সৈতে LESS ব্যৱহাৰ কৰা

Bootstrap ৰ CSS নিৰ্মাণ কৰিবলে ব্যৱহৃত চলকসমূহ, মিক্সিনসমূহ, আৰু অধিক সুবিধা ল'বলৈ LESS , এটা CSS প্ৰিপ্ৰচেছৰৰ সৈতে Bootstrap স্বনিৰ্বাচিত আৰু সম্প্ৰসাৰিত কৰক ।

কিয় LESS?

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

কি অন্তৰ্ভুক্ত কৰা হৈছে?

CSS ৰ এটা সম্প্ৰসাৰণ হিচাপে, LESS এ চলকসমূহ, ক'ডৰ পুনৰ ব্যৱহাৰযোগ্য স্নিপেটসমূহৰ বাবে মিক্সিনসমূহ, সৰল গণিতৰ বাবে কাৰ্য্যসমূহ, নেষ্টিং, আৰু আনকি ৰঙৰ ফলনসমূহ অন্তৰ্ভুক্ত কৰে।

অধিক জানক

কম CSS

অধিক জানিবলৈ http://lesscss.org/ ৰ অফিচিয়েল ৱেবছাইট চাওক ।

চলকসমূহ

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 ৰ এটা স্নিপেটৰ ​​বাবে এটা আংশিক। চি এছ এছ ক্লাছৰ দৰেই লিখা হৈছে আৰু যিকোনো ঠাইতে কল কৰিব পাৰি।

  1. . উপাদান {
  2. . ক্লিয়াৰফিক্স ();
  3. }

পেৰামেট্ৰিক মিক্সিন

এটা পেৰামেট্ৰিক মিক্সিন এটা মূল মিক্সিনৰ দৰেই, কিন্তু ই বৈকল্পিক অবিকল্পিত মানসমূহৰ সৈতে প্ৰাচলসমূহো গ্ৰহণ কৰে (সেয়েহে নামটো)।

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

সহজেই নিজৰ যোগ কৰক

Bootstrap ৰ প্ৰায় সকলো মিক্সিন mixins.less ত সংৰক্ষণ কৰা হয়, এটা আচৰিত সঁজুলি .less নথিপত্ৰ যি আপোনাক সঁজুলিকিটৰ যিকোনো .less নথিপত্ৰত এটা মিক্সিন ব্যৱহাৰ কৰিবলে সামৰ্থবান কৰে ।

গতিকে, আগবাঢ়ি যাওক আৰু বৰ্তমানৰবোৰ ব্যৱহাৰ কৰক বা প্ৰয়োজন অনুসৰি নিজৰ যোগ কৰিবলৈ নিঃসংকোচে অনুভৱ কৰক।

মিক্সিন অন্তৰ্ভুক্ত কৰা হৈছে

উপযোগীতাসমূহ

মিক্সিন প্ৰাচলসমূহ ব্যৱহাৰ
.clearfix() একো নাই ভিতৰত ফ্ল'টসমূহ ক্লিয়াৰ কৰিবলৈ যিকোনো অভিভাৱকত যোগ কৰক
.tab-focus() একো নাই Webkit ফ'কাচ শৈলী আৰু ঘূৰণীয়া Firefox ৰূপৰেখা প্ৰয়োগ কৰক
.center-block() একো নাই ব্যৱহাৰ কৰি এটা ব্লক-স্তৰৰ উপাদান অটো চেণ্টাৰ কৰকmargin: auto
.ie7-inline-block() একো নাই display: inline-blockIE7 সমৰ্থন পাবলৈ নিয়মীয়াৰ উপৰিও ব্যৱহাৰ কৰক
.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*

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 স্তম্ভ ব্যৱহাৰ কৰা কৰক
.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 এটা গ্ৰেডিয়েন্ট আৰু অলপ গাঢ় সীমা নিৰ্ধাৰণ কৰিবলে বুটামসমূহৰ বাবে ব্যৱহাৰ কৰা হয়
টোকা: যদি আপুনি পৰিবৰ্তিত CSS ৰ সৈতে GitHub লৈ এটা পুল অনুৰোধ জমা দিছে, আপুনি এই পদ্ধতিসমূহৰ যিকোনো এটাৰ যোগেদি CSS পুনৰায় কম্পাইল কৰিব লাগিব ।

কম্পাইলিঙৰ বাবে সঁজুলি

মেকফাইলৰ সৈতে ন'ড

LESS আদেশ শাৰী কমপাইলাৰ, JSHint, Recess, আৰু uglify-js গোলকীয়ভাৱে npm ৰ সৈতে সংস্থাপন কৰক নিম্নলিখিত আদেশ চলাই:

$ npm সংস্থাপন কৰক -g কম jshint ৰিচেছ uglify-js

এবাৰ সংস্থাপন makeকৰিলে আপোনাৰ bootstrap পঞ্জিকাৰ ৰূটৰ পৰা চলাওক আৰু আপুনি সকলো সংহতি কৰিছে ।

অতিৰিক্তভাৱে, যদি আপুনি watchr সংস্থাপন কৰিছে, আপুনি make watchbootstrap স্বয়ংক্ৰিয়ভাৱে পুনৰ নিৰ্মাণ কৰিবলে চলাব পাৰে প্ৰতিবাৰ আপুনি 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 ত আছে