مەتبەئە

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

بۇ بەتتە

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

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

ھەر بىر OS ۋە ئۈسكۈنىنىڭ ئەڭ ياخشىسىنى تاللايدىغان يەرلىك خەت نۇسخىسىنى ئىشلىتىڭ .font-family
تېخىمۇ سىغدۇرۇشچان ۋە قولايلىق تىپ ئۆلچىمى ئۈچۈن ، بىز توركۆرگۈچنىڭ سۈكۈتتىكى يىلتىزىنى ئىشلىتىمىز font-size(ئادەتتە 16px) ، شۇڭا زىيارەتچىلەر ئېھتىياجغا ئاساسەن تور كۆرگۈچنىڭ سۈكۈتتىكى ھالىتىنى ئىختىيارىي قىلالايدۇ.
$font-family-base، $font-size-base، ۋە $line-height-baseخاسلىقلارنى بىزنىڭ باسما ئاساسىمىز سۈپىتىدە ئىشلىتىڭ <body>.
ئارقىلىق يەر شارى ئۇلىنىش رەڭگىنى تەڭشەڭ $link-color.
( سۈكۈتتىكى) گە $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 ماۋزۇسى

html

<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 دىن كىچىك ئىككىلەمچى ماۋزۇ تېكىستىنى قايتا ھاسىل قىلىش ئۈچۈن ئىشلىتىلىدىغان دەرسلىكلەرنى ئىشلىتىڭ.

ئېسىل كۆرسىتىش ماۋزۇسى سۇس ئىككىلەمچى تېكىست بىلەن

html

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

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

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

كۆرسىتىش 1

كۆرسىتىش 2

كۆرسىتىش 3

كۆرسىتىش 4

كۆرسىتىش 5

كۆرسىتىش 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

كۆرسىتىش ماۋزۇلىرى $display-font-sizesSass خەرىتىسى ۋە ئىككى ئۆزگەرگۈچى مىقدار $display-font-weightئارقىلىق تەڭشىلىدۇ $display-line-height.

كۆرسىتىش ماۋزۇسىنى ئىككى ئۆزگەرگۈچى مىقدار ئارقىلىق خاسلاشتۇرغىلى $display-font-familyبولىدۇ $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

قوغۇشۇن

قوشۇش ئارقىلىق ئابزاسنى ئالاھىدە گەۋدىلەندۈرۈڭ .lead.

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

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

تېكىست ئېلمىنتلىرى

كۆپ ئۇچرايدىغان HTML5 ئېلېمېنتلىرىنىڭ ئۇسلۇبى.

بەلگە بەلگىسىنى ئىشلەتسىڭىز بولىدۇيارقىن نۇقتاتېكىست.

~~بۇ قۇر تېكىست ئۆچۈرۈلگەن تېكىست دەپ قارىلىدۇ.~~

~~بۇ بىر قۇر تېكىست ئەمدى توغرا ئەمەس دەپ قارىلىدۇ.~~

بۇ بىر قۇر تېكىست ھۆججەتكە قوشۇمچە دەپ قارىلىدۇ.

بۇ قۇر تېكىست ئاستى سىزىق بويىچە كۆرسىتىلىدۇ.

بۇ بىر قۇر تېكىست ئىنچىكە بېسىپ چىقىرىلغان دەپ قارىلىدۇ.

بۇ قۇر توم تېكىست سۈپىتىدە كۆرسىتىلدى.

بۇ قۇر يانتۇ تېكىست سۈپىتىدە كۆرسىتىلدى.

html

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

بۇ بەلگىلەرنىڭ مەنىلىك مەقسەتتە ئىشلىتىلىشىدىن ئېھتىيات قىلىڭ:

پايدىلىنىش ياكى ئىزاھلاش مەقسىتىدە بەلگە قويۇلغان ياكى گەۋدىلەنگەن تېكىستنى كۆرسىتىدۇ.
نەشر ھوقۇقى ۋە قانۇن تېكىستىگە ئوخشاش قوشۇمچە باھا ۋە كىچىك بېسىشنى كۆرسىتىدۇ.
<s>ئەمدى مۇناسىۋەتلىك بولمىغان ياكى ئەمدى توغرا بولمىغان ئېلېمېنتقا ۋەكىللىك قىلىدۇ.
ئۇ تېكىستنىڭ ئىزاھاتىغا ۋەكىللىك قىلىدىغان شەكىلدە كۆرسىتىلىشى كېرەك.

ئەگەر تېكىستنى ئۇسلۇب قىلماقچى بولسىڭىز ، ئۇنىڭ ئورنىغا تۆۋەندىكى دەرسلەرنى ئىشلىتىڭ:

.markئوخشاش ئۇسلۇبنى قوللىنىدۇ .
.smallئوخشاش ئۇسلۇبنى قوللىنىدۇ .
.text-decoration-underlineئوخشاش ئۇسلۇبنى قوللىنىدۇ .
.text-decoration-line-throughئوخشاش ئۇسلۇبنى قوللىنىدۇ <s>.

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

تېكىست قوراللىرى

تېكىست ماسلاشتۇرۇش ، ئۆزگەرتىش ، ئۇسلۇب ، ئېغىرلىق ، سىزىق ئېگىزلىكى ، زىننەتلەش ۋە رەڭنى تېكىست ئەسلىھەلىرى ۋە رەڭ ئەسلىھەلىرى بىلەن ئۆزگەرتىڭ .

قىسقارتىلما

<abbr>كېڭەيتىلگەن نەشرىنى كۆرسىتىش ئۈچۈن HTML ئېلېمېنتىنىڭ قىسقارتىلمىسى ۋە قىسقارتىلمىسى ئۈچۈن قوللىنىلغان. قىسقارتىلما سۈكۈتتىكى ئاستى سىزىق بولۇپ ، ياردەمچى نۇر بەلگىسىگە ئېرىشىدۇ ھەمدە ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە قوشۇمچە مەزمۇن بىلەن تەمىنلەيدۇ.

.initialismسەل كىچىكرەك خەت چوڭلۇقىغا قىسقارتىشقا قوشۇڭ .

attr

HTML

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blockquotes

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

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

html

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

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

HTML ئۆلچىمىدە چەكلەش خاسلىقىنىڭ سىرتىغا قويۇلۇشىنى تەلەپ قىلىدۇ <blockquote>. خاسلىق بىلەن تەمىنلىگەندە ، ئۆزىڭىزنى ئوراپ ، سىنىپ بىلەن <blockquote>a ياكى چەكلەش ئېلېمېنتىنى <figure>ئىشلىتىڭ . مەنبە ئەسەرنىڭ ئىسمىنىمۇ ئوراپ جەزملەشتۈرۈڭ .<figcaption>.blockquote-footer<cite>

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

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

توغرىلاش

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

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

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

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

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

تىزىملىك

Unstyled

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

بۇ بىر تىزىملىك.
ئۇ پۈتۈنلەي ئۇسلۇبسىز كۆرۈنىدۇ.
قۇرۇلما جەھەتتىن ، ئۇ يەنىلا بىر تىزىملىك.
قانداقلا بولمىسۇن ، بۇ ئۇسلۇب پەقەت بالا ئېلېمېنتلىرىغا ماس كېلىدۇ.
تىزىملىك تىزىملىكى:
- بۇ ئۇسلۇبنىڭ تەسىرىگە ئۇچرىمايدۇ
- يەنىلا بىر پاي ئوقنى كۆرسىتىدۇ
- ھەمدە مۇۋاپىق سول پەرقى بار
بۇ بەزى ئەھۋاللاردا يەنىلا قولايلىق بولۇشى مۇمكىن.

html

<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

بۇ بىر تىزىملىك تۈرى.
يەنە بىرى.
ئەمما ئۇلار ئىچكى قىسىمدا كۆرسىتىلىدۇ.

html

<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

بېكىتىلگەن ئېنىقلىما تىزىملىكى: مەن سىزنىڭ ئېنىقلىما تىزىملىكىنى ياخشى كۆرىدىغانلىقىڭىزنى ئاڭلىدىم. ئېنىقلىما تىزىملىكىڭىزگە ئېنىقلىما تىزىملىكى قوياي.

html

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

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

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

Sass

ئۆزگەرگۈچى مىقدار

ماۋزۇلارنىڭ چوڭ-كىچىكلىكى ۋە ئارىلىقى ئۈچۈن مەخسۇس ئۆزگەرگۈچى مىقدار بار.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

بۇ يەردە ۋە Reboot دا قاپلانغان ھەرخىل خەت بېسىش ئېلېمېنتلىرىنىڭ مەخسۇس ئۆزگەرگۈچى مىقدارلىرى بار.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mixins

مەتبەئە ئۈچۈن مەخسۇس ئارىلاشمىلار يوق ، ئەمما Bootstrap مەسئۇلىيەتچان خەت چوڭلۇقى (RFS) نى ئىشلىتىدۇ .