ਸ਼ਕਤੀਸ਼ਾਲੀ, ਵਿਸਤ੍ਰਿਤ, ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾ-ਪੈਕ ਫਰੰਟਐਂਡ ਟੂਲਕਿੱਟ। Sass ਨਾਲ ਬਣਾਓ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰੋ, ਪ੍ਰੀਬਿਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਅਤੇ ਕੰਪੋਨੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ JavaScript ਪਲੱਗਇਨਾਂ ਨਾਲ ਪ੍ਰੋਜੈਕਟਾਂ ਨੂੰ ਜੀਵਨ ਵਿੱਚ ਲਿਆਓ।
ਵਰਤਮਾਨ ਵਿੱਚ v5.2.1 · ਡਾਊਨਲੋਡ · v4.6.x ਦਸਤਾਵੇਜ਼ · ਸਾਰੇ ਰੀਲੀਜ਼
ਬੂਟਸਟਰੈਪ ਨਾਲ ਬਿਲਡਿੰਗ ਵਿੱਚ ਸਿੱਧਾ ਛਾਲ ਮਾਰੋ—CDN ਦੀ ਵਰਤੋਂ ਕਰੋ, ਇਸਨੂੰ ਪੈਕੇਜ ਮੈਨੇਜਰ ਰਾਹੀਂ ਸਥਾਪਿਤ ਕਰੋ, ਜਾਂ ਸਰੋਤ ਕੋਡ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰੋ।
ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ Sass ਅਤੇ JavaScript ਫਾਈਲਾਂ ਨੂੰ npm, RubyGems, Composer, ਜਾਂ Meteor ਦੁਆਰਾ ਸਥਾਪਿਤ ਕਰੋ। ਪੈਕੇਜ ਪ੍ਰਬੰਧਿਤ ਸਥਾਪਨਾਵਾਂ ਵਿੱਚ ਦਸਤਾਵੇਜ਼ ਜਾਂ ਸਾਡੀਆਂ ਪੂਰੀਆਂ ਬਿਲਡ ਸਕ੍ਰਿਪਟਾਂ ਸ਼ਾਮਲ ਨਹੀਂ ਹੁੰਦੀਆਂ ਹਨ। ਤੁਸੀਂ npm ਦੁਆਰਾ ਇੱਕ ਬੂਟਸਟਰੈਪ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਤਿਆਰ ਕਰਨ ਲਈ ਸਾਡੇ npm ਟੈਂਪਲੇਟ ਰੈਪੋ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ।
npm install [email protected]gem install bootstrap -v 5.2.1ਹੋਰ ਜਾਣਕਾਰੀ ਅਤੇ ਵਾਧੂ ਪੈਕੇਜ ਪ੍ਰਬੰਧਕਾਂ ਲਈ ਸਾਡੇ ਇੰਸਟਾਲੇਸ਼ਨ ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹੋ ।
ਜਦੋਂ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ Bootstrap ਦੇ ਕੰਪਾਇਲ ਕੀਤੇ 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>
ਬੂਟਸਟਰੈਪ ਇੱਕ ਮਾਡਯੂਲਰ ਅਤੇ ਅਨੁਕੂਲਿਤ ਆਰਕੀਟੈਕਚਰ ਲਈ Sass ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਸਿਰਫ਼ ਲੋੜੀਂਦੇ ਭਾਗਾਂ ਨੂੰ ਆਯਾਤ ਕਰੋ, ਗਰੇਡੀਐਂਟ ਅਤੇ ਸ਼ੈਡੋਜ਼ ਵਰਗੇ ਗਲੋਬਲ ਵਿਕਲਪਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ, ਅਤੇ ਸਾਡੇ ਵੇਰੀਏਬਲਾਂ, ਨਕਸ਼ਿਆਂ, ਫੰਕਸ਼ਨਾਂ ਅਤੇ ਮਿਸ਼ਰਣਾਂ ਨਾਲ ਆਪਣਾ CSS ਲਿਖੋ।
ਇੱਕ ਸਟਾਈਲਸ਼ੀਟ ਆਯਾਤ ਕਰੋ ਅਤੇ ਤੁਸੀਂ ਸਾਡੀ CSS ਦੀ ਹਰ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਦੌੜ ਵਿੱਚ ਸ਼ਾਮਲ ਹੋ ਗਏ ਹੋ।
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
ਸਾਡੇ ਗਲੋਬਲ Sass ਵਿਕਲਪਾਂ ਬਾਰੇ ਹੋਰ ਜਾਣੋ ।
ਬੂਟਸਟਰੈਪ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ—ਸਿਰਫ਼ ਉਹ 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";
Sass ਨਾਲ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਹੋਰ ਜਾਣੋ ।
ਬੂਟਸਟਰੈਪ 5 ਗਲੋਬਲ ਥੀਮ ਸਟਾਈਲ, ਵਿਅਕਤੀਗਤ ਭਾਗਾਂ, ਅਤੇ ਇੱਥੋਂ ਤੱਕ ਕਿ ਉਪਯੋਗਤਾਵਾਂ ਲਈ CSS ਵੇਰੀਏਬਲ ਦੀ ਬਿਹਤਰ ਵਰਤੋਂ ਕਰਨ ਲਈ ਹਰੇਕ ਰੀਲੀਜ਼ ਦੇ ਨਾਲ ਵਿਕਸਤ ਹੋ ਰਿਹਾ ਹੈ। :rootਅਸੀਂ ਕਿਤੇ ਵੀ ਵਰਤਣ ਲਈ ਇੱਕ ਪੱਧਰ 'ਤੇ ਰੰਗਾਂ, ਫੌਂਟ ਸਟਾਈਲ ਅਤੇ ਹੋਰ ਲਈ ਦਰਜਨਾਂ ਵੇਰੀਏਬਲ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਾਂ । ਕੰਪੋਨੈਂਟਸ ਅਤੇ ਯੂਟਿਲਟੀਜ਼ 'ਤੇ, CSS ਵੇਰੀਏਬਲਸ ਨੂੰ ਸੰਬੰਧਿਤ ਕਲਾਸ ਲਈ ਸਕੋਪ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਸੋਧਿਆ ਜਾ ਸਕਦਾ ਹੈ।
ਨਵੀਆਂ ਸ਼ੈਲੀਆਂ ਲਿਖਣ ਲਈ ਸਾਡੇ ਕਿਸੇ ਵੀ ਗਲੋਬਲ :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);
}ਬੂਟਸਟਰੈਪ ਨੂੰ ਆਪਣੀ ਪਸੰਦ ਅਨੁਸਾਰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਗਲੋਬਲ, ਕੰਪੋਨੈਂਟ, ਜਾਂ ਉਪਯੋਗਤਾ ਕਲਾਸ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ। ਹਰੇਕ ਨਿਯਮ ਨੂੰ ਮੁੜ ਘੋਸ਼ਿਤ ਕਰਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ, ਸਿਰਫ਼ ਇੱਕ ਨਵਾਂ ਵੇਰੀਏਬਲ ਮੁੱਲ।
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;
}ਬੂਟਸਟਰੈਪ 5 ਵਿੱਚ ਨਵਾਂ, ਸਾਡੀਆਂ ਉਪਯੋਗਤਾਵਾਂ ਹੁਣ ਸਾਡੇ ਉਪਯੋਗਤਾ API ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੀਆਂ ਗਈਆਂ ਹਨ । ਅਸੀਂ ਇਸਨੂੰ ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਨਾਲ ਭਰੇ ਸਾਸ ਨਕਸ਼ੇ ਦੇ ਰੂਪ ਵਿੱਚ ਬਣਾਇਆ ਹੈ ਜੋ ਜਲਦੀ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਕਿਸੇ ਵੀ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਨੂੰ ਜੋੜਨਾ, ਹਟਾਉਣਾ ਜਾਂ ਸੋਧਣਾ ਕਦੇ ਵੀ ਸੌਖਾ ਨਹੀਂ ਰਿਹਾ। ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾਓ, ਸੂਡੋ-ਕਲਾਸ ਵੇਰੀਐਂਟ ਸ਼ਾਮਲ ਕਰੋ, ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਕਸਟਮ ਨਾਮ ਦਿਓ।
// 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 ਤੋਂ ਬਿਨਾਂ। ਬੂਟਸਟਰੈਪ ਵਿੱਚ JavaScript HTML-ਪਹਿਲਾ ਹੈ, ਜਿਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਪਲੱਗਇਨ ਜੋੜਨਾ ਓਨਾ ਹੀ ਆਸਾਨ ਹੈ ਜਿੰਨਾ dataਗੁਣ ਜੋੜਨਾ। ਹੋਰ ਕੰਟਰੋਲ ਦੀ ਲੋੜ ਹੈ? ਵਿਅਕਤੀਗਤ ਪਲੱਗਇਨਾਂ ਨੂੰ ਪ੍ਰੋਗਰਾਮੇਟਿਕ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ।
ਜਦੋਂ ਤੁਸੀਂ HTML ਲਿਖ ਸਕਦੇ ਹੋ ਤਾਂ ਹੋਰ JavaScript ਕਿਉਂ ਲਿਖੋ? ਲਗਭਗ ਸਾਰੇ ਬੂਟਸਟਰੈਪ ਦੇ JavaScript ਪਲੱਗਇਨਾਂ ਵਿੱਚ ਇੱਕ ਫਸਟ-ਕਲਾਸ ਡੇਟਾ API ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਸਿਰਫ਼ 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>
ਸਾਡੀ JavaScript ਨੂੰ ਮੋਡੀਊਲ ਵਜੋਂ ਅਤੇ ਪ੍ਰੋਗਰਾਮੇਟਿਕ API ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਹੋਰ ਜਾਣੋ ।
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਇੱਕ ਦਰਜਨ ਪਲੱਗਇਨ ਹਨ ਜੋ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਛੱਡ ਸਕਦੇ ਹੋ। ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਵਾਰ ਵਿੱਚ ਸੁੱਟੋ, ਜਾਂ ਉਹਨਾਂ ਨੂੰ ਚੁਣੋ ਜਿਹਨਾਂ ਦੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ।
ਬੂਟਸਟਰੈਪ ਆਈਕਨ ਇੱਕ ਓਪਨ ਸੋਰਸ SVG ਆਈਕਨ ਲਾਇਬ੍ਰੇਰੀ ਹੈ ਜਿਸ ਵਿੱਚ 1,500 ਤੋਂ ਵੱਧ ਗਲਾਈਫਸ ਸ਼ਾਮਲ ਹਨ, ਹਰ ਰੀਲੀਜ਼ ਵਿੱਚ ਹੋਰ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। ਉਹ ਕਿਸੇ ਵੀ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕੰਮ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੇ ਗਏ ਹਨ, ਭਾਵੇਂ ਤੁਸੀਂ ਖੁਦ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ ਜਾਂ ਨਹੀਂ। ਉਹਨਾਂ ਨੂੰ SVGs ਜਾਂ ਆਈਕਨ ਫੌਂਟਾਂ ਵਜੋਂ ਵਰਤੋ—ਦੋਵੇਂ ਵਿਕਲਪ ਤੁਹਾਨੂੰ CSS ਰਾਹੀਂ ਵੈਕਟਰ ਸਕੇਲਿੰਗ ਅਤੇ ਆਸਾਨ ਅਨੁਕੂਲਤਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ।
ਅਧਿਕਾਰਤ ਬੂਟਸਟਰੈਪ ਥੀਮਜ਼ ਮਾਰਕੀਟਪਲੇਸ ਤੋਂ ਪ੍ਰੀਮੀਅਮ ਥੀਮਾਂ ਦੇ ਨਾਲ ਬੂਟਸਟਰੈਪ ਨੂੰ ਅਗਲੇ ਪੱਧਰ 'ਤੇ ਲੈ ਜਾਓ । ਥੀਮ ਬੂਟਸਟਰੈਪ ਉੱਤੇ ਉਹਨਾਂ ਦੇ ਆਪਣੇ ਵਿਸਤ੍ਰਿਤ ਫਰੇਮਵਰਕ ਦੇ ਰੂਪ ਵਿੱਚ ਬਣਾਏ ਗਏ ਹਨ, ਨਵੇਂ ਭਾਗਾਂ ਅਤੇ ਪਲੱਗਇਨਾਂ, ਦਸਤਾਵੇਜ਼ਾਂ, ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਬਿਲਡ ਟੂਲਸ ਨਾਲ ਭਰਪੂਰ।
