रीबूट करा

रीबूट, एकल फाइलमधील घटक-विशिष्ट 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. हे सर्व बंडलमध्ये लेव्हल CSS व्हेरिएबल्स जोडते :root, त्यापैकी किती बंडलमध्ये वापरले आहेत याची पर्वा न करता. शेवटी Bootstrap 5 मध्ये अधिक CSS व्हेरिएबल्स वेळोवेळी जोडले जातील, जेणेकरून नेहमी Sass पुन्हा कंपाइल न करता अधिक रिअल-टाइम कस्टमायझेशन प्रदान करता येईल. आमचा दृष्टीकोन म्हणजे आमचा स्त्रोत Sass व्हेरिएबल्स घेणे आणि त्यांचे CSS व्हेरिएबल्समध्ये रूपांतर करणे. अशा प्रकारे, जरी तुम्ही CSS व्हेरिएबल्स वापरत नसले तरीही, तुमच्याकडे Sass ची सर्व शक्ती आहे. हे अद्याप प्रगतीपथावर आहे आणि पूर्णपणे अंमलबजावणीसाठी वेळ लागेल.

उदाहरणार्थ, सामान्य शैलींसाठी या :rootCSS व्हेरिएबल्सचा विचार करा:<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-family, font-weight, line-height, आणि देखील सेट करते color. फॉन्ट विसंगती टाळण्यासाठी काही फॉर्म घटकांद्वारे हे नंतर वारशाने मिळते.
सुरक्षिततेसाठी, कडे डिफॉल्टिंग <body>घोषित आहे .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>आणि जागतिक स्तरावर आपोआप वारसा मिळते. ग्लोबल स्विच करण्यासाठी 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-colorcolorcolor

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>घटक देखील रीसेट केले आहेत.

सर्व याद्यांचे शीर्ष मार्जिन काढून टाकले आहे
आणि त्यांचे तळाशी मार्जिन सामान्य केले
नेस्टेड सूचीमध्ये तळाशी समास नाही
- अशा प्रकारे त्यांना अधिक समान स्वरूप प्राप्त होते
- विशेषत: जेव्हा अधिक सूची आयटमचे अनुसरण केले जाते
डावे पॅडिंग देखील रीसेट केले गेले आहे

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

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

वर्णन याद्या: अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
मुदत: पदाची व्याख्या.; त्याच पदासाठी दुसरी व्याख्या.
आणखी एक पद: या इतर पदासाठी व्याख्या.

इनलाइन कोड

सह कोडचे इनलाइन स्निपेट गुंडाळा <code>. एचटीएमएल अँगल ब्रॅकेटमधून बाहेर पडण्याची खात्री करा.

उदाहरणार्थ, <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>सारण्या स्टाइल s, कोलॅप्स बॉर्डरमध्ये किंचित समायोजित केल्या आहेत आणि 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 हे बहुतेक नॉर्मलाइज द्वारे संबोधित केले जातात, परंतु रीबूट त्यांचे marginआणि सेट line-height: inheritदेखील काढून टाकते.
<textarea>s मध्‍ये अनुलंब आकार बदलता येण्‍यासाठी सुधारित केले आहे कारण क्षैतिज आकारमानामुळे पृष्‍ठ लेआउट "ब्रेक" होतो.
<button>s आणि <input>बटण घटकांकडे cursor: pointerकधी असते :not(:disabled).

हे बदल आणि बरेच काही खाली दाखवले आहेत.

उदाहरण दंतकथा

उदाहरण इनपुट

उदाहरण ईमेल

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

उदाहरण url

उदाहरण क्रमांक

उदाहरण शोध

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

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

उदाहरण निवडा

हा चेकबॉक्स तपासा

पर्याय एक म्हणजे हे आणि ते पर्याय दोन हे या फॅन्सी फॉर्म कंट्रोल्सचे रॅपिंग प्रदर्शित करण्यासाठी खूप लांब आहे. पर्याय तीन अक्षम आहे

टेक्सटेरियाचे उदाहरण

उदाहरण तारीख

उदाहरण वेळ

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

उदाहरण datetime-स्थानिक

उदाहरण आठवडा

उदाहरण महिना

उदाहरण रंग

उदाहरण आउटपुट 100

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

लक्षात ठेवा तारीख इनपुट सर्व ब्राउझरद्वारे पूर्णपणे समर्थित नाहीत , म्हणजे सफारी.

बटणांवर पॉइंटर

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]

ब्लॉककोट

ब्लॉककोट्सवर डीफॉल्ट marginआहे 1em 40px, म्हणून आम्ही ते 0 0 1remइतर घटकांशी अधिक सुसंगत करण्यासाठी रीसेट करतो.

एक सुप्रसिद्ध कोट, ब्लॉककोट घटकामध्ये समाविष्ट आहे.

स्रोत शीर्षक मध्ये प्रसिद्ध कोणीतरी

इनलाइन घटक

<abbr>घटकाला परिच्छेद मजकूरामध्ये वेगळे दिसण्यासाठी मूलभूत शैली प्राप्त होते .

HTML संक्षेप घटक.

सारांश

cursorसारांश वर डीफॉल्ट आहे, म्हणून आम्ही त्यावर क्लिक करून घटकाशी संवाद साधला जाऊ शकतो हे सांगण्यासाठी ते textरीसेट करतो .pointer

काही तपशील

तपशीलांबद्दल अधिक माहिती.

आणखी तपशील

येथे तपशीलांबद्दल आणखी तपशील आहेत.

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

HTML5 नावाची एक नवीन जागतिक विशेषता[hidden]display: none जोडते, जी डीफॉल्टनुसार शैलीबद्ध केली जाते. PureCSS कडून कल्पना उधार घेऊन , आम्ही या डीफॉल्टमध्ये सुधारणा करून चुकून ओव्हरराइड [hidden] { display: none !important; }होण्यापासून प्रतिबंधित करतो .display

<input type="text" hidden>

jQuery विसंगतता

[hidden]$(...).hide()jQuery च्या आणि $(...).show()पद्धतींशी सुसंगत नाही . म्हणून, आम्ही सध्या विशेषतः घटकांचे [hidden]व्यवस्थापन करण्यासाठी इतर तंत्रांना समर्थन देत नाही.display

घटकाची दृश्यमानता फक्त टॉगल करण्यासाठी, म्हणजे त्यात displayबदल केलेला नाही आणि घटक तरीही दस्तऐवजाच्या प्रवाहावर परिणाम करू शकतो, त्याऐवजी .invisibleवर्ग वापरा.

रीबूट करा

दृष्टीकोन

CSS व्हेरिएबल्स

पृष्ठ डीफॉल्ट

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

मथळे आणि परिच्छेद

क्षैतिज नियम

याद्या

इनलाइन कोड

कोड ब्लॉक्स

चल

वापरकर्ता इनपुट

नमुना आउटपुट

टेबल्स

फॉर्म

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

बटणांवर पॉइंटर

विविध घटक

पत्ता

ब्लॉककोट

इनलाइन घटक

सारांश

HTML5 [hidden]विशेषता

jQuery विसंगतता

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