रिबूट करो
रिबूट, इक गै फाइल च तत्व-विशिष्ट CSS बदलावें दा इक संग्रह, बूटस्ट्रैप गी किकस्टार्ट करो तां जे इक सुरुचिपूर्ण, सुसंगत, ते सरल आधार रेखा उपलब्ध करोआया जाई सकै जिस पर निर्माण कीता जाई सकै।
नजरिया
रिबूट नॉर्मलाइज पर निर्माण करदा ऐ , जेह् ड़ा केईं HTML तत्वें गी सिर्फ तत्व चयनकर्ताएं दा इस्तेमाल करियै किश राय आह् ली शैलियें कन्नै उपलब्ध करोआंदा ऐ । अतिरिक्त स्टाइलिंग सिर्फ क्लासें कन्नै गै कीती जंदी ऐ। मसाल आस्तै, अस <table>
इक सरल आधार रेखा आस्तै किश शैलियें गी रिबूट करदे आं ते बाद च .table
, .table-bordered
, ते होर बी उपलब्ध करोआने आं.
रिबूट च कीऽ ओवरराइड करना ऐ चुनने दे साढ़े दिशा-निर्देश ते कारण एह्दे च दित्ते गेदे न:
- स्केलेबल घटक स्पेसिंग आस्तै s
rem
दी बजाय s दा इस्तेमाल करने आस्तै किश ब्राउज़र डिफाल्ट मूल्यें गी अपडेट करो .em
- परहेज
margin-top
करना . ऊर्ध्वाधर मार्जिन ढह सकदे न, जिसदे कन्नै अप्रत्याशित नतीजे सामने औंदे न। हालांकि, इस थमां बी मती जरूरी गल्ल एह् ऐ जे इक गै दिशा दाmargin
इक सरल मानसिक मॉडल ऐ। - डिवाइस आकारें च आसान स्केलिंग आस्तै, ब्लॉक तत्वें गी
rem
एस आस्तैmargin
एस दा इस्तेमाल करना चाहिदा ऐ। font
-सम्बंधत गुणें दी घोशणाएं गी घट्ट शा घट्ट रक्खो ,inherit
जदूं बी होई सकै इसदा इस्तेमाल करो.
सीएसएस चर ऐ
v5.1.1 च जोड़ेआ गेआ ऐ
v5.1.1 कन्नै, अस अपने @import
सारे CSS बंडल (जिंदे च bootstrap.css
, bootstrap-reboot.css
, ते bootstrap-grid.css
शामल करने आस्तै शामल न _root.scss
. एह् सारे बंडल च स्तर CSS चर जोड़दा ऐ :root
, इस गल्लै दी परवाह नेईं करदे होई जे उस बंडल च उंदे चा कितने दा इस्तेमाल कीता जंदा ऐ . अंततः बूटस्ट्रैप 5 जारी रौह् ग समें कन्नै जोड़े गेदे होर CSS चर दिक्खो।
पेज डिफ़ॉल्ट होंदा ऐ
<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;
ध्यान रक्खो जे कीजे फॉन्ट स्टैक च इमोजी फॉन्ट शामल न, इस करी मते सारे आम चिह् न/डिंगबैट यूनिकोड वर्ण बहु-रंगें पिक्टोग्राफ दे रूप च रेंडर कीते जाङन. ब्राउज़र/प्लेटफार्म दे मूल इमोजी फॉन्ट च इस्तेमाल कीती गेदी शैली दे आधार उप्पर, उंदी रूप-रंग बक्ख-बक्ख होग, ते उ’नेंगी कुसै बी CSS color
शैली कन्नै प्रभावित नेईं कीता जाग।
एह् पूरे बूटस्ट्रैप च ते स्वतः वैश्विक रूप कन्नै विरासत font-family
च लागू कीता जंदा ऐ . <body>
ग्लोबल गी स्विच करने लेई font-family
, बूटस्ट्रैप गी अपडेट करो $font-family-base
ते दुबारा संकलित करो।
सीएसएस चर ऐ
जि’यां-जि’यां बूटस्ट्रैप 5 परिपक्व होंदा जा करदा ऐ, सीएसएस चर कन्नै मती शा मती शैलियां बनाईयां जाङन जेह् ड़ी इक साधन दे रूप च होर रियल-टाइम अनुकूलन प्रदान कीती जाह् ग, बगैर हमेशा सस्स गी दुबारा संकलित करने दी लोड़ दे। साढ़ा दृष्टिकोण ऐ जे साढ़े स्रोत सस्स चर गी लेइयै उनेंगी सीएसएस चर च बदलना ऐ। इस चाल्ली, जेकर तुस CSS चर दा इस्तेमाल नेईं करदे ओ तां बी तुंदे कोल Sass दी सारी शक्ति ऐ। एह् अजें बी जारी ऐ ते इसगी पूरी चाल्ली लागू करने च समां लगग।
मसाल आस्तै, :root
आम शैलियें आस्तै इनें CSS चरें पर विचार करो <body>
:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
व्यवहार च, उनें चर गी उसदे बाद रिबूट च इस चाल्ली लागू कीता जंदा ऐ:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
जेह् ड़ी तुसेंगी रियल-टाइम अनुकूलन करने दी इजाजत दिंदी ऐ जि’यां तुस चाह्न्दे ओ:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
हेडिंग ते पैराग्राफ
सारे हेडिंग तत्व—उदाहरण दे तौर पर, <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
. असी padding-left
ऑन <ul>
ते <ol>
तत्वें गी बी रीसेट कीता ऐ।
- सब्भै लिस्टें दा उंदा शीर्शक मार्जिन हटाई दित्ता गेदा ऐ
- ते उंदा निचला हाशिया सामान्य होई गेआ
- नेस्टेड सूची च कोई निचले मार्जिन नेईं होंदा ऐ
- इस चाल्ली उंदा इक होर समरूप रूप होंदा ऐ
- खासकरियै जिसलै इसदे बाद होर सूची आइटम होंदे न
- बाएं पैडिंग गी बी रीसेट करी दित्ता गेआ ऐ
- इत्थें इक आर्डर कीती गेदी सूची ऐ
- कुछ लिस्ट आइटम दे कन्नै
- इसदा ओवरऑल लुक इक गै ऐ
- पिछली अनऑर्डर सूची दे रूप च
सरल स्टाइलिंग, साफ पदानुक्रम, ते बेहतर स्पेसिंग आस्तै, विवरण सूचीएं च margin
एस. <dd>
एस गी रीसेट margin-left
करो 0
ते जोड़ो margin-bottom: .5rem
. <dt>
एस बोल्ड कीते गेदे न .
- विवरण सूची दी
- शब्दें गी परिभाशित करने आस्तै इक विवरण सूची बिल्कुल सही ऐ ।
- म्याद
- शब्द दे वास्ते परिभाषा।
- उसी शब्द दी इक दूई परिभाषा।
- इक होर शब्द
- इस दूजे शब्द दी परिभाषा।
इनलाइन कोड
कोड दे इनलाइन स्निपेटें गी <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>
एस कन्नै थोड़ा समायोजित कीता जंदा ऐ, सीमाएं गी ढहना ऐ, ते 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 गी सिर्फ लंबवत आकार बदलने आस्तै संशोधित कीता जंदा ऐ की जे क्षैतिज आकार बदलने कन्नै अक्सर पृष्ठ लेआउट गी "तोड़" दित्ता जंदा ऐ।<button>
एस ते<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]
$(...).hide()
jQuery's ते $(...).show()
तरीकें कन्नै संगत नेईं ऐ . इसलेई, अस इसलै तत्वें दे [hidden]
प्रबंधन आस्तै होर तकनीकें उप्पर खास तौर उप्पर समर्थन नेईं करदे ।display
सिर्फ इक तत्व दी दृश्यता गी टॉगल करने आस्तै, मतलब इसदा display
संशोधन नेईं कीता गेआ ऐ ते तत्व अजें बी दस्तावेज दे प्रवाह गी प्रभावित करी सकदा ऐ, इसदे बजाय वर्ग दा इस्तेमाल करो ..invisible