ଶକ୍ତିଶାଳୀ, ବିସ୍ତାରଯୋଗ୍ୟ, ଏବଂ ବ feature ଶିଷ୍ଟ୍ୟ-ପ୍ୟାକ୍ ହୋଇଥିବା ଫ୍ରଣ୍ଟେଣ୍ଡ୍ ଟୁଲ୍କିଟ୍ | ସାସ୍ ସହିତ ନିର୍ମାଣ ଏବଂ କଷ୍ଟମାଇଜ୍ କରନ୍ତୁ, ପୂର୍ବ ନିର୍ମିତ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ଏବଂ ଉପାଦାନଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ ଏବଂ ଶକ୍ତିଶାଳୀ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ ସହିତ ପ୍ରକଳ୍ପଗୁଡ଼ିକୁ ଜୀବନ୍ତ କରନ୍ତୁ |
ସମ୍ପ୍ରତି v5.2.1 · ଡାଉନଲୋଡ୍ · v4.6.x ଡକସ୍ · ସମସ୍ତ ପ୍ରକାଶନ |
ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ନିର୍ମାଣକୁ ଡେଇଁପଡ - CDN ବ୍ୟବହାର କର, ଏହାକୁ ପ୍ୟାକେଜ୍ ମ୍ୟାନେଜର୍ ମାଧ୍ୟମରେ ସଂସ୍ଥାପନ କର, କିମ୍ବା ଉତ୍ସ କୋଡ୍ ଡାଉନଲୋଡ୍ କର |
Npm, RubyGems, Composer, କିମ୍ବା Meteor ମାଧ୍ୟମରେ ବୁଟଷ୍ଟ୍ରାପର ଉତ୍ସ ସାସ୍ ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ଫାଇଲଗୁଡିକ ସଂସ୍ଥାପନ କରନ୍ତୁ | ପ୍ୟାକେଜ୍ ପରିଚାଳିତ ସଂସ୍ଥାଗୁଡ଼ିକରେ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ କିମ୍ବା ଆମର ସମ୍ପୂର୍ଣ୍ଣ ବିଲ୍ଡ ସ୍କ୍ରିପ୍ଟ ଅନ୍ତର୍ଭୂକ୍ତ ହୁଏ ନାହିଁ | Npm ମାଧ୍ୟମରେ ଶୀଘ୍ର ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରୋଜେକ୍ଟ ସୃଷ୍ଟି କରିବାକୁ ଆପଣ ଆମର npm ଟେମ୍ପଲେଟ୍ ରେପୋ ମଧ୍ୟ ବ୍ୟବହାର କରିପାରିବେ |
npm install [email protected]gem install bootstrap -v 5.2.1ଅଧିକ ସୂଚନା ଏବଂ ଅତିରିକ୍ତ ପ୍ୟାକେଜ୍ ପରିଚାଳକମାନଙ୍କ ପାଇଁ ଆମର ସ୍ଥାପନ ଡକସ୍ ପ Read ନ୍ତୁ |
ଯେତେବେଳେ ଆପଣ କେବଳ ବୁଟଷ୍ଟ୍ରାପ୍ ର ସଂକଳିତ CSS କିମ୍ବା JS ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଆବଶ୍ୟକ କରନ୍ତି, ଆପଣ jsDelivr ବ୍ୟବହାର କରିପାରିବେ | ଆମର ସରଳ ଶୀଘ୍ର ଆରମ୍ଭ ସହିତ ଏହାକୁ କାର୍ଯ୍ୟରେ ଦେଖନ୍ତୁ , କିମ୍ବା ଆପଣଙ୍କର ପରବର୍ତ୍ତୀ ପ୍ରୋଜେକ୍ଟକୁ ଜମ୍ପଷ୍ଟାର୍ଟ କରିବାକୁ ଉଦାହରଣ ବ୍ରାଉଜ୍ କରନ୍ତୁ | ଆପଣ ପପର୍ ଏବଂ ଆମର JS କୁ ପୃଥକ ଭାବରେ ଅନ୍ତର୍ଭୁକ୍ତ କରିବାକୁ ମଧ୍ୟ ବାଛିପାରିବେ |
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
ଆମର ଅଫିସିଆଲ୍ ଗାଇଡ୍ ସହିତ ଏକ ନୂତନ ପ୍ରୋଜେକ୍ଟରେ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଉତ୍ସ ଫାଇଲଗୁଡିକ ଅନ୍ତର୍ଭୂକ୍ତ କରି ଏକ ଜମ୍ପ ପାଆନ୍ତୁ |
ବୁଟଷ୍ଟ୍ରାପ୍ ଏକ ମଡ୍ୟୁଲାର୍ ଏବଂ କଷ୍ଟମାଇଜେବଲ୍ ସ୍ଥାପତ୍ୟ ପାଇଁ ସାସ୍ ବ୍ୟବହାର କରେ | କେବଳ ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା ଉପାଦାନଗୁଡିକ ଆମଦାନୀ କରନ୍ତୁ, ଗ୍ରେଡିଏଣ୍ଟ୍ ଏବଂ ଛାୟା ପରି ବିଶ୍ୱସ୍ତରୀୟ ବିକଳ୍ପଗୁଡିକୁ ସକ୍ଷମ କରନ୍ତୁ ଏବଂ ଆମର ଭେରିଏବଲ୍, ମାନଚିତ୍ର, କାର୍ଯ୍ୟ, ଏବଂ ମିଶ୍ରଣ ସହିତ ଆପଣଙ୍କର CSS ଲେଖନ୍ତୁ |
ଗୋଟିଏ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ଆମଦାନୀ କରନ୍ତୁ ଏବଂ ଆପଣ ଆମର CSS ର ପ୍ରତ୍ୟେକ ବ feature ଶିଷ୍ଟ୍ୟ ସହିତ ଦ aces ଡ଼କୁ ଚାଲିଯାଆନ୍ତି |
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
ଆମର ଗ୍ଲୋବାଲ୍ ସାସ୍ ଅପ୍ସନ୍ ବିଷୟରେ ଅଧିକ ଜାଣନ୍ତୁ |
ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କଷ୍ଟୋମାଇଜ୍ କରିବାର ସହଜ ଉପାୟ - କେବଳ ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା CSS ଅନ୍ତର୍ଭୁକ୍ତ କରନ୍ତୁ |
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
ସାସ୍ ସହିତ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର ବିଷୟରେ ଅଧିକ ଜାଣନ୍ତୁ |
ସର୍ବଭାରତୀୟ ଥିମ୍ ଶ yles ଳୀ, ବ୍ୟକ୍ତିଗତ ଉପାଦାନ, ଏବଂ ଏପରିକି ଉପଯୋଗିତା ପାଇଁ CSS ଭେରିଏବଲ୍କୁ ଭଲ ଭାବରେ ବ୍ୟବହାର କରିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ 5 ପ୍ରତ୍ୟେକ ପ୍ରକାଶନ ସହିତ ବିକାଶ କରୁଛି | :rootଯେକ anywhere ଣସି ସ୍ଥାନରେ ବ୍ୟବହାର ପାଇଁ ଏକ ସ୍ତରରେ ଆମେ ରଙ୍ଗ, ଫଣ୍ଟ ଶ yles ଳୀ, ଏବଂ ଅଧିକ ପାଇଁ ଦଶହରା ଭେରିଏବଲ୍ ପ୍ରଦାନ କରୁ | ଉପାଦାନ ଏବଂ ଉପଯୋଗିତା ଉପରେ, CSS ଭେରିଏବଲ୍ ଗୁଡିକ ସମ୍ପୃକ୍ତ ଶ୍ରେଣୀକୁ ସ୍କୋପ୍ କରାଯାଇଥାଏ ଏବଂ ସହଜରେ ପରିବର୍ତ୍ତନ କରାଯାଇପାରିବ |
ନୂତନ ଶ yles ଳୀ ଲେଖିବା ପାଇଁ ଆମର ଯେକ global ଣସି ଗ୍ଲୋବାଲ୍ :rootଭେରିଏବଲ୍ ବ୍ୟବହାର କରନ୍ତୁ | CSS ଭେରିଏବଲ୍ var(--bs-variableName)ସିଣ୍ଟାକ୍ସ ବ୍ୟବହାର କରେ ଏବଂ ଶିଶୁ ଉପାଦାନ ଦ୍ୱାରା ଉତ୍ତରାଧିକାରୀ ହୋଇପାରେ |
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}ଆପଣ କିପରି ପସନ୍ଦ କରନ୍ତି ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ କଷ୍ଟୋମାଇଜ୍ କରିବାକୁ ଗ୍ଲୋବାଲ୍, କମ୍ପୋନେଣ୍ଟ୍, କିମ୍ବା ୟୁଟିଲିଟି କ୍ଲାସ୍ ଭେରିଏବଲ୍ ଗୁଡିକୁ ନବଲିଖନ କରନ୍ତୁ | ପ୍ରତ୍ୟେକ ନିୟମକୁ ପୁନ ec ପ୍ରକାଶ କରିବାର ଆବଶ୍ୟକତା ନାହିଁ, କେବଳ ଏକ ନୂତନ ପରିବର୍ତ୍ତନଶୀଳ ମୂଲ୍ୟ |
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}ବୁଟଷ୍ଟ୍ରାପ୍ in ରେ ନୂତନ, ଆମର ଉପଯୋଗିତା ବର୍ତ୍ତମାନ ଆମର ଉପଯୋଗିତା API ଦ୍ୱାରା ସୃଷ୍ଟି ହୋଇଛି | ଆମେ ଏହାକୁ ଏକ ବ feature ଶିଷ୍ଟ୍ୟ-ପ୍ୟାକ୍ ସାସ୍ ମାନଚିତ୍ର ଭାବରେ ନିର୍ମାଣ କରିଛୁ ଯାହା ଶୀଘ୍ର ଏବଂ ସହଜରେ କଷ୍ଟମାଇଜ୍ ହୋଇପାରିବ | କ any ଣସି ୟୁଟିଲିଟି କ୍ଲାସ୍ ଯୋଡିବା, ଅପସାରଣ କିମ୍ବା ପରିବର୍ତ୍ତନ କରିବା କଦାପି ସହଜ ନୁହେଁ | ଉପଯୋଗିତାକୁ ପ୍ରତିକ୍ରିୟାଶୀଳ କର, ଛଉ-ଶ୍ରେଣୀ ପ୍ରକାରଗୁଡିକ ଯୋଗ କର, ଏବଂ ସେମାନଙ୍କୁ କଷ୍ଟମ୍ ନାମ ଦିଅ |
ଉପଯୋଗିତା ବିଷୟରେ ଅଧିକ ଜାଣନ୍ତୁ | କଷ୍ଟୋମାଇଜ୍ ହୋଇଥିବା ଉପାଦାନଗୁଡିକ ଏକ୍ସପ୍ଲୋର୍ କରନ୍ତୁ |
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
ସହଜରେ ଟୋଗଲ୍ ଯୋଗ୍ୟ ଲୁକ୍କାୟିତ ଉପାଦାନ, ମୋଡାଲ୍ ଏବଂ ଅଫକାନଭାସ୍ ମେନୁ, ପପୋଭର ଏବଂ ଟୁଲ୍ ଟିପ୍ସ, ଏବଂ ଆହୁରି ଅନେକ - jQuery ବିନା | ବୁଟଷ୍ଟ୍ରାପରେ ଜାଭାସ୍କ୍ରିପ୍ଟ ହେଉଛି HTML- ପ୍ରଥମ, ଯାହାର ଅର୍ଥ ହେଉଛି ପ୍ଲଗଇନ୍ ଯୋଡିବା dataଗୁଣ ଯୋଗ କରିବା ସହଜ | ଅଧିକ ନିୟନ୍ତ୍ରଣ ଆବଶ୍ୟକ କରନ୍ତି କି? ପ୍ରୋଗ୍ରାମେଟିକ୍ ଭାବରେ ବ୍ୟକ୍ତିଗତ ପ୍ଲଗଇନ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ |
ଯେତେବେଳେ ଆପଣ HTML ଲେଖିପାରିବେ ସେତେବେଳେ ଅଧିକ ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖନ୍ତୁ କାହିଁକି? ବୁଟଷ୍ଟ୍ରାପ୍ ର ପ୍ରାୟ ସମସ୍ତ ଜାଭାସ୍କ୍ରିପ୍ଟ ପ୍ଲଗଇନ୍ଗୁଡ଼ିକ ପ୍ରଥମ ଶ୍ରେଣୀ ଡାଟା API ବ feature ଶିଷ୍ଟ୍ୟ କରେ, କେବଳ dataଗୁଣଧର୍ମ ଯୋଡି JavaScript ବ୍ୟବହାର କରିବାକୁ ଅନୁମତି ଦିଏ |
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ବିଷୟରେ ମଡ୍ୟୁଲ୍ ଭାବରେ ଏବଂ ପ୍ରୋଗ୍ରାମେଟିକ୍ API ବ୍ୟବହାର କରି ଅଧିକ ଜାଣନ୍ତୁ |
ବୁଟଷ୍ଟ୍ରାପରେ ଏକ ଡଜନ ପ୍ଲଗଇନ ଅଛି ଯାହାକୁ ଆପଣ ଯେକ any ଣସି ପ୍ରୋଜେକ୍ଟରେ ପକାଇ ପାରିବେ | ସେଗୁଡିକୁ ଏକାଥରେ ପକାନ୍ତୁ, କିମ୍ବା ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା କେବଳ ବାଛନ୍ତୁ |
ବୁଟଷ୍ଟ୍ରାପ୍ ଆଇକନ୍ ଗୁଡିକ ହେଉଛି ଏକ ମୁକ୍ତ ଉତ୍ସ SVG ଆଇକନ୍ ଲାଇବ୍ରେରୀ, ଯେଉଁଥିରେ 1,500 ରୁ ଅଧିକ ଗ୍ଲାଇଫ୍ ଅଛି, ପ୍ରତ୍ୟେକ ପ୍ରକାଶନରେ ଅଧିକ ଯୋଗ କରାଯାଇଛି | ଆପଣ ଯେକ any ଣସି ପ୍ରୋଜେକ୍ଟରେ କାମ କରିବାକୁ ଡିଜାଇନ୍ ହୋଇଛନ୍ତି, ଆପଣ ନିଜେ ବୁଟଷ୍ଟ୍ରାପ୍ ବ୍ୟବହାର କରୁଛନ୍ତି କି ନାହିଁ | ସେମାନଙ୍କୁ SVG କିମ୍ବା ଆଇକନ୍ ଫଣ୍ଟ ଭାବରେ ବ୍ୟବହାର କରନ୍ତୁ - ଉଭୟ ବିକଳ୍ପ ଆପଣଙ୍କୁ CSS ମାଧ୍ୟମରେ ଭେକ୍ଟର ସ୍କେଲିଂ ଏବଂ ସହଜ କଷ୍ଟମାଇଜେସନ୍ ଦେଇଥାଏ |
ଅଫିସିଆଲ୍ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଥିମ୍ ମାର୍କେଟପ୍ଲେସରୁ ପ୍ରିମିୟମ୍ ଥିମ୍ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ ପରବର୍ତ୍ତୀ ସ୍ତରକୁ ନିଅ | ଥିମ୍ ଗୁଡିକ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଉପରେ ସେମାନଙ୍କର ନିଜସ୍ୱ ବିସ୍ତାରିତ framework ାଞ୍ଚା ଭାବରେ ନିର୍ମିତ, ନୂତନ ଉପାଦାନ ଏବଂ ପ୍ଲଗଇନ୍, ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଏବଂ ଶକ୍ତିଶାଳୀ ନିର୍ମାଣ ଉପକରଣ ସହିତ ସମୃଦ୍ଧ |
