पुनः आरभत
Reboot, एकस्मिन् सञ्चिकायां तत्वविशिष्ट CSS परिवर्तनस्य संग्रहः, Bootstrap इत्यस्य निर्माणार्थं सुरुचिपूर्णं, सुसंगतं, सरलं च आधाररेखां प्रदातुं kickstart करोति ।
समीपगमनम्
Reboot Normalize इत्यस्य उपरि निर्मितं भवति, केवलं element selectors इत्यस्य उपयोगेन किञ्चित् मतयुक्तशैल्याः सह अनेकाः HTML elements प्रदाति । अतिरिक्त स्टाइलिंग् केवलं वर्गैः सह क्रियते। यथा, वयं <table>
सरलतरस्य आधाररेखायाः कृते काश्चन शैल्याः पुनः आरभामः पश्चात् .table
, .table-bordered
, इत्यादीनि च प्रदामः ।
अत्र अस्माकं मार्गदर्शिकाः कारणानि च सन्ति यत् Reboot मध्ये किं ओवरराइड् कर्तव्यम् इति चयनं भवति:
- स्केल-योग्य-घटक-अन्तरालस्य कृते
rem
s इत्यस्य स्थाने s इत्यस्य उपयोगाय केचन ब्राउजर्-पूर्वनिर्धारित-मूल्यानि अद्यतनं कुर्वन्तु ।em
- परिहरन्तु
margin-top
. ऊर्ध्वाधरमार्जिन्स् पतितुं शक्नुवन्ति, येन अप्रत्याशितफलं प्राप्यते । अधिकं महत्त्वपूर्णं तु, एकं दिशांmargin
सरलतरं मानसिकं प्रतिरूपम् अस्ति। - यन्त्राकारयोः मध्ये सुलभतया स्केलिंग् कर्तुं, ब्लॉक्-तत्त्वानि
rem
s कृतेmargin
s इत्यस्य उपयोगं कुर्वन्तु । font
-सम्बद्धगुणानां घोषणाः न्यूनतमं कृत्वा स्थापयन्तु ,inherit
यदा सम्भवं तदा उपयुज्य ।
CSS चर
v5.1.1 इत्यत्र योजितम्
v5.1.1 इत्यनेन सह, वयं अस्माकं सर्वेषु CSS बण्डल् मध्ये अस्माकं आवश्यकं s मानकीकृतवन्तः ( @import
, , सहितं bootstrap.css
च bootstrap-reboot.css
समाविष्टं bootstrap-grid.css
कर्तुं च कालान्तरे अधिकानि CSS चराः योजिताः पश्यन्तु।_root.scss
:root
पृष्ठ पूर्वनिर्धारित
the <html>
and <body>
elements इत्येतत् उत्तमं पृष���ठव्यापीं पूर्वनिर्धारितं प्रदातुं अद्यतनं भवति । अधिकविशेषतः : १.
- The
box-sizing
वैश्विकरूपेण प्रत्येकस्मिन् तत्त्वे सेट् भवति—सहितं*::before
च*::after
, toborder-box
. एतेन तत्त्वस्य घोषितविस्तारः कदापि गद्दीद्वारा सीमायाः वा कारणेन न अतिक्रम्यते इति सुनिश्चितं भवति ।- , इत्यत्र कोऽपि आधारः न
font-size
घोषितः<html>
, परन्तु16px
कल्प्यते (ब्राउजर् पूर्वनिर्धारितम्) । उपयोक्तृप्राथमिकतानां सम्मानं कुर्वन् अधिकसुलभदृष्टिकोणं सुनिश्चित्य माध्यमप्रश्नानां माध्यमेन सुलभप्रतिसादात्मकप्रकार-स्केलिंग् कृतेfont-size: 1rem
पर प्रयुक्तः अस्ति । एतत् ब्राउजर् पूर्वनिर्धारितं चर<body>
परिवर्त्य अधिलिखितुं शक्यते ।$font-size-root
- , इत्यत्र कोऽपि आधारः न
- The
<body>
also sets a वैश्विकंfont-family
,font-weight
,line-height
, तथाcolor
. एतत् पश्चात् केनचित् रूपतत्त्वैः अनुवंशिकं भवति यत् font असङ्गतिं निवारयितुं शक्यते । - सुरक्षार्थं, the
<body>
has a declaredbackground-color
, defaulting to#fff
.
देशी फॉन्ट ढेर
Bootstrap प्रत्येकं उपकरणे तथा OS इत्यत्र इष्टतमपाठप्रतिपादनार्थं “native font stack” अथवा “system font stack” इत्यस्य उपयोगं करोति । एते सिस्टम् फन्ट् विशेषतया अद्यतनयन्त्राणि मनसि कृत्वा डिजाइनं कृताः, स्क्रीन्स् इत्यत्र उन्नतप्रतिपादनं, चर-अक्षर-समर्थनं, इत्यादीनि च सन्ति अस्मिन् Smashing Magazine लेखे native font stacks विषये अधिकं पठन्तु .
$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;
ध्यानं कुर्वन्तु यत् यतः font stack मध्ये emoji fonts समाविष्टाः सन्ति, अनेके सामान्याः symbol/dingbat unicode वर्णाः बहुवर्णीयचित्रचित्ररूपेण रेण्डर्ड् भविष्यन्ति । तेषां स्वरूपं भिन्नं भविष्यति, ब्राउजर्/प्लेटफॉर्मस्य मूल-इमोजी-फॉन्ट्-मध्ये प्रयुक्तायाः शैलीयाः आधारेण, ते च कस्यापि CSS- color
शैल्याः प्रभावं न प्राप्नुयुः ।
इदं सम्पूर्णे Bootstrap मध्ये वैश्विकरूपेण स्वयमेव अनुवंशिकरूपेण च font-family
प्रयुक्तं भवति । <body>
global -इत्येतत् स्विच् कर्तुं , Bootstrap इत्येतत् font-family
अद्यतनं कृत्वा पुनः संकलयन्तु ।$font-family-base
CSS चर
यथा यथा Bootstrap 5 परिपक्वं भवति तथा तथा अधिकाधिकाः शैल्याः CSS चरैः सह निर्मिताः भविष्यन्ति यत् अधिकं वास्तविकसमय-अनुकूलनं प्रदातुं साधनरूपेण Sass इत्यस्य सदैव पुनः संकलनस्य आवश्यकतां विना अस्माकं उपायः अस्ति यत् अस्माकं स्रोतः Sass चराः गृहीत्वा तान् CSS चररूपेण परिणमयितुं शक्नुमः । तद्विधं, यदि भवान् CSS variables इत्यस्य उपयोगं न करोति चेदपि, भवतां समीपे 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};
व्यवहारे, ते चराः ततः Reboot इत्यत्र एवम् प्रयुक्ताः भवन्ति ।
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> |
ह1. बूटस्ट्रैप शीर्षक |
<h2></h2> |
ह२. बूटस्ट्रैप शीर्षक |
<h3></h3> |
ह३. बूटस्ट्रैप शीर्षक |
<h4></h4> |
ह४ । बूटस्ट्रैप शीर्षक |
<h5></h5> |
ह५ । बूटस्ट्रैप शीर्षक |
<h6></h6> |
ह६ । बूटस्ट्रैप शीर्षक |
सूचीति
सर्वासु सूचीषु— <ul>
, <ol>
, तथा <dl>
—तयोः margin-top
निष्कासितम् अस्ति तथा च a margin-bottom: 1rem
. नेस्टेड् सूचीषु न margin-bottom
. वयं padding-left
on <ul>
तथा <ol>
elements इत्यपि पुनः सेट् कृतवन्तः ।
- सर्वासु सूचीषु तेषां शीर्षमार्जिनं निष्कासितम् अस्ति
- तथा उनके तल मार्जिन सामान्य हो गया
- नेस्टेड् सूचीषु अधः मार्जिनं नास्ति
- एवं तेषां समरूपं अधिकं भवति
- विशेषतः यदा अधिकानि सूचीवस्तूनि अनुवर्तन्ते
- वामपैडिंग् अपि पुनः सेट् कृतम् अस्ति
- अत्र क्रमबद्धा सूची अस्ति
- कतिपयैः सूचीवस्तूनाम् सह
- अस्य समग्ररूपं समानम् अस्ति
- यथा पूर्वाक्रमितसूची
सरलतरशैली, स्पष्टपदानुक्रमणिका, उत्तमान्तरं च कृते, वर्णनसूचीषु margin
s अद्यतनं कृतम् अस्ति । <dd>
s पुनः सेट् margin-left
कृत्वा 0
योजयन्तु margin-bottom: .5rem
. <dt>
s गाढाः भवन्ति .
- वर्णन सूची
- पदपरिभाषायै वर्णनसूची परिपूर्णा भवति ।
- पद
- पदस्य परिभाषा ।
- तस्यैव पदस्य द्वितीया परिभाषा ।
- अन्यत् पदम्
- अस्य अन्यपदस्य परिभाषा ।
इनलाइन कोड
कोडस्य इनलाइन स्निपेट्स् इत्यनेन सह लपेटयन्तु <code>
। HTML कोणकोष्ठकात् अवश्यं पलायनं कुर्वन्तु ।
<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>
सामान्यतया कीबोर्डद्वारा प्रविष्टं निवेशं सूचयितुं the इत्यस्य उपयोगं कुर्वन्तु ।
सेटिंग्स् सम्पादयितुं, नुदन्तु 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, fieldsets इव, अपि पुनः शैलीकृतं यत् प्रकारस्य शीर्षकरूपेण प्रदर्शयितुं शक्यते ।<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"
Reboot इत्यत्र पूर्वनिर्धारितं कर्सरं परिवर्तयितुं कृते एकं वर्धनं समाविष्टम् अस्ति pointer
। तत्त्वानि अन्तरक्रियाशीलाः इति सूचयितुं साहाय्यं कर्तुं तत्त्वेषु एतत् विशेषतां योजयन्तु । एषा भूमिका तत्त्वानां कृते आवश्यकी नास्ति <button>
, ये स्वकीयं cursor
परिवर्तनं प्राप्नुवन्ति।
<span role="button" tabindex="0">Non-button element button</span>
विविध तत्व
पत्रसङ्केतः
ब्राउजर् पूर्वनिर्धारितं तः to तः <address>
पुनः सेट् कर्तुं तत्त्वं अद्यतनं भवति । अपि इदानीं अनुवंशिकः अस्ति, अपि च योजितः अस्ति । s समीपस्थस्य पूर्वजस्य (अथवा कार्यस्य सम्पूर्णस्य निकायस्य) सम्पर्कसूचनाः प्रस्तुत्यर्थं भवन्ति। इत्यनेन रेखाः समाप्तं कृत्वा स्वरूपणं संरक्षितं कुर्वन्तु ।font-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 मार्केट सेंट, सुइट 900
सैन फ्रांसिस्को, सीए 94103
पी: (123) 456-7890 पूर्ण नाम
[email protected]
Blockquote इति
margin
blockquotes इत्यत्र पूर्वनिर्धारितं 1em 40px
, अतः 0 0 1rem
अन्यैः तत्त्वैः सह किमपि अधिकं सुसंगतं किमपि कृते वयं तत् पुनः सेट् कुर्मः ।
एकं सुप्रसिद्धं उद्धरणं, एकस्मिन् blockquote तत्वे निहितम्।
Source Title इत्यस्मिन् कश्चन प्रसिद्धः
इनलाइन तत्व
अनुच्छेदपाठस्य मध्ये <abbr>
विशिष्टं कर्तुं तत्त्वं मूलभूतं स्टाइलिंग् प्राप्नोति ।
संक्षेपः
cursor
सारांशस्य पूर्वनिर्धारितं text
, अतः वयं तत् to पुनः सेट् कुर्मः यत् pointer
तत् क्लिक् कृत्वा तत् तत्त्वेन सह अन्तरक्रिया कर्तुं शक्यते इति बोधयितुं ।
केचन विवरणाः
विवरण के बारे में अधिक जानकारी।
ततोऽपि अधिकविवरणम्
अत्र विवरणविषये अपि अधिकविवरणम् अस्ति ।
HTML5 [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