रीबूट
रीबूट, एक फ़ाइल में तत्व-विशिष्ट सीएसएस परिवर्तन का एक संग्रह, किकस्टार्ट बूटस्ट्रैप को एक सुरुचिपूर्ण, सुसंगत, और सरल आधार रेखा प्रदान करने के लिए।
दृष्टिकोण
रीबूट सामान्यीकरण पर बनाता है, केवल तत्व चयनकर्ताओं का उपयोग करके कुछ हद तक राय वाली शैलियों के साथ कई HTML तत्व प्रदान करता है। अतिरिक्त स्टाइलिंग केवल कक्षाओं के साथ की जाती है। उदाहरण के लिए, हम <table>
सरल आधार रेखा के लिए कुछ शैलियों को रीबूट करते हैं और बाद में .table
, .table-bordered
, और बहुत कुछ प्रदान करते हैं।
रीबूट में क्या ओवरराइड करना है, यह चुनने के लिए हमारे दिशानिर्देश और कारण यहां दिए गए हैं:
- स्केलेबल कंपोनेंट स्पेसिंग के लिए s के
rem
बजाय s का उपयोग करने के लिए कुछ ब्राउज़र डिफ़ॉल्ट मानों को अपडेट करें ।em
- बचें
margin-top
। अप्रत्याशित परिणाम देने वाले लंबवत मार्जिन गिर सकते हैं। इससे भी महत्वपूर्ण बात यह है कि एक ही दिशाmargin
एक सरल मानसिक मॉडल है। - डिवाइस के आकार में आसान स्केलिंग के लिए, ब्लॉक तत्वों को
rem
s के लिएmargin
s का उपयोग करना चाहिए। - जब भी संभव हो
font
, -संबंधित संपत्तियों की घोषणाओं को न्यूनतम रखें ।inherit
पृष्ठ डिफ़ॉल्ट
बेहतर पृष्ठ-व्यापी डिफ़ॉल्ट प्रदान करने के लिए <html>
और <body>
तत्वों को अद्यतन किया जाता है। अधिक विशेष रूप से:
- विश्व
box-sizing
स्तर पर प्रत्येक तत्व पर सेट किया गया है—जिसमें*::before
और*::after
, सेborder-box
. यह सुनिश्चित करता है कि पैडिंग या सीमा के कारण तत्व की घोषित चौड़ाई कभी भी पार नहीं हुई है। - पर कोई आधार
font-size
घोषित नहीं किया गया है<html>
, लेकिन16px
माना जाता है (ब्राउज़र डिफ़ॉल्ट)। उपयोगकर्ता की प्राथमिकताओं का सम्मान करते हुए और अधिक सुलभ दृष्टिकोण सुनिश्चित करते हुए मीडिया प्रश्नों के माध्यम से आसान उत्तरदायी टाइप-स्केलिंगfont-size: 1rem
के लिए लागू किया जाता है ।<body>
<body>
वैश्विकfont-family
,line-height
, और भी सेट करता हैtext-align
। यह बाद में कुछ प्रपत्र तत्वों द्वारा फ़ॉन्ट विसंगतियों को रोकने के लिए विरासत में मिला है।- सुरक्षा के लिए, के
<body>
पास घोषितbackground-color
, डिफ़ॉल्ट है#fff
.
मूल फ़ॉन्ट स्टैक
डिफ़ॉल्ट वेब फोंट (हेल्वेटिका नियू, हेल्वेटिका, और एरियल) को बूटस्ट्रैप 4 में हटा दिया गया है और प्रत्येक डिवाइस और ओएस पर इष्टतम टेक्स्ट रेंडरिंग के लिए "देशी फ़ॉन्ट स्टैक" के साथ बदल दिया गया है। इस स्मैशिंग मैगज़ीन लेख में मूल फ़ॉन्ट स्टैक के बारे में और पढ़ें ।
$font-family-sans-serif:
// Safari for macOS and iOS (San Francisco)
-apple-system,
// Chrome < 56 for macOS (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
Roboto,
// Basic web fallback
"Helvetica Neue", Arial,
// Linux
"Noto Sans",
"Liberation Sans",
// Sans serif fallback
sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
ध्यान दें कि चूंकि फ़ॉन्ट स्टैक में इमोजी फ़ॉन्ट शामिल हैं, इसलिए कई सामान्य प्रतीक/डिंगबैट यूनिकोड वर्णों को बहु-रंगीन चित्रलेखों के रूप में प्रस्तुत किया जाएगा। color
ब्राउज़र/प्लेटफ़ॉर्म के मूल इमोजी फ़ॉन्ट में उपयोग की जाने वाली शैली के आधार पर उनकी उपस्थिति अलग-अलग होगी, और वे किसी भी सीएसएस शैलियों से प्रभावित नहीं होंगे ।
यह font-family
लागू होता है <body>
और स्वचालित रूप से पूरे बूटस्ट्रैप में विश्व स्तर पर विरासत में मिला है। वैश्विक स्विच करने के लिए , बूटस्ट्रैप font-family
को अद्यतन और पुन: संकलित करें।$font-family-base
शीर्षक और पैराग्राफ
सभी शीर्षक तत्व—जैसे, <h1>
—और उन्हें हटाने <p>
के लिए रीसेट कर margin-top
दिया गया है। आसान रिक्ति के लिए शीर्षकों margin-bottom: .5rem
और अनुच्छेदों को जोड़ा गया है।margin-bottom: 1rem
शीर्षक | उदाहरण |
---|---|
<h1></h1> |
एच1. बूटस्ट्रैप शीर्षक |
<h2></h2> |
एच2. बूटस्ट्रैप शीर्षक |
<h3></h3> |
एच3. बूटस्ट्रैप शीर्षक |
<h4></h4> |
एच4. बूटस्ट्रैप शीर्षक |
<h5></h5> |
एच5. बूटस्ट्रैप शीर्षक |
<h6></h6> |
एच6. बूटस्ट्रैप शीर्षक |
सूचियों
सभी सूचियाँ— <ul>
, <ol>
, और <dl>
— उनकी margin-top
हटा दी गई हैं और a margin-bottom: 1rem
. नेस्टेड सूचियों में नहीं है margin-bottom
।
- सभी सूचियों का शीर्ष मार्जिन हटा दिया गया है
- और उनका निचला मार्जिन सामान्य हो गया
- नेस्टेड सूचियों में कोई निचला मार्जिन नहीं है
- इस तरह उनके पास और भी अधिक उपस्थिति है
- विशेष रूप से जब अधिक सूची आइटम का पालन किया जाता है
- लेफ्ट पैडिंग को भी रीसेट कर दिया गया है
- यहाँ एक आदेशित सूची है
- कुछ सूची आइटम के साथ
- इसका समग्र रूप समान है
- पिछली अनियंत्रित सूची के रूप में
सरल स्टाइलिंग, स्पष्ट पदानुक्रम और बेहतर रिक्ति के लिए, विवरण सूचियों में अद्यतन किए गए हैं margin
। <dd>
पर रीसेट margin-left
करें 0
और जोड़ें margin-bottom: .5rem
। <dt>
s बोल्ड हैं ।
- विवरण सूचियाँ
- एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
- शर्त
- अवधि के लिए परिभाषा।
- एक ही शब्द के लिए दूसरी परिभाषा।
- एक और शब्द
- इस अन्य शब्द की परिभाषा।
पूर्व स्वरूपित पाठ
<pre>
तत्व को हटाने के लिए इसे रीसेट किया जाता है और इसके लिए इकाइयों margin-top
का उपयोग किया जाता है ।rem
margin-bottom
उदाहरण-तत्व { मार्जिन-नीचे: 1rem; }
टेबल
टेबल्स को स्टाइल s के लिए थोड़ा समायोजित किया जाता है <caption>
, सीमाओं को संक्षिप्त किया जाता है, और text-align
पूरे समय एकरूपता सुनिश्चित की जाती है। बॉर्डर, पैडिंग आदि के लिए अतिरिक्त परिवर्तन कक्षा के.table
साथ आते हैं ।
तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक |
---|---|---|---|
टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल |
टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल |
टेबल सेल | टेबल सेल | टेबल सेल | टेबल सेल |
फार्म
सरल आधार शैलियों के लिए विभिन्न प्रपत्र तत्वों को रीबूट किया गया है। यहां कुछ सबसे उल्लेखनीय परिवर्तन दिए गए हैं:
<fieldset>
s की कोई सीमा, पैडिंग या मार्जिन नहीं है, इसलिए उन्हें अलग-अलग इनपुट या इनपुट के समूहों के लिए आसानी से रैपर के रूप में उपयोग किया जा सकता है।<legend>
फ़ील्डसेट की तरह s को भी एक प्रकार के शीर्षक के रूप में प्रदर्शित करने के लिए पुन: स्टाइल किया गया है।<label>
s लागूdisplay: inline-block
करने की अनुमति देने के लिए सेट हैं।margin
<input>
s,<select>
s,<textarea>
s, और<button>
s को ज्यादातर नॉर्मलाइज़ द्वारा संबोधित किया जाता है, लेकिन रिबूट उनकेmargin
और सेटline-height: inherit
को भी हटा देता है।<textarea>
s को केवल लंबवत रूप से आकार बदलने योग्य के रूप में संशोधित किया जाता है क्योंकि क्षैतिज आकार बदलने से अक्सर "ब्रेक" पृष्ठ लेआउट होता है।<button>
s और<input>
बटन तत्वों मेंcursor: pointer
कब:not(:disabled)
.
ये परिवर्तन, और बहुत कुछ, नीचे प्रदर्शित किए गए हैं।
बटन पर संकेत
role="button"
रीबूट में डिफ़ॉल्ट कर्सर को में बदलने के लिए एन्हांसमेंट शामिल है pointer
। तत्वों के सहभागी होने का संकेत देने में सहायता के लिए इस विशेषता को तत्वों में जोड़ें। <button>
यह भूमिका उन तत्वों के लिए आवश्यक नहीं है , जो अपना स्वयं का cursor
परिवर्तन प्राप्त करते हैं।
<span role="button" tabindex="0">Non-button element button</span>
विविध तत्व
पता
<address>
ब्राउज़र डिफ़ॉल्ट font-style
को से पर रीसेट करने के लिए तत्व को अपडेट किया जाता italic
है normal
। line-height
अब विरासत में मिला है, और margin-bottom: 1rem
जोड़ा गया है। <address>
s निकटतम पूर्वज (या कार्य के पूरे निकाय) के लिए संपर्क जानकारी प्रस्तुत करने के लिए हैं। के साथ पंक्तियों को समाप्त करके स्वरूपण को संरक्षित करें <br>
।
1355 मार्केट सेंट, सुइट 900
सैन फ्रांसिस्को, सीए 94103
पी: (123) 456-7890 पूरा नाम
[email protected]
ब्लॉककोट
margin
ब्लॉकक्वाट्स पर डिफ़ॉल्ट है, इसलिए हम इसे अन्य तत्वों के साथ अधिक संगत कुछ के लिए 1em 40px
रीसेट करते हैं।0 0 1rem
एक प्रसिद्ध उद्धरण, एक ब्लॉकक्वाट तत्व में निहित है।
इनलाइन तत्व
पैराग्राफ टेक्स्ट के बीच इसे अलग दिखाने के <abbr>
लिए एलिमेंट को बेसिक स्टाइलिंग मिलती है।
सारांश
cursor
सारांश पर डिफ़ॉल्ट है, इसलिए हम इसे यह बताने text
के लिए रीसेट करते हैं कि तत्व पर क्लिक करके उसके साथ बातचीत की जा सकती है।pointer
कुछ विवरण
विवरण के बारे में अधिक जानकारी।
और भी विवरण
विवरण के बारे में और भी अधिक विवरण यहां दिए गए हैं।
HTML5 [hidden]
विशेषता
HTML5 नाम की एक नई वैश्विक विशेषता[hidden]
display: none
जोड़ता है, जिसे डिफ़ॉल्ट रूप से स्टाइल किया जाता है। PureCSS से एक विचार उधार लेते हुए, हम इसे गलती से ओवरराइड होने से [hidden] { display: none !important; }
रोकने में मदद करने के लिए इस डिफ़ॉल्ट में सुधार करते हैं। display
जबकि [hidden]
IE10 द्वारा मूल रूप से समर्थित नहीं है, हमारे CSS में स्पष्ट घोषणा उस समस्या के आसपास हो जाती है।
<input type="text" hidden>
jQuery की असंगति
[hidden]
$(...).hide()
jQuery और $(...).show()
विधियों के साथ संगत नहीं है । इसलिए, हम वर्तमान में तत्वों [hidden]
के प्रबंधन के लिए अन्य तकनीकों का विशेष रूप से समर्थन नहीं करते हैं।display
किसी तत्व की दृश्यता को केवल टॉगल करने के लिए, जिसका अर्थ display
है कि इसे संशोधित नहीं किया गया है और तत्व अभी भी दस्तावेज़ के प्रवाह को प्रभावित कर सकता है, इसके बजाय वर्ग का उपयोग करें ।.invisible