टाइपोग्राफी
विश्वव्यापी सेटिङहरू, शीर्षकहरू, मुख्य पाठ, सूचीहरू, र थप सहित बुटस्ट्र्याप टाइपोग्राफीका लागि दस्तावेज र उदाहरणहरू।
ग्लोबल सेटिङहरू
बुटस्ट्र्यापले आधारभूत वैश्विक प्रदर्शन, टाइपोग्राफी, र लिङ्क शैलीहरू सेट गर्दछ। जब थप नियन्त्रण आवश्यक हुन्छ, पाठ्य उपयोगिता कक्षाहरू जाँच गर्नुहोस् ।
- नेटिभ फन्ट स्ट्याक प्रयोग गर्नुहोस् जसले
font-family
प्रत्येक OS र उपकरणको लागि उत्तम चयन गर्दछ । - थप समावेशी र पहुँचयोग्य प्रकार स्केलको लागि, हामी ब्राउजर पूर्वनिर्धारित रूट
font-size
(सामान्यतया 16px) मान्छौं ताकि आगन्तुकहरूले उनीहरूको ब्राउजर पूर्वनिर्धारित आवश्यकता अनुसार अनुकूलित गर्न सक्छन्। - हाम्रो टाइपोग्राफिक आधारको रूपमा
$font-family-base
,$font-size-base
, र विशेषताहरू प्रयोग गर्नुहोस् ।$line-height-base
<body>
- मार्फत ग्लोबल लिङ्क रङ सेट गर्नुहोस्
$link-color
र लिङ्क अंडरलाइनहरू मा मात्र लागू गर्नुहोस्:hover
। - ( पूर्वनिर्धारित रूपमा) मा
$body-bg
सेट गर्न प्रयोग गर्नुहोस् ।background-color
<body>
#fff
यी शैलीहरू भित्र फेला पार्न सकिन्छ _reboot.scss
, र विश्वव्यापी चरहरूलाई मा परिभाषित गरिएको छ _variables.scss
। $font-size-base
मा सेट गर्न निश्चित हुनुहोस् rem
।
शीर्षकहरू
सबै HTML शीर्षकहरू, <h1>
मार्फत <h6>
उपलब्ध छन्।
हेडिङ | उदाहरण |
---|---|
|
h1। बुटस्ट्र्याप शीर्षक |
|
h2। बुटस्ट्र्याप शीर्षक |
|
h3। बुटस्ट्र्याप शीर्षक |
|
h4। बुटस्ट्र्याप शीर्षक |
|
h5। बुटस्ट्र्याप शीर्षक |
|
h6। बुटस्ट्र्याप शीर्षक |
.h1
मार्फत .h6
कक्षाहरू पनि उपलब्ध छन्, जब तपाईं हेडिङको फन्ट स्टाइलसँग मेल खान चाहनुहुन्छ तर सम्बन्धित HTML तत्व प्रयोग गर्न सक्नुहुन्न।
h1। बुटस्ट्र्याप शीर्षक
h2। बुटस्ट्र्याप शीर्षक
h3। बुटस्ट्र्याप शीर्षक
h4। बुटस्ट्र्याप शीर्षक
h5। बुटस्ट्र्याप शीर्षक
h6। बुटस्ट्र्याप शीर्षक
शीर्षकहरू अनुकूलन गर्दै
Bootstrap 3 बाट सानो माध्यमिक शीर्षक पाठ पुन: सिर्जना गर्न समावेश उपयोगिता वर्गहरू प्रयोग गर्नुहोस्।
फेन्सी माध्यमिक पाठ संग फैंसी प्रदर्शन शीर्षक
हेडिङहरू प्रदर्शन गर्नुहोस्
परम्परागत शीर्षक तत्वहरू तपाईंको पृष्ठ सामग्रीको मासुमा उत्कृष्ट काम गर्न डिजाइन गरिएको हो। जब तपाईलाई बाहिर खडा हुन हेडिङ चाहिन्छ, डिस्प्ले हेडिङ प्रयोग गर्ने विचार गर्नुहोस् —एउटा ठुलो, अलि बढी विचारयुक्त शीर्षक शैली। ध्यान राख्नुहोस् कि यी शीर्षकहरू पूर्वनिर्धारित रूपमा उत्तरदायी छैनन्, तर प्रतिक्रियाशील फन्ट आकारहरू सक्षम गर्न सम्भव छ ।
प्रदर्शन १ |
प्रदर्शन २ |
प्रदर्शन ३ |
प्रदर्शन ४ |
नेतृत्व
एउटा अनुच्छेद थपेर बाहिर खडा बनाउनुहोस् .lead
।
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor। Duis mollis, est non commodo luctus।
इनलाइन पाठ तत्वहरू
साधारण इनलाइन HTML5 तत्वहरूको लागि शैली।
तपाईले मार्क ट्याग प्रयोग गर्न सक्नुहुन्छहाइलाइट गर्नुहोस्पाठ।
पाठको यो रेखा मेटाइएको पाठको रूपमा व्यवहार गर्नको लागि हो।
पाठको यो लाइन अब सही छैन भनी व्यवहार गर्न को लागी हो।
पाठको यो लाइन कागजातमा थपको रूपमा व्यवहार गर्नको लागि हो।
पाठको यो रेखा रेखाङ्कित रूपमा रेन्डर हुनेछ
पाठको यो लाइनलाई राम्रो छापको रूपमा व्यवहार गर्नको लागि हो।
यो रेखा बोल्ड पाठको रूपमा रेन्डर गरिएको छ।
यो रेखा इटालिक पाठको रूपमा रेन्डर गरिएको छ।
.mark
र ट्यागहरूले ल्याउने कुनै पनि अनावश्यक अर्थपूर्ण प्रभावहरूलाई बेवास्ता गर्दा उही .small
शैलीहरू लागू गर्नका लागि कक्षाहरू पनि उपलब्ध छन् ।<mark>
<small>
माथि नदेखाइएको भए तापनि HTML5 मा प्रयोग <b>
गर्न स्वतन्त्र महसुस गर्नुहोस्। शब्दहरू वा वाक्यांशहरूलाई थप महत्त्व नदिई हाइलाइट गर्नको लागि हो, जबकि प्रायः आवाज, प्राविधिक शब्दहरू, इत्यादिका लागि हो।<i>
<b>
<i>
पाठ उपयोगिताहरू
हाम्रो पाठ उपयोगिताहरु र रंग उपयोगिताहरु संग पाठ पङ्क्तिबद्धता, रूपान्तरण, शैली, वजन, र रङ परिवर्तन गर्नुहोस् ।
संक्षिप्त रूपहरू
<abbr>
होभरमा विस्तारित संस्करण देखाउनको लागि संक्षिप्त र संक्षिप्त शब्दहरूको लागि HTML को तत्वको शैलीकृत कार्यान्वयन । संक्षिप्त रूपहरूमा पूर्वनिर्धारित अन्डरलाइन हुन्छ र होभरमा र सहायक प्रविधिहरूको प्रयोगकर्ताहरूलाई थप सन्दर्भ प्रदान गर्न मद्दत कर्सर प्राप्त गर्दछ।
.initialism
थोरै सानो फन्ट साइजको लागि संक्षिप्त नाममा थप्नुहोस् ।
attr
HTML
ब्लककोटहरू
तपाईंको कागजात भित्रको अर्को स्रोतबाट सामग्रीको ब्लकहरू उद्धृत गर्नका लागि। उद्धरणको रूपमा कुनै पनि HTML<blockquote class="blockquote">
वरिपरि लपेट्नुहोस् ।
Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.
स्रोतको नामकरण
<footer class="blockquote-footer">
स्रोत पहिचानको लागि थप्नुहोस् । मा स्रोत कामको नाम बेर्नुहोस् <cite>
।
Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.
पङ्क्तिबद्धता
तपाईंको ब्लककोटको पङ्क्तिबद्धता परिवर्तन गर्नको लागि आवश्यक रूपमा पाठ उपयोगिताहरू प्रयोग गर्नुहोस्।
Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.
सूचीहरू
अनस्टाइल
सूची वस्तुहरूमा पूर्वनिर्धारित list-style
र बायाँ मार्जिन हटाउनुहोस् (तत्काल बच्चाहरू मात्र)। यो केवल तत्काल बच्चाहरूको सूची वस्तुहरूमा लागू हुन्छ , यसको मतलब तपाईंले कुनै पनि नेस्टेड सूचीहरूको लागि पनि कक्षा थप्नु पर्छ।
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- मासामा पूर्णांक मोलेस्टी लोरेम
- प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
- नुल्ला volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat मा
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
क्रममा
margin
सूचीको बुलेटहरू हटाउनुहोस् र दुई वर्गहरूको संयोजनको साथ केही प्रकाश लागू गर्नुहोस् , .list-inline
र .list-inline-item
।
- Lorem ipsum
- Phasellus iaculis
- नुल्ला भोल्टपाट
विवरण सूची पङ्क्तिबद्ध
हाम्रो ग्रिड प्रणालीको पूर्वनिर्धारित वर्गहरू (वा सिमान्टिक मिक्सिनहरू) प्रयोग गरेर सर्तहरू र विवरणहरू तेर्सो रूपमा पङ्क्तिबद्ध गर्नुहोस्। लामो सर्तहरूका लागि, तपाईंले .text-truncate
इलिपसिसको साथ पाठ काट्न वैकल्पिक रूपमा कक्षा थप्न सक्नुहुन्छ।
- विवरण सूचीहरू
- वर्णन सूची सर्तहरू परिभाषित गर्नका लागि उपयुक्त छ।
- Euismod
-
Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus।
- Malesuada Porta
- Etiam porta sem malesuada magna mollis euismod।
- काटिएको शब्द काटिएको छ
- Fusce dapibus, telus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus।
- नेस्टिङ
-
- नेस्टेड परिभाषा सूची
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc।
उत्तरदायी फन्ट आकारहरू
बुटस्ट्र्याप v4.3 उत्तरदायी फन्ट आकारहरू सक्षम गर्न विकल्पको साथ जहाजहरू, पाठलाई उपकरण र भ्यूपोर्ट आकारहरूमा स्वाभाविक रूपमा मापन गर्न अनुमति दिँदै। RFS$enable-responsive-font-sizes
लाई Sass चर परिवर्तन गरी true
बुटस्ट्र्याप पुन: कम्पाइल गरेर सक्षम गर्न सकिन्छ ।
RFS लाई समर्थन गर्न , हामी हाम्रो सामान्य font-size
गुणहरू प्रतिस्थापन गर्न Sass mixin प्रयोग गर्छौं । प्रतिक्रियाशील फन्ट आकारहरू प्रतिक्रियाशील स्केलिंग व्यवहार सक्षम गर्नको लागि र भ्युपोर्ट एकाइहरूको calc()
मिश्रणको साथ कार्यहरूमा कम्पाइल गरिनेछ । RFSrem
र यसको कन्फिगरेसनको बारेमा थप यसको GitHub भण्डारमा फेला पार्न सकिन्छ ।