रिबूट करचें
रिबूट, एकाच फायलीन घटक-विशिश्ट CSS बदलांचो संग्रह, उबारपाक एक सुंदर, सुसंगत, आनी सोपी मुळावी रेखा पुरवण करपाक बूटस्ट्रॅप किकस्टार्ट करात.
मोख
रिबूट Normalize चेर उबारता, फकत घटक निवडक वापरून जायत्या 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
. फॉन्ट विसंगती आडावपाखातीर हें फुडें कांय फॉर्म घटकांक वारसा मेळटा. - सुरक्षे खातीर, the
<body>
has a declaredbackground-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
.
- सगळ्या यादींचें वयलें मार्जिन काडून उडयलां
- आनी तांचें तळें मार्जिन सामान्य जालें
- नेस्टेड यादींक तळें मार्जिन नासता
- अशे तरेन तांकां चड समरूप दिसता
- खास करून जेन्ना ताचे उपरांत चड वळेरी वस्तू येतात
- डावें पॅडींगय रिसेट केलां
- हांगा एक ऑर्डर केल्ली वळेरी आसा
- थोड्या यादीक वस्तूं सयत
- ताका एकंदर रूप एकूच आसता
- आदले अक्रम्य वळेरे प्रमाण
सोपी स्टायलिंग, स्पश्ट श्रेणीबध्दता, आनी चड बरी अंतर दवरपा खातीर, वर्णन यादींनी margin
s अद्ययावत केल्यात. <dd>
s रीसेट margin-left
करचें 0
आनी जोडचें margin-bottom: .5rem
. <dt>
s मोटव्या अक्षरांनी बरयलां .
- वर्णन यादी
- संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.
- शब्द
- संज्ञा खातीर व्याख्या.
- त्याच संज्ञाची दुसरी व्याख्या.
- दुसरी एक संज्ञा
- ह्या दुसऱ्या संज्ञाची व्याख्या.
पूर्वस्वरूपण केल्लो मजकूर
घटक ताचें काडून उडोवपाक आनी ताच्या खातीर एकक वापरपाक <pre>
रीसेट करतात .margin-top
rem
margin-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 लागींच्या पूर्वजा खातीर (वा पुराय कामाची कूड) संपर्क म्हायती सादर करपा खातीर आसात. च्या आदारान ओळी सोंपोवन स्वरूपण सांबाळचें .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 मार्केट सेंट, सुट 900
सॅन फ्रांसिस्को, सीए 94103
पी: (123) 456-7890 पुराय नांव
[email protected]
ब्लॉककोट करचें
margin
blockquotes चेर मुलभूत आसा , देखून आमी हेर घटकांकडेन चड सुसंगत कितें तरी 1em 40px
करपाक तें रीसेट करतात .0 0 1rem
एक नामनेचें उद्धरण, ब्लॉककोट घटकांत आशिल्लें.
इनलायन घटक
परिच्छेद मजकूरांतल्यान तो वेगळो करपा खातीर <abbr>
घटकाक मुळावी स्टायलिंग मेळटा.
सारांश
सारांशाचेर मुलभूत 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
बदला वर्ग वापरात.