मुख्य सामग्री पर जाईं डॉक्स नेविगेशन पर जाईं
in English

रिबूट कइल जाव

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

एह पन्ना पर दिहल गइल बा

पहुॅंंच

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

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

  • स्केल करे लायक घटक स्पेसिंग खातिर rems के बजाय s के इस्तेमाल करे खातिर कुछ ब्राउजर डिफ़ॉल्ट मान के अपडेट करीं ।em
  • परहेज margin-topकरे के बा . ऊर्ध्वाधर मार्जिन ढह सकेला जवना से अप्रत्याशित परिणाम मिल सकेला. हालांकि एकरा से भी महत्वपूर्ण बात इ बा कि के एकल दिशा marginएगो सरल मानसिक मॉडल बा।
  • डिवाइस साइज सभ में आसान स्केलिंग खातिर, ब्लॉक तत्व सभ के rems खातिर margins के इस्तेमाल करे के चाहीं।
  • -संबंधित गुण सभ के घोषणा fontसभ के न्यूनतम रखीं, inheritजब भी संभव होखे एकर इस्तेमाल करीं।

सीएसएस चर के बारे में बतावल गइल बा

v5.1.1 में जोड़ल गइल बा

v5.1.1 के साथ, हमनी के अपना @importसभ CSS बंडल (सहित bootstrap.css, bootstrap-reboot.css, आ bootstrap-grid.cssशामिल करे खातिर ) में आपन जरूरी s के मानकीकरण कइनी जा _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 परिपक्व होत जाई, अधिका से अधिका स्टाइल सभ के निर्माण CSS चर सभ के साथ होखी जेवना से अधिका रियल-टाइम कस्टमाइजेशन उपलब्ध करावल जा सके ला आ एकरा खातिर हमेशा सास के फिर से संकलित करे के जरूरत ना पड़ी। हमनी के तरीका बा कि हमनी के स्रोत सास चर के लेके ओकरा के सीएसएस चर में बदलल जाव. एह तरह से भले रउरा सीएसएस चर के इस्तेमाल ना करीं बाकिर रउरा लगे सास के सगरी पावर बा. ई अबहीं ले चलत बा आ एकरा के पूरा तरह से लागू करे में समय लागी.

उदाहरण खातिर, आम शैली :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हटा दिहल गइल बा आ एगो margin-bottom: 1rem. नेस्टेड लिस्ट में कवनो margin-bottom. हमनी के padding-leftऑन <ul>अवुरी <ol>तत्व के भी रीसेट कईले बानी।

  • सभ लिस्ट सभ के टॉप मार्जिन हटा दिहल गइल बा
  • आ ओह लोग के निचला हाशिया सामान्य हो गइल
  • नेस्टेड लिस्ट सभ के नीचे के मार्जिन ना होला
    • एह तरह से ओह लोग के रूप अधिका समता होला
    • खासकर जब ओकरा बाद अउरी सूची आइटम आवेला
  • बायां पैडिंग के भी रीसेट कईल गईल बा
  1. इहाँ एगो क्रमबद्ध सूची बा
  2. कुछ सूची के आइटम के साथे
  3. एकर ओवरऑल लुक एके बा
  4. जइसे कि पिछला अनऑर्डर लिस्ट रहे

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

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

इनलाइन कोड के बा

कोड के इनलाइन स्निपेट के के साथ लपेटीं <code>। एचटीएमएल एंगल ब्रैकेट से जरूर बचल जाव.

जइसे <section>कि इनलाइन के रूप में लपेटल जाव. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

कोड ब्लॉक हो जाला

<pre>कोड के कई लाइन खातिर s के प्रयोग करीं । एक बेर फेरु, सही रेंडरिंग खातिर कोड में कवनो एंगल ब्रैकेट से जरूर बच जाईं. <pre>तत्व के ओकर हटावे खातिर रीसेट कइल जाला आ ओकरा खातिर इकाई के margin-topइस्तेमाल कइल जाला .remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

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

चर के संकेत देवे खातिर <var>टैग के इस्तेमाल करीं।

y = m x + ख के बा 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

उपयोगकर्ता के इनपुट बा

इनपुट के इंगित करे खातिर के इस्तेमाल करीं जवन <kbd>आमतौर पर कीबोर्ड के माध्यम से दर्ज कइल जाला।

डाइरेक्टरी बदले खातिर टाइप करीं cdआ ओकरा बाद डाइरेक्टरी के नाम लिखीं.
सेटिंग संपादित करे खातिर, दबाईं 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 के ज्यादातर 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

<input type="text" hidden>
जेक्वेरी के असंगतता के बारे में बतावल गइल बा

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

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