रिबूट करचें

रिबूट, एकाच फायलीन घटक-विशिश्ट CSS बदलांचो संग्रह, उबारपाक एक सुंदर, सुसंगत, आनी सोपी मुळावी रेखा पुरवण करपाक बूटस्ट्रॅप किकस्टार्ट करात.

ह्या पानाचेर

मोख

रिबूट Normalize चेर उबारता, फकत घटक निवडक वापरून जायत्या HTML घटकांक कांय प्रमाणांत मतदार शैली पुरवण करता. अतिरिक्त स्टायलिंग फकत वर्गां वांगडा करतात. देखीक, आमी कांय <table>शैलीं साद्या बेसलाइन खातीर रिबूट करतात आनी उपरांत .table, .table-bordered, आनी हेर पुरवण करतात.

रिबूटांत कितें ओव्हररायड करचें तें निवडपाचीं आमचीं मार्गदर्शक तत्वां आनी कारणां हांगा दिल्यांत:

मापनीय घटक अंतराखातीर rems बदला s वापरपाखातीर कांय ब्राउझर मुलभूत मोलां अद्ययावत करात .em
टाळचें margin-top. उबे किनारी कोसळूंक शकता, जाका लागून अनपेक्षीत परिणाम मेळटात. पूण ताचे परस चड म्हत्वाचें म्हणल्यार एकूच दिका marginएक सादें मानसीक आदर्श आसा.
साधन आकारांतल्यान सोंपें मापन करपाखातीर, ब्लॉक घटकांनी rems खातीर margins वापरपाक जाय.
-संबंदीत गुणधर्मांची घोशणा fontउण्यांत उणी दवरात, inheritशक्य आसल्यार वापरात.

सीएसएस चड-उणें

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 व्हेरिएबल वापरनात जाल्यार लेगीत, तुमचे कडेन Sass ची सगळी शक्त आसा. हें अजून चालू आसा आनी पुरायपणान चालीक लावपाक वेळ लागतलो.

देखीक, :rootसामान्य <body>शैलींखातीर हे CSS चड-उणें विचारांत घेयात:

  @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};

वेव्हारांत, ते चड-उणें मागीर रिबूटांत अशे तरेन लागू करतात:

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>

पृष्ठ मुलभूत जातात

आनी घटक चड बरे पान-व्यापी मुलभूत पुरवण करपाक अद्ययावत केल्यात <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. फॉन्ट विसंगती आडावपाखातीर हें फुडें कांय फॉर्म घटकांक वारसा मेळटा.
सुरक्षे खातीर, the <body>has a declared background-color, डिफॉल्टिंग #fff.

मुळ फॉन्ट स्टॅक

दरेक डिव्हायस आनी OS चेर इष्टतम मजकूर रेंडरींग करपाखातीर बूटस्ट्रॅप “मुळ फॉन्ट स्टॅक” वा “सिस्टम फॉन्ट स्टॅक” वापरता. हे प्रणाली फॉन्ट खास करून आयच्या साधनांक मतींत घेवन तयार केल्यात, पडद्याचेर सुदारीत रेंडरींग, बदलपी फॉन्ट आदार आनी हेर. ह्या स्मॅशिंग नेमाळ्याच्या लेखांत मुळ फॉन्ट स्टॅक विशीं चड वाचात .

$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;

लक्षांत दवरात की फॉन्ट स्टॅकांत इमोजी फॉन्टांचो आस्पाव आशिल्ल्यान, जायते सामान्य चिन्न/डिंगबॅट युनिकोड वर्ण बहुरंगी चित्रलेख म्हणून रेंडर करतले. तांचें रूप बदलतले, ब्राउझर/प्लॅटफॉर्माच्या मुळ इमोजी फॉन्टांत वापरिल्ले शैलीचेर आदारून, आनी खंयच्याच CSS colorशैलींचो तांचेर परिणाम जावचो ना.

हें font-familyलागू जाता <body>आनी पुराय बूटस्ट्रॅपांत जागतीकपणान आपोआप वारसा मेळटा. जागतीक बदलपाक , Bootstrap font-familyअद्ययावत करात आनी परतून संकलित करात.$font-family-base

शीर्षकां आनी परिच्छेद

सगळे शीर्षक घटक-देखीक, <h1>—आनी <p>तांचे margin-topकाडून उडोवपाक रिसेट करतात. सोंपें अंतर दवरपा खातीर शीर्षकां margin-bottom: .5remआनी परिच्छेद जोडल्यात .margin-bottom: 1rem

शीर्षक	उदारण
`<h1></h1>`	h1. बूटस्ट्रॅप शीर्षक
`<h2></h2>`	h2. बूटस्ट्रॅप शीर्षक
`<h3></h3>`	h3 हें नांव. बूटस्ट्रॅप शीर्षक
`<h4></h4>`	h4 हें नांव. बूटस्ट्रॅप शीर्षक
`<h5></h5>`	h5. बूटस्ट्रॅप शीर्षक
`<h6></h6>`	h6 हें नांव. बूटस्ट्रॅप शीर्षक

आडवे नेम

घटक <hr>सोंपें केलां. ब्राउझर मुलभूतां प्रमाणें, <hr>s via स्टायल केल्ले आसात border-top, मुलभूत आसा opacity: .25, आनी आपसूक तांचे border-colorvia वारसा दितात, पालक वरवीं केन्ना सेट केला colorसयत . colorमजकूर, शिमो, आनी अपारदर्शकता उपयुक्तताय वापरून त्यो बदलूं येतात.

एचटीएमएल हें नांव

<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काडून उडयल्या आनी एक margin-bottom: 1rem. नेस्टेड यादींनी ना margin-bottom. तशेंच आमी padding-leftऑन <ul>आनी <ol>एलिमेंट्स रिसेट केल्यात.

सगळ्या यादींचें वयलें मार्जिन काडून उडयलां
आनी तांचें तळें मार्जिन सामान्य जालें
नेस्टेड यादींक तळें मार्जिन नासता
- अशे तरेन तांकां चड समरूप दिसता
- खास करून जेन्ना ताचे उपरांत चड वळेरी वस्तू येतात
डावें पॅडींगय रिसेट केलां

हांगा एक ऑर्डर केल्ली वळेरी आसा
थोड्या यादीक वस्तूं सयत
ताका एकंदर रूप एकूच आसता
आदले अक्रम्य वळेरे प्रमाण

सोपी स्टायलिंग, स्पश्ट श्रेणीबध्दता, आनी चड बरी अंतरां खातीर, वर्णन यादींनी margins अद्ययावत केल्यात. <dd>s रीसेट margin-leftकरचें 0आनी जोडचें margin-bottom: .5rem. <dt>s मोटव्या अक्षरांनी बरयलां .

वर्णन यादी: संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.
शब्द: ह्या उतराखातीर व्याख्या.; त्याच संज्ञाची दुसरी व्याख्या.
दुसरी एक संज्ञा: ह्या दुसर् या संज्ञाची व्याख्या.

इनलायन कोड

कोडाचे इनलायन स्निपेट 1 च्या आदारान गुठलावचे <code>. HTML कोन कंसांतल्यान सुटपाची खात्री करात.

देखीक, <section>इनलायन म्हणून गुठलावपाक जाय.

एचटीएमएल हें नांव

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

कोड ब्लॉक करतात

<pre>कोडाच्या जायत्या ओळींखातीर s वापरात . परत एक फावट, योग्य रेंडरींग खातीर कोडांतल्या खंयच्याय कोन कंसांतल्यान सुटपाची खात्री करात. घटक ताचें काडून उडोवपाक आनी ताच्या खातीर एकक वापरपाक <pre>रीसेट करतात .margin-topremmargin-bottom

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

एचटीएमएल हें नांव

<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 = m x + ब हें नांव

एचटीएमएल हें नांव

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

वापरपी इनपुट

<kbd>सादारणपणान कीबोर्ड वरवीं दाखयल्लें इनपुट दाखोवपाक वापरात .

निर्देशिका बदलपाखातीर, cdताचे उपरांत निर्देशिका नांव टाइप करात.
मांडावळी संपादीत करपाक, दामचें 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 .

हें एक उदाहरण कोश्टक, आनी हें ताचें मथळें आशयाचे वर्णन करपाक.
कोश्टक शीर्षक	कोश्टक शीर्षक	कोश्टक शीर्षक	कोश्टक शीर्षक
कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका
कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका
कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका

एचटीएमएल हें नांव

<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, फील्डसेटांभशेन, सारकें शीर्षक म्हणून दाखोवपाखातीरय रिस्टायल केल्यात.
<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"रिबूटांत मुलभूत कर्सर बदलपाखातीर एक सुदारणा आसपावीत केल्या pointer. घटक परस्पर संवादात्मक आसात हें दाखोवपाक मदत करपाक हें गुणधर्म घटकांक जोडचें. ही भुमिका <button>घटकां खातीर गरजेची ना, जांकां स्वताचो cursorबदल मेळटा.

बिगर बटण तत्व बटण

एचटीएमएल हें नांव

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

विविध घटक

नामो

ब्राउझर मुलभूत रिसेट करपाक <address>घटक अद्ययावत font-styleकेला . तशेंच आतां वारसा मेळ्ळां, आनी जोडलां. s लागींच्या पूर्वजा खातीर (वा पुराय कामाची कूड) संपर्क म्हायती सादर करपा खातीर आसात. च्या आदारान ओळी सोंपोवन स्वरूपण सांबाळचें .italicnormalline-heightmargin-bottom: 1rem<address><br>

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

पुराय नांव
[email protected]

ब्लॉककोट करचें

marginblockquotes चेर मुलभूत आसा , देखून आमी तें हेर घटकांकडेन चड सुसंगत कितें तरी 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 बदला वर्ग वापरात.

रिबूट करचें

मोख

सीएसएस चड-उणें

पृष्ठ मुलभूत जातात

मुळ फॉन्ट स्टॅक

शीर्षकां आनी परिच्छेद

आडवे नेम

यादी दिता

इनलायन कोड

कोड ब्लॉक करतात

चड-उणें

वापरपी इनपुट

नमुनेचें उत्पादन

कोश्टकां

रूपां

तारीख & रंग इनपुट समर्थन

बटणांचेर पॉयंटर्स

विविध घटक

नामो

ब्लॉककोट करचें

इनलायन घटक

सारांश

एचटीएमएल 5 [hidden]गुणधर्म

jQuery असंगतताय

एचटीएमएल 5 `[hidden]`गुणधर्म