Source

रिबूट कइल जाव

रिबूट, एकही फाइल में तत्व-विशिष्ट 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

ई पूरा बूटस्ट्रैप में वैश्विक स्तर 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.

  • लोरेम इप्सम डोलोर बइठल अमेट
  • कॉन्सेक्टेटर एडिपिसिंग एलिट के बा
  • मासा में पूर्णांक मोलेस्टी लोरेम के बा
  • प्रीटियम निस्ल एलिकेट में फैसिलिसिस के बारे में बतावल गइल बा
  • नुल्ला वोलुतपत एलिक्वाम वेलिट के बा
    • फेसेलस इअकुलिस नेके के नाम से जानल जाला
    • पुरुष सोडलेस अल्ट्रिसीज के बा
    • वेस्टिबुलम लाओरीत पोर्टिटोर सेम के बा
    • एसी ट्रिस्टिक लिबेरो वोलुटपट पर बा
  • फौसिबस पोर्टा लैकस फ्रिंगिला वेल के बा
  • एनियन बइठल अमेट एरात ननक
  • एगेट पोर्टिटोर लोरेम के बा
  1. लोरेम इप्सम डोलोर बइठल अमेट
  2. कॉन्सेक्टेटर एडिपिसिंग एलिट के बा
  3. मासा में पूर्णांक मोलेस्टी लोरेम के बा
  4. प्रीटियम निस्ल एलिकेट में फैसिलिसिस के बारे में बतावल गइल बा
  5. नुल्ला वोलुतपत एलिक्वाम वेलिट के बा
  6. फौसिबस पोर्टा लैकस फ्रिंगिला वेल के बा
  7. एनियन बइठल अमेट एरात ननक
  8. एगेट पोर्टिटोर लोरेम के बा

सरल स्टाइलिंग, साफ पदानुक्रम, आ बेहतर स्पेसिंग खातिर, बिबरन लिस्ट सभ में 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 के बा

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

पता

तत्व के <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