रीबूट करा
रीबूट, एकल फाइलमधील घटक-विशिष्ट 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
लागू केले जाते <body>
आणि जागतिक स्तरावर आपोआप वारसा मिळते. ग्लोबल स्विच करण्यासाठी font-family
, बूटस्ट्रॅप अद्यतनित करा $font-family-base
आणि पुन्हा कंपाइल करा.
मथळे आणि परिच्छेद
सर्व शीर्षक घटक—उदा., <h1>
—आणि ते काढून टाकण्यासाठी <p>
रीसेट केले आहेत . margin-top
मथळे जोडले आहेत आणि सोपे अंतरासाठी margin-bottom: .5rem
परिच्छेद .margin-bottom: 1rem
शीर्षक | उदाहरण |
---|---|
|
h1. बूटस्ट्रॅप शीर्षक |
|
h2. बूटस्ट्रॅप शीर्षक |
|
h3. बूटस्ट्रॅप शीर्षक |
|
h4. बूटस्ट्रॅप शीर्षक |
|
h5. बूटस्ट्रॅप शीर्षक |
|
h6. बूटस्ट्रॅप शीर्षक |
याद्या
सर्व सूची — <ul>
, <ol>
, आणि <dl>
— त्यांच्या margin-top
काढून टाकल्या आहेत आणि a margin-bottom: 1rem
. नेस्टेड याद्या नाहीत margin-bottom
.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
- प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
- नुल्ला volutpat aliquam velit
- फॅसेलस आयकुलिस नेक
- पुरूस सोडलेस ultricies
- वेस्टिबुलम लाओरेट पोर्टिटर सेम
- Ac tristique libero volutpat येथे
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- porttitor lorem Eget
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
- प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
- नुल्ला volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- porttitor lorem Eget
सोप्या शैलीसाठी, स्पष्ट पदानुक्रम आणि चांगल्या अंतरासाठी, वर्णन सूचींनी margin
s अपडेट केले आहेत. <dd>
वर रीसेट margin-left
करा 0
आणि जोडा margin-bottom: .5rem
. <dt>
s ठळक आहेत .
- वर्णन याद्या
- अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
- Euismod
- Vestibulum id ligula porta felis euismod Semper eget lacinia odio sem.
- Donec id elit non mi porta gravida at eget metus.
- मालेसुडा पोर्टा
- Etiam porta sem malesuada magna mollis euismod.
पूर्वस्वरूपित मजकूर
<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
बदल घडवून आणतात.
विविध घटक
पत्ता
वरून ब्राउझर डीफॉल्ट रीसेट करण्यासाठी <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
इतर घटकांशी अधिक सुसंगत करण्यासाठी रीसेट करतो.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.
इनलाइन घटक
<abbr>
घटकाला परिच्छेद मजकूरामध्ये वेगळे दिसण्यासाठी मूलभूत शैली प्राप्त होते .
सारांश
cursor
सारांश वर डीफॉल्ट आहे, म्हणून आम्ही त्यावर क्लिक करून घटकाशी संवाद साधला जाऊ शकतो हे सांगण्यासाठी ते text
रीसेट करतो .pointer
काही तपशील
तपशीलांबद्दल अधिक माहिती.
आणखी तपशील
येथे तपशीलांबद्दल आणखी तपशील आहेत.
HTML5 [hidden]
विशेषता
HTML5 adds a new global attribute named [hidden]
, which is styled as display: none
by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; }
to help prevent its display
from getting accidentally overridden. While [hidden]
isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.
jQuery incompatibility
[hidden]
is not compatible with jQuery’s $(...).hide()
and $(...).show()
methods. Therefore, we don’t currently especially endorse [hidden]
over other techniques for managing the display
of elements.
To merely toggle the visibility of an element, meaning its display
is not modified and the element can still affect the flow of the document, use the .invisible
class instead.