Etiam porta sem maleuada magna mollis euismod | Maecenas faucibus mollis interdum | ମୋର୍ବି ଲିଓ ରିସସ୍, ପୋର୍ଟା ଏସି କନସେକ୍ଟେଟର୍ ଏସି, ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
ବୁଟଷ୍ଟ୍ରାପ୍ ହେଉଛି ଟ୍ୱିଟରରୁ ଏକ ଟୁଲ୍କିଟ୍ ଯାହା ୱେବ୍ ଆପ୍ ଏବଂ ସାଇଟଗୁଡିକର କିକଷ୍ଟାର୍ଟ ବିକାଶ ପାଇଁ ଡିଜାଇନ୍ ହୋଇଛି |
ଟାଇପୋଗ୍ରାଫି, ଫର୍ମ, ବଟନ୍, ଟେବୁଲ୍, ଗ୍ରୀଡ୍, ନାଭିଗେସନ୍ ଏବଂ ଅଧିକ ପାଇଁ ଏଥିରେ ଆଧାର CSS ଏବଂ HTML ଅନ୍ତର୍ଭୁକ୍ତ |
ନର୍ଡ ଆଲର୍ଟ: ବୁଟଷ୍ଟ୍ରାପ୍ କମ୍ ସହିତ ନିର୍ମିତ ଏବଂ ଆଧୁନିକ ବ୍ରାଉଜରକୁ ଦୃଷ୍ଟିରେ ରଖି ଗେଟ୍ ବାହାରେ କାମ କରିବା ପାଇଁ ଡିଜାଇନ୍ କରାଯାଇଥିଲା |
ଶୀଘ୍ର ଏବଂ ସହଜ ଆରମ୍ଭ ପାଇଁ, କେବଳ ଏହି ୱେବପେଜରେ ଏହି ସ୍ନିପେଟ୍ କପି କରନ୍ତୁ |
କମ୍ ବ୍ୟବହାର କରିବାର ପ୍ରଶଂସକ? କ problem ଣସି ଅସୁବିଧା ନାହିଁ, କେବଳ ରେପୋକୁ କ୍ଲୋନ କରନ୍ତୁ ଏବଂ ଏହି ରେଖାଗୁଡ଼ିକୁ ଯୋଡନ୍ତୁ:
Github ରେ ଅଫିସିଆଲ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ରେପୋ ସହିତ ଡାଉନଲୋଡ୍, ଫଙ୍କ୍, ଟାଣ, ଫାଇଲ୍ ଇସୁ, ଏବଂ ଅଧିକ |
ସମ୍ପ୍ରତି v1.3.0
ଟୁଇଟରରେ ଇ Engine ୍ଜିନିୟରମାନେ front ତିହାସିକ ଭାବରେ ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ ଆବଶ୍ୟକତା ପୂରଣ କରିବା ପାଇଁ ପରିଚିତ ଯେକ library ଣସି ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିଛନ୍ତି | ଉପସ୍ଥାପିତ ଚ୍ୟାଲେଞ୍ଜଗୁଡିକର ଉତ୍ତର ଭାବରେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଆରମ୍ଭ ହେଲା | ଅନେକ ଚମତ୍କାର ଲୋକମାନଙ୍କ ସାହାଯ୍ୟରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଯଥେଷ୍ଟ ବୃଦ୍ଧି ପାଇଛି |
Dev.twitter.com ରେ ଅଧିକ ପ Read ନ୍ତୁ
କ୍ରୋମ, ସଫାରି, ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର ଏବଂ ଫାୟାରଫକ୍ସ ପରି ପ୍ରମୁଖ ଆଧୁନିକ ବ୍ରାଉଜରରେ ବୁଟଷ୍ଟ୍ରାପ୍ ପରୀକ୍ଷା ଏବଂ ସମର୍ଥିତ |
ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକଳିତ CSS, ଅସମ୍ପୂର୍ଣ୍ଣ ଏବଂ ଉଦାହରଣ ଟେମ୍ପଲେଟ୍ ସହିତ ସମ୍ପୂର୍ଣ୍ଣ ଅଟେ |
ବୁଟଷ୍ଟ୍ରାପ୍ ର ଅଂଶ ଭାବରେ ପ୍ରଦତ୍ତ ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ହେଉଛି 940px ଚଉଡା 16-ସ୍ତମ୍ଭ ଗ୍ରୀଡ୍ | ଏହା ଲୋକପ୍ରିୟ 960 ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ସ୍ୱାଦ, କିନ୍ତୁ ବାମ ଏବଂ ଡାହାଣ ପାର୍ଶ୍ୱରେ ଅତିରିକ୍ତ ମାର୍ଜିନ୍ / ପ୍ୟାଡିଂ ବିନା |
ଏଠାରେ ଦେଖାଯାଇଥିବା ପରି, ଦୁଇଟି "ସ୍ତମ୍ଭ" ସହିତ ଏକ ମ basic ଳିକ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରାଯାଇପାରିବ, ପ୍ରତ୍ୟେକଟି 16 ଟି ମୂଳଦୁଆ ସ୍ତମ୍ଭକୁ ବିସ୍ତାର କରେ ଯାହାକୁ ଆମେ ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ଅଂଶ ଭାବରେ ବ୍ୟାଖ୍ୟା କରିଥିଲୁ | ଅଧିକ ପରିବର୍ତ୍ତନ ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣଗୁଡିକ ଦେଖନ୍ତୁ |
- <div ଶ୍ରେଣୀ = "ଧାଡି" > |
- <div class = "span6" > |
- ...
- </div>
- <div class = "span10" > |
- ...
- </div>
- </div>
ଯଦି ତୁମେ .row
ଏକ ବିଦ୍ୟମାନ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ସୃଷ୍ଟି କରି ତୁମର ବିଷୟବସ୍ତୁକୁ ନଷ୍ଟ କର |
- <div ଶ୍ରେଣୀ = "ଧାଡି" > |
- <div class = "span12" > |
- ସ୍ତମ୍ଭର ସ୍ତର 1
- <div ଶ୍ରେଣୀ = "ଧାଡି" > |
- <div class = "span6" > |
- ସ୍ତର 2
- </div>
- <div class = "span6" > |
- ସ୍ତର 2
- </div>
- </div>
- </div>
- </div>
ଡିଫଲ୍ଟ 940px ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ କଷ୍ଟୋମାଇଜ୍ କରିବା ପାଇଁ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ରେ ନିର୍ମିତ | ଟିକିଏ କଷ୍ଟମାଇଜେସନ୍ ସହିତ, ଆପଣ ସ୍ତମ୍ଭର ଆକାର, ସେମାନଙ୍କର ଗୁଟର୍ ଏବଂ ସେମାନେ ରହୁଥିବା ପାତ୍ରକୁ ପରିବର୍ତ୍ତନ କରିପାରିବେ |
ଗ୍ରୀଡ୍ ସିଷ୍ଟମକୁ ରୂପାନ୍ତର କରିବା ପାଇଁ ଆବଶ୍ୟକ ଭେରିଏବଲ୍ ଗୁଡିକ ବର୍ତ୍ତମାନ ସମସ୍ତେ ବାସ କରନ୍ତି preboot.less
|
ଭେରିଏବଲ୍ | ଡିଫଲ୍ଟ ମୂଲ୍ୟ | ବର୍ଣ୍ଣନା |
---|---|---|
@gridColumns |
16 | ଗ୍ରୀଡ୍ ଭିତରେ ସ୍ତମ୍ଭ ସଂଖ୍ୟା | |
@gridColumnWidth |
40px | ଗ୍ରୀଡ୍ ମଧ୍ୟରେ ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭର ମୋଟେଇ | |
@gridGutterWidth |
20px | ପ୍ରତ୍ୟେକ ସ୍ତମ୍ଭ ମଧ୍ୟରେ ନକାରାତ୍ମକ ସ୍ଥାନ | |
@siteWidth |
ସମସ୍ତ ସ୍ତମ୍ଭ ଏବଂ ଗୁଟରର ଗଣିତ ରାଶି | | ସ୍ତମ୍ଭ ଏବଂ ଗୁଟର ସଂଖ୍ୟା ଗଣିବା ଏବଂ ମିଶ୍ରଣର ମୋଟେଇ ସେଟ୍ କରିବା ପାଇଁ ଆମେ କିଛି ମ basic ଳିକ ମ୍ୟାଚ୍ ବ୍ୟବହାର କରୁ .fixed-container() | |
ଗ୍ରୀଡ୍ ରୂପାନ୍ତର କରିବା ଅର୍ଥ ହେଉଛି ତିନୋଟି @grid-*
ଭେରିଏବଲ୍ ବଦଳାଇବା ଏବଂ କମ୍ ଫାଇଲ୍ଗୁଡ଼ିକୁ ପୁନ omp କମ୍ପାଇଲ୍ କରିବା |
24 ଟି ସ୍ତମ୍ଭ ସହିତ ଏକ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ପରିଚାଳନା କରିବାକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ସଜ୍ଜିତ | ଡିଫଲ୍ଟଟି ମାତ୍ର 16. ଏଠାରେ ଆପଣଙ୍କର ଗ୍ରୀଡ୍ ଭେରିଏବଲ୍ ଗୁଡିକ 24-ସ୍ତମ୍ଭ ଗ୍ରୀଡ୍ କୁ କଷ୍ଟୋମାଇଜ୍ ଦେଖାଯିବ |
- @ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ : 24 ;
- @ ଗ୍ରୀଡ୍ କଲମ୍ ୱିଥ୍ : 20px ;
- @ ଗ୍ରୀଡ୍ ଗୁଟର୍ ୱିଥ୍ : 20px ;
ଥରେ ପୁନ omp ସଂକଳିତ ହେଲେ, ଆପଣ ସେଟ୍ ହୋଇଯିବେ!
ଡିଫଲ୍ଟ ଏବଂ ସରଳ 940px- ଚଉଡା, ଏକକ ଦ୍ୱାରା ପ୍ରଦତ୍ତ ଯେକ any ଣସି ୱେବସାଇଟ୍ କିମ୍ବା ପୃଷ୍ଠା ପାଇଁ କେନ୍ଦ୍ରିତ ଲେଆଉଟ୍ <div.container>
|
- <body>
- <div class = "ପାତ୍ର" > |
- ...
- </div>
- </body>
ମିନି- ଏବଂ ସର୍ବାଧିକ ଓସାର ଏବଂ ଏକ ବାମ ପାର୍ଶ୍ୱ ପାର୍ଶ୍ୱ ଦଣ୍ଡ ସହିତ ଏକ ବିକଳ୍ପ, ନମନୀୟ ତରଳ ପୃଷ୍ଠା ସଂରଚନା | ଆପ୍ ଏବଂ ଡକସ୍ ପାଇଁ ବହୁତ ଭଲ |
- <body>
- <div class = "ପାତ୍ର-ତରଳ" > |
- <div class = "sidebar" > |
- ...
- </div>
- <div ଶ୍ରେଣୀ = "ବିଷୟବସ୍ତୁ" > |
- ...
- </div>
- </div>
- </body>
ଆପଣଙ୍କର ୱେବପୃଷ୍ଠାଗୁଡ଼ିକର ସଂରଚନା ପାଇଁ ଏକ ମାନକ ଟାଇପୋଗ୍ରାଫିକ୍ ହାଇରାର୍କି |
ସମଗ୍ର ଟାଇପୋଗ୍ରାଫିକ୍ ଗ୍ରୀଡ୍ ଆମର preboot.less ଫାଇଲରେ ଦୁଇଟି କମ୍ ଭେରିଏବଲ୍ ଉପରେ ଆଧାରିତ: @basefont
ଏବଂ @baseline
। ପ୍ରଥମଟି ହେଉଛି ବେସ୍ ଫଣ୍ଟ୍ ସାଇଜ୍ ଏବଂ ଦ୍ୱିତୀୟଟି ହେଉଛି ବେସ୍ ଲାଇନ୍-ଉଚ୍ଚତା |
ଆମର ସମସ୍ତ ପ୍ରକାରର ମାର୍ଜିନ, ପ୍ୟାଡିଂ, ଏବଂ ଲାଇନ-ଉଚ୍ଚତା ସୃଷ୍ଟି କରିବାକୁ ଆମେ ସେହି ଭେରିଏବଲ୍, ଏବଂ କିଛି ଗଣିତ ବ୍ୟବହାର କରୁ |
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>
କର ଏବଂ ତୁମେ —
ଏହା ପୂର୍ବରୁ ଏକ ଏମ୍ ଡ୍ୟାସ୍ ପାଇବ |
ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ଆମ୍, କନସେକ୍ଟେଟର୍ ଆଡିପିସିଙ୍ଗ୍ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋଜୁରେ ଏକ ଆଣ୍ଟେ ଭେନେନାଟିସ୍ ଡାପିବସ୍ ପୋସୁରେ ଭେଲିଟ୍ ଆଲିକେଟ୍ |
ଜୁଲିୟସ୍ ହାଇବର୍ଟ ଡ
- <blockquote>
- <p> ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍, କନସେକ୍ଟୁର ଆଡିପିସିଂ ଏଲିଟ୍ | ଇଣ୍ଟିଜର୍ ପୋସୁରେ ଏକ ଆଣ୍ଟେ ଭେନେନାଟିସ୍ ଡାପିବସ୍ ପୋସୁରେ ଭେଲିଟ୍ ଆଲିକେଟ୍ | </p>
- <small> ଡକ୍ଟର ଜୁଲିୟସ୍ ହାଇବର୍ଟ </ mall> |
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
ଦୁଇଟି ସରଳ ଟ୍ୟାଗ୍ ସହିତ ଶ code ଳୀରେ ତୁମର କୋଡ୍ ପିମ୍ପ୍ କର | ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଅଧିକ ଚମତ୍କାରତା ପାଇଁ, ଗୁଗୁଲର କୋଡ୍ ସୁନ୍ଦର ଲାଇବ୍ରେରୀକୁ ଡ୍ରପ୍ କରନ୍ତୁ ଏବଂ ଆପଣ ସେଟ୍ ହୋଇଛନ୍ତି |
କୋଡ୍, ବ୍ଲକ୍ କିମ୍ବା କେବଳ ସ୍ନିପେଟ୍ ଇନଲାଇନ, ସଠିକ୍ ଟ୍ୟାଗରେ ଗୁଡ଼ାଇ ଶ style ଳୀ ସହିତ ପ୍ରଦର୍ଶିତ ହୋଇପାରିବ | ଏକାଧିକ ରେଖା ବିସ୍ତାର କରୁଥିବା କୋଡ୍ ବ୍ଲକ୍ ପାଇଁ, <pre>
ଉପାଦାନ ବ୍ୟବହାର କରନ୍ତୁ | ଇନଲାଇନ କୋଡ୍ ପାଇଁ, <code>
ଉପାଦାନ ବ୍ୟବହାର କରନ୍ତୁ |
ଉପାଦାନ | ଫଳାଫଳ |
---|---|
<code> |
>html< ଏହିପରି ପାଠ୍ୟର ଏକ ଧାଡିରେ, ତୁମର ଗୁଡ଼ାଯାଇଥିବା କୋଡ୍ ଏହି ଉପାଦାନ ପରି ଦେଖାଯିବ | |
<pre> |
<div> <h1> ହେଡିଙ୍ଗ୍ </ h1> | <p> ଏଠାରେ କିଛି ଅଛି ... </p> </div> ଟିପନ୍ତୁ: |
<pre class="prettyprint"> |
ଗୁଗୁଲ୍-କୋଡ୍-ପ୍ରିଟିଫ୍ ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରି, ତୁମେ କୋଡ୍ ର ବ୍ଲକ୍ ଟିକିଏ ଭିନ୍ନ ଭିଜୁଆଲ୍ ଷ୍ଟାଇଲ୍ ଏବଂ ସ୍ୱୟଂଚାଳିତ ବାକ୍ୟବିନ୍ୟାସ ହାଇଲାଇଟିଂ ପାଇବ | <div> <h1> ହେଡିଙ୍ଗ୍ </h1> <p> ଏଠାରେ କିଛି ଅଛି ... </p> </div> ଗୁଗୁଲ୍-କୋଡ୍-ପ୍ରିଫାଇଟ୍ ଡାଉନଲୋଡ୍ କରନ୍ତୁ ଏବଂ କିପରି ବ୍ୟବହାର କରାଯିବ ତାହା ପାଇଁ ରିଡମେ ଦେଖନ୍ତୁ | |
<span class="label">
ଆପଣଙ୍କ ଶରୀରର ପାଠ୍ୟରେ ଯେକ any ଣସି ବାକ୍ୟାଂଶକୁ ଧ୍ୟାନ ଦିଅନ୍ତୁ କିମ୍ବା ଫ୍ଲାଗ୍ କରନ୍ତୁ |
କେବେ ସେହି କଳ୍ପନା ମଧ୍ୟରୁ ଗୋଟିଏ ଆବଶ୍ୟକ କରେ ! କିମ୍ବା କୋଡ୍ ଲେଖିବାବେଳେ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ପତାକା? ଆଚ୍ଛା, ବର୍ତ୍ତମାନ ତୁମର ସେଗୁଡ଼ିକ ଅଛି | ଡିଫଲ୍ଟ ଭାବରେ ଯାହା ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି ତାହା ଏଠାରେ ଅଛି:
ଲେବଲ୍ | | ଫଳାଫଳ |
---|---|
<span class="label">Default</span> |
ଡିଫଲ୍ଟ | |
<span class="label success">New</span> |
ନୂତନ |
<span class="label warning">Warning</span> |
ଚେତାବନୀ |
<span class="label important">Important</span> |
ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ | |
<span class="label notice">Notice</span> |
ଧ୍ୟାନ ଦିଅନ୍ତୁ | |
କମ୍ HTML ପାଦଚିହ୍ନ ଏବଂ ସର୍ବନିମ୍ନ ଶ yles ଳୀ ସହିତ ପୃଷ୍ଠାଗୁଡ଼ିକରେ ବିଭିନ୍ନ ଆକାରର ଥମ୍ବନେଲଗୁଡିକ ପ୍ରଦର୍ଶନ କରନ୍ତୁ |
ଥମ୍ବନେଲଗୁଡିକ ଯେକ .media-grid
size ଣସି ଆକାର ହୋଇପାରେ, କିନ୍ତୁ ବିଲ୍ଟ-ଇନ୍ ବୁଟ୍ଷ୍ଟ୍ରାପ୍ ଗ୍ରୀଡ୍ ସିଷ୍ଟମରେ ସିଧାସଳଖ ମ୍ୟାପ୍ ହେବାବେଳେ ସେମାନେ ସର୍ବୋତ୍ତମ କାର୍ଯ୍ୟ କରନ୍ତି | .span2
90, 210, ଏବଂ 330 ପରି ପ୍ରତିଛବି ମୋଟେଇ , .span4
ଏବଂ .span6
ସ୍ତମ୍ଭ ଆକାର ସହିତ ସମାନ ହେବା ପାଇଁ କିଛି ପିକ୍ସେଲ ପ୍ୟାଡିଂ ସହିତ ମିଳିତ ହୁଏ |
ମିଡିଆ ଗ୍ରୀଡ୍ ବ୍ୟବହାର କରିବା ସହଜ ଏବଂ ମାର୍କଅପ୍ ପାର୍ଶ୍ୱରେ ସରଳ | ସେମାନଙ୍କର ଆକାରଗୁଡିକ ସମ୍ପୂର୍ଣ୍ଣ ଭାବରେ ଅନ୍ତର୍ଭୁକ୍ତ ପ୍ରତିଛବିଗୁଡ଼ିକର ଆକାର ଉପରେ ଆଧାରିତ |
- <ul class = "ମିଡିଆ-ଗ୍ରୀଡ୍" > |
- <li>
- <a href = "#"> _
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </ li>
- <li>
- <a href = "#"> _
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </ li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
ଅନେକ ଜିନିଷ ପାଇଁ ଟେବୁଲ୍ ବହୁତ ଭଲ | ଉତ୍ତମ ସାରଣୀଗୁଡ଼ିକ, ଉପଯୋଗୀ, ମାପନୀୟ ଏବଂ ପଠନୀୟ (କୋଡ୍ ସ୍ତରରେ) ହେବା ପାଇଁ ଟିକେ ମାର୍କଅପ୍ ପ୍ରେମ ଆବଶ୍ୟକ କରେ | ସାହାଯ୍ୟ କରିବାକୁ ଏଠାରେ କିଛି ଟିପ୍ସ |
ସର୍ବଦା ତୁମର ସ୍ତମ୍ଭ ହେଡର୍ ଗୁଡ଼ିକୁ ଏପରି ଭାବରେ ଗୁଡ଼ାଇ ରଖ <thead>
ଯେ ହାଇରାର୍କି <thead>
>> |<tr>
<th>
ସ୍ତମ୍ଭ ହେଡର୍ ସହିତ ସମାନ, ଆପଣଙ୍କର ସମସ୍ତ ଟେବୁଲ୍ ର ଶରୀର ବିଷୟବସ୍ତୁକୁ ଗୁଡ଼ାଇ ରଖିବା ଉଚିତ ଯାହା ଦ୍ <tbody>
your ାରା ଆପଣଙ୍କର ହାଇରାର୍କି >> <tbody>
ଅଟେ |<tr>
<td>
ସମସ୍ତ ଟେବୁଲ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ କେବଳ ଆବଶ୍ୟକୀୟ ସୀମା ସହିତ ଷ୍ଟାଇଲ୍ ହେବ ଏବଂ ପଠନ ଯୋଗ୍ୟତାକୁ ସୁନିଶ୍ଚିତ କରିବା ଏବଂ ଗଠନ ବଜାୟ ରଖିବା | ଅତିରିକ୍ତ କ୍ଲାସ୍ କିମ୍ବା ଗୁଣଗୁଡିକ ଯୋଗ କରିବାର ଆବଶ୍ୟକତା ନାହିଁ |
# | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଭାଷା |
---|---|---|---|
୧ | କେତେକ | ଗୋଟିଏ | | ଇଂରାଜୀ | |
୨ | ଜୋ | ସିକ୍ସପ୍ୟାକ୍ | | ଇଂରାଜୀ | |
3 | ଷ୍ଟୁ | | ଦନ୍ତ | କୋଡ୍ |
- <ଟେବୁଲ୍> |
- ...
- </table>
ଜେବ୍ରା-ଷ୍ଟ୍ରିପିଂ ଯୋଗ କରି ତୁମର ଟେବୁଲ ସହିତ ଟିକିଏ କଳ୍ପନା କର - କେବଳ .zebra-striped
ଶ୍ରେଣୀ ଯୋଡ |
# | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଭାଷା |
---|---|---|---|
୧ | କେତେକ | ଗୋଟିଏ | | ଇଂରାଜୀ | |
୨ | ଜୋ | ସିକ୍ସପ୍ୟାକ୍ | | ଇଂରାଜୀ | |
3 | ଷ୍ଟୁ | | ଦନ୍ତ | କୋଡ୍ |
ଟିପନ୍ତୁ: ଜେବ୍ରା-ଷ୍ଟ୍ରିପିଂ ହେଉଛି ଏକ ପ୍ରଗତିଶୀଳ ଉନ୍ନତି ଯାହା IE8 ଏବଂ ତଳ ପରି ପୁରୁଣା ବ୍ରାଉଜର୍ ପାଇଁ ଉପଲବ୍ଧ ନୁହେଁ |
- <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍" > |
- ...
- </table>
ପୂର୍ବ ଉଦାହରଣକୁ ନେଇ, jQuery ଏବଂ ଟେବୁଲସର୍ଟ ପ୍ଲଗଇନ୍ ମାଧ୍ୟମରେ ସର୍ଟିଂ କାର୍ଯ୍ୟକାରିତା ପ୍ରଦାନ କରି ଆମେ ଆମର ଟେବୁଲଗୁଡିକର ଉପଯୋଗିତାକୁ ଉନ୍ନତ କରୁ | ସର୍ଟ ପରିବର୍ତ୍ତନ କରିବାକୁ ଯେକ any ଣସି ସ୍ତମ୍ଭର ହେଡର୍ କ୍ଲିକ୍ କରନ୍ତୁ |
# | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଭାଷା |
---|---|---|---|
୨ | ଜୋ | ସିକ୍ସପ୍ୟାକ୍ | | ଇଂରାଜୀ | |
3 | ଷ୍ଟୁ | | ଦନ୍ତ | କୋଡ୍ |
୧ | ତୁମର | ଗୋଟିଏ | | ଇଂରାଜୀ | |
- <ସ୍କ୍ରିପ୍ଟ src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <ସ୍କ୍ରିପ୍ଟ >
- $ ( କାର୍ଯ୍ୟ () {
- $ ( "ଟେବୁଲ୍ # ସର୍ଟ ଟେବୁଲ୍ ଉଦାହରଣ" ) | ଟେବୁଲସର୍ ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍" > |
- ...
- </table>
ସମସ୍ତ ଫର୍ମଗୁଡ଼ିକୁ ଏକ ପଠନୀୟ ଏବଂ ମାପନୀୟ ଉପାୟରେ ଉପସ୍ଥାପନ କରିବାକୁ ଡିଫଲ୍ଟ ଶ yles ଳୀ ଦିଆଯାଏ | ଟେକ୍ସଟ୍ ଇନପୁଟ୍, ସିଲେକ୍ଟ ତାଲିକା, ଟେକ୍ସଟେରିଆ, ରେଡିଓ ବଟନ୍ ଏବଂ ଚେକ୍ ବକ୍ସ, ଏବଂ ବଟନ୍ ପାଇଁ ଶ yles ଳୀ ପ୍ରଦାନ କରାଯାଇଛି |
ତୁମର ଫର୍ମର HTML ରେ ଯୋଡ .form-stacked
ଏବଂ ତୁମର ବାମ ପରିବର୍ତ୍ତେ ସେମାନଙ୍କ କ୍ଷେତ୍ର ଉପରେ ଲେବଲ୍ ରହିବ | ଯଦି ଆପଣଙ୍କର ଫର୍ମଗୁଡିକ ଛୋଟ ଥାଏ କିମ୍ବା ଭାରୀ ଫର୍ମଗୁଡିକ ପାଇଁ ଆପଣଙ୍କର ଦୁଇଟି ସ୍ତମ୍ଭ ଅଛି ତେବେ ଏହା ବହୁତ ଭଲ କାମ କରେ |
ଆପଣଙ୍କ ମାର୍କଅପ୍ ରେ ଅଳ୍ପ କିଛି ଶ୍ରେଣୀ ଯୋଗ କରି ଯେକ form ଣସି ଫର୍ମ input
, select
କିମ୍ବା ମୋଟେଇ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତୁ |textarea
V1.3.0 ସୁଦ୍ଧା, ଆମେ ଫର୍ମ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ଗ୍ରୀଡ୍-ଆଧାରିତ ସାଇଜ୍ କ୍ଲାସ୍ ଯୋଡିଛୁ | ବିଦ୍ୟମାନ, ଇତ୍ୟାଦି ଶ୍ରେଣୀଗୁଡ଼ିକ ଉପରେ ଦୟାକରି ଏଗୁଡିକ ବ୍ୟବହାର .mini
କରନ୍ତୁ .small
|
ଏକ ସମ୍ମିଳନୀ ଭାବରେ, ବଟନ୍ଗୁଡ଼ିକ କାର୍ଯ୍ୟ ପାଇଁ ବ୍ୟବହୃତ ହେଉଥିବାବେଳେ ବସ୍ତୁଗୁଡ଼ିକ ପାଇଁ ଲିଙ୍କ୍ ବ୍ୟବହୃତ ହୁଏ | ଉଦାହରଣ ସ୍ୱରୂପ, “ଡାଉନଲୋଡ୍” ଏକ ବଟନ୍ ହୋଇପାରେ ଏବଂ “ସାମ୍ପ୍ରତିକ କାର୍ଯ୍ୟକଳାପ” ଏକ ଲିଙ୍କ୍ ହୋଇପାରେ |
ସମସ୍ତ ବଟନ୍ ଗୁଡିକ ହାଲୁକା ଧୂସର ଶ style ଳୀରେ ଡିଫଲ୍ଟ, କିନ୍ତୁ ବିଭିନ୍ନ ରଙ୍ଗ ଶ yles ଳୀ ପାଇଁ ଅନେକ କାର୍ଯ୍ୟକ୍ଷମ ଶ୍ରେଣୀ ପ୍ରୟୋଗ କରାଯାଇପାରିବ | ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକରେ ଏକ ନୀଳ .primary
ଶ୍ରେଣୀ, ହାଲୁକା-ନୀଳ .info
ଶ୍ରେଣୀ, ସବୁଜ .success
ଶ୍ରେଣୀ ଏବଂ ଏକ ଲାଲ୍ .danger
ଶ୍ରେଣୀ ଅନ୍ତର୍ଭୁକ୍ତ |
ପ୍ରୟୋଗ ସହିତ ଯେକ anything ଣସି ଜିନିଷରେ ବଟନ୍ ଶ yles ଳୀ ପ୍ରୟୋଗ .btn
କରାଯାଇପାରିବ | ସାଧାରଣତ you ଆପଣ ଏହାକୁ କେବଳ ପ୍ରୟୋଗ କରିବାକୁ ଚାହାଁନ୍ତି <a>
, ଏବଂ ଉପାଦାନଗୁଡିକ <button>
ଚୟନ କରନ୍ତୁ | <input>
ଏହା କିପରି ଦେଖାଯାଉଛି ତାହା ଏଠାରେ ଅଛି:
ବଡ଼ କିମ୍ବା ଛୋଟ ବଟନ୍ କଳ୍ପନା? ଏଥିରେ ଅଛି!
ବଟନ୍ଗୁଡ଼ିକ ପାଇଁ ଯାହା ସକ୍ରିୟ ନୁହେଁ କିମ୍ବା ଗୋଟିଏ କାରଣ ପାଇଁ ଆପ୍ ଦ୍ୱାରା ଅକ୍ଷମ ହୋଇଛି, ଅକ୍ଷମ ଅବସ୍ଥା ବ୍ୟବହାର କରନ୍ତୁ | ତାହା .disabled
ଲିଙ୍କ୍ ଏବଂ ଉପାଦାନଗୁଡ଼ିକ :disabled
ପାଇଁ |<button>
.alert-message
ବିଫଳତା, ସମ୍ଭାବ୍ୟ ବିଫଳତା, କିମ୍ବା କାର୍ଯ୍ୟର ସଫଳତାକୁ ଆଲୋକିତ କରିବା ପାଇଁ ଏକ ଧାଡ଼ି ବାର୍ତ୍ତା | ଫର୍ମ ପାଇଁ ବିଶେଷ ଭାବରେ ଉପଯୋଗୀ |
- <div class = "ଆଲର୍ଟ-ମେସେଜ୍ ଚେତାବନୀ" > |
- <a class = "close" href = "#"> × </a> _
- <p> <strong> ପବିତ୍ର ଗୁଆକାମୋଲ୍! </strong> ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ, ଆପଣ ବହୁତ ଭଲ ଦେଖାଯାଉ ନାହାଁନ୍ତି | </p>
- </div>
.alert-message.block-message
ବାର୍ତ୍ତାଗୁଡିକ ପାଇଁ ଯାହା ଟିକେ ବ୍ୟାଖ୍ୟା ଆବଶ୍ୟକ କରେ, ଆମର ପାରାଗ୍ରାଫ୍ ଷ୍ଟାଇଲ୍ ଆଲର୍ଟ ଅଛି | ଲମ୍ବା ତ୍ରୁଟି ବାର୍ତ୍ତାଗୁଡ଼ିକୁ ବବୁଲ କରିବା, ଏକ ବିଚାରାଧୀନ କାର୍ଯ୍ୟର ଉପଭୋକ୍ତାଙ୍କୁ ଚେତାବନୀ ଦେବା, କିମ୍ବା ପୃଷ୍ଠାରେ ଅଧିକ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ ସୂଚନା ଉପସ୍ଥାପନ କରିବା ପାଇଁ ଏଗୁଡ଼ିକ ଉପଯୁକ୍ତ |
- <div class = "ଆଲର୍ଟ-ମେସେଜ୍ ବ୍ଲକ-ମେସେଜ୍ ଚେତାବନୀ" > |
- <a class = "close" href = "#"> × </a> _
- <p> <strong> ପବିତ୍ର ଗୁଆକାମୋଲ୍! ଏହା ଏକ ଚେତାବନୀ! </strong> ସର୍ବୋତ୍ତମ ଚେକ୍ ୟୋ ସେଲ୍ଫ, ଆପଣ ବହୁତ ଭଲ ଦେଖାଯାଉ ନାହାଁନ୍ତି | Nulla vitae elit libero, a pharetra augue। ପ୍ରଶଂସନୀୟ କମୋଡୋ କର୍ସସ୍ ମ୍ୟାଗନା, ଭେଲ ସ୍କେଲେରିସ୍କ ନିସଲ୍ କନସେକ୍ଟେଟର୍ ଇତ୍ୟାଦି | </p>
- <div ଶ୍ରେଣୀ = "ସତର୍କ-କାର୍ଯ୍ୟ" > |
- <a class = "btn small" href = "#"> ଏହି କାର୍ଯ୍ୟ ନିଅ </a> <a class = "btn small" href = "#"> କିମ୍ବା ଏହା କର </a>
- </div>
- </div>
ମୋଡାଲ୍ - ଡାୟଲଗ୍ କିମ୍ବା ଲାଇଟ୍ ବକ୍ସ - ପରିସ୍ଥିତିରେ ପ୍ରସଙ୍ଗଗତ କାର୍ଯ୍ୟ ପାଇଁ ଉତ୍ତମ ଅଟେ ଯେଉଁଠାରେ ପୃଷ୍ଠଭୂମି ପ୍ରସଙ୍ଗକୁ ବଜାୟ ରଖିବା ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ |
ଗୋଟିଏ ଭଲ ଶରୀର…
ଦ୍ୱନ୍ଦ୍ୱରେ ଥିବା ଉପଭୋକ୍ତାଙ୍କୁ ସାହାଯ୍ୟ କରିବା ଏବଂ ସେମାନଙ୍କୁ ସଠିକ୍ ଦିଗରେ ସୂଚାଇବା ପାଇଁ ଟ୍ୱିପିସ୍ ଅତ୍ୟନ୍ତ ଉପଯୋଗୀ |
ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲାର୍ ସିଟ୍ ଆମେଟ୍ ଇଲୋ ଏରର୍ ଇପ୍ସମ୍ ଭେରିଟାଟିସ୍ ଅଟୋ ଇଷ୍ଟେ ପର୍ପସିସିଆଟିସ୍ ଇଷ୍ଟ ଭୋଲୁପଟାସ୍ ନାଟସ୍ ଇଲୋ କ୍ୱାସି ଓଡିଟ୍ ଅଟୋ ନାଟସ୍ ଫଳାଫଳ ଫଳାଫଳ, ଅଟୋ ନାଟସ୍ ଇଲୋ ଭୋଲୁପେଟେମ୍ ଓଡିଟ୍ ପର୍ପସିଏଟିସ୍ ଲାଉଡାଣ୍ଟିମ୍ ରିମ୍ ଡୋଲୋରେମ୍କ ଟୋଟାମ୍ ଭଲ୍ୟୁପଟାସ୍ | 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
ଲେଆଉଟ୍ କୁ ପ୍ରଭାବିତ ନକରି ଏକ ପୃଷ୍ଠାକୁ ସବଟେକ୍ସୁଆଲ୍ ସୂଚନା ପ୍ରଦାନ କରିବାକୁ ପପୋଭର ବ୍ୟବହାର କରନ୍ତୁ |
Etiam porta sem maleuada magna mollis euismod | Maecenas faucibus mollis interdum | ମୋର୍ବି ଲିଓ ରିସସ୍, ପୋର୍ଟା ଏସି କନସେକ୍ଟେଟର୍ ଏସି, ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
ବୁଟଷ୍ଟ୍ରାପ୍ ଲାଇବ୍ରେରୀ ସହିତ ଜାଭାସ୍କ୍ରିପ୍ଟକୁ ଏକତ୍ର କରିବା ଅତ୍ୟନ୍ତ ସହଜ | ନିମ୍ନରେ ଆମେ ମ ics ଳିକଗୁଡିକ ଉପରେ ଯିବା ଏବଂ ଆପଣଙ୍କୁ ଆରମ୍ଭ କରିବା ପାଇଁ ଆପଣଙ୍କୁ କିଛି ଅଦ୍ଭୁତ ପ୍ଲଗଇନ୍ ଯୋଗାଇବା!
ବୁକଷ୍ଟ୍ରାପର କିଛି ପ୍ରାଥମିକ ଉପାଦାନକୁ ନୂତନ କଷ୍ଟମ୍ ପ୍ଲଗଇନ୍ ସହିତ ଜୀବନରେ ଆଣନ୍ତୁ ଯାହା jQuery ଏବଂ Ender ସହିତ କାମ କରେ | ତୁମର ନିର୍ଦ୍ଦିଷ୍ଟ ବିକାଶ ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ସେଗୁଡିକୁ ବିସ୍ତାର ଏବଂ ରୂପାନ୍ତର କରିବାକୁ ଆମେ ଆପଣଙ୍କୁ ଉତ୍ସାହିତ କରୁ |
ଫାଇଲ୍ | | ବର୍ଣ୍ଣନା |
---|---|
bootstrap-modal.js | ଆମର ମୋଡାଲ୍ ପ୍ଲଗଇନ୍ ହେଉଛି ପାରମ୍ପାରିକ ମୋଡାଲ୍ js ପ୍ଲଗଇନ୍ ଉପରେ ଏକ ସୁପର ସ୍ଲିମ୍! କେବଳ ଟୁଇଟରରେ ଆବଶ୍ୟକ କରୁଥିବା ଖାଲି କାର୍ଯ୍ୟକାରିତାକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରିବା ପାଇଁ ଆମେ ବିଶେଷ ଯତ୍ନ ନେଇଥିଲୁ | |
bootstrap-alerts.js | ଆଲର୍ଟରେ ଘନିଷ୍ଠ କାର୍ଯ୍ୟକାରିତା ଯୋଗାଇବା ପାଇଁ ଆଲର୍ଟ ପ୍ଲଗଇନ୍ ଏକ ସୁପର କ୍ଷୁଦ୍ର ଶ୍ରେଣୀ ଅଟେ | |
bootstrap-dropdown.js | ଏହି ପ୍ଲଗଇନ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଟପ୍ ବାର୍ କିମ୍ବା ଟ୍ୟାବଡ୍ ନେଭିଗେସନ୍ରେ ଡ୍ରପ୍ ଡାଉନ୍ ଇଣ୍ଟରାକସନ ଯୋଡିବା ପାଇଁ | |
bootstrap-scrollspy.js | ସ୍କ୍ରୋଲ୍ ସ୍ପି ପ୍ଲଗଇନ୍ ହେଉଛି ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଟପ୍ ବାର୍ ରେ ସ୍କ୍ରୋଲ୍ ପୋଜିସନ୍ ଉପରେ ଆଧାର କରି ଏକ ଅଟୋ ଅପଡେଟ୍ ନେଭ୍ ଯୋଡିବା ପାଇଁ | |
bootstrap-tabs.js | ଏହି ପ୍ଲଗଇନ୍ ସ୍ଥାନୀୟ ବିଷୟବସ୍ତୁ ମାଧ୍ୟମରେ ସାଇକେଲ ଚଲାଇବା ପାଇଁ ଶୀଘ୍ର, ଗତିଶୀଳ ଟ୍ୟାବ୍ ଏବଂ ବଟିକା କାର୍ଯ୍ୟକାରିତା ଯୋଗ କରିଥାଏ | |
bootstrap-twipsy.js | ଜାସନ୍ ଫ୍ରେମ୍ ଦ୍ୱାରା ଲିଖିତ ଉତ୍କୃଷ୍ଟ jQuery.tipsy ପ୍ଲଗଇନ୍ ଉପରେ ଆଧାର କରି; twipsy ହେଉଛି ଏକ ଅପଡେଟ୍ ସଂସ୍କରଣ, ଯାହା ପ୍ରତିଛବି ଉପରେ ନିର୍ଭର କରେ ନାହିଁ, ଆନିମେସନ୍ ପାଇଁ css3 ବ୍ୟବହାର କରେ, ଏବଂ ସ୍ଥାନୀୟ ଟାଇଟଲ୍ ଷ୍ଟୋରେଜ୍ ପାଇଁ ଡାଟା-ଆଟ୍ରିବ୍ୟୁଟ୍! |
bootstrap-popover.js | ପପଓଭର ପ୍ଲଗଇନ୍ ଆପଣଙ୍କ ଅନୁପ୍ରୟୋଗରେ ପପୋଭର ଯୋଡିବା ପାଇଁ ଏକ ସରଳ ଇଣ୍ଟରଫେସ୍ ପ୍ରଦାନ କରେ | ଏହା boostrap-twipsy.js ପ୍ଲଗଇନକୁ ବିସ୍ତାର କରେ, ତେଣୁ ତୁମର ପ୍ରୋଜେକ୍ଟରେ ପପୋଭର ଅନ୍ତର୍ଭୂକ୍ତ କରିବାବେଳେ ସେହି ଫାଇଲକୁ ଧରିବାକୁ ନିଶ୍ଚିତ ହୁଅ! |
ନା! ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରଥମେ ଏବଂ ଏକ CSS ଲାଇବ୍ରେରୀ ହେବା ପାଇଁ ଡିଜାଇନ୍ ହୋଇଛି | ଏହି ଜାଭାସ୍କ୍ରିପ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ ଶ yles ଳୀ ଉପରେ ଏକ ମ basic ଳିକ ଇଣ୍ଟରାକ୍ଟିଭ୍ ଲେୟାର ପ୍ରଦାନ କରେ |
ଯଦିଓ, ଯେଉଁମାନେ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରନ୍ତି, ଆମେ ବୁଟଷ୍ଟ୍ରାପକୁ ଜାଭାସ୍କ୍ରିପ୍ଟ ସହିତ କିପରି ସଂଯୋଗ କରିବେ ଏବଂ ତୁରନ୍ତ ମ basic ଳିକ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ତୁମକୁ ଶୀଘ୍ର, ହାଲୁକା ବିକଳ୍ପ ଦେବା ପାଇଁ ଆପଣଙ୍କୁ ସାହାଯ୍ୟ କରିବାକୁ ଉପରୋକ୍ତ ପ୍ଲଗଇନଗୁଡିକ ପ୍ରଦାନ କରିଛୁ |
ଅଧିକ ସୂଚନା ପାଇଁ ଏବଂ କିଛି ଲାଇଭ୍ ଡେମୋ ଦେଖିବାକୁ, ଦୟାକରି ଆମର ପ୍ଲଗଇନ୍ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ପେଜ୍ କୁ ଦେଖନ୍ତୁ |
ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରିବୁଟ୍ ସହିତ ନିର୍ମିତ ହୋଇଥିଲା , ମିଶ୍ରଣ ଏବଂ ଭେରିଏବଲ୍ସର ଏକ ମୁକ୍ତ ଉତ୍ସ ପ୍ୟାକ୍ , ଦ୍ରୁତ ଏବଂ ସହଜ ୱେବ୍ ବିକାଶ ପାଇଁ ଏକ 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 ) {
- ଫଣ୍ଟ - ପରିବାର : "ହେଲଭେଟିକା ନେଉ" , ହେଲଭେଟିକା , ଆରିଆଲ୍ , ସାନ୍ସ - ସେରିଫ୍ ;
- ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
- ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
- ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
- }
- ...
- }
- # ଗ୍ରେଡିଏଣ୍ଟ୍ {
- ...
- । ଭୂଲମ୍ବ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ : # 555, @ ଏଣ୍ଡ ରଙ୍ଗ: # 333) {
- ପୃଷ୍ଠଭୂମି - ରଙ୍ଗ : @endColor ;
- ପୃଷ୍ଠଭୂମି - ପୁନରାବୃତ୍ତି : ପୁନରାବୃତ୍ତି - x ;
- ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - khtml - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ର line ଖ୍ୟ , ବାମ ଉପର , ବାମ ତଳ , ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ) ଠାରୁ , ( @endColor )); // କନକର୍ |
- ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ମୋଜ୍ - ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // FF 3.6+
- ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ms - ର line ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // IE10
- ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ୱେବକିଟ୍ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ର line ଖ୍ୟ , ବାମ ଉପର , ବାମ ତଳ , ରଙ୍ଗ - ଷ୍ଟପ୍ ( 0 %, @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ ), ରଙ୍ଗ - ବନ୍ଦ ( 100 %, @endColor )); // ସଫାରି 4+, କ୍ରୋମ୍ 2+ |
- ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - ୱେବକିଟ୍ - ର line ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ସଫାରି 5.1+, କ୍ରୋମ୍ 10+ |
- ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : - o - ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ଅପେରା 11.10
- ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ କଲର୍ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ମାନକ
- }
- ...
- }
ନିମ୍ନରେ ଥିବା ପରି ନମନୀୟ ଏବଂ ଶକ୍ତିଶାଳୀ ମିଶ୍ରଣ ସୃଷ୍ଟି କରିବାକୁ କଳ୍ପନା ପ୍ରାପ୍ତ କରନ୍ତୁ ଏବଂ କିଛି ଗଣିତ କରନ୍ତୁ |
- // ଗ୍ରୀଡ୍
- @ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ : 16 ;
- @ ଗ୍ରୀଡ୍ କଲମ୍ ୱିଥ୍ : 40px ;
- @ ଗ୍ରୀଡ୍ ଗୁଟର୍ ୱିଥ୍ : 20px ;
- @ ସାଇଟ୍ ୱିଥ୍ : ( @ ଗ୍ରିଡ୍ କଲମ୍ସ * @ ଗ୍ରିଡ୍ କଲମ୍ ୱିଥ୍ ) + _
- // କିଛି ସ୍ତମ୍ଭ ପ୍ରସ୍ତୁତ କରନ୍ତୁ |
- । ସ୍ତମ୍ଭଗୁଡିକ ( @ କଲମ୍ ସ୍ପାନ୍ : 1 ) {
- ମୋଟେଇ : ( @ ଗ୍ରିଡ୍ କଲମ୍ ୱିଡ୍ * @ କଲମ୍ ସ୍ପାନ୍ ) + _ _ _
- }
/ Lib / ରେ ଥିବା ଫାଇଲଗୁଡ଼ିକୁ ରୂପାନ୍ତର କରିବା ପରେ .less
, ବୁଟଷ୍ଟ୍ରାପ୍ - *। *। *। Css ଏବଂ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ - *। *। ଯଦି ଆପଣ GitHub କୁ ଏକ ଟାଣ ଅନୁରୋଧ ଦାଖଲ କରୁଛନ୍ତି, ତେବେ ଆପଣଙ୍କୁ ସର୍ବଦା ପୁନ omp ସଂକଳନ କରିବାକୁ ପଡିବ |
ପଦ୍ଧତି | ପଦକ୍ଷେପ |
---|---|
ମେକ୍ଫାଇଲ୍ ସହିତ ନୋଡ୍ | | ନିମ୍ନ ନିର୍ଦ୍ଦେଶକୁ ଚଲାଇ npm ସହିତ କମ୍ କମାଣ୍ଡ୍ ଲାଇନ୍ କମ୍ପାଇଲର୍ ସଂସ୍ଥାପନ କରନ୍ତୁ: $ npm lessc ସଂସ୍ଥାପନ କରନ୍ତୁ | ଥରେ ଇନଷ୍ଟଲ୍ ହୋଇଗଲେ କେବଳ ଅତିରିକ୍ତ ଭାବରେ, ଯଦି ଆପଣଙ୍କର ୱାଚର୍ ସଂସ୍ଥାପିତ ହୋଇଛି, ଆପଣ |
ଜାଭାସ୍କ୍ରିପ୍ଟ | ସର୍ବଶେଷ Less.js ଡାଉନଲୋଡ୍ କରନ୍ତୁ ଏବଂ ଏଥିରେ ଥିବା ପଥ (ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍) ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ
.ହୀନ ଫାଇଲଗୁଡିକର ପୁନ omp ସଂକଳନ କରିବାକୁ, କେବଳ ସେଭ୍ କରନ୍ତୁ ଏବଂ ଆପଣଙ୍କର ପୃଷ୍ଠା ପୁନ o ଲୋଡ୍ କରନ୍ତୁ | Less.js ସେଗୁଡ଼ିକୁ ସଂକଳନ କରେ ଏବଂ ସ୍ଥାନୀୟ ଷ୍ଟୋରେଜ୍ ରେ ଷ୍ଟୋର୍ କରେ | |
କମାଣ୍ଡ୍ ଲାଇନ୍ | | ଯଦି ଆପଣଙ୍କର ପୂର୍ବରୁ କମ୍ କମାଣ୍ଡ୍ ଲାଇନ୍ ଟୁଲ୍ ସଂସ୍ଥାପିତ ହୋଇଛି, କେବଳ ନିମ୍ନ ନିର୍ଦ୍ଦେଶକୁ ଚଲାନ୍ତୁ: $ lessc ./lib/bootstrap.less> bootstrap.css
|
କମ୍ ମ୍ୟାକ୍ ଆପ୍ | | ଅଣଅନୁଷ୍ଠାନିକ ମ୍ୟାକ୍ ଆପ୍ .less ଫାଇଲଗୁଡିକର ଡିରେକ୍ଟୋରୀଗୁଡିକ ଦେଖେ ଏବଂ ଏକ ଦେଖାଯାଇଥିବା .less ଫାଇଲ୍ ର ପ୍ରତ୍ୟେକ ସେଭ୍ ପରେ କୋଡ୍ କୁ ସ୍ଥାନୀୟ ଫାଇଲ୍ ରେ କମ୍ପାଇଲ୍ କରେ | ଯଦି ଆପଣ ପସନ୍ଦ କରନ୍ତି, ଆପଣ ସ୍ୱୟଂଚାଳିତ ମାଇନିଫିକେସନ୍ ପାଇଁ ଆପରେ ପସନ୍ଦଗୁଡ଼ିକୁ ଟୋଗଲ୍ କରିପାରିବେ ଏବଂ ସଙ୍କଳିତ ଫାଇଲଗୁଡିକ କେଉଁ ଡିରେକ୍ଟୋରୀରେ ଶେଷ ହୁଏ | |