in English

مەتبەئە

Bootstrap مەتبەئەنىڭ ھۆججەتلىرى ۋە مىساللىرى يەرشارى تەڭشەكلىرى ، ماۋزۇلار ، بەدەن تېكىستى ، تىزىملىك ​​قاتارلىقلار.

يەرشارى تەڭشەكلىرى

Bootstrap يەرشارىدىكى ئاساسلىق كۆرسىتىش ، مەتبەئە ۋە ئۇلىنىش ئۇسلۇبىنى بەلگىلەيدۇ. تېخىمۇ كۆپ كونترول قىلىشقا توغرا كەلگەندە ، تېكىستلىك دەرسلىكلەرنى تەكشۈرۈپ بېقىڭ .

  • ھەر بىر OS ۋە ئۈسكۈنىنىڭ ئەڭ ياخشىسىنى تاللايدىغان يەرلىك خەت نۇسخىسىنى ئىشلىتىڭ .font-family
  • تېخىمۇ سىغدۇرۇشچان ۋە قولايلىق تىپ ئۆلچىمى ئۈچۈن ، بىز توركۆرگۈچنىڭ سۈكۈتتىكى يىلتىزىنى ئىشلىتىمىز 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></h1> h1. Bootstrap ماۋزۇسى
<h2></h2> h2. Bootstrap ماۋزۇسى
<h3></h3> h3. Bootstrap ماۋزۇسى
<h4></h4> h4. Bootstrap ماۋزۇسى
<h5></h5> h5. Bootstrap ماۋزۇسى
<h6></h6> h6. Bootstrap ماۋزۇسى 
<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. Bootstrap ماۋزۇسى

h2. Bootstrap ماۋزۇسى

h3. Bootstrap ماۋزۇسى

h4. Bootstrap ماۋزۇسى

h5. Bootstrap ماۋزۇسى

h6. Bootstrap ماۋزۇسى

<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>

ماۋزۇلارنى خاسلاشتۇرۇش

Bootstrap 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.

بۇ يېتەكچى ئابزاس. ئۇ دائىملىق ئابزاسلاردىن ئالاھىدە پەرقلىنىدۇ.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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>

Blockquotes

ھۆججەتتىكى باشقا مەنبەدىن مەزمۇن بۆلەكلىرىنى نەقىل كەلتۈرۈش ئۈچۈن. <blockquote class="blockquote">ھەر قانداق HTML نى نەقىل قىلىپ ئوراپ قويۇڭ.

ھەممىگە تونۇشلۇق نەقىل ، چەكلەش ئېلېمېنتى بار.

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

مەنبەگە ئىسىم قويۇش

<footer class="blockquote-footer">مەنبەنى ئېنىقلاش ئۈچۈن قوشۇڭ . مەنبە ئەسەرنىڭ نامىنى ئوراپ قويۇڭ <cite>.

ھەممىگە تونۇشلۇق نەقىل ، چەكلەش ئېلېمېنتى بار.

مەنبە ماۋزۇسىدا داڭلىق كىشى 
<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

توغرىلاش

ئېھتىياجىڭىزغا ئاساسەن تېكىست قوراللىرىنى ئىشلىتىپ ، توپىڭىزنىڭ توغرىلىنىشىنى ئۆزگەرتىڭ.

ھەممىگە تونۇشلۇق نەقىل ، چەكلەش ئېلېمېنتى بار.

مەنبە ماۋزۇسىدا داڭلىق كىشى 
<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

ھەممىگە تونۇشلۇق نەقىل ، چەكلەش ئېلېمېنتى بار.

مەنبە ماۋزۇسىدا داڭلىق كىشى 
<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

تىزىملىك

Unstyled

تىزىملىك ​​تۈرلىرىدىكى سۈكۈتتىكى list-styleۋە سول گىرۋەكنى ئېلىڭ (پەقەت بالىلارلا). بۇ پەقەت بالىلار تىزىملىكىدىكى تۈرلەرگىلا ماس كېلىدۇ ، يەنى سىز ئۇۋىغان تىزىملىكلەرگىمۇ دەرس قوشۇشىڭىز كېرەك.

  • بۇ بىر تىزىملىك.
  • ئۇ پۈتۈنلەي ئۇسلۇبسىز كۆرۈنىدۇ.
  • قۇرۇلما جەھەتتىن ، ئۇ يەنىلا بىر تىزىملىك.
  • قانداقلا بولمىسۇن ، بۇ ئۇسلۇب پەقەت بالا ئېلېمېنتلىرىغا ماس كېلىدۇ.
  • تىزىملىك ​​تىزىملىكى:
    • بۇ ئۇسلۇبنىڭ تەسىرىگە ئۇچرىمايدۇ
    • يەنىلا بىر پاي ئوقنى كۆرسىتىدۇ
    • ھەمدە مۇۋاپىق سول پەرقى بار
  • بۇ بەزى ئەھۋاللاردا يەنىلا قولايلىق بولۇشى مۇمكىن.
<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Inline

تىزىملىكنىڭ ئوقلىرىنى ئېلىڭ ھەمدە ئىككى سىنىپنى بىرلەشتۈرۈپ ئازراق نۇر marginئىشلىتىڭ ..list-inline.list-inline-item

  • بۇ بىر تىزىملىك ​​تۈرى.
  • يەنە بىرى.
  • ئەمما ئۇلار ئىچكى قىسىمدا كۆرسىتىلىدۇ.
<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

چۈشەندۈرۈش تىزىملىكى توغرىلاش

كاتەكچە سىستېمىمىزنىڭ ئالدىن بېكىتىلگەن دەرسلىرى (ياكى مەنىلىك ئارىلاشمىلار) ئارقىلىق ئاتالغۇ ۋە تەسۋىرلەرنى توغرىسىغا توغرىلاڭ. .text-truncateئۇزۇنراقراق قىلىپ ئېيتقاندا ، تېكىستنى ئېللىپس بىلەن قىسقارتىش ئۈچۈن ئىختىيارىي دەرس قوشالايسىز .

چۈشەندۈرۈش تىزىملىكى
چۈشەندۈرۈش تىزىملىكى ئاتالغۇلارنى ئېنىقلاشقا ناھايىتى ماس كېلىدۇ.
مۇددىتى

بۇ ئاتالغۇنىڭ ئېنىقلىمىسى.

يەنە بىر قىسىم ئورۇن ئىگىلىرىگە ئېنىقلىما تېكىستى.

يەنە بىر ئاتالغۇ
بۇ ئېنىقلىما قىسقا ، شۇڭا قوشۇمچە ئابزاس ياكى باشقا نەرسە يوق.
قىسقارتىلغان ئاتالغۇ قىسقارتىلدى
بوشلۇق چىڭ بولغاندا بۇ پايدىلىق بولىدۇ. ئاخىرىدا ئېللىپس قوشۇلىدۇ.
Nesting
بېكىتىلگەن ئېنىقلىما تىزىملىكى
مەن سىزنىڭ ئېنىقلىما تىزىملىكىنى ياخشى كۆرىدىغانلىقىڭىزنى ئاڭلىدىم. ئېنىقلىما تىزىملىكىڭىزگە ئېنىقلىما تىزىملىكى قوياي. 
<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">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

خەت نۇسخىسىنىڭ چوڭ-كىچىكلىكى

V4.3.0 دىن باشلاپ ، Bootstrap ئەۋەتىلگەن خەت نۇسخىسىنىڭ چوڭ-كىچىكلىكىنى قوزغىتىپ ، تېكىستنىڭ ئۈسكۈنى ۋە كۆرۈنۈش چوڭلۇقىدا تەبىئىي ھالدا چوڭايتىشىغا يول قويىدۇ. RFS$enable-responsive-font-sizes نى Sass ئۆزگەرگۈچى مىقدارنى ئۆزگەرتىش trueۋە Bootstrap نى قايتا قۇرۇش ئارقىلىق قوزغىتىشقا بولىدۇ .

RFS نى قوللاش ئۈچۈن نورمال خاسلىقىمىزنىڭ ئورنىنى ئېلىش ئۈچۈن Sass ئارىلاشمىسى ئىشلىتىمىز font-size. ئىنكاسچان چوڭ- كىچىكلىكى calc()ئارىلاشما remۋە كۆرۈش بىرلىكى بىلەن ئىقتىدارلارغا توپلىنىپ ، ئىنكاس قايتۇرۇش كۆلىمىنى قوزغىتىدۇ. RFS ۋە ئۇنىڭ سەپلىمىسى توغرىسىدىكى تېخىمۇ كۆپ ئۇچۇرلارنى ئۇنىڭ GitHub ئامبىرىدىن تاپقىلى بولىدۇ .