टायपोग्राफी
बूटस्ट्रॅप टायपोग्राफीसाठी दस्तऐवजीकरण आणि उदाहरणे, जागतिक सेटिंग्ज, शीर्षके, मुख्य मजकूर, सूची आणि बरेच काही.
बूटस्ट्रॅप मूलभूत जागतिक प्रदर्शन, टायपोग्राफी आणि लिंक शैली सेट करते. जेव्हा अधिक नियंत्रण आवश्यक असेल, तेव्हा मजकूर उपयुक्तता वर्ग पहा .
- मूळ फॉन्ट स्टॅक वापरा जो
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.
रिस्पॉन्सिव्ह टायपोग्राफीfont-size
म्हणजे मीडिया क्वेरीच्या मालिकेत रूट घटक समायोजित करून मजकूर आणि घटक स्केलिंग करणे होय . बूटस्ट्रॅप आपल्यासाठी हे करत नाही, परंतु आपल्याला आवश्यक असल्यास ते जोडणे अगदी सोपे आहे.
सराव मध्ये त्याचे एक उदाहरण येथे आहे. font-size
तुम्हाला हवे असलेले s आणि मीडिया क्वेरी निवडा .