रिबूट कइल जाव

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

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

पहुॅंंच

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

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

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

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

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

v5.1.1 के साथ, हमनी के अपना @importसभ CSS बंडल ( bootstrap.css, bootstrap-reboot.css, आ bootstrap-grid.css) में शामिल करे खातिर आपन जरूरी s के मानकीकरण कइनी जा _root.scss। एह :rootसे सभ बंडल सभ में लेवल CSS चर जोड़ल जाला, चाहे ओह बंडल में इनहन में से केतना के इस्तेमाल होखे। अंततः बूटस्ट्रैप 5 में समय के साथ अउरी CSS चर सभ के जोड़ल देखल जारी रही, ताकि हमेशा Sass के फिर से संकलित करे के जरूरत के बिना अउरी रियल-टाइम कस्टमाइजेशन उपलब्ध करावल जा सके। हमनी के तरीका बा कि हमनी के स्रोत सास चर के लेके ओकरा के सीएसएस चर में बदलल जाव. एह तरह से भले रउरा सीएसएस चर के इस्तेमाल ना करीं बाकिर रउरा लगे सास के सगरी पावर बा. ई अबहीं ले चलत बा आ एकरा के पूरा तरह से लागू करे में समय लागी.

उदाहरण खातिर, आम शैली :rootसभ खातिर एह CSS चर सभ पर बिचार करीं:<body>

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

व्यवहार में, तब ओह चर सभ के रिबूट में अइसन लागू कइल जाला जइसे कि:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

पन्ना डिफ़ॉल्ट हो जाला

<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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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 के बा। बूटस्ट्रैप हेडिंग के बा

क्षैतिज नियम के बा

<hr>तत्व के सरल बनावल गइल बा । ब्राउजर डिफ़ॉल्ट के समान, <hr>s के स्टाइल कइल जाला via border-top, डिफ़ॉल्ट opacity: .25होला , आ स्वचालित रूप से इनहन border-colorके via विरासत में मिले ला color, जवना में जब colorपैरेंट के माध्यम से सेट कइल जाला तब भी सामिल बा। इनहन के टेक्स्ट, बॉर्डर, आ ओपसिटी यूटिलिटी सभ के साथ संशोधित कइल जा सके ला।

एचटीएमएल के बा

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

सूची दिहल गइल बा

सभ सूची— <ul>, <ol>, आ <dl>—अपना के margin-topहटा दिहल गइल बा आ एगो margin-bottom: 1rem. नेस्टेड लिस्ट में कवनो margin-bottom. हमनी के padding-leftऑन <ul>अवुरी <ol>तत्व के भी रीसेट कईले बानी।

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

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

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

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

एचटीएमएल के बा

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</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

रिबूट कइल जाव

पहुॅंंच

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

पन्ना डिफ़ॉल्ट हो जाला

देशी फॉन्ट के ढेर बा

शीर्षक आ पैराग्राफ के बारे में बतावल गइल बा

क्षैतिज नियम के बा

सूची दिहल गइल बा

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

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

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

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

नमूना आउटपुट के बा

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

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

तारीख & रंग इनपुट समर्थन बा

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

विविध तत्वन के बा

पता

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

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

सारांश

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

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

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