Source

रिबूट करू

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

दृष्टिकोण

रिबूट सामान्यीकरण पर आधारित छै, केवल तत्व चयनकर्ता के उपयोग करी क॑ कुछ राय वाला शैली के साथ बहुत सारा एचटीएमएल तत्व प्रदान करै छै. अतिरिक्त स्टाइलिंग केवल क्लास के साथ ही करलऽ जाय छै । उदाहरण क लेल, हम <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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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>

 ज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.

  • लोरेम इप्सम डोलोर बैठा अमेत
  • Consectetur एडिपिसिंग अभिजात वर्ग
  • पूर्णांक molestie lorem पर massa
  • प्रीटियम निस्ल एलिकेट में फैसिलिसिस
  • नुल्ला वोलुतपत अलिक्वाम वेलित
    • फेसेलस इअकुलिस नेक्वे
    • पुरुष सोडलेस अल्ट्रिसीस
    • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
    • Ac tristique लिबेरो volutpat पर
  • फौसिबस पोर्टा लेकस फ्रिंगिला वेल
  • एनियन बैस अमेत एरात नुंक
  • एगेट पोर्टिटोर लोरेम
  1. लोरेम इप्सम डोलोर बैठा अमेत
  2. Consectetur एडिपिसिंग अभिजात वर्ग
  3. पूर्णांक molestie lorem पर massa
  4. प्रीटियम निस्ल एलिकेट में फैसिलिसिस
  5. नुल्ला वोलुतपत अलिक्वाम वेलित
  6. फौसिबस पोर्टा लेकस फ्रिंगिला वेल
  7. एनियन बैस अमेत एरात नुंक
  8. एगेट पोर्टिटोर लोरेम

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

विवरण सूची
शब्द परिभाषित करबाक लेल एकटा विवरण सूची एकदम सही अछि ।
यूइसमोद
वेस्टिबुलम आईडी लिगुला पोर्टा फेलिस euismod semper eget lacinia odio सेम।
डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।
मलेसुआदा पोर्टा
एटियाम पोर्टा सेम मलेसुआडा मैग्ना मोलिस यूइसमोड।

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

<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 क॑ केवल लंबवत रूप स॑ आकार बदलै योग्य होय के लेलऽ संशोधित करलऽ जाय छै जैसनऽ कि क्षैतिज आकार बदलना अक्सर पृष्ठ लेआउट क॑ “तोड़” दै छै ।

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

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

१०० के

विविध तत्व

ठिकाना

<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किछु अन्य तत्वक संग बेसी सुसंगत अछि |

लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante।

स्रोत शीर्षक में कियो प्रसिद्ध

इनलाइन तत्व

तत्व क॑ <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क्लास केरऽ उपयोग करलऽ जाय ।