रीबूट करा
रीबूट, एकल फाइलमधील घटक-विशिष्ट CSS बदलांचा संग्रह, एक सुंदर, सुसंगत आणि साधी आधाररेखा तयार करण्यासाठी बूटस्ट्रॅपला किकस्टार्ट करा.
दृष्टीकोन
रीबूट नॉर्मलाइझ वर बनवते, फक्त घटक निवडक वापरून काही प्रमाणात अभिमत शैलीसह अनेक HTML घटक प्रदान करते. अतिरिक्त स्टाइलिंग केवळ वर्गांसह केले जाते. उदाहरणार्थ, आम्ही <table>
सोप्या बेसलाइनसाठी काही शैली रीबूट करतो आणि नंतर .table
, .table-bordered
, आणि अधिक प्रदान करतो.
रीबूटमध्ये काय ओव्हरराइड करायचे ते निवडण्यासाठी आमची मार्गदर्शक तत्त्वे आणि कारणे येथे आहेत:
- स्केलेबल घटक अंतरासाठी
rem
s ऐवजी s वापरण्यासाठी काही ब्राउझर डीफॉल्ट मूल्ये अद्यतनित करा .em
- टाळा
margin-top
. अनुलंब मार्जिन कोसळू शकतात, अनपेक्षित परिणाम देऊ शकतात. अधिक महत्त्वाचे म्हणजे, ची एकच दिशाmargin
एक सोपी मानसिक मॉडेल आहे. - डिव्हाइस आकारांमध्ये सुलभ स्केलिंगसाठी, ब्लॉक घटकांनी
rem
s साठीmargin
s वापरला पाहिजे. - जेव्हा शक्य असेल तेव्हा
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
.
- सर्व याद्यांचे शीर्ष मार्जिन काढून टाकले आहे
- आणि त्यांचे तळाशी मार्जिन सामान्य केले
- नेस्टेड सूचीमध्ये तळाशी समास नाही
- अशा प्रकारे त्यांना अधिक समान स्वरूप प्राप्त होते
- विशेषत: जेव्हा अधिक सूची आयटमचे अनुसरण केले जाते
- डावे पॅडिंग देखील रीसेट केले गेले आहे
- येथे ऑर्डर केलेली यादी आहे
- काही सूची आयटमसह
- त्याचे एकंदरीत स्वरूप समान आहे
- मागील अक्रमित सूचीप्रमाणे
सोप्या शैलीसाठी, स्पष्ट पदानुक्रम आणि चांगल्या अंतरासाठी, वर्णन सूचींनी margin
s अपडेट केले आहेत. <dd>
वर रीसेट margin-left
करा 0
आणि जोडा margin-bottom: .5rem
. <dt>
s ठळक आहेत .
- वर्णन याद्या
- अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
- मुदत
- पदाची व्याख्या.
- त्याच पदासाठी दुसरी व्याख्या.
- आणखी एक पद
- या इतर पदासाठी व्याख्या.
पूर्वस्वरूपित मजकूर
<pre>
घटक काढून टाकण्यासाठी आणि त्याच्यासाठी युनिट्स margin-top
वापरण्यासाठी रीसेट केला आहे .rem
margin-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)
.
हे बदल आणि बरेच काही खाली दाखवले आहेत.
बटणांवर पॉइंटर
role="button"
डीफॉल्ट कर्सर मध्ये बदलण्यासाठी रीबूटमध्ये सुधारणा समाविष्ट आहे pointer
. घटक परस्परसंवादी आहेत हे सूचित करण्यात मदत करण्यासाठी घटकांमध्ये ही विशेषता जोडा. ही भूमिका <button>
घटकांसाठी आवश्यक नाही, जे स्वतःचे cursor
बदल घडवून आणतात.
<span role="button" tabindex="0">Non-button element button</span>
विविध घटक
पत्ता
वरून ब्राउझर डीफॉल्ट रीसेट करण्यासाठी <address>
घटक अद्यतनित केला आहे . सुद्धा आता वारसा मिळालेला आहे, आणि जोडला गेला आहे. s जवळच्या पूर्वजांसाठी (किंवा संपूर्ण कार्याचा भाग) संपर्क माहिती सादर करण्यासाठी आहेत. सह ओळी समाप्त करून स्वरूपन जतन करा .font-style
italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 पूर्ण नाव
[email protected]
ब्लॉककोट
ब्लॉककोट्सवर डीफॉल्ट margin
आहे 1em 40px
, म्हणून आम्ही ते 0 0 1rem
इतर घटकांशी अधिक सुसंगत करण्यासाठी रीसेट करतो.
एक सुप्रसिद्ध कोट, ब्लॉककोट घटकामध्ये समाविष्ट आहे.
इनलाइन घटक
<abbr>
घटकाला परिच्छेद मजकूरामध्ये वेगळे दिसण्यासाठी मूलभूत शैली प्राप्त होते .
सारांश
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
वर्ग वापरा.