रिबूट कइल जाव
रिबूट, एकही फाइल में तत्व-विशिष्ट CSS बदलाव सभ के संग्रह, बूटस्ट्रैप के किकस्टार्ट करीं जेह से कि एकरा पर बिल्ड करे खातिर एगो सुरुचिपूर्ण, सुसंगत आ सरल बेसलाइन उपलब्ध करावल जा सके।
पहुॅंंच
रिबूट नॉर्मलाइज पर आधारित होला, कई गो एचटीएमएल तत्व सभ के कुछ राय वाला स्टाइल सभ के साथ खाली तत्व चयनकर्ता सभ के इस्तेमाल से उपलब्ध करावे ला। अतिरिक्त स्टाइलिंग खाली क्लास के संगे कईल जाला। उदाहरण खातिर, हमनी के कुछ <table>
शैली सभ के एगो सरल बेसलाइन खातिर रिबूट करे लीं आ बाद में .table
, .table-bordered
, आ अउरी बहुत कुछ उपलब्ध करावे लीं।
रिबूट में का ओवरराइड करे के बा, एकरा के चुने के हमनी के गाइडलाइन आ कारण दिहल गइल बा:
- स्केल करे लायक घटक स्पेसिंग खातिर
rem
s के बजाय 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
इनहन के रूप अलग-अलग होखी, ई ब्राउजर/प्लेटफॉर्म के नेटिव इमोजी फॉन्ट में इस्तेमाल कइल गइल स्टाइल पर निर्भर करी, आ इनहन पर कौनों सीएसएस स्टाइल के असर ना पड़ी ।
ई पूरा बूटस्ट्रैप में वैश्विक स्तर 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> |
ज4 के बा। बूटस्ट्रैप हेडिंग के बा |
<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>
टेबल के बारे में बतावल गइल बा
टेबल सभ के स्टाइल s के हिसाब से तनी समायोजित कइल जाला <caption>
, सीमा सभ के ढह दिहल जाला, आ पूरा में सुसंगत सुनिश्चित कइल text-align
जाला। सीमा, पैडिंग, आ अउरी बहुत कुछ खातिर अतिरिक्त बदलाव क्लास के.table
साथे आवेला .
तालिका के हेडिंग बा | तालिका के हेडिंग बा | तालिका के हेडिंग बा | तालिका के हेडिंग बा |
---|---|---|---|
टेबल सेल के बा | टेबल सेल के बा | टेबल सेल के बा | टेबल सेल के बा |
टेबल सेल के बा | टेबल सेल के बा | टेबल सेल के बा | टेबल सेल के बा |
टेबल सेल के बा | टेबल सेल के बा | टेबल सेल के बा | टेबल सेल के बा |
फार्म के रूप में बा
सरल बेस स्टाइल खातिर बिबिध फॉर्म तत्व सभ के रिबूट कइल गइल बा। इहाँ कुछ सभसे उल्लेखनीय बदलाव दिहल गइल बा:
<fieldset>
s में कौनों सीमा, पैडिंग, या मार्जिन ना होला एह से इनहन के आसानी से अलग-अलग इनपुट भा इनपुट सभ के समूह सभ खातिर रैपर के रूप में इस्तेमाल कइल जा सके ला।<legend>
s, फील्डसेट नियर, भी रिस्टाइल कइल गइल बा ताकि एक तरह के हेडिंग के रूप में देखावल जा सके।<label>
s के लागूdisplay: inline-block
करे के अनुमति देवे खातिर सेट कइल गइल बाmargin
।<input>
s,<select>
s,<textarea>
s, आ<button>
s के ज्यादातर Normalize द्वारा संबोधित कइल जाला, बाकी रिबूट इनहन के हटा देला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>
जेक्वेरी के असंगतता के बारे में बतावल गइल बा
[hidden]
jQuery के $(...).hide()
आ $(...).show()
विधियन के साथ संगत नइखे। एह से, हमनी के वर्तमान में तत्वन के [hidden]
प्रबंधन खातिर अन्य तकनीक के ऊपर विशेष रूप से समर्थन नइखीं करत।display
खाली कौनों तत्व के दृश्यता के टॉगल करे खातिर, मने कि एकर display
संशोधन ना कइल गइल बा आ तत्व अबहियों दस्तावेज के प्रवाह के प्रभावित क सके ला, एकरे बजाय क्लास के इस्तेमाल करीं ।.invisible