रीबूट करा
रीबूट, एकल फाइलमधील घटक-विशिष्ट CSS बदलांचा संग्रह, एक सुंदर, सुसंगत, आणि साधी आधाररेखा तयार करण्यासाठी बूटस्ट्रॅप किकस्टार्ट करा.
दृष्टीकोन
रीबूट नॉर्मलाइझ वर बनवते, फक्त घटक निवडक वापरून अनेक HTML घटकांना काही प्रमाणात अभिमत शैलीसह प्रदान करते. अतिरिक्त स्टाइलिंग केवळ वर्गांसह केले जाते. उदाहरणार्थ, आम्ही <table>
सोप्या बेसलाइनसाठी काही शैली रीबूट करतो आणि नंतर .table
, .table-bordered
, आणि अधिक प्रदान करतो.
रीबूटमध्ये काय ओव्हरराइड करायचे ते निवडण्यासाठी आमची मार्गदर्शक तत्त्वे आणि कारणे येथे आहेत:
- स्केलेबल घटक अंतरासाठी
rem
s ऐवजी s वापरण्यासाठी काही ब्राउझर डीफॉल्ट मूल्ये अद्यतनित करा .em
- टाळा
margin-top
. अनुलंब मार्जिन कोसळू शकतात, अनपेक्षित परिणाम देऊ शकतात. सर्वात महत्त्वाचे म्हणजे, एकच दिशाmargin
एक सोपी मानसिक मॉडेल आहे. - डिव्हाइस आकारांमध्ये सुलभ स्केलिंगसाठी, ब्लॉक घटकांनी
rem
s साठीmargin
s वापरला पाहिजे. - जेव्हा शक्य असेल तेव्हा
font
वापरून -संबंधित गुणधर्मांची घोषणा किमान ठेवा .inherit
CSS व्हेरिएबल्स
v5.1.1 मध्ये जोडले
v5.1.1 सह, आम्ही आमच्या @import
सर्व CSS बंडलमध्ये ( bootstrap.css
, bootstrap-reboot.css
, आणि bootstrap-grid.css
समाविष्ट करण्यासाठी ) आमच्या आवश्यक s चे प्रमाणित केले आहे _root.scss
. हे सर्व बंडलमध्ये लेव्हल CSS व्हेरिएबल्स जोडते :root
, त्या बंडलमध्ये कितीही वापरल्या गेल्या आहेत. शेवटी बूटस्ट्रॅप 5 चालू राहील कालांतराने जोडलेले अधिक CSS व्हेरिएबल्स पहा.
पृष्ठ डीफॉल्ट
आणि घटक अधिक चांगले पृष्ठ-व्यापी डीफॉल्ट प्रदान करण्यासाठी अद्यतनित केले जातात <html>
. <body>
खास करून:
- हे
box-sizing
जागतिक स्तरावर प्रत्येक घटकावर सेट केले आहे —*::before
आणि*::after
, तेborder-box
. हे सुनिश्चित करते की घटकाची घोषित रुंदी पॅडिंग किंवा बॉर्डरमुळे कधीही ओलांडली जाणार नाही.- वर कोणताही आधार
font-size
घोषित केलेला नाही<html>
, परंतु16px
गृहित धरला आहे (ब्राउझर डीफॉल्ट). वापरकर्ता प्राधान्यांचा आदर करताना आणि अधिक प्रवेशयोग्य दृष्टीकोन सुनिश्चित करताना मीडिया क्वेरीद्वारे सुलभ प्रतिसादात्मक प्रकार-स्केलिंगसाठीfont-size: 1rem
लागू केले जाते . व्हेरिएबलमध्ये<body>
बदल करून हे ब्राउझर डीफॉल्ट ओव्हरराइड केले जाऊ शकते .$font-size-root
- वर कोणताही आधार
- हे
<body>
जागतिकfont-family
,font-weight
,line-height
, आणि देखील सेट करतेcolor
. फॉन्ट विसंगती टाळण्यासाठी काही फॉर्म घटकांद्वारे हे नंतर वारशाने मिळते. - सुरक्षिततेसाठी, कडे डिफॉल्टिंग
<body>
घोषित आहे .background-color
#fff
मूळ फॉन्ट स्टॅक
बूटस्ट्रॅप प्रत्येक डिव्हाइस आणि OS वर इष्टतम मजकूर रेंडरिंगसाठी "नेटिव्ह फॉन्ट स्टॅक" किंवा "सिस्टम फॉन्ट स्टॅक" वापरते. हे सिस्टम फॉन्ट विशेषत: आजच्या डिव्हाइसेसना लक्षात घेऊन डिझाइन केले गेले आहेत, स्क्रीनवर सुधारित रेंडरिंग, व्हेरिएबल फॉन्ट समर्थन आणि बरेच काही. या स्मॅशिंग मॅगझिनच्या लेखात मूळ फॉन्ट स्टॅकबद्दल अधिक वाचा .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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
आणि पुन्हा कंपाइल करा.
CSS व्हेरिएबल्स
जसजसे बूटस्ट्रॅप 5 परिपक्व होत जाईल, तसतसे अधिकाधिक शैली CSS व्हेरिएबल्ससह तयार केल्या जातील , एक साधन म्हणून अधिक रिअल-टाइम कस्टमायझेशन प्रदान करण्यासाठी Sass पुन्हा कंपाइल करण्याची आवश्यकता नाही. आमचा दृष्टीकोन म्हणजे आमचा स्त्रोत Sass व्हेरिएबल्स घेणे आणि त्यांचे CSS व्हेरिएबल्समध्ये रूपांतर करणे. अशा प्रकारे, जरी तुम्ही CSS व्हेरिएबल्स वापरत नसले तरीही, तुमच्याकडे Sass ची सर्व शक्ती आहे. हे अद्याप प्रगतीपथावर आहे आणि पूर्णपणे अंमलबजावणीसाठी वेळ लागेल.
उदाहरणार्थ, सामान्य शैलींसाठी या :root
CSS व्हेरिएबल्सचा विचार करा:<body>
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
सराव मध्ये, ते व्हेरिएबल्स नंतर रीबूटमध्ये याप्रमाणे लागू केले जातात:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
जे तुम्हाला तुमच्या आवडीनुसार रिअल-टाइम सानुकूलित करण्याची अनुमती देते:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
मथळे आणि परिच्छेद
सर्व शीर्षक घटक—उदा., <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
. आम्ही padding-left
चालू <ul>
आणि <ol>
घटक देखील रीसेट केले आहेत.
- सर्व याद्यांचे शीर्ष मार्जिन काढून टाकले आहे
- आणि त्यांचे तळाशी मार्जिन सामान्य केले
- नेस्टेड सूचीमध्ये तळाशी समास नाही
- अशा प्रकारे त्यांना अधिक समान स्वरूप प्राप्त होते
- विशेषत: जेव्हा अधिक सूची आयटमचे अनुसरण केले जाते
- डावे पॅडिंग देखील रीसेट केले गेले आहे
- येथे ऑर्डर केलेली यादी आहे
- काही सूची आयटमसह
- त्याचे एकंदर स्वरूप सारखेच आहे
- मागील अक्रमित सूचीप्रमाणे
सोप्या शैलीसाठी, स्पष्ट पदानुक्रम आणि चांगल्या अंतरासाठी, वर्णन सूचीने margin
s अपडेट केले आहेत. <dd>
s वर रीसेट margin-left
करा 0
आणि जोडा margin-bottom: .5rem
. <dt>
s ठळक आहेत .
- वर्णन याद्या
- अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
- मुदत
- पदाची व्याख्या.
- त्याच पदासाठी दुसरी व्याख्या.
- आणखी एक पद
- या इतर पदासाठी व्याख्या.
इनलाइन कोड
सह कोडचे इनलाइन स्निपेट गुंडाळा <code>
. एचटीएमएल अँगल ब्रॅकेटमधून बाहेर पडण्याची खात्री करा.
<section>
इनलाइन म्हणून गुंडाळले पाहिजे.
For example, <code><section></code> should be wrapped as inline.
कोड ब्लॉक्स
<pre>
कोडच्या एकाधिक ओळींसाठी s वापरा . पुन्हा एकदा, योग्य रेंडरिंगसाठी कोडमधील कोणत्याही कोन कंसातून बाहेर पडण्याची खात्री करा. <pre>
घटक काढून टाकण्यासाठी आणि त्याच्यासाठी युनिट्स margin-top
वापरण्यासाठी रीसेट केला आहे .rem
margin-bottom
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
चल
व्हेरिएबल्स दर्शवण्यासाठी <var>
टॅग वापरा.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
वापरकर्ता इनपुट
<kbd>
सामान्यत: कीबोर्डद्वारे प्रविष्ट केलेले इनपुट सूचित करण्यासाठी वापरा .
सेटिंग्ज संपादित करण्यासाठी, दाबा ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
नमुना आउटपुट
प्रोग्राममधून नमुना आउटपुट दर्शवण्यासाठी <samp>
टॅग वापरा.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
टेबल्स
<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; }
होण्यापासून रोखू शकतो .display
<input type="text" hidden>
jQuery विसंगतता
[hidden]
$(...).hide()
jQuery च्या आणि $(...).show()
पद्धतींशी सुसंगत नाही . म्हणून, आम्ही सध्या विशेषतः घटकांचे [hidden]
व्यवस्थापन करण्यासाठी इतर तंत्रांना समर्थन देत नाही.display
घटकाची दृश्यमानता फक्त टॉगल करण्यासाठी, म्हणजे त्यात display
बदल केलेला नाही आणि घटक तरीही दस्तऐवजाच्या प्रवाहावर परिणाम करू शकतो, त्याऐवजी .invisible
वर्ग वापरा.