रीबूट करा

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

दृष्टीकोन

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

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

डीफॉल्ट वेब फॉन्ट (Helvetica Neue, Helvetica आणि Arial) बूटस्ट्रॅप 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>आणि जागतिक स्तरावर आपोआप वारसा मिळते. ग्लोबल स्विच करण्यासाठी 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काढून टाकल्या आहेत आणि a margin-bottom: 1rem. नेस्टेड याद्या नाहीत margin-bottom.

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

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

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

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

पूर्वस्वरूपित मजकूर

<pre>घटक काढून टाकण्यासाठी आणि त्याच्यासाठी युनिट्स margin-topवापरण्यासाठी रीसेट केला आहे .remmargin-bottom

.example-element {
  समास-तळाशी: 1rem;
}

टेबल्स

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

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

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

उदाहरण इनपुट

उदाहरण निवडा

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

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

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

उदाहरण तारीख

उदाहरण वेळ

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

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

role="button"डीफॉल्ट कर्सर मध्ये बदलण्यासाठी रीबूटमध्ये सुधारणा समाविष्ट आहे pointer. घटक परस्परसंवादी आहेत हे सूचित करण्यात मदत करण्यासाठी घटकांमध्ये ही विशेषता जोडा. ही भूमिका <button>घटकांसाठी आवश्यक नाही, जे स्वतःचे cursorबदल घडवून आणतात.

नॉन-बटन घटक बटण

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

Nulla attr vitae elit libero, a pharetra augue.

सारांश

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

काही तपशील

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

आणखी तपशील

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

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

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

<input type="text" hidden>

jQuery विसंगतता

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

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