रीबूट

रीबूट, एक फ़ाइल में तत्व-विशिष्ट सीएसएस परिवर्तन का एक संग्रह, किकस्टार्ट बूटस्ट्रैप को एक सुरुचिपूर्ण, सुसंगत, और सरल आधार रेखा प्रदान करने के लिए।

दृष्टिकोण

रीबूट सामान्यीकरण पर बनाता है, केवल तत्व चयनकर्ताओं का उपयोग करके कुछ हद तक राय वाली शैलियों के साथ कई HTML तत्व प्रदान करता है। अतिरिक्त स्टाइलिंग केवल कक्षाओं के साथ की जाती है। उदाहरण के लिए, हम <table>सरल आधार रेखा के लिए कुछ शैलियों को रीबूट करते हैं और बाद में .table, .table-bordered, और बहुत कुछ प्रदान करते हैं।

रीबूट में क्या ओवरराइड करना है, यह चुनने के लिए हमारे दिशानिर्देश और कारण यहां दिए गए हैं:

स्केलेबल कंपोनेंट स्पेसिंग के लिए s के remबजाय s का उपयोग करने के लिए कुछ ब्राउज़र डिफ़ॉल्ट मानों को अपडेट करें ।em
बचें margin-top। अप्रत्याशित परिणाम देने वाले लंबवत मार्जिन गिर सकते हैं। इससे भी महत्वपूर्ण बात यह है कि एक ही दिशा marginएक सरल मानसिक मॉडल है।
डिवाइस के आकार में आसान स्केलिंग के लिए, ब्लॉक तत्वों को rems के लिए margins का उपयोग करना चाहिए।
जब भी संभव हो 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का उपयोग किया जाता है ।remmargin-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).

ये परिवर्तन, और बहुत कुछ, नीचे प्रदर्शित किए गए हैं।

उदाहरण किंवदंती

उदाहरण इनपुट

उदाहरण चुनें

इस चेकबॉक्स को चेक करें

विकल्प एक यह और वह है विकल्प दो कुछ और है जो इन फैंसी फॉर्म नियंत्रणों के रैपिंग को प्रदर्शित करने के लिए भी बहुत लंबा है। विकल्प तीन अक्षम है

उदाहरण पाठ क्षेत्र

उदाहरण तिथि

उदाहरण समय

उदाहरण आउटपुट 100

बटन पर संकेत

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