Base CSS

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

ماۋزۇلار

<h1>بارلىق HTML ماۋزۇلىرى <h6>بار.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

بەدەن نۇسخىسى

Bootstrap نىڭ يەرشارىدىكى سۈكۈتتىكى font-sizeقىممىتى 14px ، 20px . بۇ بارلىق ئابزاسلارغا قوللىنىلىدۇ. ئۇنىڭدىن باشقا ، (ئابزاسلار) ئۇلارنىڭ بوي ئېگىزلىكىنىڭ يېرىمى (سۈكۈتتىكى 10px) نىڭ تۆۋەنكى گىرۋىكىنى تاپشۇرۇۋالىدۇ.line-height<body><p>

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 ئۇلترا ماشىنا.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

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

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

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

<p class = "lead" > ... </p> 

ئازراق ياسالغان

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


تەكىتلەش

يېنىك ئۇسلۇبتىكى HTML نىڭ كۆڭۈلدىكى تەكىتلەش بەلگىسىنى ئىشلىتىڭ.

<small>

قۇر ياكى تېكىستنىڭ بۆلەكلىرىنى تەكىتلەش ئۈچۈن ، كىچىك خەتكۈچنى ئىشلىتىڭ.

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

<p> <small> بۇ قۇر تېكىستنى ئىنچىكە بېسىپ چىقىرىش دەپ قارىلىدۇ. </small> </p>
  

Bold

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

تۆۋەندىكى تېكىست پارچىلىرى توم تېكىست سۈپىتىدە كۆرسىتىلدى .

<strong> توم تېكىست سۈپىتىدە كۆرسىتىلدى </ strong>

Italics

يانتۇ خەت بىلەن تېكىستنىڭ بىر پارچىسىنى تەكىتلىگەنلىكى ئۈچۈن.

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

<em> يانتۇ تېكىست سۈپىتىدە كۆرسىتىلدى </ em>

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

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

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

سولغا توغرىلانغان تېكىست.

مەركەز تېكىستنى توغرىلىدى.

توغرا توغرىلانغان تېكىست.

  1. <p class = "text-left" > سولغا توغرىلانغان تېكىست. </p>
  2. <p class = "text-center" > مەركەز ماسلاشتۇرۇلغان تېكىست. </p>
  3. <p class = "text-right" > ئوڭ توغرىلانغان تېكىست. </p>

دەرسلەرنى تەكىتلەش

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem maleuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p class = "muted" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p>
  2. <p class = "text-warning" > Etiam porta sem maleuada magna mollis euismod. </p>
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis. </p>
  5. <p class = "text-success" > Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p>

قىسقارتىلما

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

<abbr>

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

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

<abbr title = "خاسلىق" > attr </abbr> 

<abbr class="initialism">

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

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

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

ئادرېس

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

<address>

بارلىق قۇرلارنى ئاخىرلاشتۇرۇش ئارقىلىق فورماتنى ساقلاڭ <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
تولۇق ئىسمى
[email protected]
  1. <address>
  2. <strong> Twitter, Inc. </strong> <br>
  3. 795 فولسوم كوچىسى ، يۈرۈشلۈك 600 <br>
  4. سان فىرانسىسكو ، CA 94107 <br>
  5. <abbr title = "تېلېفون" > P: </abbr> (123) 456-7890
  6. </address>
  7.  
  8. <address>
  9. <strong> تولۇق ئىسمى </ strong> <br>
  10. <a href = "mailto:#"> [email protected] </a> _
  11. </address>

Blockquotes

ھۆججەتتىكى باشقا مەنبەدىن مەزمۇن بۆلەكلىرىنى نەقىل كەلتۈرۈش ئۈچۈن.

كۆڭۈلدىكى توسۇق

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

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

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

Blockquote تاللانمىلىرى

ئۆلچەملىك بۆلەكتىكى ئاددىي ئۆزگىرىشلەرنىڭ ئۇسلۇبى ۋە مەزمۇنى ئۆزگىرىدۇ.

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

<small>مەنبەنى ئېنىقلاش ئۈچۈن بەلگە قوشۇڭ . مەنبە ئەسەرنىڭ نامىنى ئوراپ قويۇڭ <cite>.

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

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

باشقا كۆرسىتىش

.pull-rightلەيلىمە ، ئوڭغا توغرىلانغان توساققا ئىشلىتىڭ .

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

مەنبە ماۋزۇسىدا داڭلىق كىشى
  1. <blockquote class = "pull-right" >
  2. ...
  3. </blockquote>

تىزىملىك

تەرتىپسىز

زاكاز ئېنىق بولمىغان تۈرلەرنىڭ تىزىملىكى .

  • 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
  • پورتېرنىڭ لورېمىنى ئېلىڭ
  1. <ul>
  2. <li> ... </li>
  3. </ul>

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

تەرتىپ ئېنىق بولغان تۈرلەرنىڭ تىزىملىكى .

  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. پورتېرنىڭ لورېمىنى ئېلىڭ
  1. <ol>
  2. <li> ... </li>
  3. </ol>

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
  • پورتېرنىڭ لورېمىنى ئېلىڭ
  1. <ul class = "ئۇسلۇبسىز" >
  2. <li> ... </li>
  3. </ul>

Inline

بارلىق تىزىملىك ​​تۈرلىرىنى بىر قۇر inline-blockۋە بىر ئاز يېنىك تاختا بىلەن قويۇڭ.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  1. <ul class = "inline" >
  2. <li> ... </li>
  3. </ul>

چۈشەندۈرۈش

مۇناسىۋەتلىك چۈشەندۈرۈشلەر بىلەن ئاتالغۇلارنىڭ تىزىملىكى.

چۈشەندۈرۈش تىزىملىكى
چۈشەندۈرۈش تىزىملىكى ئاتالغۇلارنى ئېنىقلاشقا ناھايىتى ماس كېلىدۇ.
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.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </dl>

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

ئاتالغۇ ۋە تەسۋىرلەرنى بىرمۇبىر <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.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  1. <dl class = "dl-horizontal" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </dl>

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

Inline

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

مەسىلەن ، <section>ئىچكى قۇر سۈپىتىدە ئوراش كېرەك.
  1. مەسىلەن ، < code> & lt ; بۆلەك & gt ; </ code > سىزىقچە ئورالغان بولۇشى كېرەك .

Basic block

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

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

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

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

كۆڭۈلدىكى ئۇسلۇب

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

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

ئىختىيارى دەرسلەر

ئاساسىي دەرسكە تۆۋەندىكى دەرسلەرنىڭ خالىغان بىرىنى قوشۇڭ .table.

.table-striped

<tbody>CSS تاللىغۇچ ئارقىلىق :nth-child(IE7-8 دا ئىشلەتكىلى بولمايدۇ) ئارقىلىق ھەر قانداق جەدۋەل قۇرىغا zebra سىزىقچىسى قوشىدۇ.

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

.table-bordered

جەدۋەلگە چېگرا ۋە يۇمىلاق بۇلۇڭلارنى قوشۇڭ.

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

.table-hover

A ئىچىدىكى جەدۋەل قۇرلىرىدا ئايلىنىش ھالىتىنى قوزغىتىڭ <tbody>.

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

.table-condensed

جەدۋەلنى يېرىم قىلىپ كېسىش ئارقىلىق جەدۋەللەرنى تېخىمۇ ئىخچام قىلىدۇ.

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

تاللانما قۇر دەرسلىرى

رەڭلىك جەدۋەل قۇرلىرىغا مەزمۇن دەرسلىرىنى ئىشلىتىڭ.

سىنىپ چۈشەندۈرۈش
.success مۇۋەپپەقىيەتلىك ياكى ئاكتىپ ھەرىكەتنى كۆرسىتىدۇ.
.error خەتەرلىك ياكى يوشۇرۇن سەلبىي ھەرىكەتنى كۆرسىتىدۇ.
.warning دىققەت قىلىشقا تېگىشلىك ئاگاھلاندۇرۇشنى كۆرسىتىدۇ.
.info سۈكۈتتىكى ئۇسلۇبنىڭ ئورنىغا ئىشلىتىلىدۇ.
# مەھسۇلات ھەق ئېلىش ھالەت
1 TB - ئايلىق 01/04/2012 تەستىقلاندى
2 TB - ئايلىق 02/04/2012 رەت قىلىندى
3 TB - ئايلىق 03/04/2012 ساقلىنىۋاتىدۇ
4 TB - ئايلىق 04/04/2012 جەزملەشتۈرۈش ئۈچۈن تېلېفون قىلىڭ
  1. ...
  2. < tr class = "مۇۋەپپەقىيەت" >
  3. <td> 1 < / td>
  4. <td> TB - ئايلىق </ td >
  5. < td > 01/04/2012 < / td >
  6. <td> تەستىقلاندى </ td >
  7. </ tr >
  8. ...

قوللايدىغان جەدۋەل بەلگىسى

قوللايدىغان جەدۋەل HTML ئېلېمېنتلىرىنىڭ تىزىملىكى ۋە ئۇلارنى قانداق ئىشلىتىش كېرەك.

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

كۆڭۈلدىكى ئۇسلۇب

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

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

ئىختىيارى ئورۇنلاشتۇرۇش

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

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

.form-searchجەدۋەلگە ۋە قوشۇمچە يۇمىلاق تېكىست كىرگۈزۈش ئۈچۈن .search-queryقوشۇڭ .<input>

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

Inline form

.form-inlineئىخچام ئورۇنلاشتۇرۇش ئۈچۈن سول تەرەپتىكى بەلگە ۋە سىزىقلىق كونترول كونتروللىرىنى قوشۇڭ .

  1. <form class = "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>

گورىزونتال شەكلى

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

  • .form-horizontalجەدۋەلگە قوشۇڭ
  • بەلگە ۋە كونتروللارنى ئوراش.control-group
  • .control-labelيارلىققا قوشۇڭ
  • .controlsمۇۋاپىق ماسلاشتۇرۇش ئۈچۈن مۇناسىۋەتلىك كونتروللارنى ئوراپ قويۇڭ
  1. <form class = "form-horizontal" >
  2. <div class = "control-group" >
  3. <label class = "control-label" for = "inputEmail" > ئېلخەت </label>
  4. <div class = "control" >
  5. <input type = "text" id = "inputEmail" placeholder = "ئېلخەت" >
  6. </div>
  7. </div>
  8. <div class = "control-group" >
  9. <label class = "control-label" for = "inputPassword" > پارول </label>
  10. <div class = "control" >
  11. <input type = "password" id = "inputPassword" placeholder = "پارول" >
  12. </div>
  13. </div>
  14. <div class = "control-group" >
  15. <div class = "control" >
  16. <label class = "تەكشۈرۈش رامكىسى" >
  17. <input type = "checkbox" > مېنى ئېسىڭىزدە تۇتۇڭ
  18. </label>
  19. <كۇنۇپكا تىپى = "يوللاش" class = "btn" > كىرىش </button>
  20. </div>
  21. </div>
  22. </form>

قوللايدىغان جەدۋەل كونتروللىرى

ئۈلگە جەدۋەل ئورۇنلاشتۇرۇشىدا قوللانغان ئۆلچەملىك جەدۋەل كونتروللىرىنىڭ مىسالى.

كىرگۈزگۈچ

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

typeھەر ۋاقىت بەلگىلەنگەن ئىشلىتىشنى تەلەپ قىلىدۇ .

  1. <input type = "text" placeholder = "تېكىست كىرگۈزۈش" >

Textarea

كۆپ خىل تېكىستنى قوللايدىغان جەدۋەل كونترول. rowsئېھتىياجغا ئاساسەن خاسلىقنى ئۆزگەرتىڭ .

  1. <textarea rows = "3" > </textarea>

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

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

كۆڭۈلدىكى (رەتلەنگەن)


  1. <label class = "تەكشۈرۈش رامكىسى" >
  2. <input type = "checkbox" value = "" >
  3. بىرىنچى تاللاش بۇ ۋە ئۇنىڭ نېمە ئۈچۈن قالتىس ئىكەنلىكىنى جەزملەشتۈرۈڭ
  4. </label>
  5.  
  6. <label class = "radio" >
  7. <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" تەكشۈرۈلگەن >
  8. بىرىنچى تاللاش بۇ ۋە ئۇنىڭ نېمە ئۈچۈن قالتىس ئىكەنلىكىنى جەزملەشتۈرۈڭ
  9. </label>
  10. <label class = "radio" >
  11. <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2 " >
  12. ئىككىنچى تاللاش باشقا نەرسە بولۇشى مۇمكىن ، ئۇنى تاللاش بىرىنچى تاللاشنى تاللايدۇ
  13. </label>

تەكشۈرۈش رامكىسى

.inlineدەرسنى بىر قاتار تەكشۈرۈش رامكىسىغا قوشۇڭ ياكى كونترول قىلىش ئۈچۈن رادىئو ئوخشاش بىر قۇردا كۆرۈنىدۇ.

  1. <label class = "تەكشۈرۈش رامكىسى" >
  2. <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1
  3. </label>
  4. <label class = "تەكشۈرۈش رامكىسى" >
  5. <input type = "checkbox" id = "inlineCheckbox2" value = "option2 " > 2
  6. </label>
  7. <label class = "تەكشۈرۈش رامكىسى" >
  8. <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3
  9. </label>

تاللايدۇ

سۈكۈتتىكى تاللاشنى ئىشلىتىڭ ياكى multiple="multiple"بىرلا ۋاقىتتا كۆپ خىل تاللاشنى كۆرسىتىڭ.


  1. <select>
  2. <option> 1 </option>
  3. <option> 2 </option>
  4. <option> 3 </option>
  5. <option> 4 </option>
  6. <option> 5 </option>
  7. </select>
  8.  
  9. < multiple = "multiple" > نى تاللاڭ
  10. <option> 1 </option>
  11. <option> 2 </option>
  12. <option> 3 </option>
  13. <option> 4 </option>
  14. <option> 5 </option>
  15. </select>

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

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

تەييارلانغان ۋە قوشۇمچە ماتېرىياللار

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

سۈكۈتتىكى تاللاشلار

تېكىستنى ئالدىن كىرگۈزۈش ياكى قوشۇش ئۈچۈن ئىككى سىنىپنىڭ بىرى بىلەن an .add-onۋە an نى ئوراپ بېرىڭ.input

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "add-on" > @ </span>
  3. <input class = "span2" id = "prependedInput" type = "text" placeholder = "ئىشلەتكۈچى ئىسمى" >
  4. </div>
  5. <div class = "input-append" >
  6. <input class = "span2" id = "appendedInput " type = "text" >
  7. <span class = "add-on" > .00 </span>
  8. </div>

بىرلەشتۈرۈلگەن

.add-onكىرگۈزۈش ۋە قوشۇش ئۈچۈن ھەر ئىككى سىنىپ ۋە ئىككى خىل ئەھۋالنى ئىشلىتىڭ .

$ .00
  1. <div class = "input-prepend input-append" >
  2. <span class = "add-on" > $ </span>
  3. <input class = "span2" id = "appendedPrependedInput " type = "text" >
  4. <span class = "add-on" > .00 </span>
  5. </div>

تېكىستنىڭ ئورنىغا كۇنۇپكىلار

<span>تېكىست بىلەن تېكىستنىڭ ئورنىغا ، .btnبىر كۇنۇپكىنى (ياكى ئىككى) كىرگۈزۈش ئۈچۈن ئىشلىتىڭ.

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButton " type = "text" >
  3. <button class = "btn" type = "button" > بار ! </button>
  4. </div>
  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedInputButtons " type = "text" >
  3. <button class = "btn" type = "button" > ئىزدەش </button>
  4. <button class = "btn" type = "button" > تاللانما </button>
  5. </div>

كۇنۇپكا چۈشۈش

  1. <div class = "input-append" >
  2. <input class = "span2" id = "appendedDropdownButton " type = "text" >
  3. <div class = "btn-group" >
  4. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  5. ھەرىكەت
  6. <span class = "caret" > </span>
  7. </button>
  8. <ul class = "dropdown-menu" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. ھەرىكەت
  5. <span class = "caret" > </span>
  6. </button>
  7. <ul class = "dropdown-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "prependedDropdownButton" type = "text" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. ھەرىكەت
  5. <span class = "caret" > </span>
  6. </button>
  7. <ul class = "dropdown-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >
  12. <div class = "btn-group" >
  13. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  14. ھەرىكەت
  15. <span class = "caret" > </span>
  16. </button>
  17. <ul class = "dropdown-menu" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

بۆلۈنگەن چۈشۈش گۇرۇپپىلىرى

  1. <form>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. <input type = "text" >
  5. </div>
  6. <div class = "input-append" >
  7. <input type = "text" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

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

  1. <form class = "form-search" >
  2. <div class = "input-append" >
  3. <input type = "text" class = "span2 search-query" >
  4. <كۇنۇپكا تىپى = "يوللاش" class = "btn" > ئىزدەش </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <كۇنۇپكا تىپى = "يوللاش" class = "btn" > ئىزدەش </button>
  8. <input type = "text" class = "span2 search-query" >
  9. </div>
  10. </form>

چوڭ-كىچىكلىكىنى كونترول قىلىش

دەرسلەرنى ئىشلىتىپ كاتەكچە كاتەكچە .input-largeچوڭلۇقىغا ئوخشاش چوڭلۇقتىكى دەرسلەرنى ئىشلىتىڭ ياكى ماسلاشتۇرۇڭ .span*.

دەرىجىدىكى كىرگۈزۈشنى چەكلەڭ

ھەر قانداق <input>ياكى <textarea>ئېلېمېنتنى توسۇش دەرىجىسىدىكى ئېلېمېنتقا ئوخشاش قىلىڭ.

  1. <input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

نىسپىي چوڭلۇق

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Heads up!كەلگۈسىدىكى نەشرىدە ، بىز بۇ نىسپىي كىرگۈزۈش سىنىپلىرىنىڭ كۇنۇپكا چوڭلۇقىغا ماس ھالدا ئىشلىتىلىشىنى ئۆزگەرتىمىز. مەسىلەن ، .input-largeكىرگۈزۈشنىڭ تاختا ۋە خەت چوڭلۇقىنى ئاشۇرىدۇ.

Grid sizing

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

  1. <input class = "span1" type = "text" placeholder = ".span1" >
  2. <input class = "span2" type = "text" placeholder = ".span2" >
  3. <input class = "span3" type = "text" placeholder = ".span3" >
  4. < class = "span1" > نى تاللاڭ
  5. ...
  6. </select>
  7. < class = "span2" > نى تاللاڭ
  8. ...
  9. </select>
  10. < class = "span3" > نى تاللاڭ
  11. ...
  12. </select>

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

  1. <div class = "control" >
  2. <input class = "span5" type = "text" placeholder = ".span5" >
  3. </div>
  4. <div class = "كونترول-قۇرنى كونترول قىلىدۇ" >
  5. <input class = "span4" type = "text" placeholder = ".span4" >
  6. <input class = "span1" type = "text" placeholder = ".span1" >
  7. </div>
  8. ...

ماس كەلمەيدىغان كىرگۈزۈش

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

بۇ يەردىكى بەزى قىممەتلەر
  1. <span class = "input-xlarge uneditable-input" > بۇ يەردىكى بەزى قىممەتلەر </span>

ھەرىكەتلەرنى شەكىللەندۈرۈش

بىر گۇرۇپپا ھەرىكەت (كۇنۇپكا) بىلەن جەدۋەلنى ئاخىرلاشتۇرۇڭ. A ئىچىگە قويۇلغاندا .form-actions، كۇنۇپكىلار ئاپتوماتىك ھالدا جەدۋەل كونتروللۇقىغا ماس كېلىدۇ.

  1. <div class = "شەكىل-ھەرىكەت" >
  2. <كۇنۇپكا تىپى = "يوللاش" class = "btn btn-primary" > ئۆزگەرتىشلەرنى ساقلاش </button>
  3. <button type = "button" class = "btn" > بىكار قىلىش </button>
  4. </div>

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

جەدۋەل كونتروللۇقىدا كۆرۈلىدىغان ياردەم تېكىستىنى تور ۋە توسۇش سەۋىيىسى قوللايدۇ.

ياردەم

ياردەمچى تېكىست
  1. <input type = "text" > <span class = "help-inline" > ياردەم تېكىست تېكىستى </span>

ياردەمنى توسۇش

يېڭى قۇرغا بۆلىنىدىغان ۋە بىر قۇردىن ئېشىپ كېتىشى مۇمكىن بولغان ياردەم تېكىستى ئۇزۇنراق.
  1. <input type = "text" > <span class = "help-block" > يېڭى قۇرغا بۆسۈپ كىرىپ ، بىر قۇردىن ئېشىپ كېتىشى مۇمكىن. </span>

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

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

فوكۇس توغرىلاش

outlineبىز بەزى شەكىل كونتروللىرىدىكى سۈكۈتتىكى ئۇسلۇبلارنى چىقىرىپ تاشلاپ ، box-shadowئۇنىڭ ئورنىغا بىر ئورۇنغا ئىشلىتىمىز :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "بۇ فوكۇسلانغان ..." >

ئىناۋەتسىز

كۆڭۈلدىكى توركۆرگۈچ ئىقتىدارى ئارقىلىق ئۇسلۇب كىرگۈزۈش :invalid. A نى بەلگىلەڭ ، ئەگەر بۇ ساھە ئىختىيارى بولمىسا خاسلىقنى typeقوشۇڭ ، (ئەگەر مۇمكىن بولسا) a نى بەلگىلىۈڭ .requiredpattern

CSS ساختا تاللىغۇچىلارنى قوللىمىغاچقا ، Internet Explorer 7-9 نەشرىدە بۇنى ئىشلەتكىلى بولمايدۇ.

  1. <input class = "span3" type = "ئېلخەت" تەلەپ قىلىنىدۇ >

ئىناۋەتسىز

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

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "بۇ يەردىكى كىرگۈزۈشنى چەكلىدى ..." چەكلەنگەن >

دەلىللەش ھالىتى

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

چاتاق چىققان بولۇشى مۇمكىن
خاتالىقنى تۈزىتىڭ
ئىشلەتكۈچى ئىسمى ئېلىندى
Woohoo!
  1. <div class = "control-group warning" >
  2. <label class = "control-label" for = "inputWarning" > ئاگاھلاندۇرۇش بىلەن كىرگۈزۈش </label>
  3. <div class = "control" >
  4. <input type = "text" id = "inputWarning" >
  5. <span class = "help-inline" > خاتالىق كۆرۈلگەن بولۇشى مۇمكىن </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "control-group error" >
  10. <label class = "control-label" for = "inputError" > خاتالىق بىلەن كىرگۈزۈش </label>
  11. <div class = "control" >
  12. <input type = "text" id = "inputError" >
  13. <span class = "help-inline" > خاتالىقنى تۈزىتىڭ </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "control-group info" >
  18. <label class = "control-label" for = "inputInfo" > ئۇچۇر بىلەن كىرگۈزۈش </label>
  19. <div class = "control" >
  20. <input type = "text" id = "inputInfo" >
  21. <span class = "help-inline" > ئىشلەتكۈچى ئىسمى ئاللىبۇرۇن ئېلىندى </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "control-group success" >
  26. <label class = "control-label" for = "inputSuccess" > مۇۋەپپەقىيەت بىلەن كىرگۈزۈش </label>
  27. <div class = "control" >
  28. <input type = "text" id = "inputSuccess" >
  29. <span class = "help-inline" > Woohoo! </span>
  30. </div>
  31. </div>

كۆڭۈلدىكى كۇنۇپكىلار

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

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

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

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

كۇنۇپكا چوڭلۇقى

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

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "button" > چوڭ كۇنۇپكا </button>
  3. <button class = "btn btn-large" type = "button" > چوڭ كۇنۇپكا </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > كۆڭۈلدىكى كۇنۇپكا </button>
  7. <button class = "btn" type = "button" > كۆڭۈلدىكى كۇنۇپكا </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "button" > كىچىك كۇنۇپكا </button>
  11. <button class = "btn btn-small" type = "button" > كىچىك كۇنۇپكا </button>
  12. </p>
  13. <p>
  14. <button class = "btn btn-mini btn-primary" type = "button" > كىچىك كۇنۇپكا </button>
  15. <button class = "btn btn-mini" type = "button" > كىچىك كۇنۇپكا </button>
  16. </p>

قوشۇش ئارقىلىق توسۇش دەرىجىلىك كۇنۇپكىلار - ئاتا-ئانىلارنىڭ پۈتۈن كەڭلىكىنى ئۆز ئىچىگە ئالىدۇ .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > چەكلەش كۇنۇپكىسى </button>
  2. <button class = "btn btn-large btn-block" type = "button" > توسۇش دەرىجىسى كۇنۇپكىسى </button>

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

كۇنۇپكىلارنى% 50 كەينىگە ياندۇرۇش ئارقىلىق يېپىق ھالەتكە كەلتۈرۈڭ.

لەڭگەر ئېلېمېنتى

كۇنۇپكىلارغا .disabledدەرس قوشۇڭ .<a>

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

  1. <a href = "#" class = "btn btn-large btn-primary disabled"> دەسلەپكى ئۇلىنىش </a>
  2. <a href = "#" class = "btn btn-large disabled"> ئۇلىنىش </a>

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

كۇنۇپكا ئېلېمېنتى

disabledخاسلىقنى <button>كۇنۇپكىلارغا قوشۇڭ .

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > دەسلەپكى كۇنۇپكا </button>
  2. <button type = "button" class = "btn btn-large" چەكلەنگەن > كۇنۇپكا </button>

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

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

ئۇلىنىش
  1. <a class = "btn" href = ""> ئۇلىنىش </a> _
  2. <button class = "btn" type = "يوللاش" > كۇنۇپكا </button>
  3. <input class = "btn" type = "button" value = "كىرگۈزۈش" >
  4. <input class = "btn" type = "يوللاش" value = "يوللاش" >

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

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

140x140 140x140 140x140
  1. <img src = "..." class = "img-rounded" >
  2. <img src = "..." class = "img-circle" >
  3. <img src = "..." class = "img-polaroid" >

Heads up! .img-roundedھەمدە قوللاش .img-circleكەمچىل بولغانلىقتىن IE7-8 دە ئىشلىمەڭ border-radius.

سىنبەلگىسى

140 خىل سىنبەلگە شەكلىدە ، 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

Glyphicons خاسلىقى

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


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

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

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

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

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

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


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

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

كۇنۇپكىلار

كۇنۇپكا قورال ستونىدىكى كۇنۇپكا گۇرۇپپىسى
  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. <a class = "btn" href = "#"> <i class = "icon-align-left" > </i> </a>
  4. <a class = "btn" href = "#"> <i class = "icon-align-center" > </i> </a>
  5. <a class = "btn" href = "#"> <i class = "icon-align-right" > </i> </a>
  6. <a class = "btn" href = "#"> <i class = "icon-align-justify" > </i> </a>
  7. </div>
  8. </div>
بىر كۇنۇپكا گۇرۇپپىسىدا تاشلاش
  1. <div class = "btn-group" >
  2. <a class = "btn btn-primary" href = "#"> <i class = "icon-user icon-white" > </i> ئىشلەتكۈچى </a>
  3. <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#"> <span class = "caret" > </span> </a>
  4. <ul class = "dropdown-menu" >
  5. <li> <a href = "#"> <i class = "icon-pencil" > </i> تەھرىرلەش </a> </li>
  6. <li> <a href = "#"> <i class = "icon-trash" > </i> ئۆچۈرۈش </a> </li>
  7. <li> <a href = "#"> <i class = "icon-ban-circle" > </i> Ban </a> </li>
  8. <li class = "divider" > </li>
  9. <li> <a href = "#"> <i class = "i" > </i> باشقۇرغۇچى قىلىڭ </a> </li>
  10. </ul>
  11. </div>
كۇنۇپكا چوڭلۇقى
  1. <a class = "btn btn-large" href = "#"> <i class = "icon-star" > </i> يۇلتۇز </a>
  2. <a class = "btn btn-small" href = "#"> <i class = "icon-star" > </i> يۇلتۇز </a>
  3. <a class = "btn btn-mini" href = "#"> <i class = "icon-star" > </i> يۇلتۇز </a>

يول باشلاش

  1. <ul class = "nav nav-list" >
  2. <li class = "active" > <a href = "#"> <i class = "icon-home icon-white" > </i> باش بەت </a> </li>
  3. <li> <a href = "#"> <i class = "icon-book" > </i> كۈتۈپخانا </a> </li>
  4. <li> <a href = "#"> <i class = "icon-pencil" > </i> قوللىنىشچان پروگراممىلار </a> </li>
  5. <li> <a href = "#"> <i class = "i" > </i> خاتا </a> </li>
  6. </ul>

شەكىل بۆلەكلىرى

  1. <div class = "control-group" >
  2. <label class = "control-label" for = "inputIcon" > ئېلخەت ئادرېسى </label>
  3. <div class = "control" >
  4. <div class = "input-prepend" >
  5. <span class = "add-on" > <i class = "سىنبەلگە-كونۋېرت" > </i> </span>
  6. <input class = "span2" id = "inputIcon" type = "text" >
  7. </div>
  8. </div>
  9. </div>