टायपोग्राफी
बूटस्ट्रॅप टायपोग्राफीसाठी दस्तऐवजीकरण आणि उदाहरणे, जागतिक सेटिंग्ज, शीर्षके, मुख्य मजकूर, सूची आणि बरेच काही.
जागतिक संरचना
बूटस्ट्रॅप मूलभूत जागतिक प्रदर्शन, टायपोग्राफी आणि लिंक शैली सेट करते. जेव्हा अधिक नियंत्रण आवश्यक असेल, तेव्हा मजकूर उपयुक्तता वर्ग पहा .
- मूळ फॉन्ट स्टॅक वापरा जो
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. बूटस्ट्रॅप शीर्षक
मथळे सानुकूल करणे
बूटस्ट्रॅप 3 वरून लहान दुय्यम शीर्षलेख मजकूर पुन्हा तयार करण्यासाठी समाविष्ट उपयुक्तता वर्ग वापरा.
फॅन्सी डिस्प्ले हेडिंग फिकट दुय्यम मजकुरासह
शीर्षलेख प्रदर्शित करा
पारंपारिक शीर्षक घटक आपल्या पृष्ठ सामग्रीच्या मांसामध्ये उत्कृष्ट कार्य करण्यासाठी डिझाइन केलेले आहेत. जेव्हा तुम्हाला वेगळे दिसण्यासाठी हेडिंगची आवश्यकता असेल, तेव्हा डिस्प्ले हेडिंग वापरण्याचा विचार करा —एक मोठी, थोडी अधिक मतप्रदर्शन शैली. लक्षात ठेवा ही शीर्षके डीफॉल्टनुसार प्रतिसाद देत नाहीत, परंतु प्रतिसादात्मक फॉन्ट आकार सक्षम करणे शक्य आहे .
डिस्प्ले १ |
डिस्प्ले २ |
डिस्प्ले ३ |
डिस्प्ले ४ |
आघाडी
परिच्छेद जोडून वेगळे बनवा .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ड्यूस मोलिस, हे नॉन कमोडो लक्टस आहे.
इनलाइन मजकूर घटक
सामान्य इनलाइन HTML5 घटकांसाठी शैली.
यासाठी तुम्ही मार्क टॅग वापरू शकताहायलाइटमजकूर
मजकूराची ही ओळ हटविलेला मजकूर म्हणून मानली जाईल.
मजकूराची ही ओळ यापुढे अचूक नाही असे मानायचे आहे.
मजकूराची ही ओळ दस्तऐवजात एक जोड म्हणून मानली जाते.
मजकूराची ही ओळ अधोरेखित केल्याप्रमाणे रेंडर होईल
मजकूराची ही ओळ फाइन प्रिंट म्हणून हाताळायची आहे.
ही ओळ ठळक मजकूर म्हणून प्रस्तुत केली आहे.
ही ओळ तिर्यकीकृत मजकूर म्हणून प्रस्तुत केली आहे.
.mark
आणि टॅग्ज आणतील असे कोणतेही अवांछित अर्थपूर्ण परिणाम टाळत असताना आणि .small
त्याच शैली लागू करण्यासाठी वर्ग देखील उपलब्ध आहेत .<mark>
<small>
वर दाखवलेले नसताना, मोकळ्या मनाने <b>
आणि <i>
HTML5 मध्ये वापरा. <b>
अतिरिक्त महत्त्व न देता शब्द किंवा वाक्प्रचार हायलाइट करण्यासाठी <i>
आहे तर मुख्यतः आवाज, तांत्रिक संज्ञा इ.
मजकूर उपयुक्तता
आमच्या मजकूर युटिलिटीज आणि कलर युटिलिटीजसह मजकूर संरेखन, रूपांतर, शैली, वजन आणि रंग बदला .
लघुरुपे
<abbr>
हॉवरवर विस्तारित आवृत्ती दर्शविण्यासाठी संक्षेप आणि परिवर्णी शब्दांसाठी HTML च्या घटकाची शैलीबद्ध अंमलबजावणी . संक्षेपांमध्ये डीफॉल्ट अधोरेखित असते आणि होव्हरवर आणि सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांना अतिरिक्त संदर्भ देण्यासाठी मदत कर्सर मिळवा.
.initialism
किंचित लहान फॉन्ट-आकारासाठी संक्षेपात जोडा .
attr
HTML
ब्लॉककोट्स
तुमच्या दस्तऐवजातील दुसर्या स्त्रोताकडील सामग्रीचे ब्लॉक उद्धृत करण्यासाठी. कोट म्हणून <blockquote class="blockquote">
कोणत्याही HTML भोवती गुंडाळा .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.
स्त्रोताचे नाव देणे
<footer class="blockquote-footer">
स्त्रोत ओळखण्यासाठी एक जोडा . मध्ये स्त्रोत कार्याचे नाव गुंडाळा <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.
संरेखन
तुमच्या ब्लॉककोटचे संरेखन बदलण्यासाठी आवश्यकतेनुसार मजकूर उपयुक्तता वापरा.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.
याद्या
अनस्टाइल
list-style
सूची आयटमवरील डीफॉल्ट आणि डावे मार्जिन काढा (फक्त तात्काळ मुले). हे फक्त तात्काळ मुलांच्या सूची आयटमवर लागू होते , म्हणजे तुम्हाला कोणत्याही नेस्टेड सूचीसाठी वर्ग जोडणे आवश्यक आहे.
- 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
इनलाइन
सूचीतील बुलेट काढा आणि margin
दोन वर्गांच्या संयोजनासह थोडा प्रकाश लावा, .list-inline
आणि .list-inline-item
.
- Lorem ipsum
- फॅसेलस आयकुलिस
- नुल्ला वोलतपाट
वर्णन सूची संरेखन
आमच्या ग्रिड सिस्टमचे पूर्वनिर्धारित वर्ग (किंवा सिमेंटिक मिक्सन्स) वापरून संज्ञा आणि वर्णने क्षैतिजरित्या संरेखित करा. दीर्घ अटींसाठी, .text-truncate
लंबवर्तुळासह मजकूर कापण्यासाठी तुम्ही वैकल्पिकरित्या वर्ग जोडू शकता.
- वर्णन याद्या
- अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
- Euismod
-
Vestibulum id ligula porta felis euismod Semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- मालेसुडा पोर्टा
- Etiam porta sem malesuada magna mollis euismod.
- कापलेले पद कापलेले आहे
- Fusce dapibus, टेलस 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.0 नुसार, बूटस्ट्रॅप प्रतिसादात्मक फॉन्ट आकार सक्षम करण्याच्या पर्यायासह पाठवते, ज्यामुळे मजकूर डिव्हाइस आणि व्ह्यूपोर्ट आकारांवर अधिक नैसर्गिकरित्या स्केल होऊ शकतो. Sass व्हेरिएबल बदलून आणि बूटस्ट्रॅप पुन्हा कंपाइल करून RFS सक्षम केले जाऊ शकते .$enable-responsive-font-sizes
true
RFS चे समर्थन करण्यासाठी , आम्ही आमचे सामान्य font-size
गुणधर्म बदलण्यासाठी Sass मिक्सिन वापरतो . प्रतिसादात्मक स्केलिंग वर्तन सक्षम करण्यासाठी प्रतिसादात्मक फॉन्ट आकार आणि व्ह्यूपोर्ट युनिट्सच्या calc()
मिश्रणासह फंक्शन्समध्ये संकलित केले जातील. RFSrem
आणि त्याच्या कॉन्फिगरेशनबद्दल अधिक त्याच्या GitHub रेपॉजिटरीमध्ये आढळू शकते .