تاختاينىڭ ئۈستىگە ، ئاساسىي 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 ئۇلترا ماشىنىلىرى ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
ئېلېمېنت | ئىشلىتىش | ئىختىيارىي |
---|---|---|
<strong> |
مۇھىم بولغان بىر پارچە تېكىستنى تەكىتلەش ئۈچۈن | ياق |
<em> |
بىر پارچە تېكىستنى بېسىم بىلەن تەكىتلىگەنلىكى ئۈچۈن | ياق |
<abbr> |
كېڭەيتىلگەن نۇسخىسىنى كۆرسىتىش ئۈچۈن قىسقارتىلما ۋە قىسقارتىلمىلارنى ئوراپ | title كېڭەيتىلگەن تېكىستنىڭ ئىختىيارىنى ئۆز ئىچىگە ئالىدۇ |
<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>
خەتكۈچنى ئىشلىتىشنىڭ ئىككى مىسالى:
قىسقارتىلمىسى چوڭ ھەرپ ۋە يېنىك چېكىتلىك ئاستى چېگرا بىلەن يېزىلغان. ئۇلارنىڭ يەنە قوزغاتقۇچتا ياردەم نۇر بەلگىسى بار ، شۇڭا ئىشلەتكۈچىلەرنىڭ كۆرسەتكۈچتە بىر نەرسە كۆرسىتىلىدىغانلىقىغا قوشۇمچە كۆرسەتمە بار.
HTML بولكا كېسىلگەندىن بۇيانقى ئەڭ ياخشى نەرسە.
خاسلىق سۆزىنىڭ قىسقارتىلمىسى attr .
ئېلېمېنت | ئىشلىتىش | ئىختىيارىي |
---|---|---|
<blockquote> |
باشقا مەنبەدىن مەزمۇن نەقىل كەلتۈرۈش ئۈچۈن بۆلەك دەرىجىلىك ئېلېمېنت |
.pull-left ۋە .pull-right دەرسلەر |
<small> |
ئىشلەتكۈچىگە قارىتىلغان نەقىل قوشۇشنىڭ ئىختىيارى ئېلېمېنتى ، ئادەتتە ئەسەر ئىسمى بار ئاپتور | مەنبە ياكى ئىسىمنىڭ <cite> ئەتراپىغا قويۇڭ |
<blockquote>
بىر بۆلەكنى ئۆز ئىچىگە ئېلىش ئۈچۈن ، ھەر قانداق HTML نى نەقىل قىلىپ ئوراپ قويۇڭ . تۈز نەقىل ئۈچۈن بىز a نى تەۋسىيە قىلىمىز <p>
.
<small>
مەنبەڭىزنى نەقىل كەلتۈرۈش ئۈچۈن ئىختىيارى ئېلېمېنتنى ئۆز ئىچىگە ئېلىڭ —
، ئۇسلۇب ئۈچۈن ئۇنىڭ ئالدىدا بىر باش تاختا تاپشۇرۇۋالىسىز.
- <blockquote>
- <p> لورېم ئىپس دولور ئولتۇرۇش ئامېتى ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستى ئانتېنا تومۇرنى يوقىتىدۇ. </p>
- <small> داڭلىق كىشى </small>
- </blockquote>
سۈكۈتتىكى بۆلەكلەر مۇنداق ئۇسلۇبتا يېزىلغان:
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستى ئانتېنا تومۇرنى يوقىتىدۇ.
خىزمەت گەۋدىسىدە داڭق چىقارغان كىشى
توپىڭىزنى ئوڭ تەرەپكە لەيلىتىش ئۈچۈن ، قوشۇڭ class="pull-right"
:
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوستى ئانتېنا تومۇرنى يوقىتىدۇ.
خىزمەت گەۋدىسىدە داڭق چىقارغان كىشى
<ul>
<ul class="unstyled">
<ol>
<dl>
كود پارچىلىرىنى ئۆز ئىچىگە <code>
ئالىدۇ.
- مەسىلەن ، <code> بۆلىكى </ code > نى ئىچكى قىسىمغا چاپلاش كېرەك .
<pre>
بىر نەچچە قۇر كودنى ئىشلىتىڭ . مۇۋاپىق پەرۋىش قىلىش ئۈچۈن ھەر قانداق پەرۋىشنى ئۇلارنىڭ يۇنىكود ھەرپلىرىگە ئايلاندۇرۇشقا كاپالەتلىك قىلىڭ.
<p> بۇ يەردىكى ئۈلگە تېكىست ... </p>
- <pre>
- & lt; p & gt; بۇ يەردىكى ئۈلگە تېكىست ... & lt; / p & gt;
- </pre>
ئەسكەرتىش: بەلگە ئىچىدىكى كودلارنى <pre>
ئىمكانقەدەر سولغا يېقىنلاشتۇرۇڭ. ئۇ بارلىق بەتكۈچلەرنى بېرىدۇ.
ئوخشاش <pre>
ئېلېمېنتنى ئېلىپ ، كۈچەيتىلگەن رەسىم ئۈچۈن ئىككى ئىختىيارى دەرس قوشۇڭ.
- <p> بۇ يەردىكى ئۈلگە تېكىست ... </p>
- <pre class = "prettyprint
- linenums " >
- & lt; p & gt; بۇ يەردىكى ئۈلگە تېكىست ... & lt; / p & gt;
- </pre>
Google-code-prettify نى چۈشۈرۈپ ، ئىشلىتىش ئۇسۇلىنى ئوقۇڭ.
خەتكۈچ | چۈشەندۈرۈش |
---|---|
<table> |
جەدۋەل شەكلىدە سانلىق مەلۇمات كۆرسىتىش ئۈچۈن ئوراش ئېلېمېنتى |
<thead> |
<tr> جەدۋەلنىڭ ئىستونلىرىغا بەلگە بەتكۈچ قۇرلىرى |
<tbody> |
<tr> جەدۋەلنىڭ گەۋدىسىدىكى جەدۋەل قۇرلىرى ئۈچۈن قاچا ئېلېمېنتى |
<tr> |
بىر قۇردا كۆرۈنىدىغان جەدۋەل كاتەكچىسى ( <td> ياكى ) نىڭ كونتېينېر ئېلېمېنتى<th> |
<td> |
كۆڭۈلدىكى جەدۋەل كاتەكچىسى |
<th> |
ستون (ياكى قۇر ، دائىرە ۋە ئورۇنلاشتۇرۇشقا ئاساسەن) بەلگىسىنىڭ ئالاھىدە جەدۋەل كاتەكچىسى چوقۇم a ئىچىدە ئىشلىتىلىشى كېرەك <thead> |
<caption> |
جەدۋەل ساقلىغانلارنىڭ چۈشەندۈرۈشى ياكى خۇلاسىسى ، بولۇپمۇ ئېكران ئوقۇرمەنلىرى ئۈچۈن پايدىلىق |
- <table>
- <thead>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
ئىسمى | سىنىپ | چۈشەندۈرۈش |
---|---|---|
سۈكۈتتىكى | ياق | ئۇسلۇب يوق ، پەقەت ستون ۋە قۇر |
Basic | .table |
پەقەت قۇر ئارىلىقىدىكى سىزىقلار |
چېگرا | .table-bordered |
بۇلۇڭ-پۇچقاقلارنى ئايلىنىپ ، چېگرانى قوشىدۇ |
Zebra-stripe | .table-striped |
غەلىتە قۇرلارغا سۇس كۈلرەڭ تەگلىك رەڭ قوشىدۇ (1 ، 3 ، 5 قاتارلىقلار) |
قويۇق | .table-condensed |
td بارلىق ۋە th ئېلېمېنتلارنىڭ ئىچىدە 8px دىن 4px غىچە بولغان تىك تاختاينى يېرىم قىلىپ كېسىدۇ |
جەدۋەلنىڭ ئوقۇشقا كاپالەتلىك قىلىش ۋە قۇرۇلمىنى ساقلاشقا كاپالەتلىك قىلىش ئۈچۈن جەدۋەل پەقەت بىر قانچە چېگرا بىلەن ئاپتوماتىك ئۇسلۇبتا ياسالغان. 2.0 بىلەن .table
دەرس تەلەپ قىلىنىدۇ.
- <table class = "table" >
- …
- </table>
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | ياقۇپ | Thornton | Javascript |
3 | Stu | Dent | HTML |
جەدۋەللىرىڭىزنى قوشۇش ئارقىلىق ئۈستەللىرىڭىز بىلەن ئازراق ھۇزۇرلىنىڭ - .table-striped
دەرسنى قوشۇڭ.
ئەسكەرتىش: چېچىلىپ كەتكەن جەدۋەللەردە :nth-child
CSS تاللىغۇچ ئىشلىتىلىدۇ ، IE7-IE8 دا ئىشلەتكىلى بولمايدۇ.
- <table class = "table table-striped" >
- …
- </table>
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | ياقۇپ | Thornton | Javascript |
3 | Stu | Dent | HTML |
ئېستېتىك مەقسەت ئۈچۈن پۈتۈن ئۈستەل ۋە يۇمىلاق بۇلۇڭلارغا چېگرا قوشۇڭ.
- <table class = "جەدۋەل جەدۋەل بىلەن چېگرىلىنىدۇ" >
- …
- </table>
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
1 | Mark Otto | CSS | |
2 | ياقۇپ | Thornton | Javascript |
3 | Stu | Dent | |
3 | Brosef | Stalin | HTML |
جەدۋەلنى قوشۇش ئارقىلىق جەدۋەلنى تېخىمۇ ئىخچام قىلىڭ .table-condensed
(8px دىن 4px غىچە).
- <table class = "جەدۋەل جەدۋىلى قويۇق" >
- …
- </table>
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | ياقۇپ | Thornton | Javascript |
3 | Stu | Dent | HTML |
جەدۋەل دەرسلىرىنىڭ خالىغان بىرىنى بىرلەشتۈرۈپ ، بار بولغان دەرسلەردىن پايدىلىنىپ ئوخشىمىغان كۆرۈنۈشكە ئېرىشىڭ.
- <جەدۋەل سىنىپى = "جەدۋەل ئۈستەل سىزىقلىق جەدۋەل بىلەن ئۈستەل ئۈستەل قويۇق" >
- ...
- </table>
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
1 | Mark | Otto | CSS |
2 | ياقۇپ | Thornton | Javascript |
3 | Stu | Dent | HTML |
4 | Brosef | Stalin | HTML |
Bootstrap دىكى جەدۋەللەرنىڭ ئەڭ ياخشى يېرى شۇكى ، بارلىق كىرگۈزۈش ۋە كونتروللىرىڭىز ماركىڭىزدا قانداق قۇرسىڭىزمۇ ناھايىتى ياخشى كۆرۈنىدۇ. ئارتۇقچە HTML تەلەپ قىلىنمايدۇ ، ئەمما بىز ئۇنى تەلەپ قىلغۇچىلار ئۈچۈن ئەندىزە بىلەن تەمىنلەيمىز.
تېخىمۇ مۇرەككەپ ئورۇنلاشتۇرۇشلار ئاسان ئۇسلۇب ۋە پائالىيەت باغلاش ئۈچۈن ئاددىي ۋە كېڭەيتىشچان دەرسلەر بىلەن كەلگەن ، شۇڭا سىز ھەر بىر باسقۇچتا قاپلىنىسىز.
Bootstrap تۆت خىل شەكىل ئورۇنلاشتۇرۇشنى قوللايدۇ:
ئوخشىمىغان تىپتىكى شەكىل ئورۇنلاشتۇرۇشى بەلگە سېلىش ئۈچۈن بەزى ئۆزگەرتىشلەرنى تەلەپ قىلىدۇ ، ئەمما كونتروللارنىڭ ئۆزى ساقلىنىپ ، ئوخشاش ھەرىكەت قىلىدۇ.
Bootstrap نىڭ شەكىللىرى كىرگۈزۈش ، تېكىست ۋە سىز ئويلىغاندەك بارلىق ئاساسىي شەكىل كونتروللىرىنىڭ ئۇسلۇبىنى ئۆز ئىچىگە ئالىدۇ. ئەمما ئۇ يەنە قوشۇمچە ۋە ئالدىن كىرگۈزۈلگەن كىرگۈزۈش ۋە تەكشۈرۈش ساندۇقىنىڭ تىزىملىكىنى قوللاش قاتارلىق بىر قاتار ئىختىيارى زاپچاسلار بىلەن تەمىنلەيدۇ.
خاتالىق ، ئاگاھلاندۇرۇش ۋە مۇۋەپپەقىيەتكە ئوخشاش دۆلەتلەر ھەر خىل شەكىل كونتروللىرىنى ئۆز ئىچىگە ئالىدۇ. چەكلەنگەن كونتروللارنىڭ ئۇسلۇبلىرىمۇ بار.
Bootstrap تۆت خىل ئورتاق تور شەكلى ئۈچۈن ئاددىي بەلگە ۋە ئۇسلۇب بىلەن تەمىنلەيدۇ.
ئىسمى | سىنىپ | چۈشەندۈرۈش |
---|---|---|
تىك (سۈكۈتتىكى) | .form-vertical (تەلەپ قىلىنمايدۇ) |
كونترول قىلىنغان ، سولغا بەلگە قويۇلغان |
Inline | .form-inline |
ئىخچام ئۇسلۇب ئۈچۈن سولغا توغرىلانغان بەلگە ۋە سىزىقلىق كونترول كونتروللىرى |
ئىزدەش | .form-search |
تىپىك ئىزدەش ئېستېتىكىسى ئۈچۈن قوشۇمچە يۇمىلاق تېكىست كىرگۈزۈش |
توغرىسىغا | .form-horizontal |
لەيلىمە سول ، ئوڭغا توغرىلانغان بەلگە كونترول بىلەن ئوخشاش |
V2.0 ئارقىلىق بىزدە شەكىل ئۇسلۇبى ئۈچۈن تېخىمۇ يېنىك ۋە تېخىمۇ ئەقىللىق سۈكۈت بار. ئارتۇقچە بەلگە يوق ، پەقەت كونترول كونترولنى شەكىللەندۈرۈڭ.
سۈكۈتتىكى WebKit ئۇسلۇبىنى ئەكس ئەتتۈرۈڭ ، .form-search
قوشۇمچە يۇمىلاق ئىزدەش ساھەلىرىگە قوشۇڭ.
كىرگۈزۈش باشلىنىش باسقۇچى. ئۈچۈن .form-inline
، .form-horizontal
بىز inline-block نى ئىشلىتىمىز.
سول تەرەپتە كۆرسىتىلگەنلەرنىڭ ھەممىسى بىز قوللايدىغان سۈكۈتتىكى جەدۋەل كونتروللىرى. ئوققا تۇتۇلغان تىزىملىك:
V1.4 گىچە ، Bootstrap نىڭ سۈكۈتتىكى شەكىل ئۇسلۇبى گورىزونتال ئورۇنلاشتۇرۇشنى قوللانغان. Bootstrap 2 ئارقىلىق بىز بۇ چەكلىمىلەرنى چىقىرىپ تاشلاپ ، ھەر قانداق شەكىلدە تېخىمۇ ئەقىللىق ، تېخىمۇ كېڭەيتىشچان سۈكۈتتىكى ھالەتكە ئىگە بولدۇق.
Bootstrap توركۆرگۈ قوللايدىغان فوكۇس ۋە disabled
ھالەتلەرنىڭ ئۇسلۇبىنى قوللايدۇ. سۈكۈتتىكى Webkit نى ئۆچۈرۈۋېتىمىز outline
ۋە box-shadow
ئۇنىڭ ئورنىغا ئىشلىتىمىز :focus
.
ئۇ خاتالىق ، ئاگاھلاندۇرۇش ۋە مۇۋەپپەقىيەتنىڭ دەلىللەش ئۇسلۇبىنىمۇ ئۆز ئىچىگە ئالىدۇ. ئىشلىتىش ئۈچۈن ، ئەتراپىغا خاتالىق سىنىپى قوشۇڭ .control-group
.
- <fieldset
- class = "control-group error" >
- …
- </fieldset>
كىرگۈزۈش گۇرۇپپىلىرى - قوشۇمچە ياكى ئالدىن تەييارلانغان تېكىستلەر ئارقىلىق ، كىرگۈزۈشلىرىڭىزگە تېخىمۇ كۆپ مەزمۇن بېرىشنىڭ ئاسان ئۇسۇلى بىلەن تەمىنلەيدۇ. Twitter مىساللىرى ئۈچۈن @ بەلگىسى ياكى مالىيە ئۈچۈن $ بەلگىسى بار.
V1.4 غىچە ، Bootstrap تەكشۈرۈش ساندۇقى ۋە رادىئو ئەتراپىدا قوشۇمچە بەلگە تەلەپ قىلىدۇ. <label class="checkbox">
ھازىر ، ئۇنى ئوراپ تۇرغاننى تەكرارلاش ئاددىي بىر ئىش <input type="checkbox">
.
ئىچكى تەكشۈرۈش رامكىسى ۋە رادىئومۇ قوللايدۇ. .inline
ھەر قانداق بىرسىگە قوشۇڭ .checkbox
، .radio
ئىش تامام.
ئالدىن كىرگۈزۈش ياكى كىرگۈزۈش كىرگۈزۈش شەكلىنى ئىشلىتىش ئۈچۈن ، بوشلۇق .add-on
ۋە input
ئوخشاش قۇرنى جەزملەشتۈرۈڭ.
جەدۋەل كىرگۈزۈشىڭىزگە ياردەم تېكىستى قوشۇش ئۈچۈن ، كىرگۈزۈش ئېلمىنتىدىن كېيىن <span class="help-inline">
ياردەم تېكىستنى ياكى ياردەم تېكىست توپىنى ئۆز ئىچىگە ئالىدۇ.<p class="help-block">
:after
. ھۆججەتلەردە ، سىنبەلگىنىڭ چوڭ-كىچىكلىكىنى يورۇتۇش ئۈچۈن ، ئۈستى ئوچۇق سۇس قىزىل تەگلىك رەڭنى كۆرسىتىمىز.
ھەر بىر سىنبەلگىنى قوشۇمچە تەلەپ قىلىشنىڭ ئورنىغا ، بىز ئۇنى بىر پارچە ھۆججەتكە توپلىدۇق - CSS ئارقىلىق رەسىملەرنى ئورۇنلاشتۇرىدىغان بىر ھۆججەتتىكى بىر تۈركۈم رەسىملەر background-position
. بۇ بىز Twitter.com دا قوللانغان ئۇسۇل ، ئۇ بىز ئۈچۈن ياخشى ئۈنۈم بەردى.
بارلىق سىنبەلگىلەر دەرسلىرى .icon-
بىزنىڭ باشقا زاپچاسلىرىمىزغا ئوخشاش مۇۋاپىق ئىسىم قويۇش ۋە تەكشۈرۈش ئۈچۈن ئالدىن ئورۇنلاشتۇرۇلغان. بۇ باشقا قوراللار بىلەن توقۇنۇشتىن ساقلىنىشقا ياردەم بېرىدۇ.
Glyphicons بىزگە ئوچۇق كودلۇق قوراللار ئامبىرىغا ئورنىتىلغان Halflings نى ئىشلىتىشكە ئىجازەت بەردى ، بىز بۇ يەردە ھۆججەت ۋە ئۇلىنىشلارنى تەمىنلەيمىز. تۈرلىرىڭىزدىمۇ شۇنداق قىلىشنى ئويلىشىڭ.
<i>
V2.0.0 ئارقىلىق بىز بارلىق سىنبەلگىلەرگە بەلگە ئىشلىتىشنى تاللىدۇق ، ئەمما ئۇلارنىڭ ھېچقانداق ئەھۋال سىنىپى يوق - پەقەت ئورتاق ئىشلىتىلىدىغان ئالدى قوشۇلغۇچى. ئىشلىتىش ئۈچۈن تۆۋەندىكى كودنى خالىغان يەرگە قويۇڭ:
- <i class = "icon-search" > </i>
تەتۈر (ئاق) سىنبەلگىلەرنىڭ ئۇسلۇبلىرىمۇ بار ، بىر قوشۇمچە سىنىپ بىلەن تەييارلانغان:
- <i class = "icon-search icon-white" > </i>
سىنبەلگىڭىزدىن تاللايدىغان 120 سىنىپ بار. <i>
مۇۋاپىق دەرسلەر بىلەن بەلگە قوشسىڭىزلا تەڭشەلدىڭىز. تولۇق تىزىملىكنى sprites.less ياكى بۇ يەردىن تاپالايسىز.
سىنبەلگىلەر ناھايىتى ياخشى ، ئەمما ئۇلارنى قەيەردە ئىشلىتىدۇ؟ بۇ يەردە بىر قانچە پىكىر بار:
ماھىيەتتە ، خالىغان يەرگە <i>
بەلگە قويسىڭىز ، سىنبەلگە قويسىڭىز بولىدۇ.
قورالبالدىقى ، يول باشلاش ياكى ئالدىن تەييارلانغان جەدۋەل كىرگۈزۈش ئۈچۈن كۇنۇپكا ، كۇنۇپكا گۇرۇپپىسىدا ئىشلىتىڭ.