Source

रिबूट करो

रिबूट, इक गै फाइल च तत्व-विशिष्ट 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

एह् पूरे बूटस्ट्रैप च ते स्वतः वैश्विक रूप कन्नै विरासत 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 गी सिर्फ लंबवत आकार बदलने आस्तै संशोधित कीता जंदा ऐ की जे क्षैतिज आकार बदलने कन्नै अक्सर पृष्ठ लेआउट गी "तोड़" दित्ता जंदा ऐ।

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

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

उदाहरण इनपुट

उदाहरण चुनें

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

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

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

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

उदाहरण वक्त

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

विविध तत्व

पता

तत्व गी <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जदके [hidden]IE10 आसेआ नेटिव रूप कन्नै समर्थत नेईं ऐ, तां साढ़े CSS च स्पश्ट घोशणा उस समस्या दे आसपास होई जंदी ऐ।

<input type="text" hidden>

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

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

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