आढावा
रॅपिंग कंटेनर, एक शक्तिशाली ग्रिड सिस्टम, एक लवचिक मीडिया ऑब्जेक्ट आणि प्रतिसादात्मक उपयोगिता वर्गांसह, आपला बूटस्ट्रॅप प्रकल्प मांडण्यासाठी घटक आणि पर्याय.
कंटेनर हे बूटस्ट्रॅपमधील सर्वात मूलभूत लेआउट घटक आहेत आणि आमची डीफॉल्ट ग्रिड प्रणाली वापरताना आवश्यक आहेत . प्रतिसादात्मक, निश्चित-रुंदीच्या कंटेनरमधून निवडा (म्हणजे max-width
प्रत्येक ब्रेकपॉइंटवर त्याचे बदल) किंवा द्रव-रुंदी (म्हणजे ते 100%
सर्व वेळ रुंद असते).
कंटेनर नेस्टेड केले जाऊ शकतात, परंतु बहुतेक लेआउट्सना नेस्टेड कंटेनरची आवश्यकता नसते.
.container-fluid
व्ह्यूपोर्टच्या संपूर्ण रुंदीमध्ये पसरलेल्या पूर्ण रुंदीच्या कंटेनरसाठी वापरा .
बूटस्ट्रॅप प्रथम मोबाइल म्हणून विकसित केल्यामुळे, आम्ही आमच्या लेआउट आणि इंटरफेससाठी समजूतदार ब्रेकपॉइंट्स तयार करण्यासाठी मूठभर मीडिया क्वेरी वापरतो. हे ब्रेकपॉइंट्स बहुतेक किमान व्ह्यूपोर्ट रुंदीवर आधारित असतात आणि व्ह्यूपोर्ट बदलत असताना आम्हाला घटक वाढवण्याची परवानगी देतात.
आमच्या लेआउट, ग्रिड सिस्टम आणि घटकांसाठी आमच्या स्रोत Sass फाइल्समध्ये बूटस्ट्रॅप प्रामुख्याने खालील मीडिया क्वेरी रेंज—किंवा ब्रेकपॉइंट्स वापरतो.
आम्ही आमचा स्त्रोत CSS Sass मध्ये लिहित असल्याने, आमच्या सर्व मीडिया क्वेरी Sass मिक्सन्सद्वारे उपलब्ध आहेत:
आम्ही अधूनमधून इतर दिशेने जाणार्या मीडिया क्वेरी वापरतो (दिलेला स्क्रीन आकार किंवा लहान ):
लक्षात ठेवा की ब्राउझर सध्या श्रेणी संदर्भ क्वेरीस समर्थन देत नसल्यामुळे , आम्ही या तुलनांसाठी उच्च अचूकतेसह मूल्ये वापरून अंशात्मक रुंदीसह (जे काही विशिष्ट परिस्थितींमध्ये उच्च-डीपीआय डिव्हाइसेसवर येऊ शकते) सह उपसर्ग min-
आणिmax-
व्ह्यूपोर्टच्या मर्यादांभोवती कार्य करतो. .
पुन्हा एकदा, या मीडिया क्वेरी Sass mixins द्वारे देखील उपलब्ध आहेत:
किमान आणि कमाल ब्रेकपॉइंट रुंदी वापरून स्क्रीन आकारांच्या एका विभागाला लक्ष्य करण्यासाठी मीडिया क्वेरी आणि मिक्सिन देखील आहेत.
या मीडिया क्वेरी Sass mixins द्वारे देखील उपलब्ध आहेत:
त्याचप्रमाणे, मीडिया क्वेरी एकापेक्षा जास्त ब्रेकपॉईंट रुंदीमध्ये असू शकतात:
समान स्क्रीन आकार श्रेणी लक्ष्यित करण्यासाठी Sass मिक्सिन असेल:
अनेक बूटस्ट्रॅप घटक वापरतात z-index
, सीएसएस गुणधर्म जी सामग्री व्यवस्था करण्यासाठी तृतीय अक्ष प्रदान करून लेआउट नियंत्रित करण्यास मदत करते. आम्ही बूटस्ट्रॅपमध्ये डीफॉल्ट z-इंडेक्स स्केल वापरतो जे योग्यरित्या नेव्हिगेशन, टूलटिप्स आणि पॉपओव्हर्स, मॉडेल्स आणि बरेच काही करण्यासाठी डिझाइन केलेले आहे.
ही उच्च मूल्ये अनियंत्रित संख्येपासून सुरू होतात, उच्च आणि आदर्शपणे संघर्ष टाळण्यासाठी पुरेशी विशिष्ट. आम्हाला आमच्या स्तरित घटकांमध्ये - टूलटिप, पॉपओव्हर्स, नॅव्हबार, ड्रॉपडाउन, मॉडेल्समध्ये यापैकी एक मानक संच आवश्यक आहे - जेणेकरून आम्ही वर्तनांमध्ये वाजवीपणे सुसंगत राहू शकू. 100
आम्ही + किंवा + वापरू शकलो नाही असे कोणतेही कारण नाही 500
.
आम्ही या वैयक्तिक मूल्यांच्या सानुकूलनास प्रोत्साहन देत नाही; तुम्ही एखादे बदलले तर तुम्हाला ते सर्व बदलण्याची गरज आहे.
घटकांमधील आच्छादित सीमा हाताळण्यासाठी (उदा., इनपुट गटांमधील बटणे आणि इनपुट), आम्ही , , आणि डीफॉल्ट, होव्हर आणि सक्रिय स्थितींसाठी कमी एकल अंकी z-index
मूल्ये वापरतो. होव्हर/फोकस/सक्रिय वर, आम्ही एक विशिष्ट घटक त्यांच्या भाव घटकांवर सीमा दर्शवण्यासाठी उच्च मूल्यासह आघाडीवर आणतो .1
2
3
z-index