रिबुट गर्नुहोस्

रिबुट, एकल फाइलमा तत्व-विशिष्ट CSS परिवर्तनहरूको संग्रह, निर्माण गर्न सुरुचिपूर्ण, सुसंगत, र सरल आधाररेखा प्रदान गर्न किकस्टार्ट बुटस्ट्र्याप।

यस पृष्ठमा

दृष्टिकोण

रिबुटले नर्मलाइजमा निर्माण गर्दछ, धेरै HTML तत्वहरू प्रदान गर्दछ केही हदसम्म विचार शैलीहरू मात्र तत्व चयनकर्ताहरू प्रयोग गरेर। अतिरिक्त स्टाइल केवल कक्षा संग गरिन्छ। उदाहरण को लागी, हामी केहि <table>शैलीहरु लाई सरल आधार रेखा को लागी रिबुट गर्छौं र पछि .table, .table-bordered, र थप प्रदान गर्दछौं।

यहाँ हाम्रा मार्गनिर्देशनहरू र रिबुटमा के ओभरराइड गर्ने छनौट गर्ने कारणहरू छन्:

स्केलेबल कम्पोनेन्ट स्पेसिङका लागि 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 चरहरू थप्छ , त्यो बन्डलमा जतिसुकै प्रयोग गरिन्छ। अन्ततः बुटस्ट्र्याप 5 ले समयसँगै थप CSS चरहरू देख्न जारी राख्नेछ , ससलाई सधैँ पुन: कम्पाइल नगरी थप वास्तविक-समय अनुकूलन प्रदान गर्न। हाम्रो दृष्टिकोण भनेको हाम्रो स्रोत Sass चरहरू लिनु र तिनीहरूलाई CSS चरहरूमा रूपान्तरण गर्नु हो। यस तरिकाले, यदि तपाइँ CSS चरहरू प्रयोग गर्नुहुन्न भने, तपाइँसँग अझै पनि 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};

अभ्यासमा, ती चरहरू त्यसपछि रिबुटमा लागू हुन्छन्:

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-familyfont-weightline-heightcolor
सुरक्षा को लागी, <body>एक घोषित छ background-color, मा पूर्वनिर्धारित #fff।

नेटिभ फन्ट स्ट्याक

बुटस्ट्र्यापले प्रत्येक उपकरण र ओएसमा इष्टतम पाठ रेन्डरिङको लागि "नेटिभ फन्ट स्ट्याक" वा "प्रणाली फन्ट स्ट्याक" प्रयोग गर्दछ। यी प्रणाली फन्टहरू विशेष रूपमा आजका यन्त्रहरूलाई ध्यानमा राखेर डिजाइन गरिएको हो, स्क्रिनहरूमा सुधारिएको रेन्डरिङ, चल फन्ट समर्थन र थप कुराहरू। यस Smashing पत्रिका लेखमा नेटिभ फन्ट स्ट्याकहरूको बारेमा थप पढ्नुहोस् ।

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

ध्यान दिनुहोस् कि फन्ट स्ट्याकमा इमोजी फन्टहरू समावेश भएकाले, धेरै सामान्य प्रतीक/डिंगब्याट युनिकोड वर्णहरू बहुरंगी चित्रको रूपमा रेन्डर गरिनेछ। colorब्राउजर/प्लेटफर्मको नेटिभ इमोजी फन्टमा प्रयोग गरिएको शैलीको आधारमा तिनीहरूको उपस्थिति भिन्न हुनेछ, र तिनीहरू कुनै पनि CSS शैलीहरूले प्रभावित हुने छैनन् ।

यो बुटस्ट्र्यापमा विश्वव्यापी रूपमा font-familyलागू हुन्छ र स्वचालित रूपमा इनहेरिट हुन्छ। <body>ग्लोबल स्विच गर्न 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 मार्फत स्टाइल गरिएको छ border-top, पूर्वनिर्धारित छ opacity: .25, र स्वचालित रूपमा तिनीहरूको border-colorमार्फत इनहेरिट गर्दछ 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-leftअन <ul>र <ol>एलिमेन्टहरू पनि रिसेट गरेका छौं।

सबै सूचीहरूको शीर्ष मार्जिन हटाइयो
र तिनीहरूको तल्लो मार्जिन सामान्य भयो
नेस्टेड सूचीहरूमा कुनै तल्लो मार्जिन छैन
- यस तरिकाले तिनीहरूको उपस्थिति अझ बढी छ
- विशेष गरी जब थप सूची वस्तुहरू पछि
बायाँ प्याडिङ पनि रिसेट गरिएको छ

यहाँ अर्डर गरिएको सूची छ
केहि सूची वस्तुहरु संग
यसको समग्र रूप समान छ
अघिल्लो अक्रमित सूची जस्तै

सरल शैली, स्पष्ट पदानुक्रम, र राम्रो स्पेसिङको लागि, विवरण सूचीहरू अद्यावधिक गरिएको marginछ। <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 = m x + b

html

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

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

<kbd>किबोर्ड मार्फत सामान्यतया प्रविष्ट गरिएको इनपुट संकेत गर्न प्रयोग गर्नुहोस् ।

डाइरेक्टरीहरू स्विच गर्न, 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>

तालिकाहरू

तालिकाहरू शैलीहरू <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, फिल्डसेटहरू जस्तै, पनि प्रकारको शीर्षकको रूपमा प्रदर्शन गर्न पुन: स्टाइल गरिएको छ।
<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)।

यी परिवर्तनहरू, र थप, तल देखाइएको छ।

उदाहरण पौराणिक कथा

उदाहरण इनपुट

उदाहरण इमेल

उदाहरण टेलिफोन

उदाहरण url

उदाहरण नम्बर

उदाहरण खोज

उदाहरण दायरा

उदाहरण फाइल इनपुट

उदाहरण चयन गर्नुहोस्

यो चेकबक्स जाँच गर्नुहोस्

विकल्प एक यो र त्यो हो विकल्प दुई भनेको अर्को चीज हो जुन यी फैंसी फारम नियन्त्रणहरूको र्‍यापिङ प्रदर्शन गर्न पनि धेरै लामो छ। विकल्प तीन अक्षम छ

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

उदाहरण मिति

उदाहरण समय

उदाहरण पासवर्ड

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

उदाहरण हप्ता

उदाहरण महिना

उदाहरण रंग

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

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

दिमागमा राख्नुहोस् मिति इनपुटहरू सफारी नामक सबै ब्राउजरहरूद्वारा पूर्ण रूपमा समर्थित छैनन् ।

बटनहरूमा सूचकहरू

role="button"रिबुटले पूर्वनिर्धारित कर्सरलाई मा परिवर्तन गर्नको लागि परिवर्द्धन समावेश गर्दछ pointer। तत्वहरू अन्तरक्रियात्मक छन् भनेर संकेत गर्न मद्दत गर्न तत्वहरूमा यो विशेषता थप्नुहोस्। यो भूमिका तत्वहरूको लागि आवश्यक छैन <button>, जसले आफ्नै cursorपरिवर्तन प्राप्त गर्दछ।

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

html

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

विविध तत्वहरू

ठेगाना

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

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

पूरा नाम
[email protected]

ब्लककोट

blockquotes मा पूर्वनिर्धारित marginछ 1em 40px, त्यसैले हामीले यसलाई 0 0 1remअन्य तत्वहरूसँग थप सुसंगत कुराको लागि रिसेट गर्छौं।

एक प्रसिद्ध उद्धरण, एक blockquote तत्व मा समावेश।

स्रोत शीर्षकमा प्रसिद्ध कोही

इनलाइन तत्वहरू

<abbr>तत्वले यसलाई अनुच्छेद पाठको बीचमा अलग बनाउन आधारभूत स्टाइल प्राप्त गर्दछ ।

HTML संक्षिप्त तत्व ।

सारांश

cursorसारांशमा पूर्वनिर्धारित हो, त्यसैले हामी त्यसमा क्लिक गरेर तत्वसँग अन्तर्क्रिया गर्न सकिन्छ भनेर बताउनका लागि textरिसेट गर्छौं ।pointer

केही विवरण

विवरणहरूको बारेमा थप जानकारी।

अझै थप विवरण

यहाँ विवरणहरूको बारेमा थप विवरणहरू छन्।

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

HTML5 ले नामको नयाँ विश्वव्यापी विशेषता[hidden]display: none थप्छ, जुन पूर्वनिर्धारित रूपमा स्टाइल गरिएको छ। PureCSS बाट एउटा विचार उधारो लिदै, हामी यसलाई संयोगवश ओभरराइड [hidden] { display: none !important; }हुनबाट जोगाउन मद्दत गरेर यो पूर्वनिर्धारितमा सुधार गर्छौं display।

<input type="text" hidden>

jQuery असंगति

[hidden]jQuery $(...).hide()र $(...).show()विधिहरूसँग उपयुक्त छैन। त्यसकारण, हामी हाल विशेष गरी तत्वहरूको [hidden]व्यवस्थापनका लागि अन्य प्रविधिहरूलाई समर्थन गर्दैनौं।display

केवल एक तत्वको दृश्यता टगल गर्न, यसको अर्थ displayपरिमार्जन गरिएको छैन र तत्वले अझै पनि कागजातको प्रवाहलाई असर गर्न सक्छ, यसको सट्टामा वर्ग प्रयोग गर्नुहोस्.invisible ।

रिबुट गर्नुहोस्

दृष्टिकोण

CSS चरहरू

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

नेटिभ फन्ट स्ट्याक

शीर्षक र अनुच्छेदहरू

तेर्सो नियम

सूचीहरू

इनलाइन कोड

कोड ब्लकहरू

चरहरू

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

नमूना आउटपुट

तालिकाहरू

फारमहरू

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

बटनहरूमा सूचकहरू

विविध तत्वहरू

ठेगाना

ब्लककोट

इनलाइन तत्वहरू

सारांश

HTML5 [hidden]विशेषता

jQuery असंगति

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