ଉପାଦାନଗୁଡ଼ିକ |
ଆଇକନୋଗ୍ରାଫି, ଡ୍ରପଡାଉନ୍, ଇନପୁଟ୍ ଗୋଷ୍ଠୀ, ନାଭିଗେସନ୍, ଆଲର୍ଟ, ଏବଂ ଆହୁରି ଅନେକ ଯୋଗାଇବା ପାଇଁ ନିର୍ମିତ ଏକ ଡଜନରୁ ଅଧିକ ପୁନ us ବ୍ୟବହାର ଯୋଗ୍ୟ ଉପାଦାନ |
ଆଇକନୋଗ୍ରାଫି, ଡ୍ରପଡାଉନ୍, ଇନପୁଟ୍ ଗୋଷ୍ଠୀ, ନାଭିଗେସନ୍, ଆଲର୍ଟ, ଏବଂ ଆହୁରି ଅନେକ ଯୋଗାଇବା ପାଇଁ ନିର୍ମିତ ଏକ ଡଜନରୁ ଅଧିକ ପୁନ us ବ୍ୟବହାର ଯୋଗ୍ୟ ଉପାଦାନ |
ଗ୍ଲାଇଫିକନ୍ ହାଫଲିଙ୍ଗ ସେଟ୍ ରୁ ଫଣ୍ଟ ଫର୍ମାଟରେ 250 ରୁ ଅଧିକ ଗ୍ଲାଇଫ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ଗ୍ଲାଇଫିକନ୍ ହାଫଲିଙ୍ଗ ସାଧାରଣତ free ମାଗଣାରେ ଉପଲବ୍ଧ ନୁହେଁ, କିନ୍ତୁ ସେମାନଙ୍କର ସୃଷ୍ଟିକର୍ତ୍ତା ସେମାନଙ୍କୁ ମାଗଣାରେ ବୁଟଷ୍ଟ୍ରାପ୍ ପାଇଁ ଉପଲବ୍ଧ କରାଇଛନ୍ତି | ଧନ୍ୟବାଦ ଭାବରେ, ଆମେ କେବଳ ପଚାରୁଛୁ ଯେ ଆପଣ ଯେତେବେଳେ ସମ୍ଭବ ଗ୍ଲାଇଫିକନ୍ସକୁ ଏକ ଲିଙ୍କ୍ ଅନ୍ତର୍ଭୁକ୍ତ କରନ୍ତୁ |
କାର୍ଯ୍ୟଦକ୍ଷତା କାରଣରୁ, ସମସ୍ତ ଆଇକନ୍ ଗୁଡିକ ଏକ ବେସ୍ କ୍ଲାସ୍ ଏବଂ ବ୍ୟକ୍ତିଗତ ଆଇକନ୍ କ୍ଲାସ୍ ଆବଶ୍ୟକ କରନ୍ତି | ବ୍ୟବହାର କରିବାକୁ, ନିମ୍ନଲିଖିତ କୋଡ୍ କୁ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ରଖନ୍ତୁ | ସଠିକ୍ ପ୍ୟାଡିଂ ପାଇଁ ଆଇକନ୍ ଏବଂ ପାଠ୍ୟ ମଧ୍ୟରେ ଏକ ସ୍ଥାନ ଛାଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
ଆଇକନ୍ ଶ୍ରେଣୀଗୁଡିକ ଅନ୍ୟ ଉପାଦାନଗୁଡ଼ିକ ସହିତ ସିଧାସଳଖ ମିଳିତ ହୋଇପାରିବ ନାହିଁ | ସମାନ ଉପାଦାନରେ ଅନ୍ୟ ଶ୍ରେଣୀଗୁଡ଼ିକ ସହିତ ସେଗୁଡିକ ବ୍ୟବହାର କରାଯିବା ଉଚିତ୍ ନୁହେଁ | ଏହା ପରିବର୍ତ୍ତେ, ଏକ ନେଷ୍ଟେଡ୍ ଯୋଡନ୍ତୁ <span>
ଏବଂ ଆଇକନ୍ କ୍ଲାସ୍ ଗୁଡିକୁ ପ୍ରୟୋଗ କରନ୍ତୁ <span>
|
ଆଇକନ୍ କ୍ଲାସ୍ କେବଳ ଉପାଦାନଗୁଡ଼ିକରେ ବ୍ୟବହୃତ ହେବା ଉଚିତ ଯେଉଁଥିରେ କ text ଣସି ପାଠ୍ୟ ବିଷୟବସ୍ତୁ ନାହିଁ ଏବଂ କ child ଣସି ଶିଶୁ ଉପାଦାନ ନାହିଁ |
../fonts/
ବୁଟଷ୍ଟ୍ରାପ୍ ଅନୁମାନ କରେ ଯେ ସଙ୍କଳିତ CSS ଫାଇଲଗୁଡ଼ିକ ସହିତ ଆଇକନ୍ ଫଣ୍ଟ ଫାଇଲଗୁଡ଼ିକ ଡିରେକ୍ଟୋରୀରେ ଅବସ୍ଥିତ | ସେହି ଫଣ୍ଟ ଫାଇଲଗୁଡ଼ିକୁ ଘୁଞ୍ଚାଇବା କିମ୍ବା ନାମକରଣ କରିବା ଅର୍ଥ ହେଉଛି ତିନୋଟି ଉପାୟ ମଧ୍ୟରୁ ଗୋଟିଏରେ CSS କୁ ଅଦ୍ୟତନ କରିବା:
@icon-font-path
ଏବଂ / କିମ୍ବା ଭେରିଏବଲ୍ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |@icon-font-name
url()
ସଂକଳିତ CSS ରେ ପଥ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |ଆପଣଙ୍କର ନିର୍ଦ୍ଦିଷ୍ଟ ବିକାଶ ସେଟଅପ୍ ପାଇଁ ଯେକ option ଣସି ବିକଳ୍ପକୁ ସର୍ବୋତ୍ତମ ବ୍ୟବହାର କରନ୍ତୁ |
ସହାୟକ ଟେକ୍ନୋଲୋଜିର ଆଧୁନିକ ସଂସ୍କରଣ CSS ଉତ୍ପାଦିତ ବିଷୟବସ୍ତୁ, ଏବଂ ନିର୍ଦ୍ଦିଷ୍ଟ ୟୁନିକୋଡ୍ ବର୍ଣ୍ଣଗୁଡିକ ଘୋଷଣା କରିବ | ସ୍କ୍ରିନ୍ ପାଠକମାନଙ୍କରେ ଅବାଞ୍ଛିତ ଏବଂ ଦ୍ୱନ୍ଦ୍ୱପୂର୍ଣ୍ଣ ଆଉଟପୁଟ୍କୁ ଏଡାଇବା ପାଇଁ (ବିଶେଷତ when ଯେତେବେଳେ ଆଇକନ୍ଗୁଡ଼ିକ ସାଜସଜ୍ଜା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ), ଆମେ ସେମାନଙ୍କୁ ଗୁଣ ସହିତ aria-hidden="true"
ଲୁଚାଇଥାଉ |
ଯଦି ଆପଣ ଅର୍ଥ ପହଞ୍ଚାଇବା ପାଇଁ ଏକ ଆଇକନ୍ ବ୍ୟବହାର କରୁଛନ୍ତି (କେବଳ ସାଜସଜ୍ଜା ଉପାଦାନ ଭାବରେ ନୁହେଁ), ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଏହି ଅର୍ଥ ମଧ୍ୟ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାକୁ ପଠାଯାଇଛି - ଉଦାହରଣ ସ୍ୱରୂପ, ଅତିରିକ୍ତ ବିଷୟବସ୍ତୁ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ, .sr-only
ଶ୍ରେଣୀ ସହିତ ଦୃଶ୍ୟମାନ ଭାବରେ ଲୁକ୍କାୟିତ |
ଯଦି ଆପଣ ଅନ୍ୟ କ text ଣସି ପାଠ୍ୟ ସହିତ ନିୟନ୍ତ୍ରଣ ସୃଷ୍ଟି କରୁଛନ୍ତି (ଯେପରିକି <button>
ଏହା କେବଳ ଏକ ଆଇକନ୍ ଧାରଣ କରିଥାଏ), ଆପଣ ନିୟନ୍ତ୍ରଣର ଉଦ୍ଦେଶ୍ୟ ଚିହ୍ନଟ କରିବା ପାଇଁ ସର୍ବଦା ବିକଳ୍ପ ବିଷୟବସ୍ତୁ ପ୍ରଦାନ କରିବା ଉଚିତ, ଯାହା ଦ୍ assist ାରା ଏହା ସହାୟକ ପ୍ରଯୁକ୍ତିର ଉପଭୋକ୍ତାମାନଙ୍କ ପାଇଁ ଅର୍ଥପୂର୍ଣ୍ଣ ହେବ | ଏହି କ୍ଷେତ୍ରରେ, ଆପଣ aria-label
ନିଜେ ନିୟନ୍ତ୍ରଣରେ ଏକ ଗୁଣ ଯୋଗ କରିପାରିବେ |
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
ଏକ ଟୁଲ୍ ବାର୍, ନାଭିଗେସନ୍, କିମ୍ବା ପ୍ରିପେଣ୍ଡେଡ୍ ଫର୍ମ ଇନପୁଟ୍ ପାଇଁ ସେଗୁଡ଼ିକୁ ବଟନ୍, ବଟନ୍ ଗ୍ରୁପ୍ ରେ ବ୍ୟବହାର କରନ୍ତୁ |
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
ଏକ ଆଲର୍ଟରେ ବ୍ୟବହୃତ ଏକ ଆଇକନ୍ , ଏହା ଏକ ତ୍ରୁଟି ବାର୍ତ୍ତା ଅଟେ, ଅତିରିକ୍ତ .sr-only
ପାଠ୍ୟ ସହିତ ସହାୟକ ପ୍ରଯୁକ୍ତିର ଉପଭୋକ୍ତାମାନଙ୍କୁ ଏହି ସୂଚନା ପ୍ରଦାନ କରେ |
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
ଲିଙ୍କଗୁଡିକର ତାଲିକା ପ୍ରଦର୍ଶନ ପାଇଁ ଟୋଗଲ୍ ଯୋଗ୍ୟ, ପ୍ରସଙ୍ଗଗତ ମେନୁ | ଡ୍ରପଡାଉନ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ଇଣ୍ଟରାକ୍ଟିଭ୍ ତିଆରି |
ଡ୍ରପଡାଉନ୍ ର ଟ୍ରିଗର ଏବଂ ଡ୍ରପଡାଉନ୍ ମେନୁକୁ .dropdown
, କିମ୍ବା ଘୋଷଣା କରୁଥିବା ଅନ୍ୟ ଏକ ଉପାଦାନକୁ ଗୁଡ଼ାଇ ରଖ position: relative;
| ତା’ପରେ ମେନୁର HTML ଯୋଡନ୍ତୁ |
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
.dropup
ପିତାମାତାଙ୍କୁ ଯୋଗ କରି ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡିକ ଉପରକୁ (ତଳକୁ ପରିବର୍ତ୍ତେ) ବିସ୍ତାର କରିବାକୁ ପରିବର୍ତ୍ତନ କରାଯାଇପାରିବ |
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ଡିଫଲ୍ଟ ଭାବରେ, ଏକ ଡ୍ରପଡାଉନ୍ ମେନୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଏହାର ପିତାମାତାଙ୍କ ଉପର ଏବଂ ବାମ ପାର୍ଶ୍ୱରେ 100% ସ୍ଥିତ ଅଟେ | ଡ୍ରପଡାଉନ୍ ମେନୁକୁ ଡାହାଣକୁ ଆଲାଇନ୍ .dropdown-menu-right
କରିବାକୁ ଏକ ଯୋଡନ୍ତୁ |.dropdown-menu
ଡ୍ରପ୍ ଡାଉନ୍ ଗୁଡିକ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଡକ୍ୟୁମେଣ୍ଟ୍ ର ସାଧାରଣ ପ୍ରବାହ ମଧ୍ୟରେ CSS ମାଧ୍ୟମରେ ସ୍ଥାନିତ ହୁଏ | ଏହାର ଅର୍ଥ ହେଉଛି କିଛି ଗୁଣ ଥିବା ପିତାମାତାଙ୍କ ଦ୍ drop ାରା ଡ୍ରପ୍ ଡାଉନ୍ କ୍ରପ୍ ହୋଇପାରେ overflow
କିମ୍ବା ଭ୍ୟୁପୋର୍ଟର ସୀମା ବାହାରେ ଦେଖାଯାଏ | ଏହି ସମସ୍ୟାଗୁଡିକ ନିଜେ ଉଠାନ୍ତୁ |
.pull-right
ଶ୍ରେଣୀବଦ୍ଧତା |V3.1.0 ପରି, ଆମେ .pull-right
ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡ଼ିକରେ ନାପସନ୍ଦ କରିଛୁ | ଏକ ମେନୁକୁ ଡାହାଣ-ଆଲାଇନ୍ କରିବାକୁ, ବ୍ୟବହାର କରନ୍ତୁ .dropdown-menu-right
| ମେନୁକୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଆଲାଇନ୍ କରିବା ପାଇଁ ନାଭବାରରେ ଡାହାଣ-ଆଲାଇନ୍ ହୋଇଥିବା ନାଭ୍ ଉପାଦାନଗୁଡ଼ିକ ଏହି ଶ୍ରେଣୀର ଏକ ମିଶ୍ରଣ ସଂସ୍କରଣ ବ୍ୟବହାର କରନ୍ତି | ଏହାକୁ ନବଲିଖନ କରିବାକୁ, ବ୍ୟବହାର କରନ୍ତୁ .dropdown-menu-left
|
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
ଯେକ any ଣସି ଡ୍ରପଡାଉନ୍ ମେନୁରେ କ୍ରିୟାଗୁଡ଼ିକର ବିଭାଗକୁ ଲେବଲ୍ କରିବାକୁ ଏକ ହେଡର୍ ଯୋଡନ୍ତୁ |
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
ଏକ ଡ୍ରପଡାଉନ୍ ମେନୁରେ ଲିଙ୍କଗୁଡିକର ପୃଥକ କ୍ରମରେ ଏକ ଡିଭାଇଡର୍ ଯୋଡନ୍ତୁ |
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
ଲିଙ୍କ୍ ଅକ୍ଷମ କରିବାକୁ ଡ୍ରପଡାଉନ୍ ରେ .disabled
ଏକ ଯୋଗ କରନ୍ତୁ |<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
ବଟନ୍ ଗ୍ରୁପ୍ ସହିତ ଗୋଟିଏ ଧାଡିରେ ଏକତ୍ର ବଟନ୍ ଗୁଡ଼ିକୁ ଗ୍ରୁପ୍ କରନ୍ତୁ | ଆମର ବଟନ୍ ପ୍ଲଗଇନ୍ ସହିତ ଇଚ୍ଛାଧୀନ ଜାଭାସ୍କ୍ରିପ୍ଟ ରେଡିଓ ଏବଂ ଚେକ୍ ବକ୍ସ ଷ୍ଟାଇଲ୍ ଆଚରଣରେ ଯୋଡନ୍ତୁ |
ଏକ ମଧ୍ୟରେ ଥିବା ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ଟୁଲ୍ ଟିପ୍ସ କିମ୍ବା ପପୋଭର ବ୍ୟବହାର କରିବାବେଳେ .btn-group
, ଆପଣଙ୍କୁ container: 'body'
ଅବାଞ୍ଛିତ ପାର୍ଶ୍ୱ ପ୍ରତିକ୍ରିୟାଗୁଡ଼ିକୁ ଏଡାଇବା ପାଇଁ ବିକଳ୍ପ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ପଡିବ (ଯେପରିକି ଉପାଦାନଟି ବ୍ୟାପକ ଭାବରେ ବ growing ୁଛି ଏବଂ / କିମ୍ବା ଟୁଲ୍ ଟିପ୍ କିମ୍ବା ପପୋଭର ଟ୍ରିଗର ହେବାବେଳେ ଏହାର ଗୋଲାକାର କୋଣ ହରାଇବା) |
role
ଏବଂ ଏକ ଲେବଲ୍ ପ୍ରଦାନ କରନ୍ତୁ |ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ପାଇଁ - ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍ - ବଟନ୍ଗୁଡ଼ିକର ଏକ ସିରିଜ୍ ଗ୍ରୁପ୍ ହୋଇଛି ବୋଲି ଜଣାଇବାକୁ, ଏକ ଉପଯୁକ୍ତ role
ଗୁଣ ପ୍ରଦାନ କରାଯିବା ଆବଶ୍ୟକ | ବଟନ୍ ଗୋଷ୍ଠୀଗୁଡ଼ିକ ପାଇଁ, ଏହା ହେବ role="group"
, ଯେତେବେଳେ ଟୁଲ୍ ବାର୍ ଗୁଡିକ ରହିବା ଉଚିତ role="toolbar"
|
ଗୋଟିଏ ବ୍ୟତିକ୍ରମ ହେଉଛି ଗୋଷ୍ଠୀ ଯାହାକି କେବଳ ଗୋଟିଏ ନିୟନ୍ତ୍ରଣ ଧାରଣ କରିଥାଏ (ଉଦାହରଣ ସ୍ୱରୂପ ଉପାଦାନଗୁଡିକ ସହିତ ଯଥାର୍ଥ ବଟନ୍ ଗୋଷ୍ଠୀ<button>
) କିମ୍ବା ଏକ ଡ୍ରପଡାଉନ୍ |
ଏହା ସହିତ, ଗୋଷ୍ଠୀ ଏବଂ ଟୁଲ୍ ବାର୍ଗୁଡ଼ିକୁ ଏକ ସ୍ପଷ୍ଟ ଲେବଲ୍ ଦିଆଯିବା ଉଚିତ, କାରଣ ସଠିକ୍ role
ଗୁଣର ଉପସ୍ଥିତି ସତ୍ତ୍ most େ ଅଧିକାଂଶ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଅନ୍ୟଥା ଘୋଷଣା କରିବେ ନାହିଁ | ଏଠାରେ ପ୍ରଦତ୍ତ ଉଦାହରଣଗୁଡିକରେ, ଆମେ ବ୍ୟବହାର କରୁ aria-label
, କିନ୍ତୁ ବିକଳ୍ପ ଯେପରିକି aria-labelledby
ବ୍ୟବହାର କରାଯାଇପାରିବ |
ସହିତ ଏକ ବଟନ୍ ଗୁଡ଼ିକୁ ଗୁଡ଼ାଇ .btn
ରଖନ୍ତୁ .btn-group
|
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
ଅଧିକ ଜଟିଳ ଉପାଦାନଗୁଡ଼ିକ ପାଇଁ ସେଟ୍ ଗୁଡିକୁ ମିଶ୍ରଣ <div class="btn-group">
କରନ୍ତୁ |<div class="btn-toolbar">
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
ଗୋଟିଏ ଗୋଷ୍ଠୀର ପ୍ରତ୍ୟେକ ବଟନ୍ ରେ ବଟନ୍ ସାଇଜ୍ କ୍ଲାସ୍ ପ୍ରୟୋଗ କରିବା ପରିବର୍ତ୍ତେ, କେବଳ .btn-group-*
ପ୍ରତ୍ୟେକ .btn-group
ଗୋଷ୍ଠୀକୁ ବସା କରିବା ସମୟରେ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
ଯେତେବେଳେ ଆପଣ ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡିକ ଏକ କ୍ରମରେ ବଟନ୍ ସହିତ ମିଶ୍ରିତ ହେବାକୁ ଚାହାଁନ୍ତି, .btn-group
ଅନ୍ୟ ଏକ ଭିତରେ ରଖନ୍ତୁ |.btn-group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
ଭୂସମାନ୍ତରାଳ ପରିବର୍ତ୍ତେ ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକ୍ ହୋଇଥିବା ବଟନ୍ଗୁଡ଼ିକର ଏକ ସେଟ୍ ପ୍ରସ୍ତୁତ କରନ୍ତୁ | ବିଭାଜିତ ବଟନ୍ ଡ୍ରପଡାଉନ୍ ଏଠାରେ ସମର୍ଥିତ ନୁହେଁ |
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
ଏହାର ପିତାମାତାଙ୍କର ସମଗ୍ର ଓସାରକୁ ବିସ୍ତାର କରିବା ପାଇଁ ସମାନ ଆକାରରେ ବଟନ୍ଗୁଡ଼ିକର ଏକ ଗୋଷ୍ଠୀ ପ୍ରସ୍ତୁତ କରନ୍ତୁ | ବଟନ୍ ଗ୍ରୁପ୍ ମଧ୍ୟରେ ବଟନ୍ ଡ୍ରପ୍ ଡାଉନ୍ ସହିତ ମଧ୍ୟ କାମ କରେ |
ନିର୍ଦ୍ଦିଷ୍ଟ HTML ଏବଂ CSS ବଟନ୍ (ଯଥା) ଯଥାର୍ଥତା ପାଇଁ ବ୍ୟବହୃତ ହେତୁ display: table-cell
, ସେମାନଙ୍କ ମଧ୍ୟରେ ସୀମା ଦ୍ୱିଗୁଣିତ ହୁଏ | ନିୟମିତ ବଟନ୍ ଗୋଷ୍ଠୀରେ, margin-left: -1px
ସେଗୁଡିକ ଅପସାରଣ କରିବା ପରିବର୍ତ୍ତେ ସୀମା ଷ୍ଟାକ୍ କରିବାକୁ ବ୍ୟବହୃତ ହୁଏ | ତଥାପି, margin
ଏହା ସହିତ କାମ କରେ ନାହିଁ display: table-cell
| ଫଳସ୍ୱରୂପ, ବୁଟଷ୍ଟ୍ରାପକୁ ଆପଣଙ୍କର କଷ୍ଟୋମାଇଜେସନ୍ ଉପରେ ନିର୍ଭର କରି, ଆପଣ ସୀମା ଅପସାରଣ କିମ୍ବା ପୁନ color ରଙ୍ଗ କରିବାକୁ ଇଚ୍ଛା କରିପାରନ୍ତି |
ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8 ଏକ ବଟନ୍ ଗ୍ରୁପ୍ ରେ ବଟନ୍ ଉପରେ ସୀମା ପ୍ରଦାନ କରେ ନାହିଁ, ଏହା <a>
ହେଉ କିମ୍ବା <button>
ଉପାଦାନ | ତାହା ପାଇବାକୁ, ପ୍ରତ୍ୟେକ ବଟନ୍ କୁ ଅନ୍ୟଟିରେ ଗୁଡ଼ାଇ ରଖନ୍ତୁ .btn-group
|
ଅଧିକ ସୂଚନା ପାଇଁ # 12476 ଦେଖନ୍ତୁ |
<a>
ଉପାଦାନଗୁଡିକ ସହିତ |.btn
କେବଳ ଏକ ସିରିଜ୍ ଗୁଡ଼ାଇ ଦିଅ .btn-group.btn-group-justified
|
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
ଯଦି <a>
ଉପାଦାନଗୁଡିକ ବଟନ୍ ଭାବରେ କାର୍ଯ୍ୟ କରିବା ପାଇଁ ବ୍ୟବହୃତ ହୁଏ - ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠା ମଧ୍ୟରେ ଅନ୍ୟ ଏକ ଡକ୍ୟୁମେଣ୍ଟ୍ କିମ୍ବା ବିଭାଗକୁ ନେଭିଗେଟ୍ କରିବା ପରିବର୍ତ୍ତେ ଇନ୍-ପେଜ୍ କାର୍ଯ୍ୟକାରିତାକୁ ଟ୍ରିଗର୍ କରିବା - ସେମାନଙ୍କୁ ମଧ୍ୟ ଏକ ଉପଯୁକ୍ତ ଦିଆଯିବା ଉଚିତ role="button"
|
<button>
ଉପାଦାନଗୁଡିକ ସହିତ |<button>
ଉପାଦାନଗୁଡିକ ସହିତ ଯଥାର୍ଥ ବଟନ୍ ଗୋଷ୍ଠୀଗୁଡିକ ବ୍ୟବହାର କରିବାକୁ , ଆପଣଙ୍କୁ ପ୍ରତ୍ୟେକ ବଟନ୍ କୁ ଏକ ବଟନ୍ ଗୋଷ୍ଠୀରେ ଗୁଡ଼ାଇବାକୁ ପଡିବ | ଅଧିକାଂଶ ବ୍ରାଉଜର୍ ଉପାଦାନଗୁଡିକର ଯଥାର୍ଥତା ପାଇଁ ଆମର CSS କୁ ସଠିକ୍ ଭାବରେ ପ୍ରୟୋଗ କରନ୍ତି ନାହିଁ <button>
, କିନ୍ତୁ ଯେହେତୁ ଆମେ ବଟନ୍ ଡ୍ରପଡାଉନ୍ କୁ ସମର୍ଥନ କରୁ, ଆମେ ତାହା ଉପରେ କାର୍ଯ୍ୟ କରିପାରିବା |
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
ଏକ ଡ୍ରପଡାଉନ୍ ମେନୁକୁ ଏକ ଭିତରେ ରଖିବା .btn-group
ଏବଂ ଉପଯୁକ୍ତ ମେନୁ ମାର୍କଅପ୍ ପ୍ରଦାନ କରି ଯେକ any ଣସି ବଟନ୍ ବ୍ୟବହାର କରନ୍ତୁ |
ବଟନ୍ ଡ୍ରପଡାଉନ୍ ଗୁଡିକ ବୁଟଷ୍ଟ୍ରାପ୍ ର ସଂସ୍କରଣରେ ଅନ୍ତର୍ଭୂକ୍ତ ହେବା ପାଇଁ ଡ୍ରପଡାଉନ୍ ପ୍ଲଗଇନ୍ ଆବଶ୍ୟକ କରେ |
କିଛି ମ basic ଳିକ ମାର୍କଅପ୍ ପରିବର୍ତ୍ତନ ସହିତ ଏକ ବଟନ୍ କୁ ଡ୍ରପ୍ ଡାଉନ୍ ଟୋଗଲ୍ ରେ ପରିଣତ କର |
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ସେହିଭଳି, ସମାନ ମାର୍କଅପ୍ ପରିବର୍ତ୍ତନ ସହିତ ବିଭାଜିତ ବଟନ୍ ଡ୍ରପଡାଉନ୍ ସୃଷ୍ଟି କରନ୍ତୁ, କେବଳ ଏକ ପୃଥକ ବଟନ୍ ସହିତ |
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
ସମସ୍ତ ଆକାରର ବଟନ୍ ସହିତ ବଟନ୍ ଡ୍ରପଡାଉନ୍ କାମ କରେ |
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
.dropup
ପିତାମାତାଙ୍କୁ ଯୋଗ କରି ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡ଼ିକୁ ଟ୍ରିଗର କରନ୍ତୁ |
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
ଯେକ any ଣସି ପାଠ୍ୟ-ଆଧାରିତ ପୂର୍ବରୁ, ପରେ କିମ୍ବା ଉଭୟ ପାର୍ଶ୍ୱରେ ପାଠ୍ୟ କିମ୍ବା ବଟନ୍ ଯୋଗ କରି ଫର୍ମ ନିୟନ୍ତ୍ରଣକୁ ବିସ୍ତାର କରନ୍ତୁ <input>
| .input-group
ଏକ ସହିତ ବ୍ୟବହାର କରନ୍ତୁ .input-group-addon
କିମ୍ବା .input-group-btn
ଏକକକୁ ଉପାଦାନଗୁଡିକୁ ଯୋଡିବା କିମ୍ବା ଯୋଡିବା .form-control
|
<input>
s |ଏଠାରେ ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର କରିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ <select>
କାରଣ ସେଗୁଡିକ ୱେବ୍ କିଟ୍ ବ୍ରାଉଜର୍ରେ ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ଷ୍ଟାଇଲ୍ ହୋଇପାରିବ ନାହିଁ |
<textarea>
ଏଠାରେ ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର କରିବା ଠାରୁ ଦୂରେଇ ରୁହନ୍ତୁ କାରଣ ସେମାନଙ୍କର rows
ଗୁଣ କେତେକ କ୍ଷେତ୍ରରେ ସମ୍ମାନିତ ହେବ ନାହିଁ |
ଏକ ଭିତରେ ଥିବା ଉପାଦାନଗୁଡ଼ିକ ଉପରେ ଟୁଲ୍ ଟିପ୍ସ କିମ୍ବା ପପୋଭର୍ ବ୍ୟବହାର କରିବାବେଳେ .input-group
, ଆପଣଙ୍କୁ container: 'body'
ଅବାଞ୍ଛିତ ପାର୍ଶ୍ୱ ପ୍ରତିକ୍ରିୟାଗୁଡ଼ିକୁ ଏଡାଇବା ପାଇଁ ବିକଳ୍ପ ନିର୍ଦ୍ଦିଷ୍ଟ କରିବାକୁ ପଡିବ (ଯେପରିକି ଉପାଦାନଟି ବ୍ୟାପକ ଭାବରେ ବ growing ୁଛି ଏବଂ / କିମ୍ବା ଟୁଲ୍ ଟିପ୍ କିମ୍ବା ପପୋଭର ଟ୍ରିଗର ହେବାବେଳେ ଏହାର ଗୋଲାକାର କୋଣ ହରାଇବା) |
ଫର୍ମ ଗ୍ରୁପ୍ କିମ୍ବା ଗ୍ରୀଡ୍ ସ୍ତମ୍ଭ ଶ୍ରେଣୀଗୁଡ଼ିକୁ ସିଧାସଳଖ ଇନପୁଟ୍ ଗୋଷ୍ଠୀ ସହିତ ମିଶ୍ରଣ କରନ୍ତୁ ନାହିଁ | ଏହା ପରିବର୍ତ୍ତେ, ଫର୍ମ ଗ୍ରୁପ୍ କିମ୍ବା ଗ୍ରୀଡ୍ ସମ୍ବନ୍ଧୀୟ ଉପାଦାନ ଭିତରେ ଇନପୁଟ୍ ଗ୍ରୁପ୍ ବସା କର |
ଯଦି ଆପଣ ପ୍ରତ୍ୟେକ ଇନପୁଟ୍ ପାଇଁ ଏକ ଲେବଲ୍ ଅନ୍ତର୍ଭୂକ୍ତ ନକରନ୍ତି ତେବେ ସ୍କ୍ରିନ୍ ପାଠକମାନେ ଆପଣଙ୍କର ଫର୍ମରେ ଅସୁବିଧାର ସମ୍ମୁଖୀନ ହେବେ | ଏହି ଇନପୁଟ୍ ଗୋଷ୍ଠୀଗୁଡିକ ପାଇଁ, ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ କ additional ଣସି ଅତିରିକ୍ତ ଲେବଲ୍ କିମ୍ବା କାର୍ଯ୍ୟକାରିତା ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାକୁ ପଠାଯାଏ |
ବ୍ୟବହୃତ ହେବାକୁ ଥିବା ପ୍ରକୃତ କ techni ଶଳ (ଦୃଶ୍ୟମାନ <label>
ଉପାଦାନଗୁଡିକ, ଶ୍ରେଣୀ ବ୍ୟବହାର <label>
କରି ଲୁକ୍କାୟିତ ଉପାଦାନଗୁଡିକ , କିମ୍ବା ,, କିମ୍ବା ଗୁଣର ବ୍ୟବହାର) ଏବଂ କେଉଁ ଅତିରିକ୍ତ ସୂଚନା ପ୍ରଦାନ କରିବାକୁ ପଡିବ ତାହା ଆପଣ କାର୍ଯ୍ୟକାରୀ କରୁଥିବା ଇଣ୍ଟରଫେସ୍ ୱିଜେଟର ସଠିକ ପ୍ରକାର ଉପରେ ନିର୍ଭର କରି ଭିନ୍ନ ହେବ | ଏହି ବିଭାଗର ଉଦାହରଣଗୁଡ଼ିକ କିଛି ପରାମର୍ଶିତ, କେସ୍-ନିର୍ଦ୍ଦିଷ୍ଟ ଆଭିମୁଖ୍ୟ ପ୍ରଦାନ କରେ |.sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
ଏକ ଇନପୁଟ୍ ର ଉଭୟ ପାର୍ଶ୍ୱରେ ଗୋଟିଏ ଆଡ୍-ଅନ୍ କିମ୍ବା ବଟନ୍ ରଖନ୍ତୁ | ଆପଣ ମଧ୍ୟ ଏକ ଇନପୁଟ୍ ର ଉଭୟ ପାର୍ଶ୍ୱରେ ଗୋଟିଏ ରଖିପାରନ୍ତି |
ଆମେ ଗୋଟିଏ ପାର୍ଶ୍ୱରେ ଏକାଧିକ ଆଡ-ଅନ ( .input-group-addon
କିମ୍ବା ) କୁ ସମର୍ଥନ କରୁନାହୁଁ |.input-group-btn
ଆମେ ଗୋଟିଏ ଇନପୁଟ୍ ଗ୍ରୁପରେ ଏକାଧିକ ଫର୍ମ-ନିୟନ୍ତ୍ରଣକୁ ସମର୍ଥନ କରୁନାହୁଁ |
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
ନିଜେ ଆପେକ୍ଷିକ ଫର୍ମ ସାଇଜ୍ କ୍ଲାସ୍ ଯୋଡନ୍ତୁ .input-group
ଏବଂ ଭିତରେ ଥିବା ବିଷୟବସ୍ତୁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଆକାର ବଦଳାଇବ - ପ୍ରତ୍ୟେକ ଉପାଦାନରେ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ଆକାର ଶ୍ରେଣୀର ପୁନରାବୃତ୍ତି କରିବାର କ need ଣସି ଆବଶ୍ୟକତା ନାହିଁ |
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
ଯେକ any ଣସି ଚେକ୍ ବକ୍ସ କିମ୍ବା ରେଡିଓ ବିକଳ୍ପକୁ ପାଠ୍ୟ ପରିବର୍ତ୍ତେ ଏକ ଇନପୁଟ୍ ଗ୍ରୁପ୍ ଆଡନ୍ ମଧ୍ୟରେ ରଖନ୍ତୁ |
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
ଇନପୁଟ୍ ଗୋଷ୍ଠୀର ବଟନ୍ଗୁଡ଼ିକ ଟିକେ ଅଲଗା ଏବଂ ଗୋଟିଏ ଅତିରିକ୍ତ ସ୍ତରର ବସା ଆବଶ୍ୟକ କରେ | ଏହା ପରିବର୍ତ୍ତେ .input-group-addon
, ଆପଣଙ୍କୁ .input-group-btn
ବଟନ୍ ଗୁଡ଼ାଇବା ପାଇଁ ବ୍ୟବହାର କରିବାକୁ ପଡିବ | ଡିଫଲ୍ଟ ବ୍ରାଉଜର୍ ଶ yles ଳୀ ଯୋଗୁଁ ଏହା ଆବଶ୍ୟକ, ଯାହାକୁ ନବଲିଖନ କରାଯାଇପାରିବ ନାହିଁ |
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
ଯଦିଓ ତୁମର ପାର୍ଶ୍ୱରେ କେବଳ ଗୋଟିଏ ଆଡ୍-ଅନ୍ ରହିପାରେ, ଗୋଟିଏ ସିଙ୍ଗଲ୍ ଭିତରେ ତୁମର ଏକାଧିକ ବଟନ୍ ରହିପାରିବ .input-group-btn
|
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
ବୁଟଷ୍ଟ୍ରାପରେ ଉପଲବ୍ଧ ନାଭଗୁଡ଼ିକ ବେସ୍ .nav
କ୍ଲାସ୍ ଠାରୁ ଆରମ୍ଭ କରି ଅଂଶୀଦାରିତ ରାଜ୍ୟଗୁଡିକ ସହିତ ମାର୍କଅପ୍ ଅଂଶୀଦାର କରିଛନ୍ତି | ପ୍ରତ୍ୟେକ ଶ style ଳୀ ମଧ୍ୟରେ ସୁଇଚ୍ କରିବାକୁ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସ୍ୱାପ୍ କରନ୍ତୁ |
ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଶ୍ରେଣୀଟି ବେସ୍ କ୍ଲାସ୍ .nav-tabs
ଆବଶ୍ୟକ କରେ |.nav
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
ସେହି ସମାନ HTML ନିଅ, କିନ୍ତୁ .nav-pills
ଏହା ବଦଳରେ ବ୍ୟବହାର କର:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
ବଟିକା ମଧ୍ୟ ଭୂଲମ୍ବ ଭାବରେ ଷ୍ଟାକେବଲ୍ | କେବଳ ଯୋଡନ୍ତୁ .nav-stacked
|
<ul class="nav nav-pills nav-stacked">
...
</ul>
768px ରୁ ଅଧିକ ସ୍କ୍ରିନରେ ସେମାନଙ୍କ ପିତାମାତାଙ୍କ ସମାନ ଓସାର ସହଜରେ ଟ୍ୟାବ କିମ୍ବା ବଟିକା ପ୍ରସ୍ତୁତ କରନ୍ତୁ .nav-justified
| ଛୋଟ ପରଦାରେ, ନାଭ୍ ଲିଙ୍କ୍ ଗୁଡିକ ଷ୍ଟାକ୍ ହୋଇଛି |
ଯଥାର୍ଥ ନାଭବାର ନାଭ ଲିଙ୍କଗୁଡିକ ବର୍ତ୍ତମାନ ସମର୍ଥିତ ନୁହେଁ |
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
ଯେକ any ଣସି ନାଭ୍ ଉପାଦାନ (ଟ୍ୟାବ୍ କିମ୍ବା ବଟିକା) ପାଇଁ, ଧୂସର ଲିଙ୍କ୍ .disabled
ପାଇଁ ଯୋଗ କରନ୍ତୁ ଏବଂ କ ho ଣସି ହୋଭର ପ୍ରଭାବ ନାହିଁ |
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
ଟିକିଏ ଅତିରିକ୍ତ HTML ଏବଂ ଡ୍ରପଡାଉନ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ଡ୍ରପଡାଉନ୍ ମେନୁଗୁଡିକ ଯୋଡନ୍ତୁ |
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
ନାଭବର୍ ଗୁଡିକ ପ୍ରତିକ୍ରିୟାଶୀଳ ମେଟା ଉପାଦାନ ଯାହା ଆପଣଙ୍କର ଅନୁପ୍ରୟୋଗ କିମ୍ବା ସାଇଟ୍ ପାଇଁ ନାଭିଗେସନ୍ ହେଡର୍ ଭାବରେ କାର୍ଯ୍ୟ କରେ | ମୋବାଇଲ୍ ଦୃଶ୍ୟରେ ସେମାନେ ଭୁଶୁଡ଼ିବା ଆରମ୍ଭ କରନ୍ତି (ଏବଂ ଟୋଗଲ୍ ଯୋଗ୍ୟ) ଏବଂ ଉପଲବ୍ଧ ଭ୍ୟୁପୋର୍ଟ ପ୍ରସ୍ଥ ବ as ଼ିବା ସହିତ ଭୂସମାନ୍ତର ହୋଇଯାଏ |
ଯଥାର୍ଥ ନାଭବାର ନାଭ ଲିଙ୍କଗୁଡିକ ବର୍ତ୍ତମାନ ସମର୍ଥିତ ନୁହେଁ |
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
ଏକ ପାଇଁ ଟେକ୍ସଟ୍ ଅଦଳବଦଳ କରି ନାଭବାର୍ ବ୍ରାଣ୍ଡକୁ ନିଜ ଇମେଜ୍ ସହିତ ବଦଳାନ୍ତୁ <img>
| ଯେହେତୁ .navbar-brand
ଏହାର ନିଜସ୍ୱ ପ୍ୟାଡିଂ ଏବଂ ଉଚ୍ଚତା ଅଛି, ତୁମ ପ୍ରତିଛବି ଉପରେ ନିର୍ଭର କରି ଆପଣଙ୍କୁ କିଛି CSS କୁ ନବଲିଖନ କରିବାକୁ ପଡିପାରେ |
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
.navbar-form
ସଠିକ୍ ଭର୍ଟିକାଲ୍ ଆଲାଇନ୍ମେଣ୍ଟ ଏବଂ ସଂକୀର୍ଣ୍ଣ ଦୃଶ୍ୟରେ ଭୁଶୁଡ଼ି ପଡ଼ିଥିବା ଆଚରଣ ପାଇଁ ଫର୍ମ ବିଷୟବସ୍ତୁ ରଖନ୍ତୁ | ନାଭବାର ବିଷୟବସ୍ତୁ ମଧ୍ୟରେ ଏହା କେଉଁଠାରେ ରହେ ତାହା ସ୍ଥିର କରିବାକୁ ଆଲାଇନ୍ମେଣ୍ଟ ଅପ୍ସନ୍ ବ୍ୟବହାର କରନ୍ତୁ |
ଏକ ହେଡ୍ ଅପ୍ ଭାବରେ, .navbar-form
ଏହାର ଅନେକ କୋଡ୍ .form-inline
ମିକ୍ସିନ୍ ମାଧ୍ୟମରେ ଅଂଶୀଦାର କରେ | କିଛି ଫର୍ମ ନିୟନ୍ତ୍ରଣ, ଇନପୁଟ୍ ଗୋଷ୍ଠୀ ପରି, ଏକ ନାଭବାର୍ ମଧ୍ୟରେ ସଠିକ୍ ଭାବରେ ଦେଖାଯିବା ପାଇଁ ସ୍ଥିର ଓସାର ଆବଶ୍ୟକ କରିପାରନ୍ତି |
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
ନାଭବାରରେ ଭୂଲମ୍ବ ଭାବରେ ସେଣ୍ଟର୍ କରିବାକୁ ଏକ ଉପାଦାନରେ ନଥିବା ଉପାଦାନଗୁଡ଼ିକରେ .navbar-btn
ଶ୍ରେଣୀ ଯୋଡନ୍ତୁ |<button>
<form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
ଏକ ଉପାଦାନରେ ପାଠ୍ୟର ଷ୍ଟ୍ରିଙ୍ଗଗୁଡ଼ିକୁ ଗୁଡ଼ାଇ ରଖନ୍ତୁ .navbar-text
, ସାଧାରଣତ <p>
proper ସଠିକ୍ ଅଗ୍ରଣୀ ଏବଂ ରଙ୍ଗ ପାଇଁ ଏକ ଟ୍ୟାଗ୍ ଉପରେ |
<p class="navbar-text">Signed in as Mark Otto</p>
ଷ୍ଟାଣ୍ଡାର୍ଡ ଲିଙ୍କ୍ ବ୍ୟବହାର କରୁଥିବା ଲୋକମାନଙ୍କ ପାଇଁ ଯାହା ନିୟମିତ ନାଭବାର୍ ନେଭିଗେସନ୍ ଉପାଦାନ ମଧ୍ୟରେ ନାହିଁ, .navbar-link
ଡିଫଲ୍ଟ ଏବଂ ଓଲଟା ନାଭବାର୍ ବିକଳ୍ପଗୁଡ଼ିକ ପାଇଁ ଉପଯୁକ୍ତ ରଙ୍ଗ ଯୋଡିବାକୁ ଶ୍ରେଣୀ ବ୍ୟବହାର କରନ୍ତୁ |
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
ନାଭି ଲିଙ୍କ୍, ଫର୍ମ, ବଟନ୍, କିମ୍ବା ପାଠ୍ୟକୁ ଉପଯୋଗିତା .navbar-left
କିମ୍ବା .navbar-right
ଉପଯୋଗିତା କ୍ଲାସଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ | ଉଭୟ ଶ୍ରେଣୀ ନିର୍ଦ୍ଦିଷ୍ଟ ଦିଗରେ ଏକ CSS ଫ୍ଲୋଟ୍ ଯୋଗ କରିବ | <ul>
ଉଦାହରଣ ସ୍ୱରୂପ, ନାଭ ଲିଙ୍କଗୁଡ଼ିକୁ ଆଲାଇନ୍ କରିବା ପାଇଁ, ପ୍ରୟୋଗ ହୋଇଥିବା ସମ୍ପୃକ୍ତ ୟୁଟିଲିଟି କ୍ଲାସ୍ ସହିତ ସେମାନଙ୍କୁ ଏକ ପୃଥକ ରଖନ୍ତୁ |
ଏହି ଶ୍ରେଣୀଗୁଡ଼ିକ ହେଉଛି ମିଶ୍ରିତ-ଏଡ୍ ସଂସ୍କରଣ .pull-left
ଏବଂ .pull-right
, କିନ୍ତୁ ଡିଭାଇସ୍ ଆକାରରେ ନାଭବାର୍ ଉପାଦାନଗୁଡ଼ିକର ସହଜ ପରିଚାଳନା ପାଇଁ ସେଗୁଡିକ ମିଡିଆ ଜିଜ୍ଞାସାକୁ ସ୍କୋପ୍ କରାଯାଇଛି |
ଏକ କିମ୍ବା ସେଣ୍ଟର୍ ଏବଂ ପ୍ୟାଡ୍ ନାଭବାର୍ ବିଷୟବସ୍ତୁ ଯୋଡନ୍ତୁ .navbar-fixed-top
ଏବଂ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |.container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
ଏକ କିମ୍ବା ସେଣ୍ଟର୍ ଏବଂ ପ୍ୟାଡ୍ ନାଭବାର୍ ବିଷୟବସ୍ତୁ ଯୋଡନ୍ତୁ .navbar-fixed-bottom
ଏବଂ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |.container
.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
ଏକ ପୂର୍ଣ୍ଣ-ଓସାର ନାଭବାର୍ ସୃଷ୍ଟି କରନ୍ତୁ ଯାହା ଏକ କିମ୍ବା ସେଣ୍ଟର୍ ଏବଂ ପ୍ୟାଡ୍ ନାଭବାର ବିଷୟବସ୍ତୁକୁ ଯୋଡି .navbar-static-top
ଏବଂ ଅନ୍ତର୍ଭୂକ୍ତ କରି ପୃଷ୍ଠା ସହିତ ସ୍କ୍ରୋଲ୍ କରେ |.container
.container-fluid
କ୍ଲାସ୍ .navbar-fixed-*
ତୁଳନାରେ, ଆପଣ କ any ଣସି ପ୍ୟାଡିଂ ପରିବର୍ତ୍ତନ କରିବା ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ body
|
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
ଯୋଗ କରି ନାଭବାରର ଲୁକକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ .navbar-inverse
|
<nav class="navbar navbar-inverse">
...
</nav>
ଏକ ନାଭିଗେସନ୍ ହାଇରାର୍କି ମଧ୍ୟରେ ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠାର ଅବସ୍ଥାନ ସୂଚାନ୍ତୁ |
ବିଛିନ୍ନକାରୀମାନେ ସ୍ୱୟଂଚାଳିତ ଭାବରେ CSS ମାଧ୍ୟମ��େ :before
ଏବଂ ଯୋଗ କରାଯାଇଥାଏ content
|
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
ମଲ୍ଟି-ପେଜ୍ ପେଜିନେସନ୍ ଉପାଦାନ, କିମ୍ବା ସରଳ ପେଜର୍ ବିକଳ୍ପ ସହିତ ଆପଣଙ୍କ ସାଇଟ୍ କିମ୍ବା ଆପ୍ ପାଇଁ ପେଜିନେସନ୍ ଲିଙ୍କ୍ ପ୍ରଦାନ କରନ୍ତୁ |
Rdio ଦ୍ୱାରା ଅନୁପ୍ରାଣିତ ସରଳ ପୃଷ୍ଠା, ଆପ୍ ଏବଂ ସନ୍ଧାନ ଫଳାଫଳ ପାଇଁ ଉତ୍ତମ | ବୃହତ ବ୍ଲକକୁ ହରାଇବା କଷ୍ଟକର, ସହଜରେ ମାପନୀୟ, ଏବଂ ବଡ଼ କ୍ଲିକ୍ କ୍ଷେତ୍ରଗୁଡିକ ପ୍ରଦାନ କରେ |
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<nav>
ପାଠକ ଏବଂ ଅନ୍ୟାନ୍ୟ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାକୁ ସ୍କ୍ରିନିଂ କରିବା ପାଇଁ ଏହାକୁ ଏକ ନାଭିଗେସନ୍ ବିଭାଗ ଭାବରେ ଚିହ୍ନଟ କରିବା ପାଇଁ ପୃଷ୍ଠା ଉପାଦାନକୁ ଏକ ଉପାଦାନରେ ଗୁଡ଼ାଇ ରଖିବା ଉଚିତ | ଏହା ସହିତ, ଯେହେତୁ ଏକ ପୃଷ୍ଠାରେ ଏହିପରି ଏକରୁ ଅଧିକ ନାଭିଗେସନ୍ ବିଭାଗ ରହିଥିବାର ସମ୍ଭାବନା ଅଛି (ଯେପରିକି ହେଡରରେ ପ୍ରାଥମିକ ନାଭିଗେସନ୍, କିମ୍ବା ସାଇଡ୍ ବାର୍ ନେଭିଗେସନ୍), ଏହାର ଉଦ୍ଦେଶ୍ୟ ପ୍ରତିଫଳିତ aria-label
କରୁଥିବା ଏକ ବର୍ଣ୍ଣନାକାରୀ ପ୍ରଦାନ କରିବା ପରାମର୍ଶଦାୟକ | <nav>
ଉଦାହରଣ ସ୍ୱରୂପ, ଯଦି ସର୍ଚ୍ଚ ଫଳାଫଳର ଏକ ସେଟ୍ ମଧ୍ୟରେ ନେଭିଗେଟ୍ କରିବା ପାଇଁ ପେଜିନେସନ୍ ଉପାଦାନ ବ୍ୟବହୃତ ହୁଏ, ଏକ ଉପଯୁକ୍ତ ଲେବଲ୍ ହୋଇପାରେ aria-label="Search results pages"
|
ବିଭିନ୍ନ ପରିସ୍ଥିତି ପାଇଁ ଲିଙ୍କ୍ କଷ୍ଟମାଇଜେବଲ୍ | .disabled
ଅନାବଶ୍ୟକ ଲିଙ୍କଗୁଡିକ ପାଇଁ ଏବଂ .active
ସାମ୍ପ୍ରତିକ ପୃଷ୍ଠା ସୂଚାଇବା ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ |
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
ଆମେ ପରାମର୍ଶ ଦେଉଛୁ ଯେ ଆପଣ ସକ୍ରିୟ କିମ୍ବା ଅକ୍ଷମ ହୋଇଥିବା ଆଙ୍କର୍ଗୁଡ଼ିକୁ ଅଦଳବଦଳ କରନ୍ତୁ <span>
, କିମ୍ବା ପୂର୍ବ / ପରବର୍ତ୍ତୀ ତୀର କ୍ଷେତ୍ରରେ ଆଙ୍କର୍ ଛାଡିଦିଅନ୍ତୁ, ଉଦ୍ଦିଷ୍ଟ ଶ yles ଳୀଗୁଡିକ ବଜାୟ ରଖିବାବେଳେ କ୍ଲିକ୍ କାର୍ଯ୍ୟକାରିତାକୁ ହଟାଇବା ପାଇଁ |
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
ବଡ଼ ବା ଛୋଟ ପୃଷ୍ଠା କଳ୍ପନା? ଅତିରିକ୍ତ ଆକାର ପାଇଁ ଯୋଗ କରନ୍ତୁ .pagination-lg
|.pagination-sm
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
ହାଲୁକା ମାର୍କଅପ୍ ଏବଂ ଶ yles ଳୀ ସହିତ ସରଳ ପୃଷ୍ଠା ପ୍ରୟୋଗ ପାଇଁ ଶୀଘ୍ର ପୂର୍ବ ଏବଂ ପରବର୍ତ୍ତୀ ଲିଙ୍କ୍ | ବ୍ଲଗ୍ କିମ୍ବା ପତ୍ରିକା ପରି ସରଳ ସାଇଟ୍ ପାଇଁ ଏହା ବହୁତ ଭଲ |
ଡିଫଲ୍ଟ ଭାବରେ, ପେଜର୍ ସେଣ୍ଟର୍ ଲିଙ୍କ୍ କରେ |
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
ବ ly କଳ୍ପିକ ଭାବରେ, ଆପଣ ପ୍ରତ୍ୟେକ ଲିଙ୍କ୍କୁ ପାର୍ଶ୍ୱକୁ ଆଲାଇନ୍ କରିପାରିବେ:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
ପେଜର୍ ଲିଙ୍କଗୁଡିକ ପେଜିନ୍ ଠାରୁ ସାଧାରଣ .disabled
ୟୁଟିଲିଟି କ୍ଲାସ୍ ମଧ୍ୟ ବ୍ୟବହାର କରେ |
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
ଏକ ଲେବଲ୍ ର ରୂପ ପରିବର୍ତ୍ତନ କରିବାକୁ ନିମ୍ନରେ ଉଲ୍ଲେଖ କରାଯାଇଥିବା ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମଧ୍ୟରୁ ଯେକ .ଣସିଟି ଯୋଡନ୍ତୁ |
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
ଯେତେବେଳେ ଏକ ସଂକୀର୍ଣ୍ଣ ପାତ୍ରରେ ଆପଣଙ୍କ ପାଖରେ ଦଶହରା ଇନଲାଇନ୍ ଲେବଲ୍ ଥାଏ, ପ୍ରତ୍ୟେକଟି ନିଜସ୍ୱ inline-block
ଉପାଦାନ ଧାରଣ କରିଥାଏ (ଏକ ଆଇକନ୍ ପରି) | ଏହାର ଚାରିଆଡ଼େ ସେଟିଂ ହେଉଛି display: inline-block;
| ପ୍ରସଙ୍ଗ ଏବଂ ଏକ ଉଦାହରଣ ପାଇଁ, # 13219 ଦେଖନ୍ତୁ |
<span class="badge">
ଲିଙ୍କ୍, ବୁଟଷ୍ଟ୍ରାପ୍ ନାଭ, ଏବଂ ଅଧିକରେ ଏକ ଯୋଗ କରି ନୂତନ କିମ୍ବା ପ read ା ନଥିବା ଆଇଟମଗୁଡ଼ିକୁ ସହଜରେ ହାଇଲାଇଟ୍ କରନ୍ତୁ |
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
ଯେତେବେଳେ କ new ଣସି ନୂତନ କିମ୍ବା ପ read ଼ା ନଥିବା ଆଇଟମ୍ ଥାଏ, ବ୍ୟାଜ୍ କେବଳ ନଷ୍ଟ ହୋଇଯିବ (CSS ର :empty
ଚୟନକର୍ତ୍ତା ମାଧ୍ୟମରେ) ଯଦି କ content ଣସି ବିଷୟବସ୍ତୁ ଭିତରେ ନଥାଏ |
ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 8 ରେ ବ୍ୟାଜ୍ ସ୍ self ୟଂ ନଷ୍ଟ ହେବ ନାହିଁ କାରଣ ଏଥିରେ :empty
ଚୟନକର୍ତ୍ତାଙ୍କ ସମର୍ଥନ ଅଭାବ |
ପିଲ୍ ନେଭିଗେସନ୍ରେ ସକ୍ରିୟ ଅବସ୍ଥାରେ ବ୍ୟାଜ୍ ରଖିବା ପାଇଁ ବିଲ୍ଟ-ଇନ୍ ଶ yles ଳୀ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି |
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
ଏକ ହାଲୁକା, ନମନୀୟ ଉପାଦାନ ଯାହା ବ option କଳ୍ପିକ ଭାବରେ ଆପଣଙ୍କ ସାଇଟରେ ମୁଖ୍ୟ ବିଷୟବସ୍ତୁ ପ୍ରଦର୍ଶନ କରିବାକୁ ସମଗ୍ର ଭ୍ୟୁପୋର୍ଟକୁ ବିସ୍ତାର କରିପାରିବ |
ବ featured ଶିଷ୍ଟ୍ୟଯୁକ୍ତ ବିଷୟବସ୍ତୁ କିମ୍ବା ସୂଚନା ପ୍ରତି ଅତିରିକ୍ତ ଧ୍ୟାନ ଦେବା ପାଇଁ ଏହା ଏକ ସରଳ ହିରୋ ୟୁନିଟ୍, ଏକ ସରଳ ଜମ୍ବୋଟ୍ରନ୍-ଷ୍ଟାଇଲ୍ ଉପାଦାନ |
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
.container
ଜମ୍ବୋଟ୍ରନ୍ କୁ ପୂର୍ଣ୍ଣ ଓସାର କରିବା ପାଇଁ, ଏବଂ ଗୋଲାକାର କୋଣ ବିନା, ଏହାକୁ ସମସ୍ତ s ବାହାରେ ରଖନ୍ତୁ ଏବଂ ଏହା ବଦଳରେ ଏକ ଯୋଗ କରନ୍ତୁ .container
|
<div class="jumbotron">
<div class="container">
...
</div>
</div>
h1
ଏକ ପୃଷ୍ଠାରେ ଉପଯୁକ୍ତ ସ୍ଥାନ ଏବଂ ବିଷୟବସ୍ତୁର ବିଭାଗଗୁଡିକ ପାଇଁ ଏକ ସରଳ ଶେଲ୍ | ଏହା h1
ଡିଫଲ୍ଟ small
ଉପାଦାନ, ଏବଂ ଅନ୍ୟାନ୍ୟ ଉପାଦାନଗୁଡିକ (ଅତିରିକ୍ତ ଶ yles ଳୀ ସହିତ) ବ୍ୟବହାର କରିପାରିବ |
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
ଇମେଜ୍, ଭିଡିଓ, ଟେକ୍ସଟ୍, ଏବଂ ଅଧିକ ଗ୍ରୀଡ୍ ପ୍ରଦର୍ଶନ କରିବାକୁ ଥମ୍ବନେଲ୍ ଉପାଦାନ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ବିସ୍ତାର କରନ୍ତୁ |
ଯଦି ଆପଣ ବିଭିନ୍ନ ଉଚ୍ଚତା ଏବଂ / କିମ୍ବା ପ୍ରସ୍ଥର ଥମ୍ବନେଲଗୁଡିକର Pinterest ପରି ଉପସ୍ଥାପନା ଖୋଜୁଛନ୍ତି, ତେବେ ଆପଣଙ୍କୁ ଏକ ତୃତୀୟ-ପକ୍ଷ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବାକୁ ପଡିବ ଯେପରିକି ମେସନ୍ରି , ଆଇସୋଟୋପ୍ , କିମ୍ବା ସାଲଭାଟୋର |
ଡିଫଲ୍ଟ ଭାବରେ, ସର୍ବନିମ୍ନ ଆବଶ୍ୟକ ମାର୍କଅପ୍ ସହିତ ଲିଙ୍କ୍ ହୋଇଥିବା ପ୍ରତିଛବିଗୁଡ଼ିକୁ ପ୍ରଦର୍ଶନ କରିବାକୁ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଥମ୍ବନେଲଗୁଡିକ ଡିଜାଇନ୍ କରାଯାଇଛି |
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
ଟିକେ ଅତିରିକ୍ତ ମାର୍କଅପ୍ ସହିତ, ଯେକ any ଣସି ପ୍ରକାରର HTML ବିଷୟବସ୍ତୁ ଯେପରିକି ହେଡିଙ୍ଗ୍, ପାରାଗ୍ରାଫ୍, କିମ୍ବା ବଟନ୍ଗୁଡ଼ିକୁ ଥମ୍ବନେଲରେ ଯୋଡିବା ସମ୍ଭବ |
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
ହାତଗଣତି ଉପଲବ୍ଧ ଏବଂ ନମନୀୟ ଆଲର୍ଟ ବାର୍ତ୍ତା ସହିତ ସାଧାରଣ ଉପଭୋକ୍ତା କାର୍ଯ୍ୟ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ମତାମତ ବାର୍ତ୍ତା ପ୍ରଦାନ କରନ୍ତୁ |
ମ basic ଳିକ ସତର୍କ ବାର୍ତ୍ତା ପାଇଁ ଯେକ any ଣସି ପାଠ୍ୟ ଏବଂ ଏକ ବ al କଳ୍ପିକ ବହିଷ୍କାର ବଟନ୍ .alert
ଏବଂ ଚାରୋଟି ପ୍ରସଙ୍ଗ ଶ୍ରେଣୀ ମଧ୍ୟରୁ ଗୋଟିଏ (ଯଥା, ) ଗୁଡ଼ାଇ ରଖ |.alert-success
ଆଲର୍ଟଗୁଡ଼ିକରେ ଡିଫଲ୍ଟ କ୍ଲାସ୍ ନାହିଁ, କେବଳ ବେସ୍ ଏବଂ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ | ଏକ ଡିଫଲ୍ଟ ଧୂସର ଆଲର୍ଟ ଅଧିକ ଅର୍ଥ କରେ ନାହିଁ, ତେଣୁ ତୁମେ ବିଷୟବସ୍ତୁ ଶ୍ରେଣୀ ମାଧ୍ୟମରେ ଏକ ପ୍ରକାର ନିର୍ଦ୍ଦିଷ୍ଟ କରିବା ଆବଶ୍ୟକ | ସଫଳତା, ସୂଚନା, ଚେତାବନୀ, କିମ୍ବା ବିପଦରୁ ବାଛନ୍ତୁ |
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
ଏକ ଇଚ୍ଛାଧୀନ .alert-dismissible
ଏବଂ ବନ୍ଦ ବଟନ୍ ଯୋଗ କରି ଯେକ any ଣସି ଆଲର୍ଟ ଉପରେ ନିର୍ମାଣ କରନ୍ତୁ |
ସଂପୂର୍ଣ୍ଣ କାର୍ଯ୍ୟକ୍ଷମ, ଖାରଜ ଆଲର୍ଟ ପାଇଁ, ଆପଣ ନିଶ୍ଚିତ ଭାବରେ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ବ୍ୟବହାର କରିବେ |
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ <button>
ସହିତ ଉପାଦାନ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |data-dismiss="alert"
.alert-link
ଯେକ any ଣସି ଆଲର୍ଟ ମଧ୍ୟରେ ଶୀଘ୍ର ମେଳୁଥିବା ରଙ୍ଗୀନ ଲିଙ୍କ୍ ପ୍ରଦାନ କରିବାକୁ ୟୁଟିଲିଟି କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ |
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
ସରଳ ତଥାପି ନମନୀୟ ପ୍ରଗତି ଦଣ୍ଡ ସହିତ ଏକ କାର୍ଯ୍ୟ ପ୍ରବାହ କିମ୍ବା କାର୍ଯ୍ୟର ଅଗ୍ରଗତି ଉପରେ ଅତ୍ୟାଧୁନିକ ମତାମତ ପ୍ରଦାନ କରନ୍ତୁ |
ପ୍ରଗତି ଦଣ୍ଡଗୁଡ଼ିକ ସେମାନଙ୍କର କିଛି ପ୍ରଭାବ ହାସଲ କରିବାକୁ CSS3 ସ୍ଥାନାନ୍ତରଣ ଏବଂ ଆନିମେସନ୍ ବ୍ୟବହାର କରେ | ଏହି ବ features ଶିଷ୍ଟ୍ୟଗୁଡିକ ଇଣ୍ଟରନେଟ୍ ଏକ୍ସପ୍ଲୋରର୍ 9 ଏବଂ ଫାୟାରଫକ୍ସର ତଳେ କିମ୍ବା ପୁରୁଣା ସଂସ୍କରଣରେ ସମର୍ଥିତ ନୁହେଁ | ଅପେରା 12 ଆନିମେସନ୍ କୁ ସମର୍ଥନ କରେନାହିଁ |
ଯଦି ଆପଣଙ୍କର ୱେବସାଇଟ୍ ରେ ଏକ ବିଷୟବସ୍ତୁ ସୁରକ୍ଷା ନୀତି (CSP) ଅଛି ଯାହା ଅନୁମତି ଦିଏ ନାହିଁ , ତେବେ ନିମ୍ନରେ ଆମର ଉଦାହରଣରେ ଦେଖାଯାଇଥିବା ପରି ପ୍ରଗତି ବାର୍ ଓସାର ସେଟ୍ style-src 'unsafe-inline'
କରିବାକୁ ଆପଣ ଇନଲାଇନ ଗୁଣ ବ୍ୟବହାର କରିବାକୁ ସମର୍ଥ ହେବେ ନାହିଁ | style
ମୋଟେଇ ସେଟିଂ ପାଇଁ ବିକଳ୍ପ ପଦ୍ଧତି ଯାହା କଠୋର CSP ସହିତ ସୁସଙ୍ଗତ, ଟିକିଏ କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ (ଯାହା ସେଟ୍ element.style.width
) ବ୍ୟବହାର କରିବା କିମ୍ବା କଷ୍ଟମ୍ CSS କ୍ଲାସ୍ ବ୍ୟବହାର କରିବା ଅନ୍ତର୍ଭୁକ୍ତ କରେ |
ଡିଫଲ୍ଟ ପ୍ରଗତି ଦଣ୍ଡିକା |
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
ଏକ ଦୃଶ୍ୟମାନ ଶତକଡ଼ା ଦେଖାଇବାକୁ ପ୍ରଗତି ଦଣ୍ଡ ଭିତରୁ ଶ୍ରେଣୀ <span>
ସହିତ ଅପସାରଣ କରନ୍ତୁ |.sr-only
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
ସୁନିଶ୍ଚିତ କରିବାକୁ ଯେ ଲେବଲ୍ ଟେକ୍ସଟ୍ କମ୍ ପ୍ରତିଶତ ପାଇଁ ମଧ୍ୟ ଯଥାର୍ଥ min-width
ଅଟେ, ପ୍ରଗତି ଦଣ୍ଡିକାରେ ଏକ ଯୋଡିବାକୁ ବିଚାର କରନ୍ତୁ |
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
ପ୍ରଗତି ଦଣ୍ଡଗୁଡ଼ିକ ସମାନ ଶ button ଳୀ ପାଇଁ କିଛି ସମାନ ବଟନ୍ ଏବଂ ଆଲର୍ଟ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତି |
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
ଏକ ଷ୍ଟ୍ରାଇଡ୍ ଇଫେକ୍ଟ ସୃଷ୍ଟି କରିବାକୁ ଏକ ଗ୍ରେଡିଏଣ୍ଟ୍ ବ୍ୟବହାର କରେ | IE9 ଏବଂ ତଳେ ଉପଲବ୍ଧ ନାହିଁ |
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
ଡାହାଣରୁ ବାମକୁ ଷ୍ଟ୍ରାଇପ୍ ଆନିମେସନ୍ କରିବାକୁ .active
ଯୋଡନ୍ତୁ | .progress-bar-striped
IE9 ଏବଂ ତଳେ ଉପଲବ୍ଧ ନାହିଁ |
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
.progress
ସେଗୁଡିକୁ ଷ୍ଟକ୍ କରିବା ପାଇଁ ଏକାଧିକ ବାର୍ ସମାନ ସ୍ଥାନରେ ରଖନ୍ତୁ |
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
ବିଭିନ୍ନ ପ୍ରକାରର ଉପାଦାନ ଗଠନ ପାଇଁ ବିସ୍ତୃତ ଅବଜେକ୍ଟ ଶ yles ଳୀ (ଯେପରିକି ବ୍ଲଗ୍ ମନ୍ତବ୍ୟ, ଟ୍ୱିଟ୍ ଇତ୍ୟାଦି) ଯାହା ପାଠ୍ୟ ବିଷୟବସ୍ତୁ ସହିତ ଏକ ବାମ କିମ୍ବା ଡାହାଣ-ଆଲାଇନ୍ ଇମେଜ୍ ବ feature ଶିଷ୍ଟ୍ୟ କରେ |
ଡିଫଲ୍ଟ ମିଡିଆ ଏକ ବିଷୟବସ୍ତୁ ଅବରୋଧର ବାମ କିମ୍ବା ଡାହାଣକୁ ଏକ ମିଡିଆ ବସ୍ତୁ (ପ୍ରତିଛବି, ଭିଡିଓ, ଅଡିଓ) ପ୍ରଦର୍ଶନ କରେ |
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
ଶ୍ରେଣୀଗୁଡିକ .pull-left
ଏବଂ .pull-right
ବିଦ୍ୟମାନ ଅଛି ଏବଂ ଏହା ପୂର୍ବରୁ ମିଡିଆ ଉପାଦାନର ଏକ ଅଂଶ ଭାବରେ ବ୍ୟବହୃତ ହୋଇଥିଲା, କିନ୍ତୁ v3.3.0 ପରି ବ୍ୟବହାର ପାଇଁ ନାପସନ୍ଦ କରାଯାଇଥିଲା | ସେଗୁଡିକ ପାଖାପାଖି ସମାନ .media-left
ଏବଂ .media-right
, ଏହା ବ୍ୟତୀତ html ରେ .media-right
ରଖିବା ଉଚିତ |.media-body
ଚିତ୍ର କିମ୍ବା ଅନ୍ୟାନ୍ୟ ମିଡିଆ ଉପର, ମଧ୍ୟମ, କିମ୍ବା ତଳ ଆଲାଇନ୍ ହୋଇପାରେ | ଡିଫଲ୍ଟ ଟପ୍ ଆଲାଇନ୍ ହୋଇଛି |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |
Donec sed odio dui | Nullam quis risus eget urna mollis ornare vel eu leo | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus।
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |
Donec sed odio dui | Nullam quis risus eget urna mollis ornare vel eu leo | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus।
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ | Fusce condimentum nunc ac nisi vulputate fringilla | ଫାଉସିବସରେ ଡୋନେକ୍ ଲାସିନିଆ କନଗ୍ ଫେଲିସ୍ |
Donec sed odio dui | Nullam quis risus eget urna mollis ornare vel eu leo | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridulus mus।
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
ଟିକିଏ ଅତିରିକ୍ତ ମାର୍କଅପ୍ ସହିତ, ଆପଣ ତାଲିକା ଭିତରେ ମିଡିଆ ବ୍ୟବହାର କରିପାରିବେ (ମନ୍ତବ୍ୟ ସୂତ୍ର କିମ୍ବା ପ୍ରବନ୍ଧ ତାଲିକା ପାଇଁ ଉପଯୋଗୀ) |
ଗ୍ରାଭିଡା ନଲ୍ଲାରେ କ୍ରାସ୍ ଆମ୍ଟ୍ ନିବ୍ ଲିବେରୋ ବସିଥାଏ | Nulla vel metus scelerisque ante sollicitudin commodo | କ୍ରାସ୍ ପୁରସ୍ ଓଡିଓ, ଭାଲପୁଟେଟ୍ ରେ ଭେଷ୍ଟିବୁଲମ୍, ଟେମ୍ପସ୍ ଭିଭେରା ଟର୍ପିସ୍ |
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
ତାଲିକା ଗୋଷ୍ଠୀଗୁଡ଼ିକ କେବଳ ଉପାଦାନଗୁଡ଼ିକର ସରଳ ତାଲିକା ନୁହେଁ, କଷ୍ଟମ୍ ବିଷୟବସ୍ତୁ ସହିତ ଜଟିଳ ପ୍ରଦର୍ଶନ ପାଇଁ ଏକ ନମନୀୟ ଏବଂ ଶକ୍ତିଶାଳୀ ଉପାଦାନ |
ସବୁଠାରୁ ମ basic ଳିକ ତାଲିକା ଗୋଷ୍ଠୀ କେବଳ ତାଲିକା ଆଇଟମ୍ ଏବଂ ସଠିକ୍ ଶ୍ରେଣୀ ସହିତ ଏକ ଅଣସଂରକ୍ଷିତ ତାଲିକା | ଅନୁସରଣ କରୁଥିବା ବିକଳ୍ପଗୁଡ଼ିକ ସହିତ, କିମ୍ବା ଆବଶ୍ୟକ ଅନୁଯାୟୀ ଆପଣଙ୍କର ନିଜସ୍ୱ CSS ସହିତ ଏହା ଉପରେ ନିର୍ମାଣ କରନ୍ତୁ |
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
ଯେକ any ଣସି ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମରେ ବ୍ୟାଜ୍ ଉପାଦାନ ଯୋଡନ୍ତୁ ଏବଂ ଏହା ସ୍ୱୟଂଚାଳିତ ଭାବରେ ଡାହାଣ ପଟେ ରହିବ |
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
ତାଲିକା ଆଇଟମ୍ ବଦଳରେ ଆଙ୍କର୍ ଟ୍ୟାଗ୍ ବ୍ୟବହାର କରି ତାଲିକା ଗୋଷ୍ଠୀ ଆଇଟମଗୁଡିକ ଲିଙ୍କ୍ କରନ୍ତୁ (ଏହାର ଅର୍ଥ ହେଉଛି ଏକ <div>
ବଦଳରେ ପିତାମାତା <ul>
) | ପ୍ରତ୍ୟେକ ଉପାଦାନର ବ୍ୟକ୍ତିଗତ ପିତାମାତାଙ୍କ ପାଇଁ କ need ଣସି ଆବଶ୍ୟକତା ନାହିଁ |
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
ତାଲିକା ଆଇଟମ୍ ଗୁଡିକ ତାଲିକା ଆଇଟମ୍ ବଦଳରେ ବଟନ୍ ହୋଇପାରେ (ଏହାର ଅର୍ଥ ହେଉଛି ଏକ <div>
ବଦଳରେ ପିତାମାତା <ul>
) | ପ୍ରତ୍ୟେକ ଉପାଦାନର ବ୍ୟକ୍ତିଗତ ପିତାମାତାଙ୍କ ପାଇଁ କ need ଣସି ଆବଶ୍ୟକତା ନାହିଁ | ଏଠାରେ ଷ୍ଟାଣ୍ଡାର୍ଡ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ ନାହିଁ |.btn
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
ଏହାକୁ ଅକ୍ଷମ ଦେଖାଯିବା ପାଇଁ ଧୂସର ରଙ୍ଗରେ .disabled
ଯୋଡନ୍ତୁ |.list-group-item
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
ଷ୍ଟାଇଲ୍ ତାଲିକା ଆଇଟମ୍, ଡିଫଲ୍ଟ କିମ୍ବା ଲିଙ୍କ୍ ପାଇଁ ପ୍ରସଙ୍ଗଗତ ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ | .active
ରାଜ୍ୟ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ କରେ |
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
ନିମ୍ନରେ ଥିବା ତାଲିକା ଗୋଷ୍ଠୀ ପାଇଁ ମଧ୍ୟ ପ୍ରାୟ ଯେକ HTML ଣସି HTML ଯୋଡନ୍ତୁ |
Eget metus ରେ Donec id elit non mi porta gravida | Maecenas sed diam eget risus varius blandit।
Eget metus ରେ Donec id elit non mi porta gravida | Maecenas sed diam eget risus varius blandit।
Eget metus ରେ Donec id elit non mi porta gravida | Maecenas sed diam eget risus varius blandit।
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
ସବୁବେଳେ ଜରୁରୀ ନୁହେଁ, ବେଳେବେଳେ ତୁମ DOM କୁ ଏକ ବାକ୍ସରେ ରଖିବାକୁ ପଡିବ | ସେହି ପରିସ୍ଥିତି ପାଇଁ, ପ୍ୟାନେଲ୍ ଉପାଦାନକୁ ଚେଷ୍ଟା କରନ୍ତୁ |
ଡିଫଲ୍ଟ ଭାବରେ, .panel
କିଛି ବିଷୟବସ୍ତୁ ଧାରଣ କରିବା ପାଇଁ କିଛି ମ basic ଳିକ ସୀମା ଏବଂ ପ୍ୟାଡିଂ ପ୍ରୟୋଗ କରାଯାଏ |
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
ସହଜରେ ଆପଣଙ୍କ ପ୍ୟାନେଲରେ ଏକ ହେଡିଙ୍ଗ୍ ପାତ୍ର ଧାରଣ କରନ୍ତୁ .panel-heading
| ଏକ ପ୍ରି-ଷ୍ଟାଇଲ୍ ହେଡିଙ୍ଗ୍ ଯୋଡିବାକୁ ଏକ ଶ୍ରେଣୀ ସହିତ ଆପଣ ଯେକ any ଣସି ଅନ୍ତର୍ଭୂକ୍ତ କରିପାରିବେ <h1>
| ତଥାପି, ଫଣ୍ଟ୍ ସାଇଜ୍ - ଦ୍ୱାରା ନବଲିଖନ କରାଯାଇଛି |<h6>
.panel-title
<h1>
<h6>
.panel-heading
ସଠିକ୍ ଲିଙ୍କ୍ ରଙ୍ଗ ପାଇଁ, ଭିତରେ ଥିବା ହେଡିଙ୍ଗରେ ଲିଙ୍କ୍ ରଖିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ .panel-title
|
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
ବଟନ୍ କିମ୍ବା ସେକେଣ୍ଡାରୀ ଟେକ୍ସଟ୍ ଗୁଡ଼ାଇ ଦିଅ .panel-footer
| ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ପ୍ୟାନେଲ ଫୁଟର୍ଗୁଡ଼ିକ ପ୍ରସଙ୍ଗଗତ ପରିବର୍ତ୍ତନଗୁଡିକ ବ୍ୟବହାର କରିବା ସମୟରେ ରଙ୍ଗ ଏବଂ ସୀମା ଉତ୍ତରାଧିକାରୀ ହୋଇନଥାଏ କାରଣ ସେଗୁଡିକ ଅଗ୍ରଭାଗରେ ରହିବା ପାଇଁ ଉଦ୍ଦିଷ୍ଟ ନୁହେଁ |
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
ଅନ୍ୟାନ୍ୟ ଉପାଦାନ ପରି, ଯେକ any ଣସି ପ୍ରସଙ୍ଗଗତ ରାଜ୍ୟ ଶ୍ରେଣୀଗୁଡ଼ିକୁ ଯୋଗ କରି ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ପ୍ରସଙ୍ଗରେ ସହଜରେ ଏକ ପ୍ୟାନେଲ୍କୁ ଅଧିକ ଅର୍ଥପୂର୍ଣ୍ଣ କର |
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
.table
ଏକ ବିହୀନ ଡିଜାଇନ୍ ପାଇଁ ଏକ ପ୍ୟାନେଲ ମଧ୍ୟରେ ଯେକ any ଣସି ସୀମାହୀନ ଯୋଡନ୍ତୁ | ଯଦି ସେଠାରେ ଅଛି .panel-body
, ଆମେ ଅଲଗା ହେବା ପାଇଁ ଟେବୁଲର ଶୀର୍ଷରେ ଏକ ଅତିରିକ୍ତ ସୀମା ଯୋଡିବା |
ଏଠାରେ କିଛି ଡିଫଲ୍ଟ ପ୍ୟାନେଲ୍ ବିଷୟବସ୍ତୁ | Nulla vitae elit libero, a pharetra augue। ଏନିନ୍ ଲାସିନିଆ ବିବେଣ୍ଡମ୍ ନୁଲା ସେଡ୍ କନସେକ୍ଟେଟର୍ | Aenean eu leo quam। ପେଲେଣ୍ଟେସ୍କ୍ ଅର୍ନେର୍ ସେମ୍ ଲାସିନିଆ କ୍ୱାମ୍ ଭେନେନାଟିସ୍ ଭେଷ୍ଟିବୁଲମ୍ | Nullam id dolor id nibh ultricies vehicula ut id elit।
# | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଉପଯୋଗକର୍ତ୍ତା ନାମ |
---|---|---|---|
୧ | ମାର୍କ | Otto | @ ମିଡୋ |
୨ | ଯାକୁବ | ଥର୍ନଟନ୍ | | @ ଫାଟ |
3 | ଲ୍ୟାରି | | ପକ୍ଷୀ | @ ଟ୍ୱିଟର |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
ଯଦି କ panel ଣସି ପ୍ୟାନେଲ୍ ବଡି ନାହିଁ, ଉପାଦାନଟି ବାଧା ବିନା ପ୍ୟାନେଲ୍ ହେଡର୍ ରୁ ଟେବୁଲ୍ କୁ ଚାଲିଯାଏ |
# | ପ୍ରଥମ ନାମ | ଶେଷ ନାମ | ଉପଯୋଗକର୍ତ୍ତା ନାମ |
---|---|---|---|
୧ | ମାର୍କ | Otto | @ ମିଡୋ |
୨ | ଯାକୁବ | ଥର୍ନଟନ୍ | | @ ଫାଟ |
3 | ଲ୍ୟାରି | | ପକ୍ଷୀ | @ ଟ୍ୱିଟର |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
ଯେକ any ଣସି ପ୍ୟାନେଲ ମଧ୍ୟରେ ସହଜରେ ପୂର୍ଣ୍ଣ-ଓସାର ତାଲିକା ଗୋଷ୍ଠୀ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |
ଏଠାରେ କିଛି ଡିଫଲ୍ଟ ପ୍ୟାନେଲ୍ ବିଷୟବସ୍ତୁ | Nulla vitae elit libero, a pharetra augue। ଏନିନ୍ ଲାସିନିଆ ବିବେଣ୍ଡମ୍ ନୁଲା ସେଡ୍ କନସେକ୍ଟେଟର୍ | Aenean eu leo quam। ପେଲେଣ୍ଟେସ୍କ୍ ଅର୍ନେର୍ ସେମ୍ ଲାସିନିଆ କ୍ୱାମ୍ ଭେନେନାଟିସ୍ ଭେଷ୍ଟିବୁଲମ୍ | Nullam id dolor id nibh ultricies vehicula ut id elit।
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
ବ୍ରାଉଜର୍ମାନଙ୍କୁ ଏକ ଅନ୍ତର୍ନିହିତ ଅନୁପାତ ସୃଷ୍ଟି କରି ସେମାନଙ୍କ ଧାରଣକାରୀ ବ୍ଲକର ମୋଟେଇ ଉପରେ ଆଧାର କରି ଭିଡିଓ କିମ୍ବା ସ୍ଲାଇଡ୍ ଶୋ ଡାଇମେନ୍ସନ୍ ନିର୍ଣ୍ଣୟ କରିବାକୁ ଅନୁମତି ଦିଅନ୍ତୁ ଯାହା ଯେକ any ଣସି ଉପକରଣରେ ସଠିକ୍ ଭାବରେ ମାପଚୁପ କରିବ |
ନିୟମଗୁଡିକ ସିଧାସଳଖ <iframe>
,, ଏବଂ ଉପାଦାନଗୁଡ଼ିକ <embed>
ପାଇଁ ପ୍ରୟୋଗ କରାଯାଏ; ବ ally କଳ୍ପିକ ଭାବରେ ଏକ ସ୍ପଷ୍ଟ ବଂଶଧର ଶ୍ରେଣୀ ବ୍ୟବହାର କର ଯେତେବେଳେ ତୁମେ ଅନ୍ୟ ଗୁଣଗୁଡ଼ିକ ପାଇଁ ଷ୍ଟାଇଲିଂ ସହିତ ମେଳ କରିବାକୁ ଚାହୁଁଛ |<video>
<object>
.embed-responsive-item
ପ୍ରୋ-ଟିପ୍! frameborder="0"
ଆମେ ତୁମ ପାଇଁ ଏହାକୁ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଆବଶ୍ୟକ ନାହିଁ <iframe>
ଯେହେତୁ ଆମେ ତୁମ ପାଇଁ ତାହା ନବଲିଖନ କରୁ |
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
ଏହାକୁ ଏକ ଇନସେଟ ଇଫେକ୍ଟ ଦେବା ପାଇଁ ଏକ ଉପାଦାନ ଉପରେ ଏକ ସରଳ ପ୍ରଭାବ ବ୍ୟବହାର କରନ୍ତୁ |
<div class="well">...</div>
ଦୁଇଟି ଇଚ୍ଛାଧୀନ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ସହିତ ପ୍ୟାଡିଂ ଏବଂ ଗୋଲାକାର କୋଣଗୁଡ଼ିକୁ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>