Etiam porta sem maleuada magna mollis euismod | Maecenas faucibus mollis interdum | ମୋର୍ବି ଲିଓ ରିସସ୍, ପୋର୍ଟା ଏସି କନସେକ୍ଟେଟର୍ ଏସି, ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
ବୁଟଷ୍ଟ୍ରାପ୍ ହେଉଛି ଟ୍ୱିଟରରୁ ଏକ ଟୁଲ୍କିଟ୍ ଯାହା ୱେବ୍ ଆପ୍ ଏବଂ ସାଇଟଗୁଡିକର କିକଷ୍ଟାର୍ଟ ବିକାଶ ପାଇଁ ଡିଜାଇନ୍ ହୋଇଛି |
ଟାଇପୋଗ୍ରାଫି, ଫର୍ମ, ବଟନ୍, ଟେବୁଲ୍, ଗ୍ରୀଡ୍, ନାଭିଗେସନ୍ ଏବଂ ଅଧିକ ପାଇଁ ଏଥିରେ ଆଧାର CSS ଏବଂ HTML ଅନ୍ତର୍ଭୁକ୍ତ |
ନର୍ଡ ଆଲର୍ଟ: ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କମ୍ ସହିତ ନିର୍ମିତ ଏବଂ କେବଳ ଆଧୁନିକ ବ୍ରାଉଜରକୁ ଦୃଷ୍ଟିରେ ରଖି ଗେଟ୍ ବାହାରେ କାମ କରିବା ପାଇଁ ଡିଜାଇନ୍ କରାଯାଇଥିଲା |
ଶୀଘ୍ର ଏବଂ ସହଜ ଆରମ୍ଭ ପାଇଁ, କେବଳ ଏହି ୱେବପେଜରେ ଏହି ସ୍ନିପେଟ୍ କପି କରନ୍ତୁ |
କମ୍ ବ୍ୟବହାର କରିବାର ପ୍ରଶଂସକ? କ problem ଣସି ଅସୁବିଧା ନାହିଁ, କେବଳ ରେପୋକୁ କ୍ଲୋନ କରନ୍ତୁ ଏବଂ ଏହି ରେଖାଗୁଡ଼ିକୁ ଯୋଡନ୍ତୁ:
Github ରେ ଅଫିସିଆଲ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ରେପୋ ସହିତ ଡାଉନଲୋଡ୍, ଫଙ୍କ୍, ଟାଣ, ଫାଇଲ୍ ଇସୁ, ଏବଂ ଅଧିକ |
ବୁଟଷ୍ଟ୍ରାପ୍ ର ଅଂଶ ଭାବରେ ପ୍ରଦାନ କରାଯାଇଥିବା ଡିଫଲ୍ଟ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ହେଉଛି ଏକ 940px ଚଉଡା 16 ସ୍ତମ୍ଭ ଗ୍ରୀଡ୍ | ଏହା ଲୋକପ୍ରିୟ 960 ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ସ୍ୱାଦ, କିନ୍ତୁ ବାମ ଏବଂ ଡାହାଣ ପାର୍ଶ୍ୱରେ ଅତିରିକ୍ତ ମାର୍ଜିନ୍ / ପ୍ୟାଡିଂ ବିନା |
ଏଠାରେ ଦେଖାଯାଇଥିବା ପରି, ଦୁଇଟି "ସ୍ତମ୍ଭ" ସହିତ ଏକ ମ basic ଳିକ ଲେଆଉଟ୍ ସୃଷ୍ଟି କରାଯାଇପାରିବ, ପ୍ରତ୍ୟେକଟି 16 ଟି ମୂଳଦୁଆ ସ୍ତମ୍ଭକୁ ବିସ୍ତାର କରେ ଯାହାକୁ ଆମେ ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମର ଅଂଶ ଭାବରେ ବ୍ୟାଖ୍ୟା କରିଥିଲୁ | ଅଧିକ ପରିବର୍ତ୍ତନ ପାଇଁ ନିମ୍ନରେ ଥିବା ଉଦାହରଣଗୁଡିକ ଦେଖନ୍ତୁ |
- <div ଶ୍ରେଣୀ = "ଧାଡି"> |
- <div ଶ୍ରେଣୀ = "span6 ଗଜାନ" > | |
- ...
- </div>
- <div ଶ୍ରେଣୀ = "span10 ଗଜାନ" > | |
- ...
- </div>
- </div>
ପ୍ରାୟ ଯେକ site ଣସି ସାଇଟ୍ କିମ୍ବା ପୃଷ୍ଠା ପାଇଁ ଏକ ମ basic ଳିକ 940px ଚଉଡା, କେନ୍ଦ୍ରିତ କଣ୍ଟେନର୍ ଲେଆଉଟ୍ |
- <body>
- <div class = "ପାତ୍ର" > |
- ...
- </div>
- </body>
ମିନି- ଏବଂ ସର୍ବାଧିକ ଓସାର ଏବଂ ଏକ ବାମ ପାର୍ଶ୍ୱ ପାର୍ଶ୍ୱ ଦଣ୍ଡ ସହିତ ଏକ ନମନୀୟ ତରଳ ବା ତରଳ ପୃଷ୍ଠା ଗଠନ | ଆପ୍ସ ପାଇଁ ବହୁତ ଭଲ |
- <body>
- <div class = "ପାତ୍ର-ତରଳ" > |
- <div class = "sidebar" > |
- ...
- </div>
- <div ଶ୍ରେଣୀ = "ବିଷୟବସ୍ତୁ" > |
- ...
- </div>
- </div>
- </body>
ଆପଣଙ୍କର ୱେବପୃଷ୍ଠାଗୁଡ଼ିକର ସଂରଚନା ପାଇଁ ଏକ ମାନକ ଟାଇପୋଗ୍ରାଫିକ୍ ହାଇରାର୍କି |
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>
ଗୁରୁତ୍ୱ, ଠିକଣା, ଏବଂ ସଂକ୍ଷିପ୍ତକରଣ ବ୍ୟବହାର କରି |
<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।
address
ଉପାଦାନଟି ବ୍ୟବହୃତ ହୋଇଛି - ଆପଣ ଏହା ଅନୁମାନ କରିଛନ୍ତି! - ଆଡ୍ରେସ୍ | ଏହା କିପରି ଦେଖାଯାଉଛି ତାହା ଏଠାରେ ଅଛି:
ଟିପନ୍ତୁ:address
ବିଷୟବସ୍ତୁକୁ ସଠିକ୍ ଭାବରେ ଗଠନ କରିବା ପାଇଁ ଏକ ଲାଇନ୍-ବ୍ରେକ୍ () ସହିତ ପ୍ରତ୍ୟେକ ଧାଡି ଶେଷ ହେବା ଆବଶ୍ୟକ <br />
, ଯେହେତୁ ଏହା କ real ଣସି ଶ yles ଳୀ ପ୍ରୟୋଗ ନକରି ବାସ୍ତବ ଜୀବନରେ ପ read ାଯାଏ |
ସଂକ୍ଷିପ୍ତକରଣ ଏବଂ ସଂକ୍ଷିପ୍ତ ଶବ୍ଦଗୁଡ଼ିକ ପାଇଁ, abbr
ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରନ୍ତୁ ( HTML5acronym
ରେ ପୁରୁଣା ହୋଇଛି ) | ଟ୍ୟାଗ୍ ଭିତରେ ଶୋର୍ଥାଣ୍ଡ୍ ଫର୍ମ ରଖନ୍ତୁ ଏବଂ ସମ୍ପୂର୍ଣ୍ଣ ନାମ ପାଇଁ ଏକ ଟାଇଟଲ୍ ସେଟ୍ କରନ୍ତୁ |
<blockquote>
<p>
<cite>
blockquote
ତୁମର ଚାରିପାଖରେ paragraph
ଏବଂ cite
ଟ୍ୟାଗ୍ ଗୁଡ଼ାଇବାକୁ ନିଶ୍ଚିତ ହୁଅ | ଏକ ଉତ୍ସ ଉଲ୍ଲେଖ କରିବାବେଳେ, cite
ଉପାଦାନ ବ୍ୟବହାର କରନ୍ତୁ | CSS ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏକ ଏମ୍ ଡ୍ୟାସ୍ (& mdash;) ସହିତ ଏକ ନାମ ଉପସ୍ଥାପନ କରିବ |
ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲୋର ସିଟ୍ ଆମେଟ୍, କନସେକ୍ଟୁର ଆଡିପିସିସିଙ୍ଗ୍ ଏଲିଟ୍, ସେଡ୍ ଡୋ ଇୟୁସମୋଡ୍ ଟେମ୍ପୋର ଇନସିଡିଡଣ୍ଟ ୟୁ ଲାବୋର୍ ଏବଂ ଡୋଲୋର ମ୍ୟାଗନା ଆଲିକା ...
ଜୁଲିୟସ୍ ହାଇବର୍ଟ ଡ
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
ଅନେକ ଜିନିଷ ପାଇଁ ଟେବୁଲ୍ ବହୁତ ଭଲ | ଉତ୍ତମ ସାରଣୀଗୁଡ଼ିକ, ଉପଯୋଗୀ, ମାପନୀୟ ଏବଂ ପଠନୀୟ (କୋଡ୍ ସ୍ତରରେ) ହେବା ପାଇଁ ଟିକେ ମାର୍କଅପ୍ ପ୍ରେମ ଆବଶ୍ୟକ କରେ | ସାହାଯ୍ୟ କରିବାକୁ ଏଠାରେ କିଛି ଟିପ୍ସ |
ସର୍ବଦା ତୁମର ସ୍ତମ୍ଭ ହେଡର୍ ଗୁଡ଼ିକୁ ଏପରି ଭାବରେ ଗୁଡ଼ାଇ ରଖ thead
ଯେ ହାଇରାର୍କି thead
>> |tr
th
ସ୍ତମ୍ଭ ହେଡର୍ ସହିତ ସମାନ, ଆପଣଙ୍କର ସମସ୍ତ ଟେବୁଲ୍ ର ଶରୀର ବିଷୟବସ୍ତୁକୁ ଗୁଡ଼ାଇ ରଖିବା ଉଚିତ ଯାହା ଦ୍ tbody
your ାରା ଆପଣଙ୍କର ହାଇରାର୍କି >> tbody
ଅଟେ |tr
td
ସମସ୍ତ ଟେବୁଲ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ କେବଳ ଆବଶ୍ୟକୀୟ ସୀମା ସହିତ ଷ୍ଟାଇଲ୍ ହେବ ଏବଂ ପଠନ ଯୋଗ୍ୟତାକୁ ସୁନିଶ୍ଚିତ କରିବା ଏବଂ ଗଠନ ବଜାୟ ରଖିବା | ଅତିରିକ୍ତ କ୍ଲାସ୍ କିମ୍ବା ଗୁଣଗୁଡିକ ଯୋଗ କରିବାର ଆବଶ୍ୟକତା ନାହିଁ |
# | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଭାଷା |
---|---|---|---|
୧ | କେତେକ | ଗୋଟିଏ | | ଇଂରାଜୀ | |
୨ | ଜୋ | ସିକ୍ସପ୍ୟାକ୍ | | ଇଂରାଜୀ | |
3 | ଷ୍ଟୁ | | ଦନ୍ତ | କୋଡ୍ |
- <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ସାଧାରଣ-ସାରଣୀ"> | ଶ୍ରେଣୀ = "ସାଧାରଣ-ସାରଣୀ" > |
- ...
- </table>
ଜେବ୍ରା-ଷ୍ଟ୍ରିପିଂ ଯୋଗ କରି ତୁମର ଟେବୁଲ ସହିତ ଟିକିଏ କଳ୍ପନା କର - କେବଳ .zebra-striped
ଶ୍ରେଣୀ ଯୋଡ |
# | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଭାଷା |
---|---|---|---|
୧ | କେତେକ | ଗୋଟିଏ | | ଇଂରାଜୀ | |
୨ | ଜୋ | ସିକ୍ସପ୍ୟାକ୍ | | ଇଂରାଜୀ | |
3 | ଷ୍ଟ�� | | ଦନ୍ତ | କୋଡ୍ |
- <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ସାଧାରଣ-ଟେବୁଲ୍ ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍"> | ଶ୍ରେଣୀ = "ସାଧାରଣ-ଟେବୁଲ୍ ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍" > |
- ...
- </table>
ପୂର୍ବ ଉଦାହରଣକୁ ନେଇ, jQuery ଏବଂ ଟେବୁଲସର୍ଟ ପ୍ଲଗଇନ୍ ମାଧ୍ୟମରେ ସର୍ଟିଂ କାର୍ଯ୍ୟକାରିତା ପ୍ରଦାନ କରି ଆମେ ଆମର ଟେବୁଲଗୁଡିକର ଉପଯୋଗିତାକୁ ଉନ୍ନତ କରୁ | ସର୍ଟ ପରିବର୍ତ୍ତନ କରିବାକୁ ଯେକ any ଣସି ସ୍ତମ୍ଭର ହେଡର୍ କ୍ଲିକ୍ କରନ୍ତୁ |
# | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଭାଷା |
---|---|---|---|
୧ | ତୁମର | ଗୋଟିଏ | | ଇଂରାଜୀ | |
୨ | ଜୋ | ସିକ୍ସପ୍ୟାକ୍ | | ଇଂରାଜୀ | |
3 | ଷ୍ଟୁ | | ଦନ୍ତ | କୋଡ୍ |
- <ସ୍କ୍ରିପ୍ଟ ପ୍ରକାର = "ପାଠ୍ୟ / ଜାଭାସ୍କ୍ରିପ୍ଟ" src = "js / jquery / jquery.tablesorter.min.js"> </script> type = "text / javascript" src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <ସ୍କ୍ରିପ୍ଟ ପ୍ରକାର = "ପାଠ୍ୟ / ଜାଭାସ୍କ୍ରିପ୍ଟ" > |
- $ ( ଡକ୍ୟୁମେଣ୍ଟ୍ ) | ପ୍ରସ୍ତୁତ ( କାର୍ଯ୍ୟ () {
- $ ( "ଟେବୁଲ୍ # ସର୍ଟ ଟେବୁଲ୍ ଉଦାହରଣ" ) | ଟେବୁଲସର୍ ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ସାଧାରଣ-ଟେବୁଲ୍ ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍" > |
- ...
- </table>
ସମସ୍ତ ଫର୍ମଗୁଡ଼ିକୁ ଏକ ପଠନୀୟ ଏବଂ ମାପନୀୟ ଉପାୟରେ ଉପସ୍ଥାପନ କରିବାକୁ ଡିଫଲ୍ଟ ଶ yles ଳୀ ଦିଆଯାଏ | ଟେକ୍ସଟ୍ ଇନପୁଟ୍, ସିଲେକ୍ଟ ତାଲିକା, ଟେକ୍ସଟେରିଆ, ରେଡିଓ ବଟନ୍ ଏବଂ ଚେକ୍ ବକ୍ସ, ଏବଂ ବଟନ୍ ପାଇଁ ଶ yles ଳୀ ପ୍ରଦାନ କରାଯାଇଛି |
ତୁମର ଫର୍ମର HTML ରେ ଯୋଡ .form-stacked
ଏବଂ ତୁମର ବାମ ପରିବର୍ତ୍ତେ ସେମାନଙ୍କ କ୍ଷେତ୍ର ଉପରେ ଲେବଲ୍ ରହିବ | ଯଦି ଆପଣଙ୍କର ଫର୍ମଗୁଡିକ ଛୋଟ ଥାଏ କିମ୍ବା ଭାରୀ ଫର୍ମଗୁଡିକ ପାଇଁ ଆପଣଙ୍କର ଦୁଇଟି ସ୍ତମ୍ଭ ଅଛି ତେବେ ଏହା ବହୁତ ଭଲ କାମ କରେ |
ଏକ ସମ୍ମିଳନୀ ଭାବରେ, ବଟନ୍ଗୁଡ଼ିକ କାର୍ଯ୍ୟ ପାଇଁ ବ୍ୟବହୃତ ହେଉଥିବାବେଳେ ବସ୍ତୁଗୁଡ଼ିକ ପାଇଁ ଲିଙ୍କ୍ ବ୍ୟବହୃତ ହୁଏ | ଉଦାହରଣ ସ୍ୱରୂପ, “ଡାଉନଲୋଡ୍” ଏକ ବଟନ୍ ହୋଇପାରେ ଏବଂ “ସାମ୍ପ୍ରତିକ କାର୍ଯ୍ୟକଳାପ” ଏକ ଲିଙ୍କ୍ ହୋଇପାରେ |
ସମସ୍ତ ବଟନ୍ ଗୁଡିକ ହାଲୁକା ଧୂସର ଶ style ଳୀରେ ଡିଫଲ୍ଟ, କିନ୍ତୁ ଏକ ନୀଳ .primary
ଶ୍ରେଣୀ ଉପଲବ୍ଧ | ଏଥିସହ, ଆପଣଙ୍କର ନିଜ ଶ yles ଳୀ ଗଡ଼ିବା ସହଜ ମଟର ଅଟେ |
ପ୍ରୟୋଗ ସହିତ ଯେକ anything ଣସି ଜିନିଷରେ ବଟନ୍ ଶ yles ଳୀ ପ୍ରୟୋଗ .btn
କରାଯାଇପାରିବ | ସାଧାରଣତ you ଆପଣ ଏହାକୁ କେବଳ ପ୍ରୟୋଗ କରିବାକୁ ଚାହାଁନ୍ତି a
, ଏବଂ ଉପାଦାନଗୁଡିକ button
ଚୟନ କରନ୍ତୁ | input
ଏହା କିପରି ଦେଖାଯାଉଛି ତାହା ଏଠାରେ ଅଛି:
ବଡ଼ କିମ୍ବା ଛୋଟ ବଟନ୍ କଳ୍ପନା? ଏଥିରେ ଅଛି!
ବଟନ୍ଗୁଡ଼ିକ ପାଇଁ ଯାହା ସକ୍ରିୟ ନୁହେଁ କିମ୍ବା ଗୋଟିଏ କାରଣ ପାଇଁ ଆପ୍ ଦ୍ୱାରା ଅକ୍ଷମ ହୋଇଛି, ଅକ୍ଷମ ଅବସ୍ଥା ବ୍ୟବହାର କରନ୍ତୁ | ତାହା .disabled
ଲିଙ୍କ୍ ଏବଂ ଉପାଦାନଗୁଡ଼ିକ :disabled
ପାଇଁ |button
ବିଫଳତା, ସମ୍ଭାବ୍ୟ ବିଫଳତା, କିମ୍ବା କାର୍ଯ୍ୟର ସଫଳତାକୁ ଆଲୋକିତ କରିବା ପାଇଁ ଏକ ଧାଡ଼ି ବାର୍ତ୍ତା | ଫର୍ମ ପାଇଁ ବିଶେଷ ଭାବରେ ଉପଯୋଗୀ |
ବାର୍ତ୍ତାଗୁଡିକ ପାଇଁ ଯାହା ଟିକେ ବ୍ୟାଖ୍ୟା ଆବଶ୍ୟକ କରେ, ଆମର ପାରାଗ୍ରାଫ୍ ଷ୍ଟାଇଲ୍ ଆଲର୍ଟ ଅଛି | ଲମ୍ବା ତ୍ରୁଟି ବାର୍ତ୍ତାଗୁଡ଼ିକୁ ବବୁଲ କରିବା, ଏକ ବିଚାରାଧୀନ କାର୍ଯ୍ୟର ଉପଭୋକ୍ତାଙ୍କୁ ଚେତାବନୀ ଦେବା, କିମ୍ବା ପୃଷ୍ଠାରେ ଅଧିକ ଗୁରୁତ୍ୱ ଦେବା ପାଇଁ ସୂଚନା ଉପସ୍ଥାପନ କରିବା ପାଇଁ ଏଗୁଡ଼ିକ ଉପଯୁକ୍ତ |
ମୋଡାଲ୍ - ଡାୟଲଗ୍ କିମ୍ବା ଲାଇଟ୍ ବକ୍ସ - ପରିସ୍ଥିତିରେ ପ୍ରସଙ୍ଗଗତ କାର୍ଯ୍ୟ ପାଇଁ ଉତ୍ତମ ଅଟେ ଯେଉଁଠାରେ ପୃଷ୍ଠଭୂମି ପ୍ରସଙ୍ଗକୁ ବଜାୟ ରଖିବା ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ |
ଗୋଟିଏ ଭଲ ଶରୀର ...
ଦ୍ୱନ୍ଦ୍ୱରେ ଥିବା ଉପଭୋକ୍ତାଙ୍କୁ ସାହାଯ୍ୟ କରିବା ଏବଂ ସେମାନଙ୍କୁ ସଠିକ୍ ଦିଗରେ ସୂଚାଇବା ପାଇଁ ଟ୍ୱିପିସ୍ ଅତ୍ୟନ୍ତ ଉପଯୋଗୀ |
ଲୋରେମ୍ ଇପ୍ସମ୍ ଡୋଲାର୍ ସିଟ୍ ଆମେଟ୍ ଇଲୋ ଏରର୍ ଇପ୍ସମ୍ ଭେରିଟାଟିସ୍ ଅଟୋ ଇଷ୍ଟେ ପର୍ପସିସିଆଟିସ୍ ଇଷ୍ଟ ଭୋଲୁପଟାସ୍ ନାଟସ୍ ଇଲୋ କ୍ୱାସି ଓଡିଟ୍ ଅଟୋ ନାଟସ୍ ଫଳାଫଳ ଫଳାଫଳ, ଅଟୋ ନାଟସ୍ ଇଲୋ ଭୋଲୁପେଟେମ୍ ଓଡିଟ୍ ପର୍ପସିଏଟିସ୍ ଲାଉଡାଣ୍ଟିମ୍ ରିମ୍ ଡୋଲୋରେମ୍କ ଟୋଟାମ୍ ଭଲ୍ୟୁପଟାସ୍ | 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 | ମୋର୍ବି ଲିଓ ରିସସ୍, ପୋର୍ଟା ଏସି କନସେକ୍ଟେଟର୍ ଏସି, ଏରୋସରେ ଭେଷ୍ଟିବୁଲମ୍ |
ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରିବୁଟ୍ ସହିତ ନିର୍ମିତ ହୋଇଥିଲା , ମିଶ୍ରଣ ଏବଂ ଭେରିଏବଲ୍ସର ଏକ ମୁକ୍ତ ଉତ୍ସ ପ୍ୟାକ୍ , ଦ୍ରୁତ ଏବଂ ସହଜ ୱେବ୍ ବିକାଶ ପାଇଁ ଏକ CSS ପ୍ରିପ୍ରୋସେସର୍ ସହିତ କମ୍ ସହିତ ବ୍ୟବହୃତ ହେବ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ରେ ଆମେ କିପରି ପ୍ରିବୁଟ୍ ବ୍ୟବହାର କଲୁ ଏବଂ ତୁମେ ଏହାର ପରବର୍ତ୍ତୀ ପ୍ରୋଜେକ୍ଟରେ କମ୍ ଚଲାଇବାକୁ ବାଛିଲେ ତୁମେ ଏହାକୁ କିପରି ବ୍ୟବହାର କରିପାରିବ ଯାଞ୍ଚ କର |
ଆପଣଙ୍କ ବ୍ରାଉଜରରେ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବୁଟଷ୍ଟ୍ରାପ୍ ର କମ୍ ଭେରିଏବଲ୍, ମିକ୍ସିନ ଏବଂ CSS ରେ ବସା ବାନ୍ଧିବା ପାଇଁ ଏହି ବିକଳ୍ପକୁ ବ୍ୟବହାର କରନ୍ତୁ |
- <link rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "all" /> rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "all" />
- <ସ୍କ୍ରିପ୍ଟ ପ୍ରକାର = "ପାଠ୍ୟ / ଜାଭାସ୍କ୍ରିପ୍ଟ" src = "js / less-1.0.41.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;
- // ବେସ୍ ଲାଇନ୍ |
- @ ବେସଲାଇନ୍ : 20px ;
କମ୍ CSS ର ସାଧାରଣ /* ... */
ବାକ୍ୟବିନ୍ୟାସ ସହିତ ମନ୍ତବ୍ୟର ଅନ୍ୟ ଏକ ଶ style ଳୀ ମଧ୍ୟ ପ୍ରଦାନ କରେ |
- // ଏହା ଏକ ମନ୍ତବ୍ୟ |
- / * ଏହା ମଧ୍ୟ ଏକ ମନ୍ତବ୍ୟ * /
ମିକ୍ସନ୍ ଗୁଡିକ ମୂଳତ CS CSS ପାଇଁ ଅନ୍ତର୍ଭୂକ୍ତ କିମ୍ବା ଆଂଶିକ ଅଟେ, ଯାହା ଆପଣଙ୍କୁ ଏକ କୋଡ୍ ର ଏକ ବ୍ଲକ୍ ମିଶ୍ରଣ କରିବାକୁ ଅନୁମତି ଦିଏ | ବିକ୍ରେତା ପ୍ରିଫିକ୍ସଡ୍ ଗୁଣଗୁଡିକ box-shadow
, କ୍ରସ୍-ବ୍ରାଉଜର୍ ଗ୍ରେଡିଏଣ୍ଟ୍, ଫଣ୍ଟ୍ ଷ୍ଟାକ, ଏବଂ ଅଧିକ ପାଇଁ ସେଗୁଡିକ ବହୁତ ଭଲ | ନିମ୍ନରେ ମିଶ୍ରଣର ଏକ ନମୁନା ଅଛି ଯାହା ବୁଟଷ୍ଟ୍ରାପ ସହିତ ଅନ୍ତର୍ଭୁକ୍ତ |
- # ଫଣ୍ଟ {
- । ଶୋର୍ଥାଣ୍ଡ୍ ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 14px , @ ଲାଇନ୍ ଉଚ୍ଚତା : 20px ) {
- ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
- ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
- ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
- }
- । sans - serif ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 14px , @ ଲାଇନ ଉଚ୍ଚତା : 20px ) {
- ଫଣ୍ଟ - ପରିବାର : "ହେଲଭେଟିକା ନେଉ" , ହେଲଭେଟିକା , ଆରିଆଲ୍ , ସାନ୍ସ - ସେରିଫ୍ ;
- ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
- ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
- ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
- }
- । serif ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 14px , @ ଲାଇନ ଉଚ୍ଚତା : 20px ) {
- ଫଣ୍ଟ - ପରିବାର : "ଜର୍ଜିଆ" , ଟାଇମ୍ସ ନ୍ୟୁ ରୋମାନ୍ , ଟାଇମ୍ସ , ସାନ୍ସ - ସେରିଫ୍ ;
- ଫଣ୍ଟ - ଆକାର : @ ଆକାର ;
- ଫଣ୍ଟ - ଓଜନ : @ ଓଜନ ;
- ରେଖା - ଉଚ୍ଚତା : @ ଲାଇନ୍ ଉଚ୍ଚତା ;
- }
- । ମୋନୋସ୍ପେସ୍ ( @ ଓଜନ : ସାଧାରଣ , @ ଆକାର : 12px , @ ଲାଇନ୍ ଉଚ୍ଚତା : 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
- - ms - ଫିଲ୍ଟର୍ : % _ _ _ _ _ _ // IE8 +
- ଫିଲ୍ଟର୍ : e ( % _ _ _ _ _ // IE6 ଏବଂ IE7 |
- ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( ବାମ , @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ଲେ ଷ୍ଟାଣ୍ଡାର୍ଡ |
- }
- । ଭୂଲମ୍ବ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ : # 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
- - ms - ଫିଲ୍ଟର୍ : % _ _ _ _ _ _ // IE8 +
- ଫିଲ୍ଟର୍ : e ( % _ _ _ _ _ // IE6 ଏବଂ IE7 |
- ପୃଷ୍ଠଭୂମି - ପ୍ରତିଛବି : ର ar ଖ୍ୟ - ଗ୍ରେଡିଏଣ୍ଟ୍ ( @ ଷ୍ଟାର୍ଟ କଲର୍ , @ ଏଣ୍ଡ୍ ରଙ୍ଗ ); // ମାନକ
- }
- । ଦିଗଦର୍ଶନ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ : # 555, @ ରଙ୍ଗ: # 333, @ ଡିଗ: 45 ଡିଗ) {
- ...
- }
- । ଭୂଲମ୍ବ - ତିନି - ରଙ୍ଗ ( @ ଷ୍ଟାର୍ଟ ରଙ୍ଗ : # 00b3ee, @ ମିଡ ରଙ୍ଗ: # 7a43b6, @ ରଙ୍ଗ ଷ୍ଟପ୍: 0.5, @ ରଙ୍ଗ: # c3325f) {
- ...
- }
- }
ନିମ୍ନରେ ଥିବା ପରି ନମନୀୟ ଏବଂ ଶକ୍ତିଶାଳୀ ମିଶ୍ରଣ ସୃଷ୍ଟି କରିବାକୁ କଳ୍ପନା ପ୍ରାପ୍ତ କରନ୍ତୁ ଏବଂ କିଛି ଗଣିତ କରନ୍ତୁ |
- // ଗ୍ରୀଡ୍
- @ ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ : 16 ;
- @ ଗ୍ରୀଡ୍ କଲମ୍ ୱିଥ୍ : 40px ;
- @ ଗ୍ରୀଡ୍ ଗୁଟର୍ ୱିଥ୍ : 20px ;
- // ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ |
- । ପାତ୍ର {
- ମୋଟେଇ : @ ସାଇଟ୍ ୱିଥ୍ ;
- ମାର୍ଜିନ୍ : 0 ଅଟୋ ;
- । କ୍ଲିଫିକ୍ସ ();
- }
- । ସ୍ତମ୍ଭଗୁଡିକ ( @ କଲମ୍ ସ୍ପାନ୍ : 1 ) {
- ପ୍ରଦର୍ଶନ : ଇନଲାଇନ ;
- ଭାସମାନ : ବାମ ;
- ମୋଟେଇ : ( @ ଗ୍ରିଡ୍ କଲମ୍ ୱିଡ୍ * @ କଲମ୍ ସ୍ପାନ୍ ) + _ _ _
- ମାର୍ଜିନ୍ - ବାମ : @ ଗ୍ରୀଡ୍ ଗୁଟର୍ ୱିଥ୍ ;
- &: ପ୍ରଥମ - ପିଲା {
- ମାର୍ଜିନ୍ - ବାମ : 0 ;
- }
- }
- । ଅଫସେଟ୍ ( @ କଲମ୍ ଅଫିସ୍ : 1 ) {
- ମାର୍ଜିନ୍ - ବାମ : ( @ ଗ୍ରିଡ୍ କଲମ୍ ୱିଥ୍ * @ କଲମ୍ ଅଫିସ୍ ) + _ _ _ _ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ;
- }