ٽائپوگرافي
بوٽ اسٽريپ ٽائپوگرافي لاءِ دستاويز ۽ مثال، بشمول عالمي سيٽنگون، هيڊنگس، باڊي ٽيڪسٽ، لسٽون، ۽ وڌيڪ.
گلوبل سيٽنگون
بوٽ اسٽراپ بنيادي عالمي ڊسپلي، ٽائپوگرافي، ۽ لنڪ اسلوب سيٽ ڪري ٿو. جڏهن وڌيڪ ڪنٽرول جي ضرورت آهي، چيڪ ڪريو ٽيڪسٽ يوٽيلٽي ڪلاس .
- هڪ اصلي فونٽ اسٽيڪ
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 مان ننڍي سيڪنڊري هيڊنگ ٽيڪسٽ کي ٻيهر ٺاهڻ لاءِ.
فينسي ڊسپلي هيڊنگ ڀريل ثانوي متن سان
عنوان ڏيکاريو
روايتي هيڊنگ عناصر توهان جي صفحي جي مواد جي گوشت ۾ بهترين ڪم ڪرڻ لاء ٺهيل آهن. جڏهن توهان کي بيهڻ لاءِ هڪ هيڊنگ جي ضرورت آهي، هڪ ڊسپلي هيڊنگ استعمال ڪرڻ تي غور ڪريو - هڪ وڏو، ٿورڙو وڌيڪ راءِ رکندڙ هيڊنگ انداز. ذهن ۾ رکو ته اهي عنوان ڊفالٽ طور جوابي نه هوندا آهن، پر اهو ممڪن آهي ته جوابي فونٽ سائيز کي فعال ڪرڻ .
ڊسپلي 1 |
ڊسپلي 2 |
ڏيکاريو 3 |
ڊسپلي 4 |
ليڊ
شامل ڪرڻ سان ھڪڙو پيراگراف ڌار ڌار ٺاھيو .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
ان لائن ٽيڪسٽ عناصر
عام ان لائن HTML5 عناصر لاءِ اسٽائل.
توھان استعمال ڪري سگھو ٿا نشان ٽيگ کينمايان ڪرڻمتن.
متن جي هن لڪير کي ختم ٿيل متن جي طور تي علاج ڪرڻ جو مطلب آهي.
متن جي هن لڪير جو مطلب آهي علاج ڪيو وڃي جيئن هاڻي صحيح ناهي.
متن جي هن لڪير جو مطلب آهي دستاويز جي اضافي طور علاج ڪيو وڃي.
متن جي هي لڪير هيٺ ڏنل طور تي پيش ڪندي
متن جي هن لڪير جو مطلب آهي ٺيڪ پرنٽ طور علاج ڪيو وڃي.
هي لڪير بولڊ ٽيڪسٽ طور پيش ڪيو ويو آهي.
هي لڪير اطالوي متن جي طور تي پيش ڪيو ويو آهي.
.mark
۽ .small
ڪلاس پڻ موجود آهن ساڳين اندازن کي لاڳو ڪرڻ لاءِ <mark>
۽ <small>
جڏهن ته ڪنهن به ناپسنديده معنيٰ واري اثر کان پاسو ڪيو وڃي جيڪي ٽيگ آڻيندا.
جڏهن ته مٿي نه ڏيکاريل آهي، استعمال ڪرڻ لاء آزاد محسوس ڪريو <b>
۽ <i>
HTML5 ۾. <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
- Integer molestie lorem at massa
- پريتيم نسل اليڪيٽ ۾ فيڪليس
- نولا volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- ايجٽ 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.
- مالسودا پورٽ
- Etiam porta sem malesuada magna mollis euismod.
- ترڪيب ٿيل اصطلاح ترڪيب آهي
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- نستو
-
- Nested تعريف جي فهرست
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
جوابي فونٽ سائز
Bootstrap v4.3 جوابي فونٽ جي سائز کي فعال ڪرڻ جي اختيار سان ٻيڙيون، متن کي وڌيڪ قدرتي طور تي ڊيوائس ۽ ويوپورٽ سائزن تي ماپڻ جي اجازت ڏئي ٿو. RFS کي فعال ڪري سگھجي ٿو $enable-responsive-font-sizes
Sass variable کي تبديل ڪرڻ true
۽ بوٽ اسٽريپ کي ٻيهر ترتيب ڏيڻ سان.
RFS کي سپورٽ ڪرڻ لاءِ ، اسان استعمال ڪندا آهيون ساس ميڪسين کي اسان جي عام font-size
ملڪيتن کي تبديل ڪرڻ لاءِ. جوابي فونٽ جي سائزن کي گڏ ڪيو ويندو ۽ ويوپورٽ يونٽن calc()
جي ميلاپ سان گڏ جوابي اسڪيلنگ رويي کي فعال ڪرڻ لاءِ. RFSrem
۽ ان جي تشڪيل بابت وڌيڪ ڳولهي سگھجي ٿو ان جي GitHub مخزن تي .