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

বুটস্ট্র্যাপের সিএসএস তৈরি করতে ব্যবহৃত ভেরিয়েবল, মিক্সিন এবং আরও অনেক কিছুর সুবিধা নিতে 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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

হিরো ইউনিট

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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

মৌলিক মিশ্রণ

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

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

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

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

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

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

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

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

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

ইউটিলিটিস

মিক্সিন পরামিতি ব্যবহার
.clearfix() কোনটি ভিতরে ফ্লোটগুলি পরিষ্কার করতে যেকোন পিতামাতার সাথে যোগ করুন
.tab-focus() কোনটি ওয়েবকিট ফোকাস শৈলী এবং বৃত্তাকার ফায়ারফক্স রূপরেখা প্রয়োগ করুন
.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() কোনটি সেরিফ ফন্ট স্ট্যাক ব্যবহার করে একটি উপাদান তৈরি করুন
#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 কলাম ব্যবহার করে যেকোনো উপাদানের বিষয়বস্তু তৈরি করুন
.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 পুনরায় কম্পাইল করতে হবে।

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

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

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

$npm install -g less jshint recess uglify-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 ফাইলের প্রতিটি সংরক্ষণের পরে স্থানীয় ফাইলগুলিতে কোডটি কম্পাইল করে।

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

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

ক্রাঞ্চ

Crunch হল Adobe Air-এ নির্মিত একটি দুর্দান্ত লুকিং কম এডিটর এবং কম্পাইলার।

কোডকিট

আনঅফিসিয়াল ম্যাক অ্যাপের মতো একই লোক দ্বারা তৈরি, কোডকিট হল একটি ম্যাক অ্যাপ যা কম, SASS, স্টাইলাস এবং কফিস্ক্রিপ্ট সংকলন করে।

সরল

কম ফাইল ড্র্যাগ এবং ড্রপ কম্পাইল করার জন্য Mac, Linux, এবং PC অ্যাপ। এছাড়াও, সোর্স কোডটি GitHub-এ রয়েছে