ټایپوګرافي
د بوټسټریپ ټایپوګرافي لپاره اسناد او مثالونه ، پشمول نړیوال تنظیمات ، سرلیکونه ، د بدن متن ، لیستونه او نور ډیر څه.
بوټسټریپ بنسټیز نړیوال نندارتون، ټایپوګرافي، او د لینک سټایلونه ټاکي. کله چې ډیر کنټرول ته اړتیا وي، د متن د کارونې ټولګي وګورئ .
- د اصلي فونټ سټیک وکاروئ چې
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>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
.h1
د ټولګیو له لارې .h6
هم شتون لري، د دې لپاره چې تاسو غواړئ د سرلیک د فونټ سټایل سره سمون ولرئ مګر د اړونده HTML عنصر نه کاروئ.
h1. د بوټسټراپ سرلیک
h2. د بوټسټراپ سرلیک
h3. د بوټسټراپ سرلیک
h4. د بوټسټراپ سرلیک
h5. د بوټسټراپ سرلیک
h6. د بوټسټراپ سرلیک
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
د بوټسټریپ 3 څخه د کوچني ثانوي سرلیک متن بیا جوړولو لپاره شامل شوي یوټیلټي کلاسونه وکاروئ.
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
د دودیز سرلیک عناصر ډیزاین شوي ترڅو ستاسو د پاڼې منځپانګې په غوښه کې غوره کار وکړي. کله چې تاسو د څرګندیدو لپاره سرلیک ته اړتیا لرئ، د ښودلو سرلیک کارولو ته پام وکړئ - یو لوی، یو څه ډیر د نظر لرونکي سرلیک سټایل.
ښکاره 1 |
ښودنه 2 |
ښودل 3 |
ښودنه 4 |
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
یو پراګراف په اضافه کولو سره څرګند کړئ .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est non commodo luctus.
<p class="lead">
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>
د عام انلاین HTML5 عناصرو لپاره سټایل کول.
تاسو کولی شئ د نښه نښه وکاروئروښانه کولمتن
د متن دا کرښه د حذف شوي متن په توګه درملنه کیږي.
د متن دا کرښه د دې لپاره ده چې نور دقیق نه وي.
د متن دا کرښه د دې لپاره ده چې د سند سره د اضافي په توګه چلند وشي.
د متن دا کرښه به د لاندې لیکې په توګه وړاندې شي
د متن دا کرښه د ښه چاپ په توګه درملنه کیږي.
دا کرښه د بولډ متن په توګه وړاندې شوې.
دا کرښه د ایتالیک متن په توګه وړاندې شوې.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
.mark
او .small
ټولګي هم د ورته سټایلونو پلي کولو لپاره شتون لري <mark>
او <small>
پداسې حال کې چې د هر ډول ناغوښتل شوي سیمانټیک اغیزو څخه مخنیوی کوي چې ټاګونه به راوړي.
پداسې حال کې چې پورته ندي ښودل شوي، د کارولو لپاره وړیا احساس وکړئ <b>
او <i>
په HTML5 کې. <b>
د اضافي اهمیت رسولو پرته د کلمو یا جملو روښانه کول دي پداسې حال <i>
کې چې ډیری یې د غږ، تخنیکي اصطلاحاتو او نورو لپاره دي.
زموږ د متن اسانتیاوو او د رنګ اسانتیاوو سره د متن سمون، بدلون، سټایل، وزن او رنګ بدل کړئ .
<abbr>
د مخففاتو او مخففاتو لپاره د HTML عنصر سټایل شوي پلي کول ترڅو په هور کې پراخه شوې نسخه وښیې. لنډیزونه یو ډیفالټ زیربنا لري او د هوور او د مرستندویه ټیکنالوژیو کاروونکو ته اضافي شرایط چمتو کولو لپاره د مرستې کرسر ترلاسه کوي.
.initialism
د یو څه کوچني فونټ اندازې لپاره په لنډیز کې اضافه کړئ .
attr
HTML
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
ستاسو په سند کې د بلې سرچینې څخه د مینځپانګو بلاکونو حواله کولو لپاره. د اقتباس په توګه د <blockquote class="blockquote">
هر HTML شاوخوا وپلټئ .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<footer class="blockquote-footer">
د سرچینې پیژندلو لپاره یو اضافه کړئ . د سرچینې کار نوم په کې وتړئ <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
د اړتیا سره سم د متن اسانتیاوې وکاروئ ترڅو ستاسو د بلاک اقتباس سمون بدل کړئ.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
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
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
د لیست ګولۍ لرې کړئ او margin
د دوه ټولګیو ترکیب سره یو څه رڼا واچوئ، .list-inline
او .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- نولا ولټوپټ
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
شرایط او توضیحات په افقی ډول زموږ د ګریډ سیسټم د مخکینۍ تعریف شوي ټولګیو (یا سیمانټیک مکسین) په کارولو سره تنظیم کړئ. د اوږدې مودې لپاره، تاسو کولی شئ په اختیاري توګه یو .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.
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
ځواب ورکوونکي ټایپوګرافيfont-size
په ساده ډول د میډیا پوښتنو په لړ کې د ریښې عنصر تنظیم کولو سره متن او اجزاو اندازه کولو ته اشاره کوي . بوټسټریپ دا ستاسو لپاره نه کوي، مګر که تاسو ورته اړتیا لرئ اضافه کول خورا اسانه دي.
دلته په عمل کې د هغې یوه بیلګه ده. هر هغه څه چې font-size
تاسو یې غواړئ د رسنیو او رسنیو پوښتنې غوره کړئ.
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}