مەتبەئە
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. Bootstrap ماۋزۇسى |
|
h2. Bootstrap ماۋزۇسى |
|
h3. Bootstrap ماۋزۇسى |
|
h4. Bootstrap ماۋزۇسى |
|
h5. Bootstrap ماۋزۇسى |
|
h6. Bootstrap ماۋزۇسى |
.h1
دەرسلەر ئارقىلىقمۇ .h6
ئىشلەتكىلى بولىدۇ ، چۈنكى سىز ماۋزۇنىڭ خەت نۇسخىسىنى ماسلاشتۇرماقچى بولسىڭىز ، ئەمما مۇناسىۋەتلىك HTML ئېلېمېنتىنى ئىشلىتەلمەيسىز.
h1. Bootstrap ماۋزۇسى
h2. Bootstrap ماۋزۇسى
h3. Bootstrap ماۋزۇسى
h4. Bootstrap ماۋزۇسى
h5. Bootstrap ماۋزۇسى
h6. Bootstrap ماۋزۇسى
Bootstrap 3 دىن كىچىك ئىككىلەمچى ماۋزۇ تېكىستىنى قايتا ھاسىل قىلىش ئۈچۈن ئىشلىتىلىدىغان دەرسلىكلەرنى ئىشلىتىڭ.
ئەنئەنىۋى ماۋزۇ ئېلېمېنتلىرى بەت مەزمۇنىنىڭ گۆشىدە ئەڭ ياخشى ئىشلەش ئۈچۈن لايىھەلەنگەن. كۆزگە كۆرۈنەرلىك ماۋزۇغا ئېھتىياجلىق بولغاندا ، كۆرسىتىش ماۋزۇسىنى ئىشلىتىشنى ئويلاڭ - تېخىمۇ چوڭ ، سەل قاراشقا بولىدىغان ماۋزۇ ئۇسلۇبى.
كۆرسىتىش 1 |
كۆرسىتىش 2 |
كۆرسىتىش 3 |
كۆرسىتىش 4 |
قوشۇش ئارقىلىق ئابزاسنى ئالاھىدە گەۋدىلەندۈرۈڭ .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
كۆپ ئۇچرايدىغان HTML5 ئېلېمېنتلىرىنىڭ ئۇسلۇبى.
بەلگە بەلگىسىنى ئىشلەتسىڭىز بولىدۇيارقىن نۇقتاتېكىست.
بۇ قۇر تېكىست ئۆچۈرۈلگەن تېكىست دەپ قارىلىدۇ.
بۇ بىر قۇر تېكىست ئەمدى توغرا ئەمەس دەپ قارىلىدۇ.
بۇ بىر قۇر تېكىست ھۆججەتكە قوشۇمچە دەپ قارىلىدۇ.
بۇ قۇر تېكىست ئاستى سىزىق بويىچە كۆرسىتىلىدۇ
بۇ بىر قۇر تېكىست ئىنچىكە بېسىپ چىقىرىلغان دەپ قارىلىدۇ.
بۇ قۇر توم تېكىست سۈپىتىدە كۆرسىتىلدى.
بۇ قۇر يانتۇ تېكىست سۈپىتىدە كۆرسىتىلدى.
.mark
.small
دەرسلەرمۇ ئوخشاش ئۇسلۇبلارنى قوللىنىشقا بولىدۇ ھەمدە خەتكۈچلەر <mark>
ئېلىپ <small>
كېلىدىغان خالىغان مەنىلىك تەسىرلەردىن ساقلىنىدۇ.
يۇقىرىدا كۆرسىتىلمىگەن <b>
بىلەن <i>
، HTML5 دە ئىشلىتىڭ. كۆپىنچە ئاۋاز ، تېخنىكىلىق ئاتالغۇ قاتارلىقلار ئۈچۈن <b>
قوشۇمچە ئەھمىيەت بەرمەي تۇرۇپ سۆز ياكى ئىبارىلەرنى گەۋدىلەندۈرۈشنى مەقسەت قىلىدۇ .<i>
تېكىست ماسلاشتۇرۇش ، ئۆزگەرتىش ، ئۇسلۇب ، ئېغىرلىق ۋە رەڭنى تېكىست ئەسلىھەلىرى ۋە رەڭ ئەسلىھەلىرى بىلەن ئۆزگەرتىڭ .
<abbr>
كېڭەيتىلگەن نەشرىنى كۆرسىتىش ئۈچۈن HTML ئېلېمېنتىنىڭ قىسقارتىلمىسى ۋە قىسقارتىلمىسى ئۈچۈن قوللىنىلغان. قىسقارتىلما سۈكۈتتىكى ئاستى سىزىق بولۇپ ، ياردەمچى نۇر بەلگىسىگە ئېرىشىدۇ ھەمدە ياردەمچى تېخنىكىلارنى ئىشلەتكۈچىلەرگە قوشۇمچە مەزمۇن بىلەن تەمىنلەيدۇ.
.initialism
سەل كىچىكرەك خەت چوڭلۇقىغا قىسقارتىشقا قوشۇڭ .
attr
HTML
ھۆججەتتىكى باشقا مەنبەدىن مەزمۇن بۆلەكلىرىنى نەقىل كەلتۈرۈش ئۈچۈن. <blockquote class="blockquote">
ھەر قانداق HTML نى نەقىل قىلىپ ئوراپ قويۇڭ.
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.
<footer class="blockquote-footer">
مەنبەنى ئېنىقلاش ئۈچۈن قوشۇڭ . مەنبە ئەسەرنىڭ نامىنى ئوراپ قويۇڭ <cite>
.
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.
ئېھتىياجىڭىزغا ئاساسەن تېكىست قوراللىرىنى ئىشلىتىپ ، توپىڭىزنىڭ توغرىلىنىشىنى ئۆزگەرتىڭ.
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستىنى يوقىتىدۇ.
تىزىملىك تۈرلىرىدىكى سۈكۈتتىكى 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
- پورتېرنىڭ لورېمىنى ئېلىڭ
تىزىملىكنىڭ ئوقلىرىنى ئېلىڭ ھەمدە ئىككى سىنىپنى بىرلەشتۈرۈپ ئازراق نۇر margin
ئىشلىتىڭ ..list-inline
.list-inline-item
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
كاتەكچە سىستېمىمىزنىڭ ئالدىن بېكىتىلگەن دەرسلىرى (ياكى مەنىلىك ئارىلاشمىلار) ئارقىلىق ئاتالغۇ ۋە تەسۋىرلەرنى توغرىسىغا توغرىلاڭ. .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.
مەسئۇلىيەتچان مەتبەئەfont-size
بىر يۈرۈش مېدىيا سوئاللىرى ئىچىدىكى يىلتىز ئېلېمېنتىنى تەڭشەش ئارقىلىق كۆلەملەشتۈرۈلگەن تېكىست ۋە زاپچاسلارنى كۆرسىتىدۇ . Bootstrap بۇنى سىز ئۈچۈن قىلمايدۇ ، ئەمما ئېھتىياجلىق بولسىڭىز قوشۇش بىر قەدەر ئاسان.
مانا بۇ ئەمەلىيەتتىكى بىر مىسال. خالىغان font-size
س ۋە مېدىيا سوئاللىرىنى تاللاڭ.