મુખ્ય સામગ્રી પર જાઓ દસ્તાવેજ નેવિગેશન પર જાઓ
Check
in English

CSS ચલો

ઝડપી અને આગળ દેખાતી ડિઝાઇન અને વિકાસ માટે બુટસ્ટ્રેપની CSS કસ્ટમ પ્રોપર્ટીઝનો ઉપયોગ કરો.

આ પૃષ્ઠ પર

બુટસ્ટ્રેપ તેના સંકલિત CSSમાં ઘણી બધી CSS કસ્ટમ પ્રોપર્ટીઝ (ચલો) નો સમાવેશ કરે છે જે સાસને ફરીથી કમ્પાઇલ કરવાની જરૂર વગર રીઅલ-ટાઇમ કસ્ટમાઇઝેશન માટે છે. આ તમારા બ્રાઉઝરના ઇન્સ્પેક્ટર, કોડ સેન્ડબોક્સ અથવા સામાન્ય પ્રોટોટાઇપિંગમાં કામ કરતી વખતે અમારા થીમના રંગો, બ્રેકપોઇન્ટ્સ અને પ્રાથમિક ફોન્ટ સ્ટેક્સ જેવા સામાન્ય રીતે ઉપયોગમાં લેવાતા મૂલ્યોની સરળ ઍક્સેસ પ્રદાન કરે છે.

bs-તૃતીય પક્ષ CSS સાથે તકરાર ટાળવા માટે અમારી બધી કસ્ટમ પ્રોપર્ટીઝ સાથે ઉપસર્ગ છે.

રુટ ચલો

અહીં અમે સમાવિષ્ટ વેરીએબલ્સ છે (નોંધ કરો કે :rootજરૂરી છે) કે જ્યાં બુટસ્ટ્રેપનું CSS લોડ થયેલ હોય ત્યાં પણ એક્સેસ કરી શકાય છે. તેઓ અમારી _root.scssફાઇલમાં સ્થિત છે અને અમારી સંકલિત ડિસ્ટ ફાઇલોમાં શામેલ છે.

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

ઘટક ચલો

બુટસ્ટ્રેપ 5 વિવિધ ઘટકો માટે સ્થાનિક ચલો તરીકે વૈવિધ્યપૂર્ણ ગુણધર્મોનો વધુને વધુ ઉપયોગ કરી રહ્યું છે. આ રીતે અમે અમારા સંકલિત CSSને ઘટાડીએ છીએ, સુનિશ્ચિત કરીએ છીએ કે નેસ્ટેડ કોષ્ટકો જેવા સ્થળોએ શૈલીઓ વારસામાં મળી નથી, અને Sass સંકલન પછી કેટલાક મૂળભૂત પુનઃસ્થાપિત અને બુટસ્ટ્રેપ ઘટકોને વિસ્તૃત કરવાની મંજૂરી આપીએ છીએ.

અમે CSS વેરિયેબલ્સનો ઉપયોગ કેવી રીતે કરી રહ્યા છીએ તેની થોડી સમજ માટે અમારા કોષ્ટક દસ્તાવેજીકરણ પર એક નજર નાખો . અમારા navbars પણ v5.2.0 મુજબ CSS ચલોનો ઉપયોગ કરે છે. અમે અમારા સમગ્ર ગ્રીડમાં CSS વેરિયેબલ્સનો પણ ઉપયોગ કરી રહ્યાં છીએ-મુખ્યત્વે ગટર માટે નવી ઑપ્ટ-ઇન CSS ગ્રિડ માટે-ભવિષ્યમાં વધુ ઘટક વપરાશ સાથે.

જ્યારે પણ શક્ય હોય ત્યારે, અમે આધાર ઘટક સ્તરે CSS વેરિયેબલ અસાઇન કરીશું (દા.ત., .navbarnavbar અને તેના પેટા ઘટકો માટે). આ ક્યાં અને કેવી રીતે કસ્ટમાઇઝ કરવું તેના પર અનુમાન લગાવવાનું ઘટાડે છે અને ભવિષ્યના અપડેટ્સમાં અમારી ટીમ દ્વારા સરળ ફેરફારો માટે પરવાનગી આપે છે.

ઉપસર્ગ

તમારા પોતાના કોડબેઝ સાથે અથડામણ ટાળવા માટે મોટાભાગના CSS વેરીએબલ ઉપસર્ગનો ઉપયોગ કરે છે. આ ઉપસર્ગ --દરેક CSS વેરીએબલ પર જરૂરી છે તે ઉપરાંત છે.

$prefixSass વેરીએબલ દ્વારા ઉપસર્ગને કસ્ટમાઇઝ કરો . ડિફૉલ્ટ રૂપે, તે સેટ છે bs-(ટ્રેલિંગ ડેશની નોંધ કરો).

ઉદાહરણો

CSS ચલો સાસના ચલો માટે સમાન સુગમતા પ્રદાન કરે છે, પરંતુ બ્રાઉઝરને સેવા આપતા પહેલા સંકલનની જરૂર વગર. ઉદાહરણ તરીકે, અહીં અમે અમારા પેજના ફોન્ટ અને લિંક સ્ટાઈલને CSS વેરીએબલ સાથે રીસેટ કરી રહ્યાં છીએ.

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

ગ્રીડ બ્રેકપોઇન્ટ્સ

જ્યારે અમે અમારા ગ્રીડ બ્રેકપોઇન્ટ્સને CSS વેરીએબલ તરીકે સમાવીએ છીએ (સિવાય xsકે), ધ્યાન રાખો કે CSS વેરિયેબલ્સ મીડિયા ક્વેરીઝમાં કામ કરતા નથી . આ વેરિયેબલ્સ માટે CSS સ્પેકમાં ડિઝાઇન દ્વારા છે, પરંતુ આગામી વર્ષોમાં env()વેરિયેબલ્સના સમર્થન સાથે બદલાઈ શકે છે. કેટલીક મદદરૂપ લિંક્સ માટે આ સ્ટેક ઓવરફ્લો જવાબ તપાસો . આ દરમિયાન, તમે અન્ય CSS પરિસ્થિતિઓમાં તેમજ તમારી JavaScriptમાં આ ચલોનો ઉપયોગ કરી શકો છો.