Bootstrap

Base CSS

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

مەتبەئە ماۋزۇلىرى ، ئابزاسلار ، تىزىملىكلەر ۋە باشقا سىزىق تىپىدىكى ئېلېمېنتلار

ماۋزۇ ۋە بەدەن كۆپەيتىلگەن نۇسخىسى

مەتبەئە ئۆلچىمى

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

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

مىسال تېكىست

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس. Nullam id dolor id nibh ئۇلترا ماشىنا.

بەدەننىڭ كۆپەيتىلگەن نۇسخىسى

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

تەكىتلەش ، ئادرېس ۋە قىسقارتىش

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

titleكېڭەيتىلگەن تېكىستنىڭ ئىختىيارى خاسلىقىنى ئۆز ئىچىگە ئالىدۇ

.initialismچوڭ ھەرپ قىسقارتىلمىسى ئۈچۈن دەرس ئىشلىتىڭ .
<address> ئۇنىڭ ئەڭ يېقىن ئەجدادى ياكى پۈتۈن خىزمەت ئورگىنى بىلەن ئالاقىلىشىش ئۇچۇرلىرى ئۈچۈن بارلىق قۇرلارنى ئاخىرلاشتۇرۇش ئارقىلىق فورماتنى ساقلاڭ<br>

تەكىتلەش

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

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

مىسال ئادرېس

بۇ <address>خەتكۈچنى ئىشلىتىشنىڭ ئىككى مىسالى:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
تولۇق ئىسمى
[email protected]

مىسال قىسقارتىلمىسى

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

دەرسنى قىسقارتىپ قوشۇپ ، initialismيېزىقنىڭ ماسلىشىشچانلىقىنى ئازراق كىچىكلىتىڭ.

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

خاسلىق سۆزىنىڭ قىسقارتىلمىسى attr .

Blockquotes

ئېلېمېنت ئىشلىتىش ئىختىيارىي
<blockquote> باشقا مەنبەدىن مەزمۇن نەقىل كەلتۈرۈش ئۈچۈن بۆلەك دەرىجىلىك ئېلېمېنت

citeمەنبە URL ئۈچۈن خاسلىق قوشۇڭ

لەيلىمە تاللاشلارغا ئىشلىتىڭ .pull-leftۋە .pull-rightدەرسلەر
<small> ئىشلەتكۈچىگە قارىتىلغان نەقىل قوشۇشنىڭ ئىختىيارى ئېلېمېنتى ، ئادەتتە ئەسەر ئىسمى بار ئاپتور مەنبە ياكى ئىسىمنىڭ <cite>ئەتراپىغا قويۇڭ

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

<small>مەنبەڭىزنى نەقىل كەلتۈرۈش ئۈچۈن ئىختىيارى ئېلېمېنتنى ئۆز ئىچىگە ئېلىڭ &mdash;، ئۇسلۇب ئۈچۈن ئۇنىڭ ئالدىدا بىر باش تاختا تاپشۇرۇۋالىسىز.

  1. <blockquote>
  2.   <p> لورېم ئىپس دولور ئولتۇرۇش ئامېتى ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستى ئانتېنا تومۇرنى يوقىتىدۇ. </p>
  3.   <small> داڭلىق كىشى </small>
  4. </blockquote>

مىساللار

سۈكۈتتىكى بۆلەكلەر مۇنداق ئۇسلۇبتا يېزىلغان:

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

خىزمەت گەۋدىسىدە داڭق چىقارغان كىشى

توپىڭىزنى ئوڭ تەرەپكە لەيلىتىش ئۈچۈن ، قوشۇڭ class="pull-right":

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

خىزمەت گەۋدىسىدە داڭق چىقارغان كىشى

تىزىملىك

تەرتىپسىز

<ul>

  • 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
  • پورتېرنىڭ لورېمىنى ئېلىڭ

Unstyled

<ul class="unstyled">

  • 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
  • پورتېرنىڭ لورېمىنى ئېلىڭ

زاكاز قىلىندى

<ol>

  1. Lorem ipsum dolor amet
  2. Consectetur adipiscing elit
  3. ماسسادىكى پۈتۈن مۇتلەق لورېم
  4. پرەزيدەنت isسوزدەرى
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. پورتېرنىڭ لورېمىنى ئېلىڭ

چۈشەندۈرۈش

<dl>

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

توغرىسىغا چۈشەندۈرۈش

<dl class="dl-horizontal">

چۈشەندۈرۈش تىزىملىكى
چۈشەندۈرۈش تىزىملىكى ئاتالغۇلارنى ئېنىقلاشقا ناھايىتى ماس كېلىدۇ.
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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Heads up! توغرىسىغا تەسۋىر تىزىملىكى سول ئىستون ئوڭشاشقا بەك ئۇزۇن بولغان ئاتالغۇلارنى قىسقارتىدۇ text-overflow. تار كۆرۈنۈشلەردە ئۇلار سۈكۈتتىكى رەتلەنگەن ئورۇنلاشتۇرۇشقا ئۆزگىرىدۇ.

كود سىزىقلىرى ۋە كود پارچىلىرىنى چەكلەش

Inline

كود پارچىلىرىنى ئۆز ئىچىگە <code>ئالىدۇ.

  1. مەسىلەن ، <code> بۆلىكى </ code > نى ئىچكى قىسىمغا چاپلاش كېرەك .

Basic block

<pre>بىر نەچچە قۇر كودنى ئىشلىتىڭ . مۇۋاپىق رەسىم ئۈچۈن كودتىكى ھەر قانداق بۇلۇڭ تىرناقتىن قېچىشقا كاپالەتلىك قىلىڭ.

<p> بۇ يەردىكى ئۈلگە تېكىست ... </p>

  1. <pre>
  2.   & lt; p & gt; بۇ يەردىكى ئۈلگە تېكىست ... & lt; / p & gt;
  3. </pre>

ئەسكەرتىش: بەلگە ئىچىدىكى كودلارنى <pre>ئىمكانقەدەر سولغا يېقىنلاشتۇرۇڭ. ئۇ بارلىق بەتكۈچلەرنى بېرىدۇ.

سىز .pre-scrollableئەڭ يۇقىرى ئېگىزلىكى 350px قىلىپ بەلگىلەيدىغان ۋە y ئوقلۇق سىيرىلما بالداق بىلەن تەمىنلەيدىغان سىنىپنى تاللىسىڭىز بولىدۇ.

Google Prettify

ئوخشاش <pre>ئېلېمېنتنى ئېلىپ ، كۈچەيتىلگەن رەسىم ئۈچۈن ئىككى ئىختىيارى دەرس قوشۇڭ.

  1. <p> بۇ يەردىكى ئۈلگە تېكىست ... </p>
  1. <pre class = "prettyprint 
  2.      linenums " >
  3.   & lt; p & gt; بۇ يەردىكى ئۈلگە تېكىست ... & lt; / p & gt;
  4. </pre>

Google-code-prettify نى چۈشۈرۈپ ، ئىشلىتىش ئۇسۇلىنى ئوقۇڭ.

جەدۋەل ئۈچۈن ، ئۇنى پەرەز قىلدىڭىز ، جەدۋەل سانلىق مەلۇمات

جەدۋەل بەلگىسى

خەتكۈچ چۈشەندۈرۈش
<table> جەدۋەل شەكلىدە سانلىق مەلۇمات كۆرسىتىش ئۈچۈن ئوراش ئېلېمېنتى
<thead> <tr>جەدۋەلنىڭ ئىستونلىرىغا بەلگە بەتكۈچ قۇرلىرى
<tbody> <tr>جەدۋەلنىڭ گەۋدىسىدىكى جەدۋەل قۇرلىرى ئۈچۈن قاچا ئېلېمېنتى
<tr> بىر قۇردا كۆرۈنىدىغان جەدۋەل كاتەكچىسى ( <td>ياكى ) نىڭ كونتېينېر ئېلېمېنتى<th>
<td> كۆڭۈلدىكى جەدۋەل كاتەكچىسى
<th> ستون (ياكى قۇر ، دائىرە ۋە ئورۇنلاشتۇرۇشقا ئاساسەن) بەلگىسىنىڭ ئالاھىدە جەدۋەل كاتەكچىسى
چوقۇم a ئىچىدە ئىشلىتىلىشى كېرەك<thead>
<caption> جەدۋەل ساقلىغانلارنىڭ چۈشەندۈرۈشى ياكى خۇلاسىسى ، بولۇپمۇ ئېكران ئوقۇرمەنلىرى ئۈچۈن پايدىلىق 
  1. <table>
  2.   <thead>
  3.     <tr>
  4.       <th> … </th>
  5.       <th> … </th>
  6.     </tr>
  7.   </thead>
  8.   <tbody>
  9.     <tr>
  10.       <td> … </td>
  11.       <td> … </td>
  12.     </tr>
  13.   </tbody>
  14. </table>

جەدۋەل تاللانمىلىرى

ئىسمى سىنىپ چۈشەندۈرۈش
سۈكۈتتىكى ياق ئۇسلۇب يوق ، پەقەت ستون ۋە قۇر
Basic .table پەقەت قۇر ئارىلىقىدىكى سىزىقلار
چېگرا .table-bordered بۇلۇڭ-پۇچقاقلارنى ئايلىنىپ ، سىرتقى چېگرانى قوشىدۇ
Zebra-stripe .table-striped غەلىتە قۇرلارغا سۇس كۈلرەڭ تەگلىك رەڭ قوشىدۇ (1 ، 3 ، 5 قاتارلىقلار)
قويۇق .table-condensed tdبارلىق ۋە thئېلېمېنتلارنىڭ ئىچىدە 8px دىن 4px غىچە بولغان تىك تاختاينى يېرىم قىلىپ كېسىدۇ

مىسال جەدۋەل

1. كۆڭۈلدىكى جەدۋەل ئۇسلۇبى

جەدۋەلنىڭ ئوقۇشقا كاپالەتلىك قىلىش ۋە قۇرۇلمىنى ساقلاشقا كاپالەتلىك قىلىش ئۈچۈن جەدۋەل پەقەت بىر قانچە چېگرا بىلەن ئاپتوماتىك ئۇسلۇبتا ياسالغان. 2.0 بىلەن .tableدەرس تەلەپ قىلىنىدۇ.

  1. <table class = "table" > 
  2.   …
  3. </table>
# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @twitter

2. رەتلەنگەن جەدۋەل

جەدۋەللىرىڭىزنى قوشۇش ئارقىلىق ئۈستەللىرىڭىز بىلەن ئازراق ھۇزۇرلىنىڭ - .table-stripedدەرسنى قوشۇڭ.

ئەسكەرتىش: سىزىقلىق جەدۋەللەردە :nth-childCSS تاللىغۇچ ئىشلىتىلىدۇ ، IE7-IE8 دا ئىشلەتكىلى بولمايدۇ.

  1. <table class = "table table-striped" > 
  2.   …
  3. </table>
# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @twitter

3. چېگرا جەدۋىلى

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

  1. <table class = "جەدۋەل جەدۋەل بىلەن چېگرىلىنىدۇ" > 
  2.   …
  3. </table>
# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
Mark Otto @getbootstrap
2 ياقۇپ Thornton @fat
3 Larry the Bird @twitter

4. قويۇق جەدۋەل

جەدۋەلنى قوشۇش ئارقىلىق جەدۋەلنى تېخىمۇ ئىخچام قىلىڭ .table-condensed(8px دىن 4px غىچە).

  1. <table class = "جەدۋەل جەدۋىلى قويۇق" > 
  2.   …
  3. </table>
# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry the Bird @twitter

5. ئۇلارنىڭ ھەممىسىنى بىرلەشتۈرۈڭ!

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

  1. <جەدۋەل سىنىپى = "جەدۋەل ئۈستەل سىزىقلىق جەدۋەل بىلەن ئۈستەل ئۈستەل قويۇق" > 
  2.   ...
  3. </table>
تولۇق ئىسمى
# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry the Bird @twitter

جەدۋەل

جانلىق HTML ۋە CSS

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

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

تۆت ئورۇنلاشتۇرۇش كىرگۈزۈلدى

Bootstrap تۆت خىل شەكىل ئورۇنلاشتۇرۇشنى قوللايدۇ:

  • تىك (سۈكۈتتىكى)
  • ئىزدەش
  • Inline
  • توغرىسىغا

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

كونترول ھالىتى ۋە باشقىلار

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

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

تۆت خىل شەكىل

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

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

پەقەت جەدۋەل كونتروللىرىنى ئىشلىتىپ مىسال جەدۋىلى ، قوشۇمچە بەلگە يوق

Basic form

ئارتۇقچە بەلگە قويماي ئەقلىي ئىقتىدارلىق ۋە يېنىك سۈكۈتتىكى ھالەت.

بۇ يەردىكى بۆلەك دەرىجىلىك ياردەم تېكىستى.

  1. <form class = "well" > 
  2.   <label> بەلگە ئىسمى </label>
  3.   <input type = "text" class = "span3" placeholder = "بىر نەرسە كىرگۈزۈڭ…" >   
  4.   <span class = "help-block" > ئۈلگە بۆلەك دەرىجىلىك ياردەم تېكىستى. </span> 
  5.   <label class = "تەكشۈرۈش رامكىسى" > 
  6.     <input type = "checkbox" > مېنى تەكشۈرۈپ بېقىڭ 
  7.   </label>
  8.   <كۇنۇپكا تىپى = "يوللاش" class = "btn" > يوللاش </button>  
  9. </form>

ئىزدەش جەدۋىلى

جەدۋەلگە .form-searchۋە . .search-query_input

  1. <form class = "well form-search" > 
  2.   <input type = "text" class = "input-medium search-query" >  
  3.   <كۇنۇپكا تىپى = "يوللاش" class = "btn" > ئىزدەش </button>  
  4. </form>

Inline form

.form-inlineشەكىل كونتروللۇقىنىڭ تىك توغرىلىنىشى ۋە ئارىلىقىنى ئىنچىكە قوشۇڭ .

  1. <form class = "well form-inline" > 
  2.   <input type = "text" class = "input-small" placeholder = "ئېلخەت" >   
  3.   <input type = "password" class = "input-small" placeholder = "پارول" >   
  4.   <label class = "تەكشۈرۈش رامكىسى" > 
  5.     <input type = "checkbox" > مېنى ئېسىڭىزدە تۇتۇڭ 
  6.   </label>
  7.   <كۇنۇپكا تىپى = "يوللاش" class = "btn" > كىرىش </button>  
  8. </form>

توغرىسىغا شەكىل

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

  • تېكىست كىرگۈزۈش (تېكىست ، پارول ، ئېلېكترونلۇق خەت قاتارلىقلار)
  • تەكشۈرۈش رامكىسى
  • radio
  • تاللاڭ
  • كۆپ تاللاش
  • ھۆججەت كىرگۈزۈش
  • textarea

ھەقسىز تېكىستتىن باشقا ، HTML5 تېكىستنى ئاساس قىلغان ھەر قانداق كىرگۈزۈش شۇنداق كۆرۈنىدۇ.

مىسال بەلگىسى

يۇقارقى مىسال جەدۋەل ئورۇنلاشتۇرۇشىنى نەزەردە تۇتقاندا ، بۇ يەردە تۇنجى كىرگۈزۈش ۋە كونترول گۇرۇپپىسى بىلەن مۇناسىۋەتلىك بەلگە بار. ئۇسلۇب ئۈچۈن ، .control-group، .control-labelۋە .controlsدەرسلەرنىڭ ھەممىسى تەلەپ قىلىنىدۇ.

  1. <form class = "form-horizontal" > 
  2.   <fieldset>
  3.     <legend> رىۋايەت تېكىستى </legend>
  4.     <div class = "control-group" > 
  5.       <label class = "control-label" for = "input01" > تېكىست كىرگۈزۈش </label>  
  6.       <div class = "control" > 
  7.         <input type = "text" class = "input-xlarge" id = "input01" >   
  8.         <p class = "help-block" > ياردەم تېكىستىنى قوللاش </p> 
  9.       </div>
  10.     </div>
  11.   </fieldset>
  12. </form>

شەكىل كونترول قىلىش ھالىتى

Bootstrap توركۆرگۈ قوللايدىغان فوكۇس ۋە disabledھالەتلەرنىڭ ئۇسلۇبىنى قوللايدۇ. سۈكۈتتىكى Webkit نى ئۆچۈرۈۋېتىمىز ھەمدە outlineئۇنىڭ box-shadowئورنىغا ئىشلىتىمىز :focus.

جەدۋەل دەلىللەش

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

  1. <fieldset
  2.   class = "control-group error" >
  3.   …
  4. </fieldset>
بۇ يەردىكى بەزى قىممەتلەر
چاتاق چىققان بولۇشى مۇمكىن
خاتالىقنى تۈزىتىڭ
Woohoo!
Woohoo!

جەدۋەل كونتروللىرىنى كېڭەيتىش

قىستۇرمىلارنى تەييارلاش ۋە قوشۇش

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

تەكشۈرۈش رامكىسى ۋە رادىئو

V1.4 غىچە ، Bootstrap تەكشۈرۈش ساندۇقى ۋە رادىئو ئەتراپىدا قوشۇمچە بەلگە تەلەپ قىلىدۇ. <label class="checkbox">ھازىر ، ئۇنى ئوراپ تۇرغاننى تەكرارلاش ئاددىي بىر ئىش <input type="checkbox">.

ئىچكى تەكشۈرۈش رامكىسى ۋە رادىئومۇ قوللايدۇ. .inlineھەر قانداق بىرسىگە قوشۇڭ .checkbox، .radioئىش تامام.

جەدۋەلنى قوشۇش ۋە قوشۇمچە قىلىش

ئالدىن كىرگۈزۈش ياكى كىرگۈزۈش كىرگۈزۈش شەكلىنى ئىشلىتىش ئۈچۈن ، بوشلۇق .add-onۋە inputئوخشاش قۇرنى جەزملەشتۈرۈڭ.

ياردەم تېكىستى

جەدۋەل كىرگۈزۈشىڭىزگە ياردەم تېكىستى قوشۇش ئۈچۈن ، كىرگۈزۈش ئېلمىنتىدىن كېيىن <span class="help-inline">ياردەم تېكىستنى ياكى ياردەم تېكىست توپىنى ئۆز ئىچىگە ئالىدۇ.<p class="help-block">

.span*كىرگۈزۈش چوڭلۇقى ئۈچۈن تور سىستېمىسىدىكى ئوخشاش دەرسلەرنى ئىشلىتىڭ .

سىز تورغا خەرىتە قىلمايدىغان ، ئىنكاسچان CSS ئۇسلۇبىغا ماسلىشالايدىغان ياكى ئوخشىمىغان تىپتىكى كونتروللارنى ھېسابلايدىغان تۇراقلىق دەرسلەرنى inputئىشلىتەلەيسىز select.

@

بۇ يەردە بىر قىسىم ياردەم تېكىستلىرى بار

.00
بۇ يەردە تېخىمۇ كۆپ ياردەم تېكىستى بار
$ .00

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

كۇنۇپكىلار

Button class = "" چۈشەندۈرۈش
btn ئۆلچەملىك كۈلرەڭ كۇنۇپكا
btn btn-primary قوشۇمچە كۆرۈش ئېغىرلىقى بىلەن تەمىنلەيدۇ ۋە بىر يۈرۈش كۇنۇپكىلاردىكى دەسلەپكى ھەرىكەتنى پەرقلەندۈرىدۇ
btn btn-info سۈكۈتتىكى ئۇسلۇبنىڭ ئورنىغا ئىشلىتىلىدۇ
btn btn-success مۇۋەپپەقىيەتلىك ياكى ئاكتىپ ھەرىكەتنى كۆرسىتىدۇ
btn btn-warning بۇ ھەرىكەت بىلەن ئېھتىيات قىلىش كېرەكلىكىنى كۆرسىتىدۇ
btn btn-danger خەتەرلىك ياكى يوشۇرۇن سەلبىي ھەرىكەتنى كۆرسىتىدۇ
btn btn-inverse باشقا قېنىق كۈلرەڭ كۇنۇپكا ، مەنىلىك ھەرىكەت ياكى ئىشلىتىشكە باغلانمايدۇ

ھەرىكەت كۇنۇپكىسى

ئەھدىنامە سۈپىتىدە ، كۇنۇپكىلار پەقەت ھەرىكەت ئۈچۈن ئىشلىتىلىشى كېرەك ، ھالبۇكى ئۇلانمىلار جىسىملارغا ئىشلىتىلىدۇ. مەسىلەن ، «چۈشۈرۈش» بىر كۇنۇپكا ، «يېقىنقى پائالىيەت» ئۇلىنىش بولۇشى كېرەك.

.btnدەرسلىك قوللىنىلغان ھەر قانداق نەرسىگە كۇنۇپكا ئۇسلۇبىنى ئىشلىتىشكە بولىدۇ . قانداقلا بولمىسۇن ، ئادەتتە بۇلارنى پەقەت <a>ۋە <button>ئېلېمېنتلارغا ئىشلىتىشنى خالايسىز.

تور كۆرگۈچنىڭ ماسلىشىشچانلىقى

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

كۆپ رازمېر

چوڭ ياكى كىچىك كۇنۇپكىلارمۇ؟ قوشۇڭ ياكى ئىككى چوڭلۇقتا .btn-large..btn-small.btn-mini


چەكلەنگەن ھالەت

چەكلەنگەن كۇنۇپكىلارغا .disabledسىنىپقا ئۇلىنىش ۋە ئېلېمېنتلارنىڭ disabledخاسلىقىنى قوشۇڭ.<button>

دەسلەپكى ئۇلىنىش ئۇلىنىش

Heads up! بىز .disabledبۇ يەردە ئادەتتىكى سىنىپقا ئوخشاش پايدىلىق دەرسلىك سۈپىتىدە ئىشلىتىمىز .active، شۇڭا ئالدى قوشۇلغۇچى تەلەپ قىلىنمايدۇ.

بىر سىنىپ ، كۆپ خەتكۈچ

.btnسىنىپنى an <a>، <button>ياكى <input>ئېلېمېنتقا ئىشلىتىڭ .

ئۇلىنىش 
  1. <a class = "btn" href = ""> ئۇلىنىش </a> _  
  2. <button class = "btn" type = "يوللاش" >  
  3.   Button
  4. </button>
  5. <input class = "btn" type = "button"  
  6.          value = "Input" >
  7. <input class = "btn" type = "يوللاش"  
  8.          value = "يوللاش" >

ئەڭ ياخشى ئەمەلىيەت سۈپىتىدە ، توركۆرگۈنىڭ ئۆز-ئارا ماسلىشىشىغا كاپالەتلىك قىلىش ئۈچۈن ، ئېلېمېنتنىڭ مەزمۇنىنى ماسلاشتۇرۇپ سىناپ بېقىڭ. ئەگەر سىزدە بولسا ، كۇنۇپكىڭىزغا inputئىشلىتىڭ .<input type="submit">

سىنبەلگە Glyphicons تەمىنلىگەن

  • سىنبەلگە
  • icon-music
  • سىنبەلگە ئىزدەش
  • سىنبەلگە
  • icon-heart
  • icon-star
  • icon-star-empty
  • سىنبەلگە ئىشلەتكۈچى
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • سىنبەلگە-سىگنال
  • icon-cog
  • icon-trash
  • icon-home
  • سىنبەلگە ھۆججىتى
  • icon-time
  • icon-road
  • icon-download-alt
  • سىنبەلگە چۈشۈرۈش
  • icon-upload
  • سىنبەلگە
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • سىنبەلگە
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • سىنبەلگە
  • سىنبەلگە
  • سىنبەلگە-كىتاب
  • icon-bookmark
  • icon-print
  • سىنبەلگە
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • سىنبەلگە-تىزىملىك
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • سىنبەلگە-رەسىم
  • سىنبەلگە
  • icon-map-marker
  • سىنبەلگە تەڭشەش
  • icon-tint
  • سىنبەلگە تەھرىرلەش
  • icon-share
  • سىنبەلگە-تەكشۈرۈش
  • icon-move
  • سىنبەلگە-قەدەم-كەينىگە
  • icon-fast-backward
  • سىنبەلگە
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • سىنبەلگە-سوئال-بەلگە
  • icon-info-sign
  • سىنبەلگە
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • سىنبەلگە - خىتابنامە
  • icon-gift
  • سىنبەلگە
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • سىنبەلگە-ئاگاھلاندۇرۇش بەلگىسى
  • icon-plane
  • سىنبەلگە
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • سىنبەلگە-مال سېتىۋېلىش ھارۋىسى
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • سىنبەلگە
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • سىنبەلگە چەمبىرىكى-ئوق-ئوڭ
  • سىنبەلگە چەمبىرىكى-يا ئوق-سول
  • سىنبەلگە چەمبىرىكى-يا ئوق
  • سىنبەلگە چەمبىرىكى-يا ئوق-ئاستى
  • icon-globe
  • icon-wrench
  • سىنبەلگە-ۋەزىپە
  • سىنبەلگە
  • سىنبەلگە
  • icon-fullscreen

Sprite قىلىپ ياسالغان

ھەر بىر سىنبەلگىنى قوشۇمچە تەلەپ قىلىشنىڭ ئورنىغا ، بىز ئۇنى بىر پارچە ھۆججەتكە توپلىدۇق - CSS ئارقىلىق رەسىملەرنى ئورۇنلاشتۇرىدىغان بىر ھۆججەتتىكى بىر تۈركۈم رەسىملەر background-position. بۇ بىز Twitter.com دا قوللانغان ئۇسۇل ، ئۇ بىز ئۈچۈن ياخشى ئۈنۈم بەردى.

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

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

قانداق ئىشلىتىش

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

  1. <i class = "icon-search" > </i>

تەتۈر (ئاق) سىنبەلگىلەرنىڭ ئۇسلۇبلىرىمۇ بار ، بىر قوشۇمچە سىنىپ بىلەن تەييارلانغان:

  1. <i class = "icon-search icon-white" > </i>

سىنبەلگىڭىزدىن تاللىنىدىغان 140 سىنىپ بار. <i>مۇۋاپىق دەرسلەر بىلەن بەلگە قوشسىڭىزلا تەڭشەلدىڭىز. تولۇق تىزىملىكنى sprites.less ياكى بۇ يەردىن تاپالايسىز.

Heads up! كۇنۇپكا ياكى يول ئۇلىنىشىدىكىگە ئوخشاش تېكىست تىزمىلىرىنى ئىشلەتكەندە ، <i>بەلگە قويۇلغاندىن كېيىن مۇۋاپىق بوشلۇق قالدۇرۇڭ.

دېلولارنى ئىشلىتىڭ

سىنبەلگىلەر ناھايىتى ياخشى ، ئەمما ئۇلارنى قەيەردە ئىشلىتىدۇ؟ بۇ يەردە بىر قانچە پىكىر بار:

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

ماھىيەتتە ، خالىغان يەرگە <i>بەلگە قويسىڭىز ، سىنبەلگە قويسىڭىز بولىدۇ.

مىساللار

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

ئىشلەتكۈچى

يېڭىلاش چىقىمدان ئۆچۈرۈش

باھا تەڭشەك تېخىمۇ كۆپ ئۇچۇرلار