in English

रिबूट करो

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

नजरिया

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

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

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

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

<html>ते तत्वें गी <body>बेहतर पृष्ठ-व्यापी डिफाल्ट देने लेई अपडेट कीता जंदा ऐ. होर खास तौर उप्पर:

द box-sizingहर तत्व पर वैश्विक रूप कन्नै सेट कीता गेदा ऐ—जिंदे च *::beforeते *::after, गी border-box. एह् इस गल्लै गी सुनिश्चत करदा ऐ जे पैडिंग जां सीमा दे कारण तत्व दी घोशित चौड़ाई कदें बी नेईं जाह् ग।
पर कोई आधार font-sizeघोशित नेईं कीता गेदा ऐ <html>, पर 16pxएह् मन्नेआ जंदा ऐ (ब्राउज़र डिफाल्ट)। बरतूनी दी पसंद दा आदर करदे होई ते इक होर सुलभ दृष्टिकोण गी सुनिश्चित करदे होई मीडिया क्वेरी दे माध्यम कन्नै आसान प्रतिक्रियाशील टाइप-स्केलिंग आस्तै font-size: 1remपर लागू कीता जंदा ऐ ।<body>
द <body>बी सेट करदा ऐ इक ग्लोबल font-family, line-height, ते text-align. फॉन्ट असंगति गी रोकने आस्तै इसगी बाद च किश फार्म तत्वें आसेआ विरासत च दित्ता जंदा ऐ।
सुरक्षा आस्तै, दी <body>इक घोशित ऐ background-color, डिफाल्ट करने आस्तै #fff.

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

डिफ़ॉल्ट वेब फॉन्ट (Helvetica Neue, Helvetica, ते Arial) गी बूटस्ट्रैप 4 च छोड़ी दित्ता गेआ ऐ ते हर डिवाइस ते ओएस पर इष्टतम पाठ रेंडरिंग आस्तै इक "देशी फॉन्ट स्टैक" कन्नै बदली दित्ता गेआ ऐ। इस स्मैशिंग पत्रिका लेख च देशी फॉन्ट ढेर दे बारे च होर पढ़ो .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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ते दुबारा संकलित करो।

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

सारे हेडिंग तत्व—उदाहरण दे तौर पर, <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.

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

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

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

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

पूर्व स्वरूपित पाठ

<pre>तत्व गी उसी हटाने ते इसदे लेई इकाइयें margin-topदा इस्तेमाल करने आस्तै रीसेट कीता जंदा ऐ .remmargin-bottom

.उदाहरण-तत्व { ऐ।
  हाशिया-नीचे: 1रेम;
} ऐ।

तालिकाएं

तालिकाएं गी शैली <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

पूरा नाम
पहले.अंतिम@उदाहरण.कॉम

ब्लॉककोट करो

marginblockquotes पर डिफ़ॉल्ट ऐ 1em 40px, इसलेई अस उसगी रीसेट करदे 0 0 1remन कुसै होर तत्वें कन्नै होर सुसंगत चीजें आस्तै.

इक सुप्रसिद्ध उद्धरण, इक ब्लॉककोट तत्व च निहित।

सोर्स टाइटल च कोई मशहूर

इनलाइन तत्व

<abbr>तत्व गी पैराग्राफ पाठ दे बीच खड़ोने आस्तै बुनियादी स्टाइलिंग हासल होंदी ऐ ।

नुल्ला अट्टर विटाए एलिट लिबेरो, इक फारेत्रा औग।

सार

cursorसारांश पर डिफ़ॉल्ट ऐ text, इसलेई अस उसगी रीसेट करदे न तां जे एह् pointerसंप्रेषित कीता जाई सकै जे तत्व उप्पर क्लिक करियै उस कन्नै परस्पर क्रिया कीती जाई सकदी ऐ.

कुछ ब्यौरा

विवरण दे बारे च होर मती जानकारी।

और भी ब्यौरा

विस्तार दे बारे च होर बी ब्यौरे दित्ते गेदे न।

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

HTML5 इक नमीं वैश्विक विशेषता जोड़दा ऐ जिसदा नांऽ[hidden]display: none ऐ , जेह् ड़ी डिफाल्ट रूप कन्नै शैली कीती गेदी ऐ. PureCSS थमां इक विचार उधार लैंदे होई , अस इस डिफाल्ट पर सुधार करदे होई इसगी गलती कन्नै ओवरराइड होने थमां [hidden] { display: none !important; }रोकने च मदद करने आस्तै बनांदे न. displayजदके [hidden]IE10 आसेआ नेटिव रूप कन्नै समर्थत नेईं ऐ, तां साढ़े CSS च स्पश्ट घोशणा उस समस्या दे आसपास होई जंदी ऐ।

<input type="text" hidden>

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

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

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