ټایپوګرافي
د بوټسټریپ ټایپوګرافي لپاره اسناد او مثالونه ، پشمول نړیوال تنظیمات ، سرلیکونه ، د بدن متن ، لیستونه او نور ډیر څه.
نړیوال تنظیمات
بوټسټریپ بنسټیز نړیوال نندارتون، ټایپوګرافي، او د لینک سټایلونه ټاکي. کله چې ډیر کنټرول ته اړتیا وي، د متن د کارونې ټولګي وګورئ .
- د اصلي فونټ سټیک وکاروئ چې
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
بلاک کوټونه
ستاسو په سند کې د بلې سرچینې څخه د مینځپانګو بلاکونو حواله کولو لپاره. د اقتباس په توګه د <blockquote class="blockquote">
هر HTML شاوخوا وپلټئ .
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
- Facilisis in pretium nisl aliquet
- نولا ولتپت علیکم 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
- Eget porttitor lorem
انلاین
د لیست ګولۍ لرې کړئ او margin
د دوه ټولګیو ترکیب سره یو څه رڼا واچوئ، .list-inline
او .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- نولا ولټوپټ
د تفصیل لیست ترتیب
شرایط او توضیحات په افقی ډول زموږ د ګریډ سیسټم د مخکینۍ تعریف شوي ټولګیو (یا سیمانټیک مکسین) په کارولو سره تنظیم کړئ. د اوږدې مودې لپاره، تاسو کولی شئ په اختیاري توګه یو .text-truncate
ټولګي اضافه کړئ ترڅو متن د ellipsis سره لنډ کړئ.
- د توضیحاتو لیست
- د توضیحاتو لیست د شرایطو تعریف کولو لپاره مناسب دی.
- 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.
د ځواب ویونکي فونټ اندازه
Bootstrap v4.3 د ځواب ورکوونکي فونټ اندازې فعالولو اختیار سره لیږدوي، متن ته اجازه ورکوي چې په طبیعي توګه د وسیلې او ویوپورټ اندازې په اوږدو کې اندازه کړي. RFS$enable-responsive-font-sizes
د Sass متغیر بدلولو true
او د بوټسټریپ بیا تنظیمولو سره فعال کیدی شي .
د RFS مالتړ لپاره ، موږ د خپل نورمال font-size
ملکیتونو ځای په ځای کولو لپاره د ساس مکسین کاروو. د ځواب ویونکي فونټ اندازې به د عکس العمل او ویوپورټ واحدونو calc()
مخلوط سره په دندو کې تالیف شي rem
ترڅو د ځواب ویونکي اندازه کولو چلند وړ کړي. د RFS او د دې ترتیب په اړه نور د دې GitHub ذخیره کې موندل کیدی شي .