रिबूट करू

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

दृष्टिकोण

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

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

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

ध्यान रहे कि फॉन्ट स्टैक म॑ इमोजी फॉन्ट शामिल होय के कारण, बहुत सारा आम चिन्ह/डिंगबैट यूनिकोड वर्ण बहुरंगी चित्रलेख के रूप म॑ रेंडर करलऽ जैतै । 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। बूटस्ट्रैप हेडिंग

सूची बनाइए

सब सूची— <ul>, <ol>, आ <dl>—अपन margin-topहटा देल गेल अछि आ एकटा margin-bottom: 1rem. नेस्टेड सूची मे कोनो margin-bottom.

सब सूची के अपन टॉप मार्जिन हटा देल गेल अछि
आ हुनका लोकनिक निचला हाशिया सामान्य भ गेलनि
नेस्टेड सूचीक कोनो निचला मार्जिन नहि होइत अछि
- एहि तरहेँ हुनका सभक रूप बेसी समरूप होइत छनि
- विशेष रूप स जखन ओकर बाद बेसी सूची आइटम आबि जायत
बामा पैडिंग सेहो रीसेट भ गेल अछि

एतय एकटा क्रमबद्ध सूची अछि
किछु सूची आइटम के संग
एकर समग्र रूप एके रंग अछि
जेना कि पिछला अक्रमित सूची

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

विवरण सूची: शब्द परिभाषित करबाक लेल एकटा विवरण सूची एकदम सही अछि ।
शर्त: शब्द के लिये परिभाषा।; ओही शब्दक लेल दोसर परिभाषा।
एकटा आओर शब्द: एहि दोसर शब्दक परिभाषा।

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

<pre>तत्व केँ ओकर हटाबय लेल रीसेट कएल जाइत अछि आ ओकर लेल इकाइ सभक margin-topउपयोग कएल जाइत अछि .remmargin-bottom

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

तालिकाएँ

तालिकाक कें शैली <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).

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

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

उदाहरण इनपुट

उदाहरण चुनें

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

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

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

उदाहरण तिथि

उदाहरण समय

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

बटन पर सूचक

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>पैराग्राफ टेक्स्ट के बीच अलग-अलग बनाबै लेली बेसिक स्टाइलिंग मिलै छै ।

Nulla attr vitae एलिट लिबेरो, एक फारेत्रा औग।

सार

cursorसारांश पर डिफ़ॉल्ट अछि text, अतः हम ओहि पर रीसेट करैत छी pointerई संप्रेषित करबाक लेल जे तत्व पर क्लिक कए ओकरा संग बातचीत कएल जा सकैत अछि |

किछु विवरण

विवरण के बारे में अधिक जानकारी।

आओर बेसी विवरण

विवरण के बारे मे आओर बेसी विस्तार सं जानकारी देल गेल अछि.

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

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

<input type="text" hidden>

jQuery असंगतता

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

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