रीबूट

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

इस पृष्ठ पर

दृष्टिकोण

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

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

स्केलेबल कंपोनेंट स्पेसिंग के लिए s के remबजाय 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। यह सभी बंडलों में स्तर CSS चर जोड़ता :rootहै, भले ही उनमें से कितने उस बंडल में उपयोग किए गए हों। अंततः बूटस्ट्रैप 5 में समय के साथ और अधिक सीएसएस चर जोड़े जाते रहेंगे , ताकि सैस को हमेशा पुन: संकलित करने की आवश्यकता के बिना अधिक वास्तविक समय अनुकूलन प्रदान किया जा सके। हमारा दृष्टिकोण हमारे स्रोत Sass चर को लेना और उन्हें CSS चर में बदलना है। इस तरह, भले ही आप 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 को के माध्यम से स्टाइल border-topकिया जाता है, एक डिफ़ॉल्ट होता है opacity: .25, और स्वचालित रूप से उनके border-colorमाध्यम से विरासत में मिलता है 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हटा दी गई हैं और a margin-bottom: 1rem. नेस्टेड सूचियों में नहीं है margin-bottom। हमने padding-leftचालू <ul>और <ol>तत्वों को भी रीसेट कर दिया है।

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

यहाँ एक आदेशित सूची है
कुछ सूची आइटम के साथ
इसका समग्र रूप समान है
पिछली अनियंत्रित सूची के रूप में

सरल स्टाइलिंग, स्पष्ट पदानुक्रम और बेहतर रिक्ति के लिए, विवरण सूचियों में अद्यतन किए गए हैं margin। <dd>पर रीसेट margin-leftकरें 0और जोड़ें margin-bottom: .5rem। <dt>s बोल्ड हैं ।

विवरण सूचियाँ: एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
शर्त: अवधि के लिए परिभाषा।; एक ही शब्द के लिए दूसरी परिभाषा।
एक और शब्द: इस अन्य शब्द की परिभाषा।

इनलाइन कोड

कोड के इनलाइन स्निपेट को <code>. HTML कोण कोष्ठक से बचना सुनिश्चित करें।

उदाहरण के लिए, <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>टैग का उपयोग करें।

वाई = एम एक्स + बी

एचटीएमएल

<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 को ज्यादातर नॉर्मलाइज़ द्वारा संबोधित किया जाता है, लेकिन रिबूट उनके marginऔर सेट line-height: inheritको भी हटा देता है।
<textarea>s को केवल लंबवत रूप से आकार बदलने योग्य के रूप में संशोधित किया जाता है क्योंकि क्षैतिज आकार बदलने से अक्सर "ब्रेक" पृष्ठ लेआउट होता है।
<button>s और <input>बटन तत्वों में cursor: pointerकब :not(:disabled).

ये परिवर्तन, और बहुत कुछ, नीचे प्रदर्शित किए गए हैं।

उदाहरण किंवदंती

उदाहरण इनपुट

उदाहरण ईमेल

उदाहरण टेलीफोन

उदाहरण url

उदाहरण संख्या

उदाहरण खोज

उदाहरण श्रेणी

उदाहरण फ़ाइल इनपुट

उदाहरण चुनें

इस चेकबॉक्स को चेक करें

विकल्प एक यह और वह है विकल्प दो कुछ और है जो इन फैंसी फॉर्म नियंत्रणों के रैपिंग को प्रदर्शित करने के लिए भी बहुत लंबा है। विकल्प तीन अक्षम है

उदाहरण पाठ क्षेत्र

उदाहरण तिथि

उदाहरण समय

उदाहरण पासवर्ड

उदाहरण डेटाटाइम-स्थानीय

उदाहरण सप्ताह

उदाहरण माह

उदाहरण रंग

उदाहरण आउटपुट 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]

ब्लॉककोट

marginब्लॉकक्वाट्स पर डिफ़ॉल्ट है, इसलिए हम इसे अन्य तत्वों के साथ अधिक संगत कुछ के लिए 1em 40pxरीसेट करते हैं।0 0 1rem

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

स्रोत शीर्षक में प्रसिद्ध कोई व्यक्ति

इनलाइन तत्व

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

HTML संक्षिप्त नाम तत्व ।

सारांश

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

कुछ विवरण

विवरण के बारे में अधिक जानकारी।

और भी विवरण

विवरण के बारे में और भी अधिक विवरण यहां दिए गए हैं।

HTML5 `[hidden]`विशेषता

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

<input type="text" hidden>

jQuery की असंगति

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

किसी तत्व की दृश्यता को केवल टॉगल करने के लिए, जिसका अर्थ displayहै कि इसे संशोधित नहीं किया गया है और तत्व अभी भी दस्तावेज़ के प्रवाह को प्रभावित कर सकता है, इसके बजाय वर्ग का उपयोग करें ।.invisible

रीबूट

दृष्टिकोण

सीएसएस चर

पृष्ठ डिफ़ॉल्ट

मूल फ़ॉन्ट स्टैक

शीर्षक और पैराग्राफ

क्षैतिज नियम

सूचियों

इनलाइन कोड

कोड ब्लॉक

चर

उपयोगकर्ता का निवेश

नमूना आउटपुट

टेबल

फार्म

दिनांक और रंग इनपुट समर्थन

बटन पर संकेत

विविध तत्व

पता

ब्लॉककोट

इनलाइन तत्व

सारांश

HTML5 [hidden]विशेषता

jQuery की असंगति

HTML5 `[hidden]`विशेषता