रिबूट कइल जाव

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

पहुॅंंच

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

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

स्केल करे लायक घटक स्पेसिंग खातिर rems के बजाय 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हटा दिहल गइल बा आ एगो margin-bottom: 1rem. नेस्टेड लिस्ट में कवनो margin-bottom.

सभ लिस्ट सभ के टॉप मार्जिन हटा दिहल गइल बा
आ ओह लोग के निचला हाशिया सामान्य हो गइल
नेस्टेड लिस्ट सभ के नीचे के मार्जिन ना होला
- एह तरह से ओह लोग के रूप अधिका समता होला
- खासकर जब ओकरा बाद अउरी सूची आइटम आवेला
बायां पैडिंग के भी रीसेट कईल गईल बा

इहाँ एगो क्रमबद्ध सूची बा
कुछ सूची के आइटम के साथे
एकर ओवरऑल लुक एके बा
जइसे कि पिछला अनऑर्डर लिस्ट रहे

सरल स्टाइलिंग, साफ पदानुक्रम, आ बेहतर स्पेसिंग खातिर, बिबरन लिस्ट सभ में margins अपडेट कइल गइल बा। <dd>s के रीसेट करीं margin-leftआ 0जोड़ दीं margin-bottom: .5rem. <dt>s के बोल्ड कइल गइल बा .

विवरण के सूची दिहल गइल बा: शब्दन के परिभाषित करे खातिर एगो विवरण सूची एकदम सही बा।
मियाद: शब्द खातिर परिभाषा दिहल गइल बा.; एही शब्द खातिर एगो दूसर परिभाषा।
एगो अउरी शब्द बा: एह दोसरा शब्द खातिर परिभाषा दिहल गइल बा.

पहिले से फॉर्मेट कइल गइल पाठ

<pre>तत्व के ओकर हटावे खातिर रीसेट कइल जाला आ ओकरा खातिर इकाई के margin-topइस्तेमाल कइल जाला .remmargin-bottom

.उदाहरण-तत्व { 1 बा।
  हाशिया-नीचे: 1रेम के बा;
} के बा।

टेबल के बारे में बतावल गइल बा

टेबल सभ के स्टाइल s के हिसाब से तनी समायोजित कइल जाला <caption>, सीमा सभ के ढह दिहल जाला, आ पूरा में सुसंगत सुनिश्चित कइल text-alignजाला। सीमा, पैडिंग, आ अउरी बहुत कुछ खातिर अतिरिक्त बदलाव क्लास के.table साथे आवेला .

ई एगो उदाहरण तालिका हवे, आ ई सामग्री के वर्णन करे खातिर एकर कैप्शन हवे।
तालिका के हेडिंग बा	तालिका के हेडिंग बा	तालिका के हेडिंग बा	तालिका के हेडिंग बा
टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा
टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा
टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा	टेबल सेल के बा

फार्म के रूप में बा

सरल बेस स्टाइल खातिर बिबिध फॉर्म तत्व सभ के रिबूट कइल गइल बा। इहाँ कुछ सभसे उल्लेखनीय बदलाव दिहल गइल बा:

<fieldset>s में कौनों सीमा, पैडिंग, या मार्जिन ना होला एह से इनहन के आसानी से अलग-अलग इनपुट भा इनपुट सभ के समूह सभ खातिर रैपर के रूप में इस्तेमाल कइल जा सके ला।
<legend>s, फील्डसेट नियर, के भी रिस्टाइल कइल गइल बा ताकि एकरा के सॉर्ट के हेडिंग के रूप में देखावल जा सके।
<label>s के लागू display: inline-blockकरे के अनुमति देवे खातिर सेट कइल गइल बा margin।
<input>s, <select>s, <textarea>s, आ <button>s के ज्यादातर Normalize द्वारा संबोधित कइल जाला, बाकी रिबूट इनहन के हटा देला 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] पर दिहल गइल बा

ब्लॉककोट कइल जाव

marginblockquotes पर डिफ़ॉल्ट बा 1em 40px, एह से हमनी के ओह के रीसेट करेनी जा 0 0 1remकुछ अउरी तत्वन के साथ अधिका सुसंगत खातिर।

एगो सुप्रसिद्ध उद्धरण, जवन एगो ब्लॉककोट तत्व में होला।

स्रोत शीर्षक में केहू मशहूर बा

इनलाइन तत्वन के बारे में बतावल गइल बा

तत्व के <abbr>पैराग्राफ टेक्स्ट के बीच अलगा करे खातिर बेसिक स्टाइलिंग मिलेला।

नुल्ला अट्टर विटाए एलिट लिबेरो, एगो फारेत्रा औग।

सारांश

cursorसारांश पर डिफ़ॉल्ट बा text, एह से हमनी के ओह के रीसेट करेनी जा ताकि pointerई बतावल जा सके कि तत्व पर क्लिक क के ओकरा से बातचीत कइल जा सकेला।

कुछ विवरण दिहल गइल बा

विवरण के बारे में अधिक जानकारी दिहल गईल बा।

एकरा से भी जादा विस्तार से जानकारी दिहल गईल बा

विवरण के बारे में अवुरी जादे जानकारी दिहल बा।

एचटीएमएल 5 `[hidden]`के विशेषता बा

HTML5 में एगो नया ग्लोबल एट्रिब्यूट जोड़ल गइल बा जेकर नाँव[hidden]display: none बा , जेकरा के डिफ़ॉल्ट रूप से स्टाइल कइल गइल बा। PureCSS से एगो विचार उधार लेके , हमनी के गलती से ओवरराइड होखे से [hidden] { display: none !important; }रोके में मदद करे खातिर बना के एह डिफ़ॉल्ट पर सुधार करेनी जा। displayजबकि [hidden]IE10 द्वारा नेटिव रूप से समर्थित नइखे, हमनी के CSS में स्पष्ट घोषणा ओह समस्या से दूर हो जाला।

<input type="text" hidden>

जेक्वेरी के असंगतता के बारे में बतावल गइल बा

[hidden]jQuery के $(...).hide()आ $(...).show()विधियन के साथ संगत नइखे। एह से, हमनी के वर्तमान में तत्वन के [hidden]प्रबंधन खातिर अन्य तकनीक के ऊपर विशेष रूप से समर्थन नइखीं करत।display

खाली कौनों तत्व के दृश्यता के टॉगल करे खातिर, मने कि एकर displayसंशोधन ना कइल गइल बा आ तत्व अबहियों दस्तावेज के प्रवाह के प्रभावित क सके ला, एकरे बजाय क्लास के इस्तेमाल करीं ।.invisible