CSS વેરીએબલ્સ, રિસ્પોન્સિવ ઑફકેનવાસ, નવી ઉપયોગિતાઓ અને વધુ!

બુટસ્ટ્રેપ સાથે ઝડપી, પ્રતિભાવશીલ સાઇટ્સ બનાવો

શક્તિશાળી, એક્સ્ટેન્સિબલ અને ફીચર-પેક્ડ ફ્રન્ટએન્ડ ટૂલકીટ. Sass સાથે બનાવો અને કસ્ટમાઇઝ કરો, પ્રીબિલ્ટ ગ્રીડ સિસ્ટમ અને ઘટકોનો ઉપયોગ કરો અને શક્તિશાળી JavaScript પ્લગિન્સ સાથે પ્રોજેક્ટ્સને જીવંત બનાવો.

npm i [email protected]

દસ્તાવેજો વાંચો

હાલમાં v5.2.1 · ડાઉનલોડ કરો · v4.6.x દસ્તાવેજો · તમામ પ્રકાશન

તમે ઇચ્છો તે રીતે પ્રારંભ કરો

બુટસ્ટ્રેપ સાથે બિલ્ડીંગમાં સીધા જ જાઓ-CDN નો ઉપયોગ કરો, તેને પેકેજ મેનેજર દ્વારા ઇન્સ્ટોલ કરો અથવા સ્રોત કોડ ડાઉનલોડ કરો.

ઇન્સ્ટોલેશન દસ્તાવેજો વાંચો

પેકેજ મેનેજર દ્વારા ઇન્સ્ટોલ કરો

npm, RubyGems, Composer, અથવા Meteor દ્વારા બુટસ્ટ્રેપના સ્ત્રોત Sass અને JavaScript ફાઇલોને ઇન્સ્ટોલ કરો. પેકેજ મેનેજ કરેલ ઇન્સ્ટોલ્સમાં દસ્તાવેજીકરણ અથવા અમારી સંપૂર્ણ બિલ્ડ સ્ક્રિપ્ટ્સ શામેલ નથી. તમે npm દ્વારા ઝડપથી બુટસ્ટ્રેપ પ્રોજેક્ટ જનરેટ કરવા માટે અમારા npm ટેમ્પલેટ રેપોનો પણ ઉપયોગ કરી શકો છો.

npm install [email protected]

gem install bootstrap -v 5.2.1

વધુ માહિતી અને વધારાના પેકેજ મેનેજર માટે અમારા ઇન્સ્ટોલેશન દસ્તાવેજો વાંચો .

CDN દ્વારા શામેલ કરો

જ્યારે તમારે ફક્ત બુટસ્ટ્રેપના કમ્પાઇલ કરેલ 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 સાથે બધું કસ્ટમાઇઝ કરો

બુટસ્ટ્રેપ મોડ્યુલર અને કસ્ટમાઇઝ કરવા યોગ્ય આર્કિટેક્ચર માટે Sass નો ઉપયોગ કરે છે. તમને જોઈતા ઘટકોને જ આયાત કરો, ગ્રેડિયન્ટ્સ અને શેડોઝ જેવા વૈશ્વિક વિકલ્પોને સક્ષમ કરો અને અમારા ચલો, નકશા, ફંક્શન્સ અને મિક્સિન્સ સાથે તમારું પોતાનું CSS લખો.

કસ્ટમાઇઝ કરવા વિશે વધુ જાણો

તમામ બુટસ્ટ્રેપના સાસનો સમાવેશ કરો

એક સ્ટાઈલશીટ આયાત કરો અને તમે અમારા CSS ની દરેક વિશેષતા સાથે રેસમાં ઉતરશો.

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

અમારા વૈશ્વિક Sass વિકલ્પો વિશે વધુ જાણો .

તમને જે જોઈએ છે તે શામેલ કરો

બુટસ્ટ્રેપને કસ્ટમાઇઝ કરવાની સૌથી સહેલી રીત—તમને જોઈતી સીએસએસનો જ સમાવેશ કરો.

// 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 સાથે બુટસ્ટ્રેપનો ઉપયોગ કરવા વિશે વધુ જાણો .

CSS ચલો સાથે રીઅલ-ટાઇમમાં બનાવો અને વિસ્તૃત કરો

વૈશ્વિક થીમ શૈલીઓ, વ્યક્તિગત ઘટકો અને ઉપયોગિતાઓ માટે CSS ચલોનો વધુ સારી રીતે ઉપયોગ કરવા માટે દરેક પ્રકાશન સાથે બુટસ્ટ્રેપ 5 વિકસિત થઈ રહ્યું છે. :rootઅમે ગમે ત્યાં વાપરવા માટે રંગો, ફોન્ટ શૈલીઓ અને વધુ માટે ડઝનેક ચલો પ્રદાન કરીએ છીએ . ઘટકો અને ઉપયોગિતાઓ પર, CSS વેરીએબલ્સને સંબંધિત વર્ગ માટે સ્કોપ કરવામાં આવે છે અને સરળતાથી સુધારી શકાય છે.

CSS ચલો વિશે વધુ જાણો

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);
}

CSS ચલો દ્વારા કસ્ટમાઇઝ કરવું

તમને ગમે તે રીતે બુટસ્ટ્રેપને કસ્ટમાઇઝ કરવા માટે વૈશ્વિક, ઘટક અથવા ઉપયોગિતા વર્ગના ચલોને ઓવરરાઇડ કરો. દરેક નિયમને ફરીથી જાહેર કરવાની જરૂર નથી, માત્ર એક નવું ચલ મૂલ્ય.

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;
}

ઘટકો, ઉપયોગિતા API ને મળો

બુટસ્ટ્રેપ 5 માં નવું, અમારી ઉપયોગિતાઓ હવે અમારા યુટિલિટી API દ્વારા જનરેટ થાય છે . અમે તેને સુવિધાથી ભરપૂર Sass નકશા તરીકે બનાવ્યું છે જે ઝડપથી અને સરળતાથી કસ્ટમાઇઝ કરી શકાય છે. કોઈપણ ઉપયોગિતા વર્ગોને ��મેરવા, દૂર કરવા અથવા સંશોધિત કરવા તે ક્યારેય સરળ નહોતું. ઉપયોગિતાઓને પ્રતિભાવશીલ બનાવો, સ્યુડો-ક્લાસ વેરિઅન્ટ્સ ઉમેરો અને તેમને કસ્ટમ નામ આપો.

ઉપયોગિતાઓ વિશે વધુ જાણો કસ્ટમાઇઝ કરેલ ઘટકોનું અન્વેષણ કરો

ઘટકોને ઝડપથી કસ્ટમાઇઝ કરો

// 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 પ્લગઇન્સ

સરળતાથી ટૉગલ કરી શકાય તેવા છુપાયેલા તત્વો, મોડલ્સ અને ઑફકેનવાસ મેનૂ, પોપોવર્સ અને ટૂલટિપ્સ અને ઘણું બધું ઉમેરો - બધું જ jQuery વિના. dataબુટસ્ટ્રેપમાં JavaScript એ HTML-પ્રથમ છે, જેનો અર્થ છે કે પ્લગઈન્સ ઉમેરવા એ એટ્રીબ્યુટ્સ ઉમેરવા જેટલું જ સરળ છે . વધુ નિયંત્રણની જરૂર છે? પ્રોગ્રામેટિક રીતે વ્યક્તિગત પ્લગિન્સ શામેલ કરો.

બુટસ્ટ્રેપ JavaScript વિશે વધુ જાણો

ડેટા એટ્રિબ્યુટ API

જ્યારે તમે HTML લખી શકો ત્યારે શા માટે વધુ JavaScript લખો? dataલગભગ તમામ બુટસ્ટ્રેપના JavaScript પ્લગિન્સમાં ફર્સ્ટ-ક્લાસ ડેટા API છે, જે તમને માત્ર વિશેષતાઓ ઉમેરીને 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 નો ઉપયોગ કરીને અમારી JavaScript વિશે વધુ જાણો .

પ્લગિન્સનો વ્યાપક સમૂહ

બુટસ્ટ્રેપમાં એક ડઝન પ્લગઈન્સ છે જેને તમે કોઈપણ પ્રોજેક્ટમાં ડ્રોપ કરી શકો છો. તે બધાને એકસાથે મૂકો, અથવા તમને જરૂર હોય તે જ પસંદ કરો.

બુટસ્ટ્રેપ ચિહ્નો સાથે તેને વ્યક્તિગત કરો

બુટસ્ટ્રેપ આઇકોન્સ એ એક ઓપન સોર્સ SVG આઇકોન લાઇબ્રેરી છે જેમાં 1,500 થી વધુ ગ્લિફ્સ છે, જેમાં દરેક રિલીઝમાં વધુ ઉમેરવામાં આવે છે. તેઓ કોઈપણ પ્રોજેક્ટમાં કામ કરવા માટે રચાયેલ છે, પછી ભલે તમે બુટસ્ટ્રેપનો ઉપયોગ કરો કે નહીં. તેનો ઉપયોગ SVG અથવા આઇકન ફોન્ટ્સ તરીકે કરો—બંને વિકલ્પો તમને CSS દ્વારા વેક્ટર સ્કેલિંગ અને સરળ કસ્ટમાઇઝેશન આપે છે.

બુટસ્ટ્રેપ ચિહ્નો મેળવો

સત્તાવાર બુટસ્ટ્રેપ થીમ્સ સાથે તેને તમારું બનાવો

સત્તાવાર બુટસ્ટ્રેપ થીમ માર્કેટપ્લેસમાંથી પ્રીમિયમ થીમ્સ સાથે બુટસ્ટ્રેપને આગલા સ્તર પર લઈ જાઓ . થીમ્સ બુટસ્ટ્રેપ પર તેમના પોતાના વિસ્તૃત ફ્રેમવર્ક તરીકે બનાવવામાં આવી છે, નવા ઘટકો અને પ્લગઈન્સ, દસ્તાવેજીકરણ અને શક્તિશાળી બિલ્ડ ટૂલ્સથી સમૃદ્ધ છે.

બુટસ્ટ્રેપ થીમ્સ બ્રાઉઝ કરો

બુટસ્ટ્રેપ સાથે ઝડપી, પ્રતિભાવશીલ સાઇટ્સ બનાવો

તમે ઇચ્છો તે રીતે પ્રારંભ કરો

પેકેજ મેનેજર દ્વારા ઇન્સ્ટોલ કરો

CDN દ્વારા શામેલ કરો

અમારા પ્રારંભ માર્ગદર્શિકાઓ વાંચો

Sass સાથે બધું કસ્ટમાઇઝ કરો

તમામ બુટસ્ટ્રેપના સાસનો સમાવેશ કરો

તમને જે જોઈએ છે તે શામેલ કરો

CSS ચલો સાથે રીઅલ-ટાઇમમાં બનાવો અને વિસ્તૃત કરો

CSS ચલોનો ઉપયોગ કરીને

CSS ચલો દ્વારા કસ્ટમાઇઝ કરવું

ઘટકો, ઉપયોગિતા API ને મળો

ઘટકોને ઝડપથી કસ્ટમાઇઝ કરો

jQuery વિના શક્તિશાળી JavaScript પ્લગઇન્સ

ડેટા એટ્રિબ્યુટ API

પ્લગિન્સનો વ્યાપક સમૂહ

ચેતવણી

બટન

હિંડોળા

સંકુચિત કરો

ડ્રોપડાઉન

મોડલ

ઑફકેનવાસ

પોપઓવર

સ્ક્રોલસ્પાય

ટૅબ

ટોસ્ટ

ટૂલટીપ

બુટસ્ટ્રેપ ચિહ્નો સાથે તેને વ્યક્તિગત કરો

સત્તાવાર બુટસ્ટ્રેપ થીમ્સ સાથે તેને તમારું બનાવો