Source

रिबूट करचें

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

मोख

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

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

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

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

आनी घटक चड बरे पान-व्यापी मुलभूत पुरवण करपाक अद्ययावत केल्यात <html>. <body>चड विशिश्टपणान सांगपाचें जाल्यार: १.

द box-sizingदरेक घटकाचेर जागतीकपणान सेट केला- *::beforeआनी *::after, ते सयत border-box. हाका लागून पॅडींग वा बॉर्डराक लागून घटकाची जाहीर केल्ली रुंदाय केन्नाच वयर वचची ना हाची खात्री जाता.
चेर कसलोच बेस font-sizeजाहीर केल्लो ना <html>, पूण 16pxगृहीत धरला (ब्राउझर मुलभूत). वापरप्यांच्या प्राधान्यांक आदर दितना आनी चड सुलभ पद्दत सुनिश्चीत करतना माध्यम क्वेरी वरवीं सोप्या प्रतिसाद प्रकार-मापन खातीर font-size: 1remलागू केला .<body>
द <body>तशेंच एक जागतीक font-family, line-height, आनी सेट करता text-align. फॉन्ट विसंगती आडावपाखातीर हें फुडें कांय फॉर्म घटकांक वारसा मेळटा.
सुरक्षे खातीर, the <body>has a declared background-color, डिफॉल्टिंग #fff.

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

मुलभूत वेब फॉन्ट (Helvetica Neue, Helvetica, आनी Arial) Bootstrap 4 त सोडून दिल्यात आनी दरेक डिव्हायस आनी OS चेर इष्टतम मजकूर रेंडरींग खातीर “मुळ फॉन्ट स्टॅक” बदलल्यात. ह्या स्मॅशिंग नेमाळ्याच्या लेखांत मुळ फॉन्ट स्टॅक विशीं चड वाचात .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

हें 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 हें नांव. बूटस्ट्रॅप शीर्षक

यादी दिता

सगळ्यो यादी— <ul>, <ol>, आनी <dl>—तांची margin-topकाडून उडयल्या आनी एक margin-bottom: 1rem. नेस्टेड यादींनी ना margin-bottom.

लोरेम इप्सम डोलोर बस आमेत
Consectetur adipiscing एलिट हें नांव
मासा हांगा पूर्णांक मोलेस्टी लोरेम
प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
नुल्ला वोलुत्पात आलिक्वाम वेलिट
- फासेलस इअकुलिस नेक हें नांव
- पुरुस सोडलेस अल्ट्रिसीस
- वेस्टिबुलम लाओरीत पोर्टिटोर सेम
- एसी ट्रिस्टीक लिबेरो वोलुत्पात अॅट
फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
एनियन बस अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम

लोरेम इप्सम डोलोर बस आमेत
Consectetur adipiscing एलिट हें नांव
मासा हांगा पूर्णांक मोलेस्टी लोरेम
प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
नुल्ला वोलुत्पात आलिक्वाम वेलिट
फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
एनियन बस अमेत एरात नुंक
एगेट पोर्टिटोर लोरेम

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

वर्णन यादी: संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.
युइस्मोड हांणी केला: वेस्टिबुलम आयडी लिगुला पोर्टा फेलिस युइसमोड सेम्पर एगेट लॅसिनिया ओडियो सेम.; डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस.
मालेसुआदा पोर्टा: एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड.

पूर्वस्वरूपण केल्लो मजकूर

घटक ताचें काडून उडोवपाक आनी ताच्या खातीर एकक वापरपाक <pre>रीसेट करतात .margin-topremmargin-bottom

.उदाहरण-घटक { .
  मार्जिन-तळें: 1rem;
} हें .

कोश्टकां

कोश्टकां शैली <caption>s कडेन मात्शे समायोजीत केल्यात, शिमो कोसळटात, आनी पुरायपणान सुसंगत text-alignआसात हाची खात्री करतात. शिमो, पॅडींग, आनी हेर खातीर अतिरिक्त बदल वर्गा वांगडा येतात.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).

हे बदल, आनी हेर, सकयल दाखयल्यात.

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

उदाहरण इनपुट

उदाहरण निवडात

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

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

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

उदाहरण तारीख

उदाहरण काळ

उदाहरण उत्पादन १०० आनी

विविध घटक

नामो

ब्राउझर मुलभूत रिसेट करपाक <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>घटकाक मुळावी स्टायलिंग मेळटा.

Nulla attr vitae एलिट लिबेरो, एक फारेत्रा औग.

सारांश

सारांशाचेर मुलभूत cursorआसा text, देखून आमी तें रीसेट pointerकरून घटकाचेर क्लिक करून ताचे कडेन संवाद सादूं येता हें सांगपाक.

कांय तपशील

तपशीलां विशीं चड म्हायती.

आनीकय चड तपशील

तपशीलां विशीं आनीकय चड म्हायती हांगा दिल्या.

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

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

<input type="text" hidden>

jQuery असंगतताय

[hidden]$(...).hide()jQuery's आनी $(...).show()पद्दतींकडेन सुसंगत ना . देखून, आमी सद्या घटकांचे [hidden]वेवस्थापन करपा खातीर हेर तंत्रां परस खासा मान्यताय दिना.display

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