मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
Check
in English

सीएसएस चड-उणें

जलद आनी फुडें पळोवपी डिझायन आनी विकासा खातीर Bootstrap च्या CSS सानुकूल गुणधर्म वापरात.

ह्या पानाचेर

बूटस्ट्रॅप Sass परतून संकलित करपाची गरज नासतना रियल-टायम सानुकूलीकरणाखातीर आपल्या संकलित CSS त जायते CSS सानुकूल गुणधर्म (चयापचय) समाविष्ट करता. तुमच्या ब्राउझराच्या निरिक्षकांत, कोड सॅंडबॉक्सांत वा सामान्य प्रोटोटायपिंगांत काम करतना हे आमचे थीम रंग, ब्रेकपॉइंट, आनी प्राथमीक फॉन्ट स्टॅक सारकिल्या सामान्य वापरिल्ल्या मोलांक सोंपें प्रवेश दितात.

bs-तिसऱ्या पक्षाच्या CSS कडेन संघर्श टाळपा खातीर आमच्या सगळ्या सानुकूल गुणधर्मांक उपसर्ग दिला.

मूळ चड-उणें

हांगा आमी समाविष्ट करतात ते व्हेरिएबल आसात (ध्यान दवरात की the :rootis required) जे Bootstrap चो CSS लोड केला खंयच्याय सुवातेर ऍक्सॅस करूंक शकतात. ते आमच्या _root.scssफायलीन आसात आनी आमच्या संकलित dist फायलींनी आस्पावल्यात.

: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 संकलना उपरांत Bootstrap घटकांचें कांय मुळावें रिस्टायलिंग आनी विस्तार करपाक परवानगी दितात.

आमी CSS व्हेरिएबल्स कशे वापरतात हाचे विशीं कांय अंतर्दृष्टी खातीर आमच्या कोश्टक दस्तावेजीकरणाचेर एक नदर मारात . आमचे navbars v5.2.0 च्या CSS व्हेरिएबलांचोय वापर करतात. आमी आमच्या ग्रिडांतल्यान CSS चड-उणेंय वापरतात-मुखेलपणान गटरां खातीर नवी ऑप्ट-इन CSS ग्रिड- फुडाराक चड घटक वापर येतलो.

शक्य आसल्यार, आमी बेस घटक पातळेचेर CSS चड-उणें नेमून दितले (देखीक, .navbarnavbar आनी ताच्या उप-घटकांक). हाका लागून खंय आनी कशें सानुकूल करचें हाचो अदमास उणो जाता, आनी फुडल्या अद्ययावतांत आमच्या पंगडान सोप्या बदलांक परवानगी दिता.

उपसर्ग

चडशे CSS चडांत चड तुमच्या स्वताच्या कोडबेसाकडेन टक्कर टाळपाखातीर उपसर्ग वापरतात. हो उपसर्ग --दरेक CSS चक्राचेर जाय आशिल्ल्या that's व्यतिरिक्त आसा.

$prefixSass चक्रा वरवीं उपसर्ग पसंतीचे करात . पूर्वनिर्धारीतपणान, तो सेट केला bs-(फाटलो डॅश लक्षांत दवरात).

उदाहरणां

CSS चडांत चड Sass च्या चडांत चड लवचीकता दितात, पूण ब्राउझराक सेवा दिवचे पयलीं संकलनाची गरज नासतना. देखीक, हांगा आमी आमच्या पानाचे फॉन्ट आनी लिंक शैली CSS चडांत चड रिसेट करतात.

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

जाळी ब्रेकपॉइंट

आमी आमच्या ग्रिड ब्रेकपॉइंटांक CSS चड-उणें म्हणून आस्पाव करताना ( सोडल्यार ), CSS चड-उणें माध्यम क्वेरींत काम करिनातxs हाची जतनाय घेयात . हें चड-उणें खातीर CSS spec मदीं डिझायन करून आसा, पूण चड-उणें खातीर आदार दिवन येवपी वर्सांनी बदलूं येता . कांय उपेगी दुव्यां खातीर ही स्टॅक ओव्हरफ्लो जाप पळयात . मदीं, तुमी हेर CSS परिस्थितींत, तशेंच तुमच्या जावास्क्रिप्टांत हे चड-उणे वापरूं येतात.env()