in English

रिबूट कइल जाव

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

बटन पर पॉइंटर्स के बारे में बतावल गइल बा

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] पर दिहल गइल बा

Blockquote

The default margin on blockquotes is 1em 40px, so we reset that to 0 0 1rem for something more consistent with other elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Inline elements

The <abbr> element receives basic styling to make it stand out amongst paragraph text.

Nulla attr vitae elit libero, a pharetra augue.

Summary

The default cursor on summary is text, so we reset that to pointer to convey that the element can be interacted with by clicking on it.

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 [hidden] attribute

HTML5 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden. While [hidden] isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

<input type="text" hidden>
jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.