रिबूट करो

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

इस पेज पर

नजरिया

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

रिबूट च कीऽ ओवरराइड करना ऐ चुनने दे साढ़े दिशा-निर्देश ते कारण एह्दे च दित्ते गेदे न:

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

सीएसएस चर ऐ

v5.1.1 च जोड़ेआ गेआ ऐ

v5.1.1 कन्नै, अस अपने @importसारे 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;

ध्यान रक्खो जे कीजे फॉन्ट स्टैक च इमोजी फॉन्ट शामल न, इस करी मते सारे आम चिह् न/डिंगबैट यूनिकोड वर्ण बहु-रंगें पिक्टोग्राफ दे रूप च रेंडर कीते जाङन. ब्राउज़र/प्लेटफार्म दे मूल इमोजी फॉन्ट च इस्तेमाल कीती गेदी शैली दे आधार उप्पर, उंदी रूप-रंग बक्ख-बक्ख होग, ते उ’नेंगी कुसै बी CSS colorशैली कन्नै प्रभावित नेईं कीता जाग।

एह् पूरे बूटस्ट्रैप च ते स्वतः वैश्विक रूप कन्नै विरासत font-familyच लागू कीता जंदा ऐ . <body>ग्लोबल गी स्विच करने लेई font-family, बूटस्ट्रैप गी अपडेट करो $font-family-baseते दुबारा संकलित करो।

सीएसएस चर ऐ

जि’यां-जि’यां बूटस्ट्रैप 5 परिपक्व होंदा जा करदा ऐ, सीएसएस चर कन्नै मती शा मती शैलियां बनाईयां जाङन जेह् ड़ी इक साधन दे रूप च होर रियल-टाइम अनुकूलन प्रदान कीती जाह् ग, बगैर हमेशा सस्स गी दुबारा संकलित करने दी लोड़ दे। साढ़ा दृष्टिकोण ऐ जे साढ़े स्रोत सस्स चर गी लेइयै उनेंगी सीएसएस चर च बदलना ऐ। इस चाल्ली, जेकर तुस CSS चर दा इस्तेमाल नेईं करदे ओ तां बी तुंदे कोल Sass दी सारी शक्ति ऐ। एह् अजें बी जारी ऐ ते इसगी पूरी चाल्ली लागू करने च समां लगग।

मसाल आस्तै, :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>`	एच१ ऐ। बूटस्ट्रैप हेडिंग
`<h2></h2>`	ज २। बूटस्ट्रैप हेडिंग
`<h3></h3>`	ज ३। बूटस्ट्रैप हेडिंग
`<h4></h4>`	ह4 ऐ। बूटस्ट्रैप हेडिंग
`<h5></h5>`	ज ५। बूटस्ट्रैप हेडिंग
`<h6></h6>`	एच6 ऐ। बूटस्ट्रैप हेडिंग

लिस्टां करदा ऐ

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

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

इत्थें इक आर्डर कीती गेदी सूची ऐ
कुछ लिस्ट आइटम दे कन्नै
इसदा ओवरऑल लुक इक गै ऐ
पिछली अनऑर्डर सूची दे रूप च

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

विवरण सूची दी: शब्दें गी परिभाशित करने आस्तै इक विवरण सूची बिल्कुल सही ऐ ।
म्याद: शब्द दे वास्ते परिभाषा।; उसी शब्द दी इक दूई परिभाषा।
इक होर शब्द: इस दूजे शब्द दी परिभाषा।

इनलाइन कोड

कोड दे इनलाइन स्निपेटें गी <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>टैग दा इस्तेमाल करो।

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

<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>एस कन्नै थोड़ा समायोजित कीता जंदा ऐ, सीमाएं गी ढहना ऐ, ते text-alignपूरे च लगातार सुनिश्चित कीता जंदा ऐ। सीमाएं, पैडिंग, ते होर मते आस्तै अतिरिक्त बदलाव क्लास कन्नै औंदे.table न .

एह् इक उदाहरण तालिका ऐ, ते एह् सामग्री दा वर्णन करने आस्तै इसदा कैप्शन ऐ।
तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक
तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका
तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका
तालिका कोशिका	तालिका कोशिका	तालिका कोशिका	तालिका कोशिका

रूप दे

सरल आधार शैलियें आस्तै बक्ख-बक्ख रूप तत्वें गी रिबूट कीता गेआ ऐ। इत्थें किश सारें शा मते उल्लेखनीय बदलाव दित्ते गेदे न:

<fieldset>s च कोई सीमा, पैडिंग, जां मार्जिन नेईं ऐ इसलेई उ’नेंगी व्यक्तिगत इनपुटें जां इनपुटें दे समूहें आस्तै रैपर दे रूप च आसानी कन्नै इस्तेमाल कीता जाई सकदा ऐ।
<legend>s, फील्डसेटें दी तर्ज पर, गी बी इक किस्म दे हेडिंग दे रूप च प्रदर्शत करने आस्तै नमें सिरेआ स्टाइल कीता गेआ ऐ।
<label>एस लागू display: inline-blockकरने दी अनुमति देने लेई सेट कीते गेदे न margin।
<input>s, <select>s, <textarea>s, ते <button>s गी ज्यादातर Normalize द्वारा संबोधित कीता जंदा ऐ, पर Reboot उंदा हटांदा ऐ marginते सेट करदा ऐ line-height: inherit, बी.
<textarea>s गी सिर्फ लंबवत आकार बदलने आस्तै संशोधित कीता जंदा ऐ की जे क्षैतिज आकार बदलने कन्नै अक्सर पृष्ठ लेआउट गी "तोड़" दित्ता जंदा ऐ।
<button>एस ते <input>बटन तत्वें च cursor: pointerजदूं :not(:disabled).

एह् बदलाव, ते होर मते सारे, हेठ दित्ते गेदे न।

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

उदाहरण इनपुट

उदाहरण दे तौर पर ईमेल

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

उदाहरण दे तौर पर यूआरएल

उदाहरण नंबर

उदाहरन दी खोज

उदाहरण रेंज

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

उदाहरण चुनें

इस चेकबॉक्स गी चेक करो

विकल्प इक एह् ते ओह् ऐ विकल्प दो इक होर ऐ जेह् ड़ा बी सुपर लंबा ऐ इनें फैंसी फार्म नियंत्रणें दी लपेटने गी प्रदर्शित करने आस्तै। विकल्प त्रै अक्षम ऐ

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

उदाहरण दी तारीख

उदाहरण वक्त

उदाहरण दे तौर पर पासवर्ड

उदाहरण डेटटाइम-लोकल

उदाहरण हफ्ता

उदाहरण महीना

उदाहरण रंग

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

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

ध्यान रक्खो जे तारीख इनपुट सारे ब्राउज़रें, अर्थात सफारी आसेआ पूरी चाल्ली समर्थत नेईं न।

बटन पर संकेतक

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]$(...).hide()jQuery's ते $(...).show()तरीकें कन्नै संगत नेईं ऐ . इसलेई, अस इसलै तत्वें दे [hidden]प्रबंधन आस्तै होर तकनीकें उप्पर खास तौर उप्पर समर्थन नेईं करदे ।display

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

रिबूट करो

नजरिया

सीएसएस चर ऐ

पेज डिफ़ॉल्ट होंदा ऐ

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

सीएसएस चर ऐ

हेडिंग ते पैराग्राफ

लिस्टां करदा ऐ

इनलाइन कोड

कोड ब्लॉक करदा ऐ

चर करने वाले

यूजर इनपुट ऐ

नमूना आउटपुट

तालिकाएं

रूप दे

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

बटन पर संकेतक

विविध तत्व

पता

ब्लॉककोट करो

इनलाइन तत्व

सार

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

जेक्वेरी असंगतता

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