تېكىست
توغرىلاش ، ئوراش ، ئېغىرلىق ۋە باشقىلارنى كونترول قىلىدىغان ئورتاق تېكىست قوراللىرىنىڭ ھۆججەتلىرى ۋە مىساللىرى.
تېكىستنى توغرىلاش
تېكىستنى ماسلاشتۇرۇش دەرسلىكى بار زاپچاسلارغا ئاسانلا قايتا يېزىڭ.
بەزى ئورۇن بەلگىلەش تېكىستلىرى يوللۇق تېكىست توغرىلاشنى كۆرسىتىدۇ. سىزمۇ ماڭا شۇنداق قىلامسىز؟ مۇزىكىغا يۈزلىنىدىغان پەيت كەلدى ، مەن ئەمدى سىزنىڭ مۇسكۇلىڭىز ئەمەس. ئۇنىڭ چىرايلىق ئىكەنلىكىنى ئاڭلاڭ ، سوتچى بولۇڭ ، قىزلىرىم بېلەت تاشلايدۇ. ئىچىمدە فىنكىس ھېس قىلالايمەن. جەننەت بىزنىڭ سۆيگۈمىزگە ھەسەت قىلىدۇ ، پەرىشتىلەر يۇقىرىدىن يىغلاۋاتىدۇ. ھەئە ، سىز مېنى ئوتوپىيەگە ئېلىپ بارىسىز.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
سول ، ئوڭ ۋە ئوتتۇرىنى توغرىلاش ئۈچۈن ، تور سىستېمىسىغا ئوخشاش كۆرۈنۈش كەڭلىكى بۆلىكىنى ئىشلىتىدىغان ئىنكاسچان دەرسلەر بار.
بارلىق كۆرۈنۈش چوڭلۇقىدا سولغا توغرىلانغان تېكىست.
مەركىزى بارلىق كۆرۈنۈش چوڭلۇقىدىكى تېكىستنى توغرىلىدى.
بارلىق كۆرۈنۈش چوڭلۇقىدىكى توغرىلانغان تېكىست.
چوڭ تىپتىكى SM (كىچىك) ياكى كەڭرەك كۆرۈنۈشلەردە سولغا توغرىلانغان تېكىست.
چوڭ تىپتىكى MD (ئوتتۇراھال) ياكى كەڭرەك كۆرۈنۈشتە سولغا توغرىلانغان تېكىست.
سول تەرەپتىكى چوڭلۇقتىكى LG (چوڭ) ياكى تېخىمۇ كەڭ بولغان كۆرۈنۈشلەر.
چوڭلۇقى XL چوڭلۇقى (چوڭ-كىچىك) ياكى كەڭرەك بولغان كۆرۈنۈشتە سولغا توغرىلانغان تېكىست.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
تېكىست ئوراش ۋە تولۇپ كېتىش
تېكىستنى .text-wrap
دەرسلىك بىلەن ئوراش.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
.text-nowrap
تېكىستنىڭ دەرس بىلەن ئورالغانلىقىنىڭ ئالدىنى ئالىدۇ .
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
.text-truncate
ئۇزۇنراق مەزمۇن ئۈچۈن تېكىستنى ئېللىپس بىلەن قىسقارتىش ئۈچۈن دەرس قوشالايسىز . تەلەپ قىلىدۇ display: inline-block
ياكى display: block
.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
سۆز بۇزۇش
ئۇزۇن سىزىقلىق تېكىستلەرنى .text-break
تەڭشەش word-wrap: break-word
ۋە ئىشلىتىش ئارقىلىق زاپچاسلىرىڭىزنىڭ ئورۇنلاشتۇرۇشىنى بۇزۇشنىڭ ئالدىنى ئالىدۇ word-break: break-word
. بىز تېخىمۇ كەڭ توركۆرگۈچنى قوللاشنىڭ word-wrap
ئورنىغا كۆپ ئىشلىتىمىز ، ھەمدە قاچىلىنىپ ، ئەۋرىشىم قاچىلاردىكى مەسىلىلەردىن ساقلىنىمىز.overflow-wrap
word-break: break-word
مىنىڭچە
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
تېكىست ئۆزگەرتىش
تېكىستنى چوڭ يېزىلغان دەرسلەر بىلەن زاپچاسلارغا ئۆزگەرتىڭ.
كىچىك يېزىلغان تېكىست.
چوڭ يېزىلغان تېكىست.
CapiTaliZed تېكىست.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
ھەر بىر سۆزنىڭ بىرىنچى ھەرىپىنى قانداق ئۆزگەرتىدىغانلىقىغا دىققەت قىلىڭ .text-capitalize
، باشقا ھەرپلەرنىڭ ئەھۋالى تەسىرگە ئۇچرىمايدۇ.
خەت ئېغىرلىقى ۋە يانتۇ خەت
تېكىستنىڭ ئېغىرلىقى (دادىللىقى) نى تېز ئۆزگەرتىڭ ياكى تېكىستنى يانتۇ قىلىڭ.
توم تېكىست.
توم ئېغىرلىق تېكىستى (ئانا ئېلېمېنتقا سېلىشتۇرغاندا).
نورمال ئېغىرلىق تېكىستى.
يېنىك ئېغىرلىقتىكى تېكىست.
يېنىك ئېغىرلىقتىكى تېكىست (ئانا ئېلېمېنتقا سېلىشتۇرغاندا).
ئىتالىيانچە تېكىست.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>
Monospace
تاللاشنى بىزنىڭ ئالەم بوشلۇقى خەت شەكلىگە ئۆزگەرتىڭ .text-monospace
.
بۇ مونوپولدا
<p class="text-monospace">This is in monospace</p>
رەڭنى ئەسلىگە كەلتۈرۈش
تېكىست ياكى ئۇلىنىشنىڭ رەڭگىنى ئەسلىگە كەلتۈرۈڭ .text-reset
، شۇنداق بولغاندا ئۇ ئاتا-ئانىسىنىڭ رەڭگىگە ۋارىسلىق قىلىدۇ.
ئەسلىگە كەلتۈرۈش ئۇلىنىشى بىلەن ئۆزگەرتىلگەن تېكىست .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
تېكىست بېزەك
.text-decoration-none
دەرسلىك بىلەن تېكىست بېزەكنى ئېلىۋېتىڭ .
<a href="#" class="text-decoration-none">Non-underlined link</a>