रिबूट करू
रिबूट, एकल फाइल मे तत्व-विशिष्ट सीएसएस परिवर्तनक कें संग्रह, बूटस्ट्रैप कें किकस्टार्ट करय छै जे एकटा सुरुचिपूर्ण, सुसंगत, आ सरल आधार रेखा प्रदान करय कें लेल निर्माण करय छै.
दृष्टिकोण
रिबूट सामान्यीकरण पर आधारित छै, केवल तत्व चयनकर्ता के उपयोग करी क॑ कुछ राय वाला शैली के साथ बहुत सारा एचटीएमएल तत्व प्रदान करै छै. अतिरिक्त स्टाइलिंग केवल क्लास के साथ ही करलऽ जाय छै । उदाहरण क लेल, हम <table>
एकटा सरल आधार रेखा क लेल किछु शैली कए रिबूट करैत छी आ बाद मे .table
, .table-bordered
, आओर बेसी प्रदान करैत छी ।
रिबूट मे की ओवरराइड करबाक चाही से चुनबाक हमर दिशानिर्देश आओर कारण एतय देल गेल अछि:
- स्केल करय योग्य घटक अंतराल क लेल s
rem
क बजाय s क उपयोग करबाक लेल किछु ब्राउज़र डिफ़ॉल्ट मान अपडेट करू .em
- परहेज करू
margin-top
. ऊर्ध्वाधर मार्जिन ढह सकय छै, जेकरा सं अप्रत्याशित परिणाम मिल सकय छै. यद्यपि एहि सँ बेसी महत्वपूर्ण बात ई जे केर एकटा दिशाmargin
एकटा सरल मानसिक मॉडल अछि । - डिवाइस आकारक कें पार आसान स्केलिंग कें लेल, ब्लॉक तत्वक कें
rem
s कें लेलmargin
s कें उपयोग करबाक चाहि. font
-संबंधित गुणक घोषणाकेँ न्यूनतम राखू ,inherit
जखन संभव हो प्रयोग करू.
पृष्ठ पूर्वनिर्धारित
<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;
ध्यान रहे कि फॉन्ट स्टैक म॑ इमोजी फॉन्ट शामिल होय के कारण, बहुत सारा आम चिन्ह/डिंगबैट यूनिकोड वर्ण बहुरंगी चित्रलेख के रूप म॑ रेंडर करलऽ जैतै । 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
. हम padding-left
ऑन <ul>
आ <ol>
एलिमेंट सेहो रीसेट केने छी।
- सब सूची के अपन टॉप मार्जिन हटा देल गेल अछि
- आ हुनका लोकनिक निचला हाशिया सामान्य भ गेलनि
- नेस्टेड सूचीक कोनो निचला मार्जिन नहि होइत अछि
- एहि तरहेँ हुनका सभक रूप बेसी समरूप होइत छनि
- विशेष रूप स जखन ओकर बाद बेसी सूची आइटम आबि जायत
- बामा पैडिंग सेहो रीसेट भ गेल अछि
- एतय एकटा क्रमबद्ध सूची अछि
- किछु सूची आइटम के संग
- एकर समग्र रूप एके रंग अछि
- जेना कि पिछला अक्रमित सूची
सरल स्टाइलिंग, स्पष्ट पदानुक्रम, आ बेहतर स्पेसिंग कें लेल, विवरण सूची मे margin
s अपडेट कैल गेल छै. <dd>
s पर रीसेट margin-left
करू 0
आ जोड़ू margin-bottom: .5rem
. <dt>
s बोल्ड कयल गेल अछि .
- विवरण सूची
- शब्द परिभाषित करबाक लेल एकटा विवरण सूची एकदम सही अछि ।
- शर्त
- शब्द के लिये परिभाषा।
- ओही शब्दक लेल दोसर परिभाषा।
- एकटा आओर शब्द
- एहि दोसर शब्दक परिभाषा।
इनलाइन कोड
कोड के इनलाइन स्निपेट के साथ लपेटें <code>
| एचटीएमएल कोण कोष्ठकसँ अवश्य बचब।
<section>
इनलाइन के रूप मे लपेटल जेबाक चाही.
For example, <code><section></code> should be wrapped as inline.
कोड ब्लॉक
<pre>
कोडक अनेक पंक्तिक लेल s क प्रयोग करू । एक बेर फेर, उचित रेंडरिंग लेल कोड मे कोनो कोण कोष्ठक सँ अवश्य बचू । <pre>
तत्व केँ ओकर हटाबय लेल रीसेट कएल जाइत अछि आ ओकर लेल इकाइ सभक margin-top
उपयोग कएल जाइत अछि .rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
चर
चर कें संकेत करय कें लेल <var>
टैग कें उपयोग करूं.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
उपयोगकर्ता इनपुट
<kbd>
इनपुट कें संकेत करय कें लेल कें उपयोग करूं जे आम तौर पर कीबोर्ड कें माध्यम सं दर्ज कैल जायत छै.
सेटिंग्स संपादित करबाक लेल, दबाउ 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>
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]
ब्लॉककोट
margin
blockquotes पर डिफ़ॉल्ट अछि 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>
jQuery असंगतता
[hidden]
$(...).hide()
jQuery's आओर $(...).show()
विधि क संग संगत नहि अछि . अतः, हम वर्तमान में तत्वों के [hidden]
प्रबंधन के लिए अन्य तकनीकों के ऊपर विशेष रूप से समर्थन नहीं करते हैं |display
केवल कोनो तत्व केरऽ दृश्यता क॑ टॉगल करै लेली, मतलब ओकरऽ display
संशोधित नै करलऽ गेलऽ छै आरू तत्व अभी भी दस्तावेज केरऽ प्रवाह क॑ प्रभावित करी सकै छै, एकरऽ बदला म॑ .invisible
क्लास केरऽ उपयोग करलऽ जाय ।