in English

रिबूट करू

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

इस पेज पर

दृष्टिकोण

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

रिबूट मे की ओवरराइड करबाक चाही से चुनबाक हमर दिशानिर्देश आओर कारण एतय देल गेल अछि:

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

सीएसएस चर

v5.1.1 मे जोडल गेल अछि

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

इ पूरा बूटस्ट्रैप मे वैश्विक रूप सं आ स्वचालित रूप सं विरासत font-familyमे मिलय वाला पर लागू कैल जायत छै . <body>ग्लोबल स्विच करबाक लेल font-family, अपडेट करू $font-family-baseआओर बूटस्ट्रैप केँ पुनः संकलित करू.

सीएसएस चर

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

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

  @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>`	ज ४। बूटस्ट्रैप हेडिंग
`<h5></h5>`	ज5। बूटस्ट्रैप हेडिंग
`<h6></h6>`	ज6। बूटस्ट्रैप हेडिंग

सूची बनाइए

सब सूची— <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 संग अबैत अछि .

ई एकटा उदाहरण तालिका अछि, आ ई सामग्रीक वर्णन करबाक लेल एकर कैप्शन अछि |
तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक
तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका
तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका
तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका

रूप

सरल आधार शैली क लेल विभिन्न फॉर्म तत्व कए रिबूट कैल गेल अछि । एहि मे किछु उल्लेखनीय परिवर्तन देल गेल अछि:

<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]`विशेषता