रिबुट गर्नुहोस्
रिबुट, एकल फाइलमा तत्व-विशिष्ट 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>
परिमार्जन गरेर ओभरराइड गर्न सकिन्छ ।$font-size-root
- मा कुनै आधार
- यसले विश्वव्यापी , , , र
<body>
पनि सेट गर्दछ । यो पछि केहि फारम तत्वहरु द्वारा फन्ट विसंगतिहरु लाई रोक्न को लागी वंशानुगत छ।font-family
font-weight
line-height
color
- सुरक्षा को लागी,
<body>
एक घोषित छbackground-color
, मा पूर्वनिर्धारित#fff
।
नेटिभ फन्ट स्ट्याक
बुटस्ट्र्यापले प्रत्येक उपकरण र ओएसमा इष्टतम पाठ रेन्डरिङको लागि "नेटिभ फन्ट स्ट्याक" वा "प्रणाली फन्ट स्ट्याक" प्रयोग गर्दछ। यी प्रणाली फन्टहरू विशेष रूपमा आजका यन्त्रहरूलाई ध्यानमा राखेर डिजाइन गरिएको हो, स्क्रिनहरूमा सुधारिएको रेन्डरिङ, चल फन्ट समर्थन र थप कुराहरू। यस Smashing पत्रिका लेखमा नेटिभ फन्ट स्ट्याकहरूको बारेमा थप पढ्नुहोस् ।
$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;
ध्यान दिनुहोस् कि फन्ट स्ट्याकमा इमोजी फन्टहरू समावेश भएकाले, धेरै सामान्य प्रतीक/डिंगब्याट युनिकोड क्यारेक्टरहरू बहु-रंगको चित्रको रूपमा रेन्डर गरिनेछ। color
ब्राउजर/प्लेटफर्मको नेटिभ इमोजी फन्टमा प्रयोग गरिएको शैलीको आधारमा तिनीहरूको उपस्थिति भिन्न हुनेछ, र तिनीहरू कुनै पनि CSS शैलीहरूले प्रभावित हुने छैनन् ।
यो बुटस्ट्र्यापमा विश्वव्यापी रूपमा 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
। हामीले padding-left
अन <ul>
र <ol>
एलिमेन्टहरू पनि रिसेट गरेका छौं।
- सबै सूचीहरूको शीर्ष मार्जिन हटाइयो
- र तिनीहरूको तल्लो मार्जिन सामान्य भयो
- नेस्टेड सूचीहरूमा कुनै तल्लो मार्जिन छैन
- यस तरिकाले तिनीहरूको उपस्थिति अझ बढी छ
- विशेष गरी जब थप सूची वस्तुहरू पछि
- बायाँ प्याडिङ पनि रिसेट गरिएको छ
- यहाँ अर्डर गरिएको सूची छ
- केहि सूची वस्तुहरु संग
- यसको समग्र रूप समान छ
- अघिल्लो अक्रमित सूची जस्तै
सरल शैली, स्पष्ट पदानुक्रम, र राम्रो स्पेसिङको लागि, विवरण सूचीहरूले margin
s अद्यावधिक गरेको छ। <dd>
s मा रिसेट margin-left
गरी 0
थप्नुहोस् margin-bottom: .5rem
। <dt>
s बोल्ड छन् ।
- विवरण सूचीहरू
- वर्णन सूची सर्तहरू परिभाषित गर्नका लागि उपयुक्त छ।
- अवधि
- शब्दको लागि परिभाषा।
- एउटै शब्दको लागि दोस्रो परिभाषा।
- अर्को पद
- यो अर्को शब्दको लागि परिभाषा।
इनलाइन कोड
कोडको इनलाइन स्निपेटहरू र्याप गर्नुहोस् <code>
। HTML कोण कोष्ठकहरू बचाउन निश्चित हुनुहोस्।
<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>
, पतन किनाराहरू, र भरि एकरूपता सुनिश्चित गर्न थोरै समायोजन text-align
गरिन्छ। सीमाना, प्याडिङ र थपका लागि थप परिवर्तनहरू कक्षासँगै .table
आउँछन् ।
तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक | तालिका शीर्षक |
---|---|---|---|
तालिका सेल | तालिका सेल | तालिका सेल | तालिका सेल |
तालिका सेल | तालिका सेल | तालिका सेल | तालिका सेल |
तालिका सेल | तालिका सेल | तालिका सेल | तालिका सेल |
फारमहरू
सरल आधार शैलीहरूको लागि विभिन्न फारम तत्वहरू रिबुट गरिएको छ। यहाँ केहि सबैभन्दा उल्लेखनीय परिवर्तनहरू छन्:
<fieldset>
s मा कुनै सीमाना, प्याडिङ, वा मार्जिन छैन त्यसैले तिनीहरू सजिलैसँग व्यक्तिगत आगतहरू वा इनपुटहरूको समूहहरूको लागि र्यापरको रूपमा प्रयोग गर्न सकिन्छ।<legend>
s, फिल्डसेटहरू जस्तै, पनि प्रकारको शीर्षकको रूपमा प्रदर्शन गर्न पुन: स्टाइल गरिएको छ।<label>
s लागूdisplay: inline-block
गर्न अनुमति दिन सेट गरिएको छ।margin
<input>
s,<select>
s,<textarea>
s, र<button>
s लाई धेरै जसो Normalize द्वारा सम्बोधन गरिन्छ, तर रिबुटले तिनीहरूको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]
ब्लककोट
blockquotes मा पूर्वनिर्धारित margin
छ 1em 40px
, त्यसैले हामीले यसलाई 0 0 1rem
अन्य तत्वहरूसँग थप सुसंगतको लागि रिसेट गर्छौं।
एक प्रसिद्ध उद्धरण, एक blockquote तत्व मा समावेश।
स्रोत शीर्षकमा प्रसिद्ध कोही
इनलाइन तत्वहरू
<abbr>
तत्वले यसलाई अनुच्छेद पाठको बीचमा अलग बनाउन आधारभूत स्टाइल प्राप्त गर्दछ ।
सारांश
cursor
सारांशमा पूर्वनिर्धारित हो, त्यसैले हामी त्यसमा क्लिक गरेर तत्वसँग अन्तर्क्रिया गर्न सकिन्छ भनेर बताउनका लागि text
रिसेट गर्छौं ।pointer
केही विवरण
विवरणहरूको बारेमा थप जानकारी।
अझै थप विवरण
यहाँ विवरणहरूको बारेमा थप विवरणहरू छन्।
HTML5 [hidden]
विशेषता
HTML5 ले नामको नयाँ विश्वव्यापी विशेषता[hidden]
display: none
थप्छ, जुन पूर्वनिर्धारित रूपमा स्टाइल गरिएको छ। PureCSS बाट एउटा विचार उधारो लिदै, हामी यसलाई संयोगवश ओभरराइड [hidden] { display: none !important; }
हुनबाट जोगाउन मद्दत गरेर यो पूर्वनिर्धारितमा सुधार गर्छौं display
।
<input type="text" hidden>
jQuery असंगति
[hidden]
jQuery $(...).hide()
र $(...).show()
विधिहरूसँग उपयुक्त छैन। त्यसकारण, हामी हाल विशेष गरी तत्वहरूको [hidden]
व्यवस्थापनका लागि अन्य प्रविधिहरूलाई समर्थन गर्दैनौं।display
केवल एक तत्वको दृश्यता टगल गर्न, यसको अर्थ display
परिमार्जन गरिएको छैन र तत्वले अझै पनि कागजातको प्रवाहलाई असर गर्न सक्छ, यसको सट्टामा वर्ग प्रयोग गर्नुहोस्.invisible
।