বুটষ্ট্ৰেপৰ সৈতে LESS ব্যৱহাৰ কৰা
Bootstrap ৰ CSS নিৰ্মাণ কৰিবলে ব্যৱহৃত চলকসমূহ, মিক্সিনসমূহ, আৰু অধিক সুবিধা ল'বলৈ LESS , এটা CSS প্ৰিপ্ৰচেছৰৰ সৈতে Bootstrap স্বনিৰ্বাচিত আৰু সম্প্ৰসাৰিত কৰক ।
LESS ৰ সৈতে নিৰ্মিত
কিয় LESS?
বুটষ্ট্ৰেপ ইয়াৰ মূলত LESS ৰ সৈতে তৈয়াৰ কৰা হৈছে, আমাৰ ভাল বন্ধু, Alexis Sellier দ্বাৰা সৃষ্টি কৰা এটা গতিশীল ষ্টাইলশ্বীট ভাষা । ই চিস্টেম-ভিত্তিক CSS বিকাশ কৰাটো দ্ৰুত, সহজ, আৰু অধিক মজাদাৰ কৰে।
কি অন্তৰ্ভুক্ত কৰা হৈছে?
CSS ৰ এটা সম্প্ৰসাৰণ হিচাপে, LESS এ চলকসমূহ, ক'ডৰ পুনৰ ব্যৱহাৰযোগ্য স্নিপেটসমূহৰ বাবে মিক্সিনসমূহ, সৰল গণিতৰ বাবে কাৰ্য্যসমূহ, নেষ্টিং, আৰু আনকি ৰঙৰ ফলনসমূহ অন্তৰ্ভুক্ত কৰে।
চলকসমূহ
CSS ত ৰং আৰু পিক্সেল মান পৰিচালনা কৰাটো অলপ কষ্টদায়ক হ’ব পাৰে, সাধাৰণতে কপি আৰু পেষ্টেৰে ভৰা। LESS ৰ সৈতে নহয় যদিও—ৰং বা পিক্সেল মানসমূহ চলক হিচাপে নিযুক্ত কৰক আৰু সিহতক এবাৰ সলনি কৰক।
মিক্সিন
সেই তিনিটা সীমা-ব্যাসাৰ্ধ ঘোষণা আপুনি নিয়মীয়া ol' CSS ত কৰিব লাগিব? এতিয়া সেইবোৰ মিক্সিনৰ সহায়ত এটা শাৰীলৈ নামি গৈছে, আপুনি যিকোনো ঠাইতে পুনৰ ব্যৱহাৰ কৰিব পৰা ক'ডৰ স্নিপেট।
অপাৰেচনসমূহ
অপাৰেচনসমূহৰ সৈতে গণিত অন দ্য ফ্লাই কৰি আপোনাৰ গ্ৰীড, লিডিং, আৰু অধিক ছুপাৰ নমনীয় কৰক। CSS sanity লৈ আপোনাৰ পথ বহুগুণ, ভাগ, যোগ, আৰু বিয়োগ কৰক।
বুটষ্ট্ৰেপ চলকসমূহ LESS চলকসমূহ, সিহতৰ মানসমূহ, আৰু ব্যৱহাৰৰ নিৰ্দেশিকাসমূহ
হাইপাৰলিংকসমূহ
@linkColor |
#০৮গ | অবিকল্পিত সংযোগ লিখনী ৰং | |
@linkColorHover |
darken(@linkColor, 15%) |
অবিকল্পিত সংযোগ লিখনী হোভাৰ ৰং |
গ্ৰীড ব্যৱস্থা
@gridColumns |
১২ |
@gridColumnWidth |
৬০পিক্সেল |
@gridGutterWidth |
২০পিক্সেল |
@fluidGridColumnWidth |
৬.৩৮২৯৭৮৭২৩% |
@fluidGridGutterWidth |
২.১২৭৬৫৯৫৭৪% |
টাইপোগ্ৰাফী
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
১৮পিক্সেল |
ধূসৰ ৰঙৰ ৰং
@black |
#০০০ | |
@grayDarker |
#২২২ | |
@grayDark |
#৩৩৩ | |
@gray |
#৫৫৫ | |
@grayLight |
#৯৯৯ | |
@grayLighter |
#eee | |
@white |
#fff |
উচ্চাৰণ ৰং
@blue |
#০৪৯চিডিবি | |
@green |
#৪৬ক৫৪৬ | |
@red |
#৯ঘ২৬১ঘ | |
@yellow |
#ffc40d | |
@orange |
#f৮৯৪০৬ | |
@pink |
#c৩৩২৫f | |
@purple |
#৭ক৪৩খ৬ |
উপাদানসমূহ
বুটামসমূহ
@primaryButtonBackground |
@linkColor |
প্ৰপত্ৰসমূহ
@placeholderText |
@grayLight |
নৱবৰ
@navbarHeight |
৪০পিক্সেল | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
অৱস্থা আৰু সতৰ্কবাণীসমূহ গঠন কৰক
@warningText |
#f3edd2 | |
@warningBackground |
#গ০৯৮৫৩ | |
@errorText |
#খ৯৪ক৪৮ | |
@errorBackground |
#f2dede | |
@successText |
#৪৬৮৮৪৭ | |
@successBackground |
#dff0d8 | |
@infoText |
#৩a৮৭ad | |
@infoBackground |
#d9edf7 |
বুটষ্ট্ৰেপ মিক্সিন
মিক্সিনৰ বিষয়ে
মৌলিক মিক্সিন
এটা মূল মিক্সিন মূলতঃ এটা অন্তৰ্ভুক্ত বা CSS ৰ এটা স্নিপেটৰ বাবে এটা আংশিক। চি এছ এছ ক্লাছৰ দৰেই লিখা হৈছে আৰু যিকোনো ঠাইতে কল কৰিব পাৰি।
- . উপাদান {
- . ক্লিয়াৰফিক্স ();
- }
পেৰামেট্ৰিক মিক্সিন
এটা পেৰামেট্ৰিক মিক্সিন এটা মূল মিক্সিনৰ দৰেই, কিন্তু ই বৈকল্পিক অবিকল্পিত মানসমূহৰ সৈতে প্ৰাচলসমূহো গ্ৰহণ কৰে (সেয়েহে নামটো)।
- . উপাদান {
- . সীমা - ব্যাসাৰ্ধ ( 4px );
- }
সহজেই নিজৰ যোগ কৰক
Bootstrap ৰ প্ৰায় সকলো মিক্সিন mixins.less ত সংৰক্ষণ কৰা হয়, এটা আচৰিত সঁজুলি .less নথিপত্ৰ যি আপোনাক সঁজুলিকিটৰ যিকোনো .less নথিপত্ৰত এটা মিক্সিন ব্যৱহাৰ কৰিবলে সামৰ্থবান কৰে ।
গতিকে, আগবাঢ়ি যাওক আৰু বৰ্তমানৰবোৰ ব্যৱহাৰ কৰক বা প্ৰয়োজন অনুসৰি নিজৰ যোগ কৰিবলৈ নিঃসংকোচে অনুভৱ কৰক।
মিক্সিন অন্তৰ্ভুক্ত কৰা হৈছে
উপযোগীতাসমূহ
| মিক্সিন | প্ৰাচলসমূহ | ব্যৱহাৰ |
|---|---|---|
.clearfix() |
একো নাই | ভিতৰত ফ্ল'টসমূহ ক্লিয়াৰ কৰিবলৈ যিকোনো অভিভাৱকত যোগ কৰক |
.tab-focus() |
একো নাই | Webkit ফ'কাচ শৈলী আৰু ঘূৰণীয়া Firefox ৰূপৰেখা প্ৰয়োগ কৰক |
.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() |
একো নাই | এটা উপাদানক এটা 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() |
একো নাই | @siteWidthআপোনাৰ বিষয়বস্তু ধৰি ৰাখিবলৈ এটা নিৰ্দিষ্ট-প্ৰস্থ (ৰ সৈতে সংহতি কৰা) ধাৰক প্ৰদান কৰক |
.columns() |
@columns: 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 |
এটা গ্ৰেডিয়েন্ট আৰু অলপ গাঢ় সীমা নিৰ্ধাৰণ কৰিবলে বুটামসমূহৰ বাবে ব্যৱহাৰ কৰা হয় |
LESS ৰ সৈতে বুটষ্ট্ৰেপ কম্পাইল কৰা
কম্পাইলিঙৰ বাবে সঁজুলি
মেকফাইলৰ সৈতে ন'ড
নিম্নলিখিত আদেশ চলাই npm ৰ সৈতে LESS আদেশ শাৰী কমপাইলাৰ সংস্থাপন কৰক:
$ npm কম ইনষ্টল কৰক
এবাৰ সংস্থাপন makeকৰিলে আপোনাৰ bootstrap পঞ্জিকাৰ ৰূটৰ পৰা চলাওক আৰু আপুনি সকলো সংহতি কৰিছে ।
অতিৰিক্তভাৱে, যদি আপুনি watchr সংস্থাপন কৰিছে, আপুনি make watchbootstrap স্বয়ংক্ৰিয়ভাৱে পুনৰ নিৰ্মাণ কৰিবলে চলাব পাৰে প্ৰতিবাৰ আপুনি bootstrap lib ত এটা নথিপত্ৰ সম্পাদন কৰাৰ সময়ত (এইটোৰ প্ৰয়োজন নাই, কেৱল এটা সুবিধা পদ্ধতি) ।
কমাণ্ড লাইন
Node ৰ যোগেদি LESS আদেশ শাৰী সঁজুলি সংস্থাপন কৰক আৰু নিম্নলিখিত আদেশ চলাওক:
$ lessc ./lib/bootstrap.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 ত আছে ।