مەتبەئە

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.

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>

Blockquotes

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

Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.

<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 amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.

مەنبە ماۋزۇسىدا داڭلىق كىشى

<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 amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.

مەنبە ماۋزۇسىدا داڭلىق كىشى

<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 amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.

مەنبە ماۋزۇسىدا داڭلىق كىشى

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

تىزىملىك

Unstyled

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

Lorem ipsum dolor amet
Consectetur adipiscing elit
ماسسادىكى پۈتۈن مۇتلەق لورېم
پرەزيدەنت isسوزدەرى
Nulla volutpat aliquam 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
پورتېرنىڭ لورېمىنى ئېلىڭ

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

Inline

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<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ئۇزۇنراقراق قىلىپ ئېيتقاندا ، تېكىستنى ئېللىپس بىلەن قىسقارتىش ئۈچۈن ئىختىيارىي دەرس قوشالايسىز .

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

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

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida eget metus.

Malesuada porta

Etiam porta sem maleuada magna mollis euismod.

قىسقارتىلغان ئاتالغۇ قىسقارتىلدى

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

بېكىتىلگەن ئېنىقلىما تىزىملىكى: 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 بىر يۈرۈش مېدىيا سوئاللىرى ئىچىدىكى يىلتىز ئېلېمېنتىنى تەڭشەش ئارقىلىق كۆلەملەشتۈرۈلگەن تېكىست ۋە زاپچاسلارنى كۆرسىتىدۇ . Bootstrap بۇنى سىز ئۈچۈن قىلمايدۇ ، ئەمما ئېھتىياجلىق بولسىڭىز قوشۇش بىر قەدەر ئاسان.

مانا بۇ ئەمەلىيەتتىكى بىر مىسال. خالىغان 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;
  }
}