रिबूट करचें

रिबूट, एकाच फायलीन घटक-विशिश्ट 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,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // 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 हें नांव. बूटस्ट्रॅप शीर्षक

यादी दिता

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

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

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

सोपी स्टायलिंग, स्पश्ट श्रेणीबध्दता, आनी चड बरी अंतर दवरपा खातीर, वर्णन यादींनी 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).

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

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

उदाहरण इनपुट

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

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

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

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

उदाहरण तारीख

उदाहरण काळ

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

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

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>घटकाक मुळावी स्टायलिंग मेळटा.

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 बदला वर्ग वापरात.