in English

पुनः आरभत

Reboot, एकस्मिन् सञ्चिकायां तत्वविशिष्ट CSS परिवर्तनस्य संग्रहः, Bootstrap इत्यस्य निर्माणार्थं सुरुचिपूर्णं, सुसंगतं, सरलं च आधाररेखां प्रदातुं kickstart करोति ।

इस पृष्ठ पर

समीपगमनम्‌

Reboot Normalize इत्यस्य उपरि निर्मितं भवति, केवलं element selectors इत्यस्य उपयोगेन किञ्चित् मतयुक्तशैल्याः सह अनेकाः HTML elements प्रदाति । अतिरिक्त स्टाइलिंग् केवलं वर्गैः सह क्रियते। यथा, वयं <table>सरलतरस्य आधाररेखायाः कृते काश्चन शैल्याः पुनः आरभामः पश्चात् .table, .table-bordered, इत्यादीनि च प्रदामः ।

अत्र अस्माकं मार्गदर्शिकाः कारणानि च सन्ति यत् Reboot मध्ये किं ओवरराइड् कर्तव्यम् इति चयनं भवति:

स्केल-योग्य-घटक-अन्तरालस्य कृते rems इत्यस्य स्थाने s इत्यस्य उपयोगाय केचन ब्राउजर्-पूर्वनिर्धारित-मूल्यानि अद्यतनं कुर्वन्तु ।em
परिहरन्तु margin-top. ऊर्ध्वाधरमार्जिन्स् पतितुं शक्नुवन्ति, येन अप्रत्याशितफलं प्राप्यते । अधिकं महत्त्वपूर्णं तु, एकं दिशां marginसरलतरं मानसिकं प्रतिरूपम् अस्ति।
यन्त्राकारयोः मध्ये सुलभतया स्केलिंग् कर्तुं, ब्लॉक्-तत्त्वानि rems कृते margins इत्यस्य उपयोगं कुर्वन्तु ।
font-सम्बद्धानां गुणानाम् घोषणाः न्यूनतमरूपेण स्थापयन्तु , inheritयदा सम्भवं तदा उपयुज्य ।

CSS चर

v5.2.0 इत्यस्मिन् योजितम्

v5.1.1 इत्यनेन सह, वयं अस्माकं @importसर्वेषु CSS बण्डल्-मध्ये ( bootstrap.css, bootstrap-reboot.css, तथा च सहितम् bootstrap-grid.css) अस्माकं आवश्यकं s मानकीकृत्य _root.scss. एतेन :rootसर्वेषु बण्डल् मध्ये स्तरस्य CSS चराः योजिताः भवन्ति, तस्मिन् बण्डल् मध्ये तेषु कियन्तः उपयुज्यन्ते इति न कृत्वा । अन्ततः Bootstrap 5 कालान्तरे अधिकानि CSS चरानि योजितानि दृष्ट्वा निरन्तरं भविष्यति , यत् सर्वदा Sass पुनः संकलनस्य आवश्यकतां विना अधिकं वास्तविकसमयं अनुकूलनं प्रदातुं शक्नोति। अस्माकं उपायः अस्ति यत् अस्माकं स्रोतः Sass चराः गृहीत्वा तान् CSS चररूपेण परिणमयितुं शक्नुमः । तद्विधं, यदि भवान् CSS variables इत्यस्य उपयोगं न करोति चेदपि, भवतां समीपे Sass इत्यस्य सर्वा शक्तिः अस्ति । एतत् अद्यापि प्रचलति, पूर्णतया कार्यान्वितुं समयं लप्स्यते च।

यथा, :rootसामान्यशैल्याः कृते एतानि CSS चराः विचारयन्तु <body>:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

व्यवहारे, ते चराः ततः Reboot इत्यत्र एवम् प्रयुक्ताः भवन्ति ।

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

पृष्ठ पूर्वनिर्धारित

the <html>and <body>elements इत्येतत् उत्तमं पृष्ठव्यापीं पूर्वनिर्धारितं प्रदातुं अद्यतनं भवति । अधिकविशेषतः : १.

The box-sizingवैश्विकरूपेण प्रत्येकस्मिन् तत्त्वे सेट् भवति—सहितं *::beforeच *::after, to border-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 declared background-color, defaulting to #fff.

देशी फॉन्ट ढेर

Bootstrap प्रत्येकं उपकरणे तथा OS इत्यत्र इष्टतमपाठप्रतिपादनार्थं “native font stack” अथवा “system font stack” इत्यस्य उपयोगं करोति । एते सिस्टम् फन्ट् विशेषतया अद्यतनयन्त्राणि मनसि कृत्वा डिजाइनं कृताः, स्क्रीन्स् इत्यत्र उन्नतप्रतिपादनं, चर-अक्षर-समर्थनं, इत्यादीनि च सन्ति अस्मिन् Smashing Magazine लेखे देशी 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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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

शीर्षक एवं अनुच्छेद

सर्वे शीर्षकतत्त्वानि—उदा., <h1>—तथा <p>तेषां margin-topनिष्कासनार्थं पुनः सेट् भवन्ति । शीर्षकाणि योजिताः सन्ति तथा च सुलभ अन्तरालस्य कृते margin-bottom: .5remअनुच्छेदाः ।margin-bottom: 1rem

शीर्षकम्	उदाहरण
`<h1></h1>`	ह1. बूटस्ट्रैप शीर्षक
`<h2></h2>`	ह२. बूटस्ट्रैप शीर्षक
`<h3></h3>`	ह३. बूटस्ट्रैप शीर्षक
`<h4></h4>`	ह४ । बूटस्ट्रैप शीर्षक
`<h5></h5>`	ह५ । बूटस्ट्रैप शीर्षक
`<h6></h6>`	ह६ । बूटस्ट्रैप शीर्षक

क्षैतिज नियम

तत्त्वं <hr>सरलं कृतम् अस्ति । ब्राउज़र पूर्वनिर्धारितस्य सदृशं, <hr>s via शैलीकृतं भवति border-top, पूर्वनिर्धारितं भवति opacity: .25, स्वयमेव तेषां border-colorvia उत्तराधिकारं प्राप्नोति color, यत्र मातापितृद्वारा कदा colorसेट् भवति ते पाठ, सीमा, अस्पष्टता उपयोगिताभिः सह परिवर्तयितुं शक्यन्ते ।

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

सूचीति

सर्वासु सूचीषु— <ul>, <ol>, तथा <dl>—तयोः margin-topनिष्कासितम् अस्ति तथा च a margin-bottom: 1rem. नेस्टेड् सूचीषु न margin-bottom. वयं padding-lefton <ul>तथा <ol>elements इत्यपि पुनः सेट् कृतवन्तः ।

सर्वासु सूचीषु तेषां शीर्षमार्जिनं निष्कासितम् अस्ति
तथा उनके नीचे की सीमा सामान्य हो गई
नेस्टेड् सूचीषु अधः मार्जिनं नास्ति
- एवं तेषां समरूपं अधिकं भवति
- विशेषतः यदा अधिकानि सूचीवस्तूनि अनुवर्तन्ते
वामपैडिंग् अपि पुनः सेट् कृतम् अस्ति

अत्र क्रमबद्धा सूची अस्ति
कतिपयैः सूचीवस्तूनाम् सह
अस्य समग्ररूपं समानम् अस्ति
यथा पूर्वाक्रमितसूची

सरलतरशैल्याः, स्पष्टपदानुक्रमणिकायाः, उत्तमान्तरस्य च कृते, वर्णनसूचीषु margins अद्यतनं कृतम् अस्ति । <dd>s पुनः सेट् margin-leftकृत्वा 0योजयन्तु margin-bottom: .5rem. <dt>s गाढाः भवन्ति .

वर्णन सूची: पदपरिभाषायै वर्णनसूची परिपूर्णा भवति ।
पद: पदस्य परिभाषा ।; तस्यैव पदस्य द्वितीया परिभाषा ।
अन्यत् पदम्: अस्य अन्यपदस्य परिभाषा ।

इनलाइन कोड

कोडस्य इनलाइन स्निपेट्स् इत्यनेन सह लपेटयन्तु <code>। HTML कोणकोष्ठकात् अवश्यं पलायनं कुर्वन्तु ।

यथा - <section>इनलाइन इति वेष्टनीयम् ।

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

कोड ब्लॉक

<pre>कोडस्य बहुपङ्क्तयः कृते s इत्यस्य उपयोगं कुर्वन्तु । पुनः, सम्यक् प्रतिपादनार्थं कोडमध्ये किमपि कोणकोष्ठकं अवश्यं पलायितुं शक्नुवन्ति । तत्त्वं तस्य <pre>निष्कासयितुं तस्य कृते एककानां margin-topउपयोगं कर्तुं पुनः सेट् भवति .remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

चर

चर-सूचनार्थं <var>टैग् इत्यस्य उपयोगं कुर्वन्तु ।

y = म x + ख

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

उपयोगकर्ता इनपुट

<kbd>सामान्यतया कीबोर्डद्वारा प्रविष्टं निवेशं सूचयितुं the इत्यस्य उपयोगं कुर्वन्तु ।

निर्देशिकाः परिवर्तयितुं cdतदनन्तरं निर्देशिकायाः नाम टङ्कयन्तु ।
सेटिंग्स् सम्पादयितुं, नुदन्तु ctrl + ,

html

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>टैग् इत्यस्य उपयोगं कुर्वन्तु ।

अयं पाठः सङ्गणकप्रोग्रामात् नमूनानिर्गमरूपेण व्यवहर्तुं अभिप्रेतः ।

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

सारणीः

सारणीः शैली s मध्ये किञ्चित् समायोजिताः सन्ति , सीमाः संकुचन्ति, सम्पूर्णे <caption>च सुसंगतं सुनिश्चितं कुर्वन्ति । text-alignसीमानां, गद्दी, इत्यादीनां अतिरिक्तपरिवर्तनानि वर्गेण सह आगच्छन्ति.table .

एतत् उदाहरणसारणी अस्ति, एतत् च सामग्रीवर्णनार्थं तस्य शीर्षकम् अस्ति ।
सारणी शीर्षक	सारणी शीर्षक	सारणी शीर्षक	सारणी शीर्षक
सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक
सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक
सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक	सारणी कोष्ठक

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</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).

एते परिवर्तनानि, अधिकानि च अधः प्रदर्शितानि सन्ति ।

उदाहरण आख्यायिका

उदाहरण इनपुट

उदाहरणम् ईमेल

उदाहरण दूरभाष

उदाहरणम् url

उदाहरण संख्या

उदाहरण अन्वेषणम्

उदाहरण श्रेणी

उदाहरणं सञ्चिकानिवेशः

उदाहरण चयन करें

एतत् चेकबॉक्सं चिनोतु

विकल्पः एकः इदम् तत् च अस्ति विकल्पः द्वौ अन्यत् किमपि अस्ति यत् एतेषां आडम्बरपूर्णरूपनियन्त्रणानां वेष्टनं प्रदर्शयितुं अपि सुपर दीर्घः अस्ति। विकल्पः तृतीयः अक्षमः अस्ति

उदाहरण पाठक्षेत्रम्

उदाहरण तिथि

उदाहरण काल

उदाहरण गुप्तशब्द

उदाहरण तिथिसमय-स्थानीय

उदाहरण सप्ताह

उदाहरण मास

उदाहरण वर्ण

उदाहरण आउटपुट १००

तिथि एवं रंग इनपुट समर्थन

मनसि धारयतु तिथिनिवेशाः सर्वैः ब्राउजर्-द्वारा पूर्णतया समर्थिताः न सन्ति, अर्थात् सफारी ।

बटन पर सूचक

role="button"Reboot इत्यत्र पूर्वनिर्धारितं कर्सरं परिवर्तयितुं कृते एकं वर्धनं समाविष्टम् अस्ति pointer। तत्त्वानि अन्तरक्रियाशीलाः इति सूचयितुं साहाय्यं कर्तुं तत्त्वेषु एतत् विशेषतां योजयन्तु । एषा भूमिका तत्त्वानां कृते आवश्यकी नास्ति <button>, ये स्वकीयं cursorपरिवर्तनं प्राप्नुवन्ति।

गैर-बटन तत्व बटन

html

<span role="button" tabindex="0">Non-button element button</span>

विविध तत्व

पत्रसङ्केतः

ब्राउजर् पूर्वनिर्धारितं तः to तः <address>पुनः सेट् कर्तुं तत्त्वं अद्यतनं भवति । अपि इदानीं अनुवंशिकः अस्ति, अपि च योजितः अस्ति । s समीपस्थस्य पूर्वजस्य (अथवा कार्यस्य सम्पूर्णस्य निकायस्य) सम्पर्कसूचनाः प्रस्तुत्यर्थं भवन्ति। इत्यनेन रेखाः समाप्तं कृत्वा स्वरूपणं संरक्षितं कुर्वन्तु ।font-styleitalicnormalline-heightmargin-bottom: 1rem<address><br>

ट्विटर, इंक
1355 मार्केट सेंट, सुइट 900
सैन फ्रांसिस्को, सीए 94103
पी: (123) 456-7890

पूर्ण नाम
[email protected]

Blockquote इति

marginblockquotes इत्यत्र पूर्वनिर्धारितं 1em 40px, अतः 0 0 1remअन्यैः तत्त्वैः सह किमपि अधिकं सुसंगतं किमपि कृते वयं तत् पुनः सेट् कुर्मः ।

एकं सुप्रसिद्धं उद्धरणं, एकस्मिन् blockquote तत्वे निहितम्।

Source Title इत्यस्मिन् कश्चन प्रसिद्धः

इनलाइन तत्व

अनुच्छेदपाठस्य मध्ये <abbr>विशिष्टं कर्तुं तत्त्वं मूलभूतं स्टाइलिंग् प्राप्नोति ।

HTML संक्षिप्त नाम तत्व ।

संक्षेपः

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

पुनः आरभत

समीपगमनम्‌

CSS चर

पृष्ठ पूर्वनिर्धारित

देशी फॉन्ट ढेर

शीर्षक एवं अनुच्छेद

क्षैतिज नियम

सूचीति

इनलाइन कोड

कोड ब्लॉक

चर

उपयोगकर्ता इनपुट

नमूना आउटपुट

सारणीः

रूपाणि

तिथि एवं रंग इनपुट समर्थन

बटन पर सूचक

विविध तत्व

पत्रसङ्केतः

Blockquote इति

इनलाइन तत्व

संक्षेपः

HTML5 [hidden]विशेषता

jQuery असङ्गतता

HTML5 `[hidden]`विशेषता