रिबूट करू

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

इस पेज पर

दृष्टिकोण

रिबूट सामान्यीकरण पर आधारित छै, केवल तत्व चयनकर्ता के उपयोग करी क॑ कुछ राय वाला शैली के साथ बहुत सारा एचटीएमएल तत्व प्रदान करै छै. अतिरिक्त स्टाइलिंग केवल क्लास के साथ ही करलऽ जाय छै । उदाहरण क लेल, हम <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. इ सब बंडल मे स्तर सीएसएस चर जोड़य :rootछै, चाहे ओय बंडल मे ओकरा मे सं कतेक कें उपयोग कैल गेल होय. अंततः बूटस्ट्रैप 5 समय के साथ अधिक CSS चर जोड़ा देखना जारी रखतय , ताकि हमेशा Sass क॑ पुनः संकलित करै के जरूरत के बिना अधिक वास्तविक समय अनुकूलन प्रदान करलऽ जाय सक॑ । हमरऽ दृष्टिकोण छै कि अपनऽ स्रोत Sass चर क॑ ल॑ क॑ ओकरा CSS चर म॑ बदललऽ जाय । एहि तरहें, भले ही अहाँ CSS चर के प्रयोग नै करब, मुदा अहाँक पास Sass के सब शक्ति अछि । ई एखनहु प्रगति पर अछि आओर एकरा पूरा तरह सं लागू करय मे समय लागत.

उदाहरण क लेल, :rootआम <body>शैली क लेल इ CSS चर पर विचार करू:

  @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एकरऽ रूप अलग-अलग होतै, ई ब्राउज़र/प्लेटफॉर्म केरऽ मूल इमोजी फॉन्ट म॑ इस्तेमाल करलऽ गेलऽ शैली के आधार प॑ होतै, आरू ओकरा कोनो भी CSS शैली स॑ प्रभावित नै होतै ।

इ पूरा बूटस्ट्रैप मे वैश्विक स्तर 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>`	ज ४। बूटस्ट्रैप हेडिंग
`<h5></h5>`	ज5। बूटस्ट्रैप हेडिंग
`<h6></h6>`	ज6। बूटस्ट्रैप हेडिंग

क्षैतिज नियम

<hr>तत्व के सरल बना देल गेल अछि । ब्राउज़र डिफ़ॉल्ट के समान, <hr>s के माध्यम स॑ स्टाइल करलऽ जाय छै border-top, एक डिफ़ॉल्ट छै opacity: .25, आरू स्वचालित रूप स॑ ओकरऽ border-colorvia विरासत म॑ मिलै छै 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 = एम एक्स + ख

एचटीएमएल

<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>

तालिकाएँ

तालिकाक कें शैली <caption>s कें लेल कनि समायोजित कैल गेल छै, सीमाक कें ढहय छै, आ 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 द्वारा संबोधित कएल गेल अछि, मुदा Reboot हुनकर marginआओर सेट करैत अछि line-height: inherit, सेहो.
<textarea>s क॑ केवल लंबवत रूप स॑ आकार बदलै योग्य होय के लेलऽ संशोधित करलऽ जाय छै जैसनऽ कि क्षैतिज आकार बदलना अक्सर पृष्ठ लेआउट क॑ “तोड़” दै छै ।
<button>s आ <input>बटन तत्वक बीच cursor: pointerजखन :not(:disabled).

ई परिवर्तन, आओर बहुत किछु, नीचाँ देखाओल गेल अछि ।

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

उदाहरण इनपुट

उदाहरण ईमेल

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

उदाहरण url

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

उदाहरण खोज

उदाहरण सीमा

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

उदाहरण चुनें

एहि चेकबॉक्सकेँ चेक करू

विकल्प एक ई आ ओ अछि विकल्प दू किछु आओर अछि जे एहि फैंसी फॉर्म कंट्रोल के रैपिंग के प्रदर्शन करय लेल सेहो सुपर लंबा अछि. विकल्प तीन अक्षम अछि

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

उदाहरण तिथि

उदाहरण समय

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

उदाहरण तिथिसमय-स्थानीय

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

उदाहरण मास

उदाहरण रंग

उदाहरण आउटपुट १०० के

तिथि एवं रंग इनपुट समर्थन

ध्यान राखू तारीख इनपुट सब ब्राउज़र अर्थात सफारी द्वारा पूर्ण रूप सं समर्थित नहि अछि.

बटन पर सूचक

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>

jQuery असंगतता

[hidden]$(...).hide()jQuery's आओर $(...).show()विधि क संग संगत नहि अछि . अतः, हम वर्तमान में तत्वों के [hidden]प्रबंधन के लिए अन्य तकनीकों के ऊपर विशेष रूप से समर्थन नहीं करते हैं |display

केवल कोनो तत्व केरऽ दृश्यता क॑ टॉगल करै लेली, मतलब ओकरऽ displayसंशोधित नै करलऽ गेलऽ छै आरू तत्व अभी भी दस्तावेज केरऽ प्रवाह क॑ प्रभावित करी सकै छै, एकरऽ बदला म॑ .invisibleक्लास केरऽ उपयोग करलऽ जाय ।

रिबूट करू

दृष्टिकोण

सीएसएस चर

पृष्ठ पूर्वनिर्धारित

देशी फॉन्ट ढेर

शीर्षक एवं अनुच्छेद

क्षैतिज नियम

सूची बनाइए

इनलाइन कोड

कोड ब्लॉक

चर

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

नमूना आउटपुट

तालिकाएँ

रूप

तिथि एवं रंग इनपुट समर्थन

बटन पर सूचक

विविध तत्व

ठिकाना

ब्लॉककोट

इनलाइन तत्व

सार

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

jQuery असंगतता

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