Etiam porta sem maleuada magna mollis euismod | Maecenas faucibus mollis interdum | ମୋର୍ବି ଲିଓ ରିସସ୍, ପୋର୍ଟା ଏସି କନସେକ୍ଟେଟର୍ ଏସି, ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକ୍ଷିପ୍ତ ଇତିହାସ, ବ୍ରାଉଜର୍ ସମର୍ଥନ, ଏବଂ ଅଧିକ ବିଷୟରେ |
ଇତିହାସ
ଟ୍ୱିଟରର ପୂର୍ବ ଦିନରେ, ଇଞ୍ଜିନିୟରମାନେ ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ ଆବଶ୍ୟକତା ପୂରଣ କରିବା ପାଇଁ ପ୍ରାୟ ପରିଚିତ ଯେକ library ଣସି ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିଥିଲେ | ଟୁଇଟରର ପ୍ରଥମ ହ୍ୟାକ୍ୱିକ୍ ସମୟରେ ଉପସ୍ଥାପିତ ଏବଂ ବିକାଶ ଶୀଘ୍ର ତ୍ୱରାନ୍ୱିତ ହୋଇଥିବା ଚ୍ୟାଲେଞ୍ଜଗୁଡିକର ଉତ୍ତର ଭାବରେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଆରମ୍ଭ ହୋଇଥିଲା |
ଟ୍ୱିଟରରେ ଅନେକ ଇଞ୍ଜିନିୟରଙ୍କ ସାହାଯ୍ୟ ଏବଂ ମତାମତ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ କେବଳ ମ basic ଳିକ ଶ yles ଳୀ ନୁହେଁ, ବରଂ ଅଧିକ ଚମତ୍କାର ଏବଂ ସ୍ଥାୟୀ ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ୍ ଡିଜାଇନ୍ s ାଞ୍ଚାଗୁଡ଼ିକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରିବା ପାଇଁ ଯଥେଷ୍ଟ ବୃଦ୍ଧି ପାଇଛି |
Dev.twitter.com ରେ ଅଧିକ ପ Read ନ୍ତୁ
ବ୍ରାଉଜର୍ ସମର୍ଥନ
କ୍ରୋମ, ସଫାରି, ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର ଏବଂ ଫାୟାରଫକ୍ସ ପରି ପ୍ରମୁଖ ଆଧୁନିକ ବ୍ରାଉଜରରେ ବୁଟଷ୍ଟ୍ରାପ୍ ପରୀକ୍ଷା ଏବଂ ସମର୍ଥିତ |
- ସର୍ବଶେଷ ସଫାରି |
- ସର୍ବଶେଷ ଗୁଗୁଲ୍ କ୍ରୋମ୍ |
- ଫାୟାରଫକ୍ସ 4+
- ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 7+
- ଅପେରା 11
ଯାହା ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି |
ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକଳିତ CSS, ଅସମ୍ପୂର୍ଣ୍ଣ ଏବଂ ଉଦାହରଣ ଟେମ୍ପଲେଟ୍ ସହିତ ସମ୍ପୂର୍ଣ୍ଣ ଅଟେ |
- ସମସ୍ତ ମୂଳ .less ଫାଇଲ୍ |
- ସଂପୂର୍ଣ୍ଣ ସଂକଳିତ ଏବଂ କ୍ଷୁଦ୍ର CSS |
- ସମ୍ପୂର୍ଣ୍ଣ ଷ୍ଟାଇଲଗାଇଡ୍ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ |
- ଉଦାହରଣ ପୃଷ୍ଠା ଟେମ୍ପଲେଟ୍ (ଶୀଘ୍ର ଆସିବାକୁ ଅଧିକ)
ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ଷ୍ଟାଣ୍ଡାର୍ଡ 940px ରକ୍ କରନ୍ତୁ କିମ୍ବା ନିଜେ ଗଡ଼ନ୍ତୁ |
ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍
ବୁଟଷ୍ଟ୍ରାପ୍ ର ଅଂଶ ଭାବରେ ପ୍ରଦାନ କରାଯାଇଥିବା ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ହେଉଛି ଏକ 940px ଚଉଡା 16 ସ୍ତମ୍ଭ ଗ୍ରୀଡ୍ | ଏହା ଲୋକପ୍ରିୟ 960 ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ସ୍ୱାଦ, କିନ୍ତୁ ବାମ ଏବଂ ଡାହାଣ ପାର୍ଶ୍ୱରେ ଅତିରିକ୍ତ ମାର୍ଜିନ୍ / ପ୍ୟାଡିଂ ବିନା |
ଗ୍ରୀଡ୍ ମାର୍କଅପ୍ ଉଦାହରଣ |
ଏଠାରେ ଦେଖାଯାଇଥିବା ପରି, ଦୁଇଟି "ସ୍ତମ୍ଭ" ସହିତ ଏକ ମ basic ଳିକ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରାଯାଇପାରିବ, ପ୍ରତ୍ୟେକଟି 16 ଟି ମୂଳଦୁଆ ସ୍ତମ୍ଭକୁ ବିସ୍ତାର କରେ ଯାହାକୁ ଆମେ ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ଅଂଶ ଭାବରେ ବ୍ୟାଖ୍ୟା କରିଥିଲୁ | ଅଧିକ ପରିବର୍ତ୍ତନ ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣଗୁଡିକ ଦେଖନ୍ତୁ |
- <div ଶ୍ରେଣୀ = "ଧାଡି" > |
- <div ଶ୍ରେଣୀ = "span6 ସ୍ତମ୍ଭ" > |
- ...
- </div>
- <div ଶ୍ରେଣୀ = "span10 ସ୍ତମ୍ଭ" > |
- ...
- </div>
- </div>
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୧
୨
୨
୨
୨
୨
୨
୨
୨
3
3
3
3
3
୧
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
11
16
ସ୍ତମ୍ଭଗୁଡିକ ଅଫସେଟ୍ କରିବା |
4
8 ଅଫସେଟ୍ 4
1/3 ଅଫସେଟ୍ 2 / 3s |
4 ଅଫସେଟ୍ 4
4 ଅଫସେଟ୍ 4
5 ଅଫସେଟ୍ 3
5 ଅଫସେଟ୍ 3
10 ଅଫସେଟ୍ 6
ୱେବପୃଷ୍ଠାଗୁଡ଼ିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ଲେଆଉଟ୍ ମ Basic ଳିକ ଟେମ୍ପଲେଟ୍ |
ସ୍ଥିର ଲେଆଉଟ୍ |
ଡିଫଲ୍ଟ ଏବଂ ସରଳ 940px- ଚଉଡା, ଏକକ ଦ୍ୱାରା ପ୍ରଦତ୍ତ ଯେକ any ଣସି ୱେବସାଇଟ୍ କିମ୍ବା ପୃଷ୍ଠା ପାଇଁ କେନ୍ଦ୍ରିତ ଲେଆଉଟ୍ <div.container>|
- <body>
- <div class = "ପାତ୍ର" > |
- ...
- </div>
- </body>
ଫ୍ଲୁଇଡ୍ ଲେଆଉଟ୍ |
ମିନି- ଏବଂ ସର୍ବାଧିକ ଓସାର ଏବଂ ଏକ ବାମ ପାର୍ଶ୍ୱ ପାର୍ଶ୍ୱ ଦଣ୍ଡ ସହିତ ଏକ ବିକଳ୍ପ, ନମନୀୟ ତରଳ ପୃଷ୍ଠା ସଂରଚନା | ଆପ୍ ଏବଂ ଡକସ୍ ପାଇଁ ବହୁତ ଭଲ |
- <body>
- <div class = "ପାତ୍ର-ତରଳ" > |
- <div class = "sidebar" > |
- ...
- </div>
- <div ଶ୍ରେଣୀ = "ବିଷୟବସ୍ତୁ" > |
- ...
- </div>
- </div>
- </body>
ଟାଇପୋଗ୍ରାଫି ହେଡିଙ୍ଗ୍, ପାରାଗ୍ରାଫ୍, ତାଲିକା ଏବଂ ଅନ୍ୟାନ୍ୟ ଇନଲାଇନ ପ୍ରକାର ଉପାଦାନଗୁଡିକ |
ହେଡିଙ୍ଗ୍ ଏବଂ କପି |
ଆପଣଙ୍କର ୱେବପୃଷ୍ଠାଗୁଡ଼ିକର ସଂରଚନା ପାଇଁ ଏକ ମାନକ ଟାଇପୋଗ୍ରାଫିକ୍ ହାଇରାର୍କି |
ସମଗ୍ର ଟାଇପୋଗ୍ରାଫିକ୍ ଗ୍ରୀଡ୍ ଆମର preboot.less ଫାଇଲରେ ଦୁଇଟି କମ୍ ଭେରିଏବଲ୍ ଉପରେ ଆଧାରିତ: @basefontଏବଂ @baseline। ପ୍ରଥମଟି ହେଉଛି ବେସ୍ ଫଣ୍ଟ୍ ସାଇଜ୍ ଏବଂ ଦ୍ୱିତୀୟଟି ହେଉଛି ବେସ୍ ଲାଇନ୍-ଉଚ୍ଚତା |
ଆମର ସମସ୍ତ ପ୍ରକାରର ମାର୍ଜିନ, ପ୍ୟାଡିଂ, ଏବଂ ଲାଇନ-ଉଚ୍ଚତା ସୃଷ୍ଟି କରିବାକୁ ଆମେ ସେହି ଭେରିଏବଲ୍, ଏବଂ କିଛି ଗଣିତ ବ୍ୟବହାର କରୁ |
h1 ହେଡିଙ୍ଗ୍ 1
h2। ହେଡିଙ୍ଗ୍ 2
h3। ଶୀର୍ଷଲେଖ 3
h4। ହେଡିଙ୍ଗ୍ 4
h5। ହେଡିଙ୍ଗ୍ 5
h6। ହେଡିଙ୍ଗ୍ 6
ଉଦାହରଣ ଅନୁଚ୍ଛେଦ |
Nullam quis risus eget urna mollis ornare vel eu leo | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus। Nullam id dolor id nibh ultricies vehicula ut id elit।
ଉଦାହରଣ ହେଡିଙ୍ଗ୍ ସବ୍-ହେଡିଙ୍ଗ୍ ଅଛି |
ବିବିଧ ଉପାଦାନଗୁଡିକ
ଗୁରୁତ୍ୱ, ଠିକଣା, ଏବଂ ସଂକ୍ଷିପ୍ତକରଣ ବ୍ୟବହାର କରି |
<strong> <em> <address> <abbr>
କେତେବେଳେ ବ୍ୟବହାର କରିବେ |
ଏହାର ଆଖପାଖର କପି ସହିତ ଶବ୍ଦ କିମ୍ବା ବାକ୍ୟର ଅତିରିକ୍ତ ଗୁରୁତ୍ୱ କିମ୍ବା ଗୁରୁତ୍ୱକୁ ସୂଚାଇବା ପାଇଁ ଟ୍ୟାଗ୍ସ ( <strong>ଏବଂ ) ବ୍ୟବହାର କରାଯିବା ଉଚିତ | ଗୁରୁତ୍ୱ ଏବଂ ଚାପ ଗୁରୁତ୍ୱ ପାଇଁ <em>ବ୍ୟବହାର କରନ୍ତୁ |<strong><em>
ଏକ ଅନୁଚ୍ଛେଦରେ ଗୁରୁତ୍ୱ |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus | Maecenas faucibus mollis interdum | Nulla vitae elit libero, a pharetra augue।
ଟିପନ୍ତୁ:<b> HTML5 ରେ ବ୍ୟବହାର ଏବଂ ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରିବା ଠିକ୍ ଅଛି <i>ଏବଂ ସେମାନଙ୍କୁ ଯଥାକ୍ରମେ ବୋଲ୍ଡ ଏବଂ ଇଟାଲିକ୍ ଷ୍ଟାଇଲ୍ କରିବାକୁ ପଡିବ ନାହିଁ (ଯଦିଓ ସେଠାରେ ଅଧିକ ଅର୍ଥଗତ ଉପାଦାନ ଅଛି, ଏହାକୁ ବ୍ୟବହାର କରନ୍ତୁ) | <b>ଅତିରିକ୍ତ ଗୁରୁତ୍ୱ ନଦେଇ ଶବ୍ଦ କିମ୍ବା ବାକ୍ୟାଂଶକୁ ହାଇଲାଇଟ୍ କରିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ, ଯେତେବେଳେ <i>ଅଧିକାଂଶ ସ୍ୱର, ବ technical ଷୟିକ ଶବ୍ଦ ଇତ୍ୟାଦି ପାଇଁ |
ଠିକଣା
ଉପାଦାନଟି ଏହାର <address>ନିକଟତମ ପିତୃପୁରୁଷ, କିମ୍ବା କାର୍ଯ୍ୟର ସମ୍ପୂର୍ଣ୍ଣ ଶରୀର ପାଇଁ ଯୋଗାଯୋଗ ସୂଚନା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ | ଏହା କିପରି ଦେଖାଯାଉଛି ତାହା ଏଠାରେ ଅଛି:
_
_
ଟିପନ୍ତୁ: ପ୍ରତ୍ୟେକ ଧାଡି <address>ଏକ ଲାଇନ୍-ବ୍ରେକ୍ () ସହିତ ସମାପ୍ତ ହେବା ଉଚିତ କିମ୍ବା ବିଷୟବସ୍ତୁକୁ ସଠିକ୍ ଭାବରେ ଗଠନ କରିବା ପାଇଁ <br />ଏକ ବ୍ଲକ ସ୍ତରୀୟ ଟ୍ୟାଗରେ ଆବୃତ ହେବା ଉଚିତ |<p>
ସଂକ୍ଷିପ୍ତକରଣ
ସଂକ୍ଷିପ୍ତକରଣ ଏବଂ ସଂକ୍ଷିପ୍ତ ଶବ୍ଦଗୁଡ଼ିକ ପାଇଁ, <abbr>ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ ( HTML5<acronym> ରେ ପୁରୁଣା ହୋଇଛି ) | ଟ୍ୟାଗ୍ ଭିତରେ ଶୋର୍ଥାଣ୍ଡ୍ ଫର୍ମ ରଖନ୍ତୁ ଏବଂ ସମ୍ପୂର୍ଣ୍ଣ ନାମ ପାଇଁ ଏକ ଟାଇଟଲ୍ ସେଟ୍ କରନ୍ତୁ |
ବ୍ଲକକୋଟସ୍ |
<blockquote> <p> <small>
କିପରି ଉଦ୍ଧୃତ କରିବେ |
ଏକ ବ୍ଲକ୍କୋଟ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ, <blockquote>ଚାରିପାଖରେ <p>ଗୁଡ଼ାଇ <small>ଟ୍ୟାଗ୍ ଗୁଡ଼ାଇ ରଖ | ତୁମର ଉତ୍ସକୁ ଦର୍ଶାଇବା ପାଇଁ ଉପାଦାନ ବ୍ୟବହାର <small>କର ଏବଂ ତୁମେ —ଏହା ପୂର୍ବରୁ ଏକ ଏମ୍ ଡ୍ୟାସ୍ ପାଇବ |
ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଙ୍ଗ୍ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଭେନେନାଟିସ୍ ଡାପିବସ୍ ପୋସୁରେ ଭେଲିଟ୍ ଆଲିକେଟ୍ |
ଜୁଲିୟସ୍ ହାଇବର୍ଟ ଡ
ତାଲିକା |
ଅନିୟମିତ |<ul>
- ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍ |
- କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ |
- ମାସା ରେ ଇଣ୍ଟିଜର୍ ମୋଲେଷ୍ଟି ଲୋରେମ୍ |
- ପ୍ରିଟିୟମ୍ ନିସଲ୍ ଆଲିକେଟ୍ ରେ ଫାସିଲିସ୍ |
- Nulla volutpat aliquam velit
- ଫାସେଲସ୍ ଆଇକୁଲିସ୍ ନେକ୍ |
- ପୁରସ୍ ସୋଡାଲ୍ ଅଲଟ୍ରିକସ୍ |
- ଭେଷ୍ଟିବୁଲମ୍ ଲୋରାଇଟ୍ ପୋର୍ଟିଟର୍ ସେମ୍ |
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel |
- ଏନିନ୍ ସିଟ୍ ଆମେଟ୍ ଏରାଟ୍ ନନ୍କ୍ |
- ପୋର୍ଟିଟର୍ ଲୋରେମ୍ ଇଗେଟ୍ କରନ୍ତୁ |
ଅଣସଂରକ୍ଷିତ |<ul.unstyled>
- ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍ |
- କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ |
- ମାସା ରେ ଇଣ୍ଟିଜର୍ ମୋଲେଷ୍ଟି ଲୋରେମ୍ |
- ପ୍ରିଟିୟମ୍ ନିସଲ୍ ଆଲିକେଟ୍ ରେ ଫାସିଲିସ୍ |
- Nulla volutpat aliquam velit
- ଫାସେଲସ୍ ଆଇକୁଲିସ୍ ନେକ୍ |
- ପୁରସ୍ ସୋଡାଲ୍ ଅଲଟ୍ରିକସ୍ |
- ଭେଷ୍ଟିବୁଲମ୍ ଲୋରାଇଟ୍ ପୋର୍ଟିଟର୍ ସେମ୍ |
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel |
- ଏନିନ୍ ସିଟ୍ ଆମେଟ୍ ଏରାଟ୍ ନନ୍କ୍ |
- ପୋର୍ଟିଟର୍ ଲୋରେମ୍ ଇଗେଟ୍ କରନ୍ତୁ |
ଅର୍ଡର |<ol>
- ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍ |
- କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ |
- ମାସା ରେ ଇଣ୍ଟିଜର୍ ମୋଲେଷ୍ଟି ଲୋରେମ୍ |
- ପ୍ରିଟିୟମ୍ ନିସଲ୍ ଆଲିକେଟ୍ ରେ ଫାସିଲିସ୍ |
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel |
- ଏନିନ୍ ସିଟ୍ ଆମେଟ୍ ଏରାଟ୍ ନନ୍କ୍ |
- ପୋର୍ଟିଟର୍ ଲୋରେମ୍ ଇଗେଟ୍ କରନ୍ତୁ |
ବର୍ଣ୍ଣନାdl
- ବର୍ଣ୍ଣନା ତାଲିକା |
- ସର୍ତ୍ତାବଳୀ ବ୍ୟାଖ୍ୟା କରିବା ପାଇଁ ଏକ ବର୍ଣ୍ଣନା ତାଲିକା ଉପଯୁକ୍ତ |
- ଇଉଜିମୋଡ୍ |
- ଭେଷ୍ଟିବୁଲମ୍ id ligula porta felis euismod semper eget lacinia odio sem nec elit।
- Eget metus ରେ Donec id elit non mi porta gravida |
- ମାଲେସୁଆଡା ପୋର୍ଟା |
- Etiam porta sem maleuada magna mollis euismod |
ଟେବୁଲ୍ ପ���ଇଁ, ଆପଣ ଏହାକୁ ଅନୁମାନ କରିଛନ୍ତି, ଟାବୁଲାର୍ ଡାଟା |
ନିର୍ମାଣ ଟେବୁଲ୍ |
<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>
ଅନେକ ଜିନିଷ ପାଇଁ ଟେବୁଲ୍ ବହୁତ ଭଲ | ଉତ୍ତମ ସାରଣୀଗୁଡ଼ିକ, ଉପଯୋଗୀ, ମାପନୀୟ ଏବଂ ପଠନୀୟ (କୋଡ୍ ସ୍ତରରେ) ହେବା ପାଇଁ ଟିକେ ମାର୍କଅପ୍ ପ୍ରେମ ଆବଶ୍ୟକ କରେ | ସାହାଯ୍ୟ କରିବାକୁ ଏଠାରେ କିଛି ଟିପ୍ସ |
ସର୍ବଦା ତୁମର ସ୍ତମ୍ଭ ହେଡର୍ ଗୁଡ଼ିକୁ ଏପରି ଭାବରେ ଗୁଡ଼ାଇ ରଖ <thead>ଯେ ହାଇରାର୍କି <thead>>> |<tr><th>
ସ୍ତମ୍ଭ ହେଡର୍ ସହିତ ସମାନ, ଆପଣଙ୍କର ସମସ୍ତ ଟେବୁଲ୍ ର ଶରୀର ବିଷୟବସ୍ତୁକୁ ଗୁଡ଼ାଇ ରଖିବା ଉଚିତ ଯାହା ଦ୍ <tbody>your ାରା ଆପଣଙ୍କର ହାଇରାର୍କି >> <tbody>ଅଟେ |<tr><td>
ଉଦାହରଣ: ଡିଫଲ୍ଟ ଟେବୁଲ୍ ଶ yles ଳୀ |
ସମସ୍ତ ଟେବୁଲ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ କେବଳ ଆବଶ୍ୟକୀୟ ସୀମା ସହିତ ଷ୍ଟାଇଲ୍ ହେବ ଏବଂ ପଠନ ଯୋଗ୍ୟତାକୁ ସୁନିଶ୍ଚିତ କରିବା ଏବଂ ଗଠନ ବଜାୟ ରଖିବା | ଅତିରିକ୍ତ କ୍ଲାସ୍ କିମ୍ବା ଗୁଣଗୁଡିକ ଯୋଗ କରିବାର ଆବଶ୍ୟକତା ନାହିଁ |
| # | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଭାଷା |
|---|---|---|---|
| ୧ | କେତେକ | ଗୋଟିଏ | | ଇଂରାଜୀ | |
| ୨ | ଜୋ | ସିକ୍ସପ୍ୟାକ୍ | | ଇଂରାଜୀ | |
| 3 | ଷ୍ଟୁ | | ଦନ୍ତ | କୋଡ୍ |
- <ଟେବୁଲ୍> |
- ...
- </table>
ଉଦାହରଣ: ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍ |
ଜେବ୍ରା-ଷ୍ଟ୍ରିପିଂ ଯୋଗ କରି ତୁମର ଟେବୁଲ ସହିତ ଟିକିଏ କଳ୍ପନା କର - କେବଳ .zebra-stripedଶ୍ରେଣୀ ଯୋଡ |
| # | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଭାଷା |
|---|---|---|---|
| ୧ | କେତେକ | ଗୋଟିଏ | | ଇଂରାଜୀ | |
| ୨ | ଜୋ | ସିକ୍ସପ୍ୟାକ୍ | | ଇଂରାଜୀ | |
| 3 | ଷ୍ଟୁ | | ଦନ୍ତ | କୋଡ୍ |
ଟିପନ୍ତୁ: ଜେବ୍ରା-ଷ୍ଟ୍ରିପିଂ ହେଉଛି ଏକ ପ୍ରଗତିଶୀଳ ଉନ୍ନତି ଯାହା IE8 ଏବଂ ତଳ ପରି ପୁରୁଣା ବ୍ରାଉଜର୍ ପାଇଁ ଉପଲବ୍ଧ ନୁହେଁ |
- <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍" > |
- ...
- </table>
ଉଦାହରଣ: ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍ w / TableSorter.js |
ପୂର୍ବ ଉଦାହରଣକୁ ନେଇ, jQuery ଏବଂ ଟେବୁଲସର୍ଟ ପ୍ଲଗଇନ୍ ମାଧ୍ୟମରେ ସର୍ଟିଂ କାର୍ଯ୍ୟକାରିତା ପ୍ରଦାନ କରି ଆମେ ଆମର ଟେବୁଲଗୁଡିକର ଉପଯୋଗିତାକୁ ଉନ୍ନତ କରୁ | ସର୍ଟ ପରିବର୍ତ୍ତନ କରିବାକୁ ଯେକ any ଣସି ସ୍ତମ୍ଭର ହେଡର୍ କ୍ଲିକ୍ କରନ୍ତୁ |
| # | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଭାଷା |
|---|---|---|---|
| ୧ | ତୁମର | ଗୋଟିଏ | | ଇଂରାଜୀ | |
| ୨ | ଜୋ | ସିକ୍ସପ୍ୟାକ୍ | | ଇଂରାଜୀ | |
| 3 | ଷ୍ଟୁ | | ଦନ୍ତ | କୋଡ୍ |
- <ସ୍କ୍ରିପ୍ଟ src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <ସ୍କ୍ରିପ୍ଟ >
- $ ( କାର୍ଯ୍ୟ () {
- $ ( "ଟେବୁଲ୍ # ସର୍ଟ ଟେବୁଲ୍ ଉଦାହରଣ" ) | ଟେବୁଲସର୍ ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍" > |
- ...
- </table>
ଫର୍ମଗୁଡିକ
ଡିଫଲ୍ଟ ଶ yles ଳୀ |
ସମସ୍ତ ଫର୍ମଗୁଡ଼ିକୁ ଏକ ପଠନୀୟ ଏବଂ ମାପନୀୟ ଉପାୟରେ ଉପସ୍ଥାପନ କରିବାକୁ ଡିଫଲ୍ଟ ଶ yles ଳୀ ଦିଆଯାଏ | ଟେକ୍ସଟ୍ ଇନପୁଟ୍, ସିଲେକ୍ଟ ତାଲିକା, ଟେକ୍ସଟେରିଆ, ରେଡିଓ ବଟନ୍ ଏବଂ ଚେକ୍ ବକ୍ସ, ଏବଂ ବଟନ୍ ପାଇଁ ଶ yles ଳୀ ପ୍ରଦାନ କରାଯାଇଛି |
ଷ୍ଟାକ୍ ହୋଇଥିବା ଫର୍ମଗୁଡିକ |
ତୁମର ଫର୍ମର HTML ରେ ଯୋଡ .form-stackedଏବଂ ତୁମର ବାମ ପରିବର୍ତ୍ତେ ସେମାନଙ୍କ କ୍ଷେତ୍ର ଉପରେ ଲେବଲ୍ ରହିବ | ଯଦି ଆପଣଙ୍କର ଫର୍ମଗୁଡିକ ଛୋଟ ଥାଏ କିମ୍ବା ଭାରୀ ଫର୍ମଗୁଡିକ ପାଇଁ ଆପଣଙ୍କର ଦୁଇଟି ସ୍ତମ୍ଭ ଅଛି ତେବେ ଏହା ବହୁତ ଭଲ କାମ କରେ |
ବଟନ୍
ଏକ ସମ୍ମିଳନୀ ଭାବରେ, ବଟନ୍ଗୁଡ଼ିକ କାର୍ଯ୍ୟ ପାଇଁ ବ୍ୟବହୃତ ହେଉଥିବାବେଳେ ବସ୍ତୁଗୁଡ଼ିକ ପାଇଁ ଲିଙ୍କ୍ ବ୍ୟବହୃତ ହୁଏ | ଉଦାହରଣ ସ୍ୱରୂପ, “ଡାଉନଲୋଡ୍” ଏକ ବଟନ୍ ହୋଇପାରେ ଏବଂ “ସାମ୍ପ୍ରତିକ କାର୍ଯ୍ୟକଳାପ” ଏକ ଲିଙ୍କ୍ ହୋଇପାରେ |
ସମସ୍ତ ବଟନ୍ ଗୁଡିକ ହାଲୁକା ଧୂସର ଶ style ଳୀରେ ଡିଫଲ୍ଟ, କିନ୍ତୁ ବିଭିନ୍ନ ରଙ୍ଗ ଶ yles ଳୀ ପାଇଁ ଅନେକ କାର୍ଯ୍ୟକ୍ଷମ ଶ୍ରେଣୀ ପ୍ରୟୋଗ କରାଯାଇପାରିବ | ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକରେ ଏକ ନୀଳ .primaryଶ୍ରେଣୀ, ହାଲୁକା-ନୀଳ .infoଶ୍ରେଣୀ, ସବୁଜ .successଶ୍ରେଣୀ ଏବଂ ଏକ ଲାଲ୍ .dangerଶ୍ରେଣୀ ଅନ୍ତର୍ଭୁକ୍ତ | ଏଥିସହ, ଆପଣଙ୍କର ନିଜ ଶ yles ଳୀ ଗଡ଼ିବା ସହଜ ମଟର ଅଟେ |
ଉଦାହରଣ ବଟନ୍ |
ପ୍ରୟୋଗ ସହିତ ଯେକ anything ଣସି ଜିନିଷରେ ବଟନ୍ ଶ yles ଳୀ ପ୍ରୟୋଗ .btnକରାଯାଇପାରିବ | ସାଧାରଣତ you ଆପଣ ଏହାକୁ କେବଳ ପ୍ରୟୋଗ କରିବାକୁ ଚାହାଁନ୍ତି <a>, ଏବଂ ଉପାଦାନଗୁଡିକ <button>ଚୟନ କରନ୍ତୁ | <input>ଏହା କିପରି ଦେଖାଯାଉଛି ତାହା ଏଠାରେ ଅଛି:
ବିକଳ୍ପ ଆକାର |
ବଡ଼ କିମ୍ବା ଛୋଟ ବଟନ୍ କଳ୍ପନା? ଏଥିରେ ଅଛି!
ଅକ୍ଷମ ଅବସ୍ଥା |
ବଟନ୍ଗୁଡ଼ିକ ପାଇଁ ଯାହା ସକ୍ରିୟ ନୁହେଁ କିମ୍ବା ଗୋଟିଏ କାରଣ ପାଇଁ ଆପ୍ ଦ୍ୱାରା ଅକ୍ଷମ ହୋଇଛି, ଅକ୍ଷମ ଅବସ୍ଥା ବ୍ୟବହାର କରନ୍ତୁ | ତାହା .disabledଲିଙ୍କ୍ ଏବଂ ଉପାଦାନଗୁଡ଼ିକ :disabledପାଇଁ |<button>
ଲିଙ୍କ୍
ବଟନ୍
ସଫଳତା, ଚେତାବନୀ, ଏବଂ ତ୍ରୁଟି ବାର୍ତ୍ତା କିମ୍ବା ଆଲର୍ଟ ପାଇଁ ଆଲର୍ଟ ଏବଂ ତ୍ରୁଟି ଶ yles ଳୀ |
ମ Basic ଳିକ ସତର୍କତା |
div.alert-message
ବିଫଳତା, ସମ୍ଭାବ୍ୟ ବିଫଳତା, କିମ୍ବା କାର୍ଯ୍ୟର ସଫଳତାକୁ ଆଲୋକିତ କରିବା ପାଇଁ ଏକ ଧାଡ଼ି ବାର୍ତ୍ତା | ଫର୍ମ ପାଇଁ ବିଶେଷ ଭାବରେ ଉପଯୋଗୀ |
ସନ୍ଦେଶଗୁଡ଼ିକୁ ଅବରୋଧ କରନ୍ତୁ |
div.alert-message.block-message
ବାର୍ତ୍ତାଗୁଡିକ ପାଇଁ ଯାହା ଟିକେ ବ୍ୟାଖ୍ୟା ଆବଶ୍ୟକ କରେ, ଆମର ପାରାଗ୍ରାଫ୍ ଷ୍ଟାଇଲ୍ ଆଲର୍ଟ ଅଛି | ଲମ୍ବା ତ୍ରୁଟି ବାର୍ତ୍ତାଗୁଡ଼ିକୁ ବବୁଲ କରିବା, ଏକ ବିଚାରାଧୀନ କାର୍ଯ୍ୟର ଉପଭୋକ୍ତାଙ୍କୁ ଚେତାବନୀ ଦେବା, କିମ୍ବା ପୃଷ୍ଠାରେ ଅଧିକ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ ସୂଚନା ଉପସ୍ଥାପନ କରିବା ପାଇଁ ଏଗୁଡ଼ିକ ଉପଯୁକ୍ତ |
ମୋଡାଲ୍, ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭରରେ ବିଷୟବସ୍ତୁ ପ୍ରଦର୍ଶନ ପାଇଁ ପପୋଭର ଉପାଦାନଗୁଡ଼ିକ |
ମୋଡାଲ୍ |
ମୋଡାଲ୍ - ଡାୟଲଗ୍ କିମ୍ବା ଲାଇଟ୍ ବକ୍ସ - ପରିସ୍ଥିତିରେ ପ୍ରସଙ୍ଗଗତ କାର୍ଯ୍ୟ ପାଇଁ ଉତ୍ତମ ଅଟେ ଯେଉଁଠାରେ ପୃଷ୍ଠଭୂମି ପ୍ରସଙ୍ଗକୁ ବଜାୟ ରଖିବା ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ |
ମୋଡାଲ୍ ହେଡିଙ୍ଗ୍ |
×ଗୋଟିଏ ଭଲ ଶରୀର…
ସାଧନ ଟିପ୍ସ |
ଦ୍ୱନ୍ଦ୍ୱରେ ଥିବା ଉପଭୋକ୍ତାଙ୍କୁ ସାହାଯ୍ୟ କରିବା ଏବଂ ସେମାନଙ୍କୁ ସଠିକ୍ ଦିଗରେ ସୂଚାଇବା ପାଇଁ ଟ୍ୱିପିସ୍ ଅତ୍ୟନ୍ତ ଉପଯୋଗୀ |
ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲାର୍ ସିଟ୍ ଆମେଟ୍ ଇଲୋ ଏରର୍ ଇପ୍ସମ୍ ଭେରିଟାଟିସ୍ ଅଟୋ ଇଷ୍ଟେ ପର୍ପସିସିଆଟିସ୍ ଇଷ୍ଟ ଭୋଲୁପଟାସ୍ ନାଟସ୍ ଇଲୋ କ୍ୱାସି ଓଡିଟ୍ ଅଟୋ ନାଟସ୍ ଫଳାଫଳ ଫଳାଫଳ, ଅଟୋ ନାଟସ୍ ଇଲୋ ଭୋଲୁପେଟେମ୍ ଓଡିଟ୍ ପର୍ପସିଏଟିସ୍ ଲାଉଡାଣ୍ଟିମ୍ ରିମ୍ ଡୋଲୋରେମ୍କ ଟୋଟାମ୍ ଭଲ୍ୟୁପଟାସ୍ | Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam archito explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas nemo volu
ନିମ୍ନରେ!
ଠିକ୍!
ବାମ!
ଉପରେ!
ପପୋଭର୍ସ |
ଲେଆଉଟ୍ କୁ ପ୍ରଭାବିତ ନକରି ଏକ ପୃଷ୍ଠାକୁ ସବଟେକ୍ସୁଆଲ୍ ସୂଚନା ପ୍ରଦାନ କରିବାକୁ ପପୋଭର ବ୍ୟବହାର କରନ୍ତୁ |
ପପୋଭର ଆଖ୍ୟା |
କମ୍ ସୁପରଚାର୍ଜ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରି ଭେରିଏବଲ୍, ମିକ୍ସିନ୍ ଏବଂ ଫଙ୍କସନ୍ ସହିତ ଆପଣଙ୍କର CSS କୁ ଚାର୍ଜ କରନ୍ତୁ |
ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରିବୁଟ୍ ସହିତ ନିର୍ମିତ ହୋଇଥିଲା , ମିଶ୍ରଣ ଏବଂ ଭେରିଏବଲ୍ସର ଏକ ମୁକ୍ତ ଉତ୍ସ ପ୍ୟାକ୍ , ଦ୍ରୁତ ଏବଂ ସହଜ ୱେବ୍ ବିକାଶ ପାଇଁ ଏକ CSS ପ୍ରିପ୍ରୋସେସର୍ ସହିତ କମ୍ ସହିତ ବ୍ୟବହୃତ ହେବ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ରେ ଆମେ କିପରି ପ୍ରିବୁଟ୍ ବ୍ୟବହାର କଲୁ ଏବଂ ତୁମେ ଏହାର ପରବର୍ତ୍ତୀ ପ୍ରୋଜେକ୍ଟରେ କମ୍ ଚଲାଇବାକୁ ବାଛିଲେ ତୁମେ ଏହାକୁ କିପରି ବ୍ୟବହାର କରିପାରିବ ଯାଞ୍ଚ କର |
ଏହାକୁ କିପରି ବ୍ୟବହାର କରିବେ |
ଆପଣଙ୍କ ବ୍ରାଉଜରରେ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବୁଟଷ୍ଟ୍ରାପ୍ ର କମ୍ ଭେରିଏବଲ୍, ମିକ୍ସିନ ଏବଂ CSS ରେ ବସା ବାନ୍ଧିବା ପାଇଁ ଏହି ବିକଳ୍ପକୁ ବ୍ୟବହାର କରନ୍ତୁ |
- <link rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" />
- <ସ୍କ୍ରିପ୍ଟ src = "js / less-1.1.3.min.js" > </script> |
.Js ସମାଧାନ ଅନୁଭବ କରୁନାହାଁନ୍ତି? କମ୍ ମ୍ୟାକ୍ ଆପ୍ ଚେଷ୍ଟା କରନ୍ତୁ କିମ୍ବା ଯେତେବେଳେ ଆପଣ ଆପଣଙ୍କର କୋଡ୍ ନିୟୋଜିତ କରନ୍ତି କମ୍ପାଇଲ୍ କରିବାକୁ Node.js ବ୍ୟବହାର କରନ୍ତୁ |
ଯାହା ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି |
ବୁଟଷ୍ଟ୍ରାପର ଅଂଶ ଭାବରେ ଟ୍ୱିଟର ବୁଟଷ୍ଟ୍ରାପରେ ଯାହା ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ତାହାର କିଛି ହାଇଲାଇଟ୍ ଏଠାରେ ଅଛି | ଅଧିକ ଡାଉନଲୋଡ୍ ଏବଂ ଅଧିକ ଜାଣିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ୱେବସାଇଟ୍ କିମ୍ବା ଗିଥବ୍ ପ୍ରୋଜେକ୍ଟ ପୃଷ୍ଠାକୁ ଯାଆନ୍ତୁ |
ଭେରିଏବଲ୍ |
କମ୍ ରେ ଥିବା ଭେରିଏବଲ୍ ଗୁଡିକ ଆପଣଙ୍କର CSS ମୁଣ୍ଡବିନ୍ଧାକୁ ମୁକ୍ତ ଏବଂ ଅପଡେଟ୍ କରିବା ପାଇଁ ଉପଯୁକ୍ତ | ଯେତେବେଳେ ଆପଣ ଏକ ରଙ୍ଗ ମୂଲ୍ୟ କିମ୍ବା ବାରମ୍ବାର ବ୍ୟବହୃତ ମୂଲ୍ୟ ପରିବର୍ତ୍ତନ କରିବାକୁ ଚାହାଁନ୍ତି, ଏହାକୁ ଗୋଟିଏ ସ୍ଥାନରେ ଅପଡେଟ୍ କରନ୍ତୁ ଏବଂ ଆପଣ ସେଟ୍ ହୋଇଛନ୍ତି |
- // ଲିଙ୍କ୍ |
- @ ଲିଙ୍କ୍ ରଙ୍ଗ : # 8b59c2 ;
- @ ଲିଙ୍କ୍ ରଙ୍ଗ ହୋଭର : ଗା en ଼ କରନ୍ତୁ ( @ ଲିଙ୍କ୍ ରଙ୍ଗ , ୧୦ );
- // ଧୂସର
- @ ବ୍ଲାକ : # 000;
- @ ଗ୍ରେ ଡାର୍କ : ହାଲୁକା କରନ୍ତୁ ( @ ବ୍ଲାକ , 25 %);
- @ ଗ୍ରେ : ହାଲୁକା ( @ ବ୍ଲାକ , 50 %);
- @ ଗ୍ରେ ଲାଇଟ୍ : ହାଲୁକା ( @ ବ୍ଲାକ , 70 %);
- @ ଗ୍ରେ ଲାଇଟ୍ : ହାଲୁକା ( @ ବ୍ଲାକ , 90 %);
- @ ଧଳା : #fff;
- // ଉଚ୍ଚାରଣ ରଙ୍ଗ |
- @ ବ୍ଲୁ : # 08b5fb ;
- @ ସବୁଜ : # 46a546 ;
- @red : # 9d261d;
- @yellow : # ffc40d;
- @ ଆରେଞ୍ଜ : # f89406 ;
- @ ପିଙ୍କ : # c3325f ;
- urpurple : # 7a43b6;
- // ବେସ୍ ଲାଇନ୍ ଗ୍ରୀଡ୍ |
- @ ବେସଫଣ୍ଟ : 13px ;
- @ ବେସଲାଇନ୍ : 18px ;
ମନ୍ତବ୍ୟ
କମ୍ CSS ର ସାଧାରଣ /* ... */ବାକ୍ୟବିନ୍ୟାସ ସହିତ ମନ୍ତବ୍ୟର ଅନ୍ୟ ଏକ ଶ style ଳୀ ମଧ୍ୟ ପ୍ରଦାନ କରେ |
- // ଏହା ଏକ ମନ୍ତବ୍ୟ |
- / * ଏହା ମଧ୍ୟ ଏକ ମନ୍ତବ୍ୟ * /
ୱାଜୁକୁ ମିଶ୍ରଣ କରନ୍ତୁ |
ମିକ୍ସନ୍ ଗୁଡିକ ମୂଳତ CS CSS ପାଇଁ ଅନ୍ତର୍ଭୂକ୍ତ କିମ୍ବା ଆଂଶିକ ଅଟେ, ଯାହା ଆପଣଙ୍କୁ ଏକ କୋଡ୍ ର ଏକ ବ୍ଲକ୍ ମିଶ୍ରଣ କରିବାକୁ ଅନୁମତି ଦିଏ | ବିକ୍ରେତା ପ୍ରିଫିକ୍ସଡ୍ ଗୁଣଗୁଡିକ box-shadow, କ୍ରସ୍-ବ୍ରାଉଜର୍ ଗ୍ରେଡିଏଣ୍ଟ୍, ଫଣ୍ଟ୍ ଷ୍ଟାକ, ଏବଂ ଅଧିକ ପାଇଁ ସେଗୁଡିକ ବହୁତ ଭଲ | ନିମ୍ନରେ ମିଶ୍ରଣର ଏକ ନମୁନା ଅଛି ଯାହା ବୁଟଷ୍ଟ୍ରାପ ସହିତ ଅନ୍ତର୍ଭୁକ୍ତ |
ଫଣ୍ଟ୍ ଷ୍ଟାକ୍ |
- # ଫଣ୍ଟ {
- । ଶୋର୍ଥାଣ୍ଡ୍ ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 14px , @ ଲାଇନ୍ ଉଚ୍ଚତା : 20px ) {
- ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
- ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
- ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
- }
- । sans - serif ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 14px , @ ଲାଇନ ଉଚ୍ଚତା : 20px ) {
- ଫଣ୍ଟ - ପରିବାର : "ହେଲଭେଟିକା ନେଉ" , ହେଲଭେଟିକା , ଆରିଆଲ୍ , ସାନ୍ସ - ସେରିଫ୍ ;
- ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
- ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
- ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
- }
- । serif ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 14px , @ ଲାଇନ ଉଚ୍ଚତା : 20px ) {
- ଫଣ୍ଟ - ପରିବାର : "ଜର୍ଜିଆ" , ଟାଇମ୍ସ ନ୍ୟୁ ରୋମାନ୍ , ଟାଇମ୍ସ , ସାନ୍ସ - ସେରିଫ୍ ;
- ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
- ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
- ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
- }
- .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
- font-family: "Monaco", Courier New, monospace;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- }
Gradients
- #gradient {
- .horizontal (@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
- background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
- background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(left, @startColor, @endColor); // Le standard
- }
- .vertical (@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
- background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
- background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(@startColor, @endColor); // The standard
- }
- .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Operations and grid system
Get fancy and perform some math to generate flexible and powerful mixins like the one below.
- // Griditude
- @gridColumns: 16;
- @gridColumnWidth: 40px;
- @gridGutterWidth: 20px;
- @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
- // Grid System
- .container {
- width: @siteWidth;
- margin: 0 auto;
- .clearfix();
- }
- .columns(@columnSpan: 1) {
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
- }
- .offset(@columnOffset: 1) {
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
- }