रीबूट
रीबूट, एक फ़ाइल में तत्व-विशिष्ट सीएसएस परिवर्तन का एक संग्रह, किकस्टार्ट बूटस्ट्रैप को एक सुरुचिपूर्ण, सुसंगत, और सरल आधार रेखा प्रदान करने के लिए।
दृष्टिकोण
रीबूट सामान्यीकरण पर बनाता है, केवल तत्व चयनकर्ताओं का उपयोग करके कुछ हद तक राय वाली शैलियों के साथ कई HTML तत्व प्रदान करता है। अतिरिक्त स्टाइलिंग केवल कक्षाओं के साथ की जाती है। उदाहरण के लिए, हम <table>
सरल आधार रेखा के लिए कुछ शैलियों को रीबूट करते हैं और बाद में .table
, .table-bordered
, और बहुत कुछ प्रदान करते हैं।
रीबूट में क्या ओवरराइड करना है, यह चुनने के लिए हमारे दिशानिर्देश और कारण यहां दिए गए हैं:
- स्केलेबल कंपोनेंट स्पेसिंग के लिए s के
rem
बजाय s का उपयोग करने के लिए कुछ ब्राउज़र डिफ़ॉल्ट मानों को अपडेट करें ।em
- बचें
margin-top
। अप्रत्याशित परिणाम देने वाले लंबवत मार्जिन गिर सकते हैं। इससे भी महत्वपूर्ण बात यह है कि एक ही दिशाmargin
एक सरल मानसिक मॉडल है। - डिवाइस के आकार में आसान स्केलिंग के लिए, ब्लॉक तत्वों को
rem
s के लिएmargin
s का उपयोग करना चाहिए। - जब भी संभव हो
font
, -संबंधित संपत्तियों की घोषणाओं को न्यूनतम रखें ।inherit
सीएसएस चर
v5.1.1 . में जोड़ा गया
V5.1.1 के साथ, हमने अपने @import
सभी CSS बंडलों में अपने आवश्यक s को मानकीकृत किया (सहित bootstrap.css
, bootstrap-reboot.css
, और bootstrap-grid.css
शामिल करने के लिए _root.scss
। यह सभी बंडलों में स्तर CSS चर जोड़ता :root
है, भले ही उनमें से कितने उस बंडल में उपयोग किए गए हों। अंततः बूटस्ट्रैप 5 जारी रहेगा समय के साथ जोड़े गए अधिक CSS चर देखें।
पृष्ठ डिफ़ॉल्ट
बेहतर पृष्ठ-व्यापी डिफ़ॉल्ट प्रदान करने के लिए <html>
और <body>
तत्वों को अ���्यतन किया जाता है। अधिक विशेष रूप से:
- विश्व
box-sizing
स्तर पर प्रत्येक तत्व पर सेट किया गया है—जिसमें*::before
और*::after
, सेborder-box
. यह सुनिश्चित करता है कि पैडिंग या सीमा के कारण तत्व की घोषित चौड़ाई कभी भी पार नहीं हुई है।- पर कोई आधार
font-size
घोषित नहीं किया गया है<html>
, लेकिन16px
माना जाता है (ब्राउज़र डिफ़ॉल्ट)। उपयोगकर्ता की प्राथमिकताओं का सम्मान करते हुए और अधिक सुलभ दृष्टिकोण सुनिश्चित करते हुए मीडिया प्रश्नों के माध्यम से आसान उत्तरदायी टाइप-स्केलिंगfont-size: 1rem
के लिए लागू किया जाता है । इस ब्राउज़र डिफ़ॉल्ट को वेरिएबल<body>
को संशोधित करके ओवरराइड किया जा सकता है ।$font-size-root
- पर कोई आधार
<body>
वैश्विकfont-family
,font-weight
,line-height
, और भी सेट करता हैcolor
। यह बाद में कुछ प्रपत्र तत्वों द्वारा फ़ॉन्ट विसंगतियों को रोकने के लिए विरासत में मिला है।- सुरक्षा के लिए, के
<body>
पास घोषितbackground-color
, डिफ़ॉल्ट है#fff
.
मूल फ़ॉन्ट स्टैक
बूटस्ट्रैप प्रत्येक डिवाइस और ओएस पर इष्टतम टेक्स्ट प्रतिपादन के लिए "मूल फ़ॉन्ट स्टैक" या "सिस्टम फ़ॉन्ट स्टैक" का उपयोग करता है। ये सिस्टम फोंट विशेष रूप से आज के उपकरणों को ध्यान में रखते हुए डिजाइन किए गए हैं, स्क्रीन पर बेहतर प्रतिपादन, परिवर्तनीय फ़ॉन्ट समर्थन, और बहुत कुछ के साथ। इस स्मैशिंग मैगज़ीन लेख में मूल फ़ॉन्ट स्टैक के बारे में और पढ़ें ।
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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
सीएसएस चर
जैसे-जैसे बूटस्ट्रैप 5 परिपक्व होता जा रहा है, सीएसएस चर के साथ अधिक से अधिक शैलियों का निर्माण किया जाएगा, जो कि सास को हमेशा पुन: संकलित करने की आवश्यकता के बिना अधिक वास्तविक समय अनुकूलन प्रदान करने के साधन के रूप में होगा। हमारा दृष्टिकोण हमारे स्रोत Sass चर को लेना और उन्हें CSS चर में बदलना है। इस तरह, भले ही आप CSS वेरिएबल का उपयोग न करें, फिर भी आपके पास Sass की सारी शक्ति है। यह अभी भी प्रगति पर है और पूरी तरह से लागू होने में समय लगेगा।
उदाहरण के लिए, सामान्य शैलियों :root
के लिए इन CSS चरों पर विचार करें:<body>
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
व्यवहार में, उन चरों को तब रिबूट में लागू किया जाता है जैसे:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
जो आपको अपनी पसंद के अनुसार रीयल-टाइम अनुकूलन करने की अनुमति देता है:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
शीर्षक और पैराग्राफ
सभी शीर्षक तत्व—जैसे, <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
। हमने padding-left
चालू <ul>
और <ol>
तत्वों को भी रीसेट कर दिया है।
- सभी सूचियों का शीर्ष मार्जिन हटा दिया गया है
- और उनका निचला मार्जिन सामान्य हो गया
- नेस्टेड सूचियों का कोई निचला मार्जिन नहीं है
- इस तरह उनके पास और भी अधिक उपस्थिति है
- विशेष रूप से जब अधिक सूची आइटम का पालन किया जाता है
- लेफ्ट पैडिंग को भी रीसेट कर दिया गया है
- यहाँ एक आदेशित सूची है
- कुछ सूची आइटम के साथ
- इसका समग्र रूप समान है
- पिछली अनियंत्रित सूची के रूप में
सरल स्टाइलिंग, स्पष्ट पदानुक्रम और बेहतर रिक्ति के लिए, विवरण सूचियों में अद्यतन किए गए हैं margin
। <dd>
पर रीसेट margin-left
करें 0
और जोड़ें margin-bottom: .5rem
। <dt>
s बोल्ड हैं ।
- विवरण सूचियाँ
- एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
- शर्त
- अवधि के लिए परिभाषा।
- एक ही शब्द के लिए दूसरी परिभाषा।
- एक और शब्द
- इस अन्य शब्द की परिभाषा।
इनलाइन कोड
कोड के इनलाइन स्निपेट को <code>
. HTML कोण कोष्ठक से बचना सुनिश्चित करें।
<section>
इनलाइन के रूप में लपेटा जाना चाहिए।
For example, <code><section></code> should be wrapped as inline.
कोड ब्लॉक
<pre>
कोड की कई पंक्तियों के लिए s का उपयोग करें । एक बार फिर, उचित प्रतिपादन के लिए कोड में किसी भी कोण कोष्ठक से बचना सुनिश्चित करें। <pre>
तत्व को हटाने के लिए इसे रीसेट किया जाता है और इसके लिए इकाइयों margin-top
का उपयोग किया जाता है ।rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
चर
वेरिएबल को इंगित करने के लिए <var>
टैग का उपयोग करें।
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
उपयोगकर्ता का निवेश
इनपुट को इंगित करने के लिए उपयोग करें जो <kbd>
आमतौर पर कीबोर्ड के माध्यम से दर्ज किया जाता है।
सेटिंग संपादित करने के लिए, दबाएं ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
नमूना आउटपुट
किसी प्रोग्राम से नमूना आउटपुट इंगित करने के लिए <samp>
टैग का उपयोग करें।
<samp>This text is meant to be treated as sample output from a computer program.</samp>
टेबल
टेबल्स को स्टाइल 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
<input type="text" hidden>
jQuery की असंगति
[hidden]
$(...).hide()
jQuery और $(...).show()
विधियों के साथ संगत नहीं है । इसलिए, हम वर्तमान में तत्वों [hidden]
के प्रबंधन के लिए अन्य तकनीकों का विशेष रूप से समर्थन नहीं करते हैं।display
किसी तत्व की दृश्यता को केवल टॉगल करने के लिए, जिसका अर्थ display
है कि इसे संशोधित नहीं किया गया है और तत्व अभी भी दस्तावेज़ के प्रवाह को प्रभावित कर सकता है, इसके बजाय वर्ग का उपयोग करें ।.invisible