Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକ୍ଷିପ୍ତ ଇତିହାସ, ବ୍ରାଉଜର୍ ସମର୍ଥନ, ଏବଂ ଅଧିକ ବିଷୟରେ |
ଇତିହାସ
ଟ୍ୱିଟରର ପୂର୍ବ ଦିନରେ, ଇଞ୍ଜିନିୟରମାନେ ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ ଆବଶ୍ୟକତା ପୂରଣ କରିବା ପାଇଁ ପ୍ରାୟ ପରିଚିତ ଯେକ library ଣସି ଲାଇବ୍ରେରୀ ବ୍ୟବହାର କରିଥିଲେ | ଟୁଇଟରର ପ୍ରଥମ ହ୍ୟାକ୍ୱିକ୍ ସମୟରେ ଉପସ୍ଥାପିତ ଏବଂ ବିକାଶ ଶୀଘ୍ର ତ୍ୱରାନ୍ୱିତ ହୋଇଥିବା ଚ୍ୟାଲେଞ୍ଜଗୁଡିକର ଉତ୍ତର ଭାବରେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଆରମ୍ଭ ହୋଇଥିଲା |
ଟ୍ୱିଟରରେ ଅନେକ ଇଞ୍ଜିନିୟରଙ୍କ ସାହାଯ୍ୟ ଏବଂ ମତାମତ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ କେବଳ ମ basic ଳିକ ଶ yles ଳୀ ନୁହେଁ, ବରଂ ଅଧିକ ଚମତ୍କାର ଏବଂ ସ୍ଥାୟୀ ଫ୍ରଣ୍ଟ-ଏଣ୍ଡ୍ ଡିଜାଇନ୍ s ାଞ୍ଚାଗୁଡ଼ିକୁ ଅନ୍ତର୍ଭୁକ୍ତ କରିବା ପାଇଁ ଯଥେଷ୍ଟ ବୃଦ୍ଧି ପାଇଛି |
Dev.twitter.com ରେ ଅଧିକ ପ Read ନ୍ତୁ
ବ୍ରାଉଜର୍ ସମର୍ଥନ
କ୍ରୋମ, ସଫାରି, ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର ଏବଂ ଫାୟାରଫକ୍ସ ପରି ପ୍ରମୁଖ ଆଧୁନିକ ବ୍ରାଉଜରରେ ବୁଟଷ୍ଟ୍ରାପ୍ ପରୀକ୍ଷା ଏବଂ ସମର୍ଥିତ |
- ସର୍ବଶେଷ ସଫାରି |
- ସର୍ବଶେଷ ଗୁଗୁଲ୍ କ୍ରୋମ୍ |
- ଫାୟାରଫକ୍ସ 4+
- ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 7+
ଯାହା ଅନ୍ତର୍ଭୂକ୍ତ ହୋଇଛି |
ବୁଟଷ୍ଟ୍ରାପ୍ ସଂକଳିତ 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
4
6
6
8
8
5
11
16
ସ୍ତମ୍ଭଗୁଡିକ ଅଫସେଟ୍ କରିବା |
4
8 ଅଫସେଟ୍ 4
4 ଅଫସେଟ୍ 4
4 ଅଫସେଟ୍ 4
5 ଅଫସେଟ୍ 3
5 ଅଫସେଟ୍ 3
10 ଅଫସେଟ୍ 6
ୱେବପୃଷ୍ଠାଗୁଡ଼ିକ ସୃଷ୍ଟି କରିବା ପାଇଁ ଲେଆଉଟ୍ ମ Basic ଳିକ ଟେମ୍ପଲେଟ୍ |
ସ୍ଥିର ଲେଆଉଟ୍ |
ପ୍ରାୟ ଯେକ site ଣସି ସାଇଟ୍ କିମ୍ବା ପୃଷ୍ଠା ପାଇଁ ଏକ ମ basic ଳିକ 940px ଚଉଡା, କେନ୍ଦ୍ରିତ କଣ୍ଟେନର୍ ଲେଆଉଟ୍ |
- <body>
- <div class = "ପାତ୍ର" > |
- ...
- </div>
- </body>
ଫ୍ଲୁଇଡ୍ ଲେଆଉଟ୍ |
ମିନି- ଏବଂ ସର୍ବାଧିକ ଓସାର ଏବଂ ଏକ ବାମ ପାର୍ଶ୍ୱ ପାର୍ଶ୍ୱ ଦଣ୍ଡ ସହିତ ଏକ ନମନୀୟ ତରଳ ବା ତରଳ ପୃଷ୍ଠା ଗଠନ | ଆପ୍ସ ପାଇଁ ବହୁତ ଭଲ |
- <body>
- <div class = "ପାତ୍ର-ତରଳ" > |
- <div class = "sidebar" > |
- ...
- </div>
- <div ଶ୍ରେଣୀ = "ବିଷୟବସ୍ତୁ" > |
- ...
- </div>
- </div>
- </body>
ଟାଇପୋଗ୍ରାଫି ହେଡିଙ୍ଗ୍, ପାରାଗ୍ରାଫ୍, ତାଲିକା ଏବଂ ଅନ୍ୟାନ୍ୟ ଇନଲାଇନ ପ୍ରକାର ଉପାଦାନଗୁଡିକ |
ହେଡିଙ୍ଗ୍ ଏବଂ କପି |
ଆପଣଙ୍କର ୱେବପୃଷ୍ଠାଗୁଡ଼ିକର ସଂରଚନା ପାଇଁ ଏକ ମାନକ ଟାଇପୋଗ୍ରାଫିକ୍ ହାଇରାର୍କି |
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>, କିନ୍ତୁ ସେଗୁଡ଼ିକ ଆଉ ଅନ୍ତର୍ନିହିତ ଶ yles ଳୀ ସହିତ ଆସନ୍ତି ନାହିଁ | <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> src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <ସ୍କ୍ରିପ୍ଟ >
- $ ( କାର୍ଯ୍ୟ () {
- $ ( "ଟେବୁଲ୍ # ସର୍ଟ ଟେବୁଲ୍ ଉଦାହରଣ" ) | ଟେବୁଲସର୍ ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <ଟେବୁଲ୍ ଶ୍ରେଣୀ = "ସାଧାରଣ-ଟେବୁଲ୍ ଜେବ୍ରା-ଷ୍ଟ୍ରାଇଡ୍" > |
- ...
- </table>
ଫର୍ମଗୁଡିକ
ଡିଫଲ୍ଟ ଶ yles ଳୀ |
ସମସ୍ତ ଫର୍ମଗୁଡ଼ିକୁ ଏକ ପଠନୀୟ ଏବଂ ମାପନୀୟ ଉପାୟରେ ଉପସ୍ଥାପନ କରିବାକୁ ଡିଫଲ୍ଟ ଶ yles ଳୀ ଦିଆଯାଏ | ଟେକ୍ସଟ୍ ଇନପୁଟ୍, ସିଲେକ୍ଟ ତାଲିକା, ଟେକ୍ସଟେରିଆ, ରେଡିଓ ବଟନ୍ ଏବଂ ଚେକ୍ ବକ୍ସ, ଏବଂ ବଟନ୍ ପାଇଁ ଶ yles ଳୀ ପ୍ରଦାନ କରାଯାଇଛି |
ଷ୍ଟାକ୍ ହୋଇଥିବା ଫର୍ମଗୁଡିକ |
ତୁମର ଫର୍ମର HTML ରେ ଯୋଡ .form-stackedଏବଂ ତୁମର ବାମ ପରିବର୍ତ୍ତେ ସେମାନଙ୍କ କ୍ଷେତ୍ର ଉପରେ ଲେବଲ୍ ରହିବ | ଯଦି ଆପଣଙ୍କର ଫର୍ମଗୁଡିକ ଛୋଟ ଥାଏ କିମ୍ବା ଭାରୀ ଫର୍ମଗୁଡିକ ପାଇଁ ଆପଣଙ୍କର ଦୁଇଟି ସ୍ତମ୍ଭ ଅଛି ତେବେ ଏହା ବହୁତ ଭଲ କାମ କରେ |
ବଟନ୍
ଏକ ସମ୍ମିଳନୀ ଭାବରେ, ବଟନ୍ଗୁଡ଼ିକ କାର୍ଯ୍ୟ ପାଇଁ ବ୍ୟବହୃତ ହେଉଥିବାବେଳେ ବସ୍ତୁଗୁଡ଼ିକ ପାଇଁ ଲିଙ୍କ୍ ବ୍ୟବହୃତ ହୁଏ | ଉଦାହରଣ ସ୍ୱରୂପ, “ଡାଉନଲୋଡ୍” ଏକ ବଟନ୍ ହୋଇପାରେ ଏବଂ “ସାମ୍ପ୍ରତିକ କାର୍ଯ୍ୟକଳାପ” ଏକ ଲିଙ୍କ୍ ହୋଇପାରେ |
ସମସ୍ତ ବଟନ୍ ଗୁଡିକ ହାଲୁକା ଧୂସର ଶ style ଳୀରେ ଡିଫଲ୍ଟ, କିନ୍ତୁ ଏକ ନୀଳ .primaryଶ୍ରେଣୀ ଉପଲବ୍ଧ | ଏଥିସହ, ଆପଣଙ୍କର ନିଜ ଶ yles ଳୀ ଗଡ଼ିବା ସହଜ ମଟର ଅଟେ |
ଉଦାହରଣ ବଟନ୍ |
ପ୍ରୟୋଗ ସହିତ ଯେକ anything ଣସି ଜିନିଷରେ ବଟନ୍ ଶ yles ଳୀ ପ୍ରୟୋଗ .btnକରାଯାଇପାରିବ | ସାଧାରଣତ you ଆପଣ ଏହାକୁ କେବଳ ପ୍ରୟୋଗ କରିବାକୁ ଚାହାଁନ୍ତି <a>, ଏବଂ ଉପାଦାନଗୁଡିକ <button>ଚୟନ କରନ୍ତୁ | <input>ଏହା କିପରି ଦେଖାଯାଉଛି ତାହା ଏଠାରେ ଅଛି:
ବିକଳ୍ପ ଆକାର |
ବଡ଼ କିମ୍ବା ଛୋଟ ବଟନ୍ କଳ୍ପନା? ଏଥିରେ ଅଛି!
ଅକ୍ଷମ ଅବସ୍ଥା |
ବଟନ୍ଗୁଡ଼ିକ ପାଇଁ ଯାହା ସକ୍ରିୟ ନୁହେଁ କିମ୍ବା ଗୋଟିଏ କାରଣ ପାଇଁ ଆପ୍ ଦ୍ୱାରା ଅକ୍ଷମ ହୋଇଛି, ଅକ୍ଷମ ଅବସ୍ଥା ବ୍ୟବହାର କରନ୍ତୁ | ତାହା .disabledଲିଙ୍କ୍ ଏବଂ ଉପାଦାନଗୁଡ଼ିକ :disabledପାଇଁ |<button>
ଲିଙ୍କ୍
ବଟନ୍
ସଫଳତା, ଚେତାବନୀ, ଏବଂ ତ୍ରୁଟି ବାର୍ତ୍ତା କିମ୍ବା ଆଲର୍ଟ ପାଇଁ ଆଲର୍ଟ ଏବଂ ତ୍ରୁଟି ଶ yles ଳୀ |
ମ Basic ଳିକ ସତର୍କତା |
ବିଫଳତା, ସମ୍ଭାବ୍ୟ ବିଫଳତା, କିମ୍ବା କାର୍ଯ୍ୟର ସଫଳତାକୁ ଆଲୋକିତ କରିବା ପାଇଁ ଏକ ଧାଡ଼ି ବାର୍ତ୍ତା | ଫର୍ମ ପାଇଁ ବିଶେଷ ଭାବରେ ଉପଯୋଗୀ |
ସନ୍ଦେଶଗୁଡ଼ିକୁ ଅବରୋଧ କରନ୍ତୁ |
For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.
Popovers Components for displaying content in modals, tooltips, and popovers
Modals
Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.
Modal Heading
×One fine body…
Tool Tips
Twipsies are super useful for aiding a confused user and pointing them in the right direction.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
below!
right!
left!
above!
Popovers
Use popovers to provide subtextual information to a page without affecting layout.
Popover Title
Using Bootstrap with Less Supercharge your CSS with variables, mixins, and functions
Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.
Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.
How to use it
Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.
- <link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
- <script src="js/less-1.0.41.min.js"></script>
Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.
What’s included
Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.
Color variables
Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.
- // Links
- @linkColor: #8b59c2;
- @linkColorHover: darken(@linkColor, 10);
- // Grays
- @black: #000;
- @grayDark: lighten(@black, 25%);
- @gray: lighten(@black, 50%);
- @grayLight: lighten(@black, 70%);
- @grayLighter: lighten(@black, 90%);
- @white: #fff;
- // Accent Colors
- @blue: #08b5fb;
- @green: #46a546;
- @red: #9d261d;
- @yellow: #ffc40d;
- @orange: #f89406;
- @pink: #c3325f;
- @purple: #7a43b6;
- // Baseline
- @baseline: 20px;
Commenting
Less also provides another style of commenting in addition to CSS’s normal /* ... */ syntax.
- // This is a comment
- /* This is also a comment */
Mixins up the wazoo
Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.
Font stacks
- #font {
- .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-family: "Georgia", Times New Roman, Times, sans-serif;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- .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
- -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); // IE8+
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
- 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
- -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
- background-image: linear-gradient(@startColor, @endColor); // The standard
- }
- .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @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;
- // Grid System
- .container {
- width: @siteWidth;
- margin: 0 auto;
- .clearfix();
- }
- .columns(@columnSpan: 1) {
- display: inline;
- float: left;
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
- margin-left: @gridGutterWidth;
- &:first-child {
- margin-left: 0;
- }
- }
- .offset(@columnOffset: 1) {
- ମାର୍ଜିନ୍ - ବାମ : ( @ ଗ୍ରିଡ୍ କଲମ୍ ୱିଥ୍ * @ କଲମ୍ ଅଫିସ୍ ) + _ _ _ _ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ;
- }