ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ LESS ବ୍ୟବହାର କରିବା |
ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ନିର୍ମାଣ ପାଇଁ ଭେରିଏବଲ୍, ମିକ୍ସିନ୍ ଏବଂ ଅଧିକ ବ୍ୟବହାର କରାଯାଉଥିବା LESS , CSS ପ୍ରିପ୍ରୋସେସର୍ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ କଷ୍ଟୋମାଇଜ୍ ଏବଂ ବିସ୍ତାର କର |
LESS ସହିତ ନିର୍ମିତ |
କାହିଁକି କମ?
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏହାର ମୂଳରେ LESS ସହିତ ନିର୍ମିତ, ଆମର ଭଲ ବନ୍ଧୁ ଆଲେକ୍ସସ୍ ସେଲିଅର୍ ଦ୍ୱାରା ନିର୍ମିତ ଏକ ଗତିଶୀଳ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ଭାଷା | ଏହା ସିଷ୍ଟମ-ଆଧାରିତ CSS କୁ ଶୀଘ୍ର, ସହଜ ଏବଂ ଅଧିକ ମଜାଳିଆ କରିଥାଏ |
କ’ଣ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି?
CSS ର ଏକ ବିସ୍ତାର ଭାବରେ, LESS ରେ ଭେରିଏବଲ୍, କୋଡ୍ ର ପୁନ us ବ୍ୟବହାର ଯୋଗ୍ୟ ସ୍ନିପେଟ୍ ପାଇଁ ମିକ୍ସନ୍ସ, ସରଳ ଗଣିତ ପାଇଁ କାର୍ଯ୍ୟ, ବସା, ଏବଂ ରଙ୍ଗ କାର୍ଯ୍ୟ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ |
ଭେରିଏବଲ୍ |
CSS ରେ ରଙ୍ଗ ଏବଂ ପିକ୍ସେଲ ମୂଲ୍ୟ ପରିଚାଳନା କରିବା ଟିକିଏ ଯନ୍ତ୍ରଣା ହୋଇପାରେ, ସାଧାରଣତ copy କପି ଏବଂ ପେଷ୍ଟରେ ପରିପୂର୍ଣ୍ଣ | ଯଦିଓ LESS ସହିତ ନୁହେଁ - ରଙ୍ଗ କିମ୍ବା ପିକ୍ସେଲ ମୂଲ୍ୟକୁ ଭେରିଏବଲ୍ ଭାବରେ ନ୍ୟସ୍ତ କରନ୍ତୁ ଏବଂ ଥରେ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |
ମିଶ୍ରଣ
ସେହି ତିନୋଟି ସୀମା-ରେଡିଓ ଘୋଷଣା ତୁମେ ନିୟମିତ ol 'CSS ରେ କରିବା ଆବଶ୍ୟକ? ବର୍ତ୍ତମାନ ସେମାନେ ମିଶ୍ରଣ, କୋଡ୍ ର ସ୍ନିପେଟ୍ ସାହାଯ୍ୟରେ ଗୋଟିଏ ଧାଡିରେ ଅଛନ୍ତି ଯାହାକୁ ଆପଣ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ପୁନ use ବ୍ୟବହାର କରିପାରିବେ |
ଅପରେସନ୍ସ
ଅପରେସନ୍ ସହିତ ଫ୍ଲାଇରେ ଗଣିତ କରି ଆପଣଙ୍କର ଗ୍ରୀଡ୍, ଅଗ୍ରଣୀ ଏବଂ ଅଧିକ ସୁପର ଫ୍ଲେକ୍ସିବଲ୍ କରନ୍ତୁ | CSS ପରିମଳ ପାଇଁ ତୁମର ପଥକୁ ବହୁଗୁଣ, ବିଭାଜନ, ଯୋଡ, ଏବଂ ବିସ୍ତାର କର |
ବୁଟଷ୍ଟ୍ରାପ୍ ଭେରିଏବଲ୍ LESS ଭେରିଏବଲ୍, ସେମାନଙ୍କର ମୂଲ୍ୟ, ଏବଂ ବ୍ୟବହାର ନିର୍ଦ୍ଦେଶାବଳୀ |
ସ୍କାଫୋଲ୍ଡିଂ ଏବଂ ଲିଙ୍କ୍ |
@bodyBackground |
@white |
ପୃଷ୍ଠା ପୃଷ୍ଠଭୂମି ରଙ୍ଗ | | |
@textColor |
@grayDark |
ସମଗ୍ର ଶରୀର, ହେଡିଙ୍ଗ୍ ଏବଂ ଅଧିକ ପାଇଁ ଡିଫଲ୍ଟ ପାଠ୍ୟ ରଙ୍ଗ | | |
@linkColor |
#08c |
ଡିଫଲ୍ଟ ଲିଙ୍କ୍ ପାଠ୍ୟ ରଙ୍ଗ | | |
@linkColorHover |
darken(@linkColor, 15%) |
ଡିଫଲ୍ଟ ଲିଙ୍କ୍ ଟେକ୍ସଟ୍ ହୋଭର ରଙ୍ଗ | |
ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ |
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
ଟାଇପୋଗ୍ରାଫି |
@sansFontFamily |
"ହେଲଭେଟିକା ନେଉ", ହେଲଭେଟିକା, ଆରିଆଲ୍, ସାନ୍ସ-ସେରିଫ୍ | | |
@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 |
#eee | |
@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 |
ବୁଟଷ୍ଟ୍ରାପ୍ ମିଶ୍ରଣ |
ମିଶ୍ରଣ ବିଷୟରେ |
ମ Basic ଳିକ ମିଶ୍ରଣ |
ଏକ ମ basic ଳିକ ମିଶ୍ରଣ ହେଉଛି CSS ର ଏକ ସ୍ନିପେଟ୍ ପାଇଁ ଏକ ଅନ୍ତର୍ଭୂକ୍ତ କିମ୍ବା ଆଂଶିକ | ସେଗୁଡିକ ଏକ CSS ଶ୍ରେଣୀ ପରି ଲେଖା ହୋଇଛି ଏବଂ ଯେକ anywhere ଣସି ସ୍ଥାନକୁ ଡକାଯାଇପାରିବ |
- । ଉପାଦାନ {
- । clearfix ();
- }
ପାରାମେଟ୍ରିକ୍ ମିଶ୍ରଣ |
ଏକ ପାରାମେଟ୍ରିକ୍ ମିକ୍ସିନ୍ ଏକ ମ basic ଳିକ ମିଶ୍ରଣ ପରି, କିନ୍ତୁ ଏହା ଇଚ୍ଛାଧୀନ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ସହିତ ପାରାମିଟରଗୁଡିକ (ତେଣୁ ନାମ) ମଧ୍ୟ ଗ୍ରହଣ କରେ |
- । ଉପାଦାନ {
- । ସୀମା - ବ୍ୟାସାର୍ଦ୍ଧ ( 4px );
- }
ସହଜରେ ଆପଣଙ୍କର ନିଜର ଯୋଗ କରନ୍ତୁ |
ପ୍ରାୟ ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ର ମିଶ୍ରଣଗୁଡିକ mixins.less ରେ ଗଚ୍ଛିତ ହୋଇଛି, ଏକ ଚମତ୍କାର ଉପଯୋଗୀତା।
ତେଣୁ, ଆଗକୁ ଯାଆନ୍ତୁ ଏବଂ ବିଦ୍ୟମାନଗୁଡିକୁ ବ୍ୟବହାର କରନ୍ତୁ କିମ୍ବା ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା ପରି ନିଜର ଯୋଗ କରିବାକୁ ମୁକ୍ତ ମନେ କରନ୍ତୁ |
ମିଶ୍ରିତ ମିଶ୍ରଣ ଅନ୍ତର୍ଭୁକ୍ତ |
ଉପଯୋଗିତା
| ମିକ୍ସିନ୍ | | ପାରାମିଟରଗୁଡିକ | ବ୍ୟବହାର |
|---|---|---|
.clearfix() |
କିଛି ନୁହେଁ | | ଭିତରର ଭାସମାନ ସଫା କରିବାକୁ ଯେକ any ଣସି ପିତାମାତାଙ୍କୁ ଯୋଡନ୍ତୁ | |
.tab-focus() |
କିଛି ନୁହେଁ | | ୱେବକାଇଟ୍ ଫୋକସ୍ ଶ style ଳୀ ଏବଂ ଫାୟାରଫକ୍ସ ବାହ୍ୟରେଖା ପ୍ରୟୋଗ କରନ୍ତୁ | |
.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 |
କ୍ଲାସ୍ ବିନା ଯେକ any ଣସି 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 ଟ୍ରାନ୍ସଫର୍ମ ବ୍ୟବହାର କରିବା ସମୟରେ ବିଷୟବସ୍ତୁର ick ଲକକୁ ରୋକନ୍ତୁ | |
.resizable() |
@direction: both |
ଡାହାଣ ଏବଂ ତଳ ଭାଗରେ ଯେକ element ଣସି ଉପାଦାନକୁ ଆକାର ପରିବର୍ତ୍ତନ କରନ୍ତୁ | |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
ଯେକ any ଣସି ଉପାଦାନର ବିଷୟବସ୍ତୁ 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 |
ଏକ ଗ୍ରେଡିଏଣ୍ଟ୍ ଏବଂ ସାମାନ୍ୟ ଗା dark ଼ ସୀମା ନ୍ୟସ୍ତ କରିବାକୁ ବଟନ୍ ପାଇଁ ବ୍ୟବହୃତ ହୁଏ | |
LESS ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକଳନ କରିବା |
ସଂକଳନ ପାଇଁ ଉପକରଣଗୁଡ଼ିକ |
ମେକ୍ଫାଇଲ୍ ସହିତ ନୋଡ୍ |
ନିମ୍ନଲିଖିତ ନିର୍ଦ୍ଦେଶକୁ ଚଲାଇ npm ସହିତ LESS କମାଣ୍ଡ୍ ଲାଇନ୍ କମ୍ପାଇଲର୍ ଏବଂ uglify-js ସଂସ୍ଥାପନ କରନ୍ତୁ |
$ npm ଇନଷ୍ଟଲ୍ -g କମ୍ uglify-js |
ଥରେ ଇନଷ୍ଟଲ୍ ହୋଇଗଲେ କେବଳ makeଆପଣଙ୍କର ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଡିରେକ୍ଟୋରୀର ମୂଳରୁ ଚଲାନ୍ତୁ ଏବଂ ଆପଣ ସମସ୍ତେ ସେଟ୍ ହୋଇସାରିଛନ୍ତି |
ଅତିରିକ୍ତ ଭାବରେ, ଯଦି ଆପଣଙ୍କର ୱାଚର୍ ସଂସ୍ଥାପିତ ହୋଇଛି, ଆପଣ make watchପ୍ରତ୍ୟେକ ଥର ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଲିବରେ ଏକ ଫାଇଲ୍ ଏଡିଟ୍ କରିବା ସମୟରେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପୁନ bu ନିର୍ମାଣ କରିବାକୁ ଚଲାଇପାରନ୍ତି (ଏହା ଆବଶ୍ୟକ ନୁହେଁ, କେବଳ ଏକ ସୁବିଧା ପଦ୍ଧତି) |
କମାଣ୍ଡ୍ ଲାଇନ୍ |
ନୋଡ୍ ମାଧ୍ୟମରେ 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>
.ହୀନ ଫାଇଲଗୁଡିକର ପୁନ omp ସଂକଳନ କରିବାକୁ, କେବଳ ସେଭ୍ କରନ୍ତୁ ଏବଂ ଆପଣଙ୍କର ପୃଷ୍ଠା ପୁନ o ଲୋଡ୍ କରନ୍ତୁ | Less.js ସେଗୁଡ଼ିକୁ ସଂକଳନ କରେ ଏବଂ ସ୍ଥାନୀୟ ଷ୍ଟୋରେଜ୍ ରେ ଷ୍ଟୋର୍ କରେ |
ଅନ of ପଚାରିକ ମ୍ୟାକ୍ ଆପ୍ |
ଅଣଅନୁଷ୍ଠାନିକ ମ୍ୟାକ୍ ଆପ୍ .less ଫାଇଲଗୁଡିକର ଡିରେକ୍ଟୋରୀଗୁଡିକ ଦେଖେ ଏବଂ ଏକ ଦେଖାଯାଇଥିବା .less ଫାଇଲ୍ ର ପ୍ରତ୍ୟେକ ସେଭ୍ ପରେ କୋଡ୍ କୁ ସ୍ଥାନୀୟ ଫାଇଲ୍ ରେ କମ୍ପାଇଲ୍ କରେ |
ଯଦି ଆପଣ ପସନ୍ଦ କରନ୍ତି, ଆପଣ ସ୍ୱୟଂଚାଳିତ ମାଇନିଫିକେସନ୍ ପାଇଁ ଆପରେ ଥିବା ପସନ୍ଦଗୁଡ଼ିକୁ ଟୋଗଲ୍ କରିପାରିବେ ଏବଂ ସଙ୍କଳିତ ଫାଇଲଗୁଡିକ କେଉଁ ଡିରେକ୍ଟୋରୀରେ ଶେଷ ହୁଏ |
ଅଧିକ ମ୍ୟାକ୍ ଆପ୍ |
କ୍ରଞ୍ଚ |
କ୍ରଞ୍ଚ ହେଉଛି ଆଡୋବ ଏୟାରରେ ନିର୍ମିତ ଏକ ସୁନ୍ଦର ଦେଖାଯାଉଥିବା LESS ଏଡିଟର୍ ଏବଂ କମ୍ପାଇଲର୍ |
CodeKit
ଅଣଅନୁଷ୍ଠାନିକ ମ୍ୟାକ୍ ଆପ୍ ସହିତ ସମାନ ବ୍ୟକ୍ତିଙ୍କ ଦ୍ ated ାରା ସୃଷ୍ଟି, କୋଡକିଟ୍ ହେଉଛି ଏକ ମ୍ୟାକ୍ ଆପ୍ ଯାହା LESS, SASS, Stylus, ଏବଂ CoffeeScript ସଂକଳନ କରେ |
ସରଳ
LESS ଫାଇଲଗୁଡିକର ଡ୍ରାଗ୍ ଏବଂ ଡ୍ରପ୍ ସଙ୍କଳନ ପାଇଁ ମ୍ୟାକ୍, ଲିନକ୍ସ, ଏବଂ PC ଆପ୍ | ଏହା ସହିତ, ଉତ୍ସ କୋଡ୍ GitHub ରେ ଅଛି |