يۇقىرىدا

left

توغرا

تۆۋەندە

Bootstrap, Twitter دىن

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

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

Hotlink the CSS

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

ئۇنى ئاز ئىشلىتىڭ

ئاز ئىشلىتىش ھەۋەسكارى؟ چاتاق يوق ، پەقەت repo نى كلونلاپ بۇ قۇرلارنى قوشۇڭ:

GitHub دىكى Fork

Github دىكى رەسمىي Bootstrap repo ئارقىلىق چۈشۈرۈش ، چاتاش ، تارتىش ، ھۆججەت مەسىلىسى ۋە باشقىلار.

GitHub دىكى Bootstrap »

نۆۋەتتە v1.3.0

تارىخ

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

Dev.twitter.com دا تېخىمۇ كۆپ ئوقۇڭ

توركۆرگۈنى قوللاش

Bootstrap Chrome ، Safari ، Internet Explorer ۋە Firefox قاتارلىق ئاساسلىق زامانىۋى توركۆرگۈچلەردە سىناق قىلىنغان ۋە قوللانغان.

Chrome ، Safari ، Internet Explorer ۋە Firefox دا سىناق قىلىنغان ۋە قوللانغان

ئەڭ يېڭى سافارى
ئەڭ يېڭى Google Chrome
Firefox 4+
Internet Explorer 7+
Opera 11

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

Bootstrap تۈزۈلگەن CSS ، تولۇقلانمىغان ۋە ئۈلگە قېلىپلىرى بىلەن تولۇق.

1.3 Javascript قىستۇرمىسىدا يېڭى
بارلىق ئەسلى .سىز ھۆججەتلەر
CSS نى تولۇق تۈزدى ۋە كىچىكلەتتى
مۇكەممەل ئۇسلۇبتىكى ھۆججەتلەر
ئوخشىمىغان ئورۇنلاشتۇرۇلۇشى بار ئۈچ مىسال بەت

تېز باشلاش مىساللىرى

بەزى تېز قېلىپلارغا ئېھتىياجلىقمۇ؟ بىز بىرلىكتە قۇرغان بۇ ئاساسلىق مىساللارنى كۆرۈپ بېقىڭ:

كۆڭۈلدىكى تور

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

كاتەكچە بەلگە

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

<div class = "row" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

1/3

2/3

تۈۋرۈكلەرنى ئۆچۈرۈش

8 offset 4

1/3 offset 2 / 3s

4 offset 4

5 offset 3

10 offset 6

ئۇۋا تۈۋرۈكى

.rowئەگەر بار بولغان ئىستون ئىچىدە قۇرۇش ئارقىلىق مەزمۇنلىرىڭىزنى ئۇۋا قىلىڭ .

ئۇۋىغان ئىستونلارنىڭ مىسالى

1-دەرىجە

2-دەرىجە

<div class = "row" > 
  <div class = "span12" > 
    1-دەرىجە
    <div class = "row" > 
      <div class = "span6" > 
        2-دەرىجە
      </div>
      <div class = "span6" > 
        2-دەرىجە
      </div>
    </div>
  </div>
</div>

ئۆزىڭىزنىڭ تورىنى دومىلىتىڭ

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

تورنىڭ ئىچىدە

تور سىستېمىسىنى ئۆزگەرتىشكە ئېھتىياجلىق ئۆزگەرگۈچى مىقدارلار ھازىر بار preboot.less.

ئۆزگىرىشچان	كۆڭۈلدىكى قىممىتى	چۈشەندۈرۈش
`@gridColumns`	16	تور ئىچىدىكى ئىستون سانى
`@gridColumnWidth`	40px	تور ئىچىدىكى ھەر بىر ئىستوننىڭ كەڭلىكى
`@gridGutterWidth`	20px	ھەر بىر ئىستون ئارىسىدىكى پاسسىپ بوشلۇق
`@siteWidth`	بارلىق ئىستون ۋە ئۆستەڭلەرنىڭ يىغىندىسى	بىز بىر قىسىم ئاساسىي ماس ھالقىلارنى ئىشلىتىپ تۈۋرۈك ۋە ئۆستەڭ سانىنى ساناپ ، ئارىلاشما كەڭلىكنى بەلگىلەيمىز `.fixed-container()`.

ھازىر خاسلاشتۇرۇش

كاتەكچىنى ئۆزگەرتىش ئۈچ @grid-*ئۆزگەرگۈچى مىقدارنى ئۆزگەرتىش ۋە ئاز ھۆججەتلەرنى قايتا ھاسىل قىلىشنى كۆرسىتىدۇ.

Bootstrap غا 24 ئىستونغىچە بولغان تور سىستېمىسى بىر تەرەپ قىلىنىدۇ. سۈكۈتتىكىسى ئاران 16.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

قايتا تۈزۈلگەندىن كېيىن ، تەڭشەلدىڭىز!

مۇقىم ئورۇنلاشتۇرۇش

سۈكۈتتىكى ۋە ئاددىي 940px كەڭلىكتە ، پەقەت بىرلا تور بېكەت ياكى بەت تەمىنلىگەن مەركەزلىك ئورۇنلاشتۇرۇش <div.container>.

<body>
  <div class = "قاچا" > 
    ...
  </div>
</body>

سۇيۇقلۇق ئورۇنلاشتۇرۇش

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

<body>
  <div class = "قاچا-سۇيۇقلۇق" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "مەزمۇن" > 
      ...
    </div>
  </div>
</body>

ماۋزۇ ۋە كۆپەيتىلگەن

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

پۈتكۈل مەتبەئە تورى بىزنىڭ preboot.less ھۆججىتىمىزدىكى ئىككى ئاز ئۆزگەرگۈچى مىقدارنى ئاساس قىلىدۇ: @basefontۋە @baseline. بىرىنچىسى ، ئىشلىتىلگەن ئاساسىي خەت چوڭلۇقى ، ئىككىنچىسى ئاساسى سىزىق ئېگىزلىكى.

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

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

مىسال ئابزاس

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.

مىسال ماۋزۇسىنىڭ تارماق ماۋزۇسى بار…

Misc. ئېلېمېنتلار

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

<strong> <em> <address> <abbr>

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

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

بىر ئابزاسقا ئەھمىيەت بېرىش

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.

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

ئادرېس

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

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

تولۇق ئىسمى
[email protected]

ئەسكەرتىش: مەزمۇندىكى ھەر بىر قۇر <address>چوقۇم سىزىقنى بۇزۇش ( <br />) بىلەن ئاخىرلىشىشى ياكى بۆلەك دەرىجىلىك بەلگە (مەسىلەن ، <p>) بىلەن ئورالغان مەزمۇننى مۇۋاپىق تۈزۈشى كېرەك.

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

قىسقارتىلمىسى ۋە قىسقارتىلمىسى ئۈچۈن خەتكۈچنى ئىشلىتىڭ ( <abbr>HTML5 دە ۋاقتى ئۆتكەن ). خەتكۈچ جەدۋىلىنى خەتكۈچنىڭ ئىچىگە قويۇپ ، تولۇق ئىسىمنىڭ نامىنى بەلگىلەڭ.<acronym>

Blockquotes

<blockquote> <p> <small>

نەقىل كەلتۈرۈش

بىر بۆلەكنى ئۆز ئىچىگە ئېلىش ئۈچۈن ، ئوراپ ۋە خەتكۈچلەرنى <blockquote>ئوراپ قويۇڭ. ئېلېمېنتنى مەنبەڭىزنى نەقىل كەلتۈرۈش ئۈچۈن ئىشلىتىڭ ، ئۇنىڭدىن بۇرۇن em dash غا ئېرىشىسىز .<p><small><small>—

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

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

تىزىملىك

تەرتىپسىز`<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.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>`

Lorem ipsum dolor amet
Consectetur adipiscing elit
ماسسادىكى پۈتۈن گەۋدە لورېمى
پرەزيدەنت isسوزدەرى
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
پورتېرنىڭ لورېمىنى ئېلىڭ

چۈشەندۈرۈش`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.

كود

<code> <pre>

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

كودنى كۆرسىتىش

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

ئېلېمېنت نەتىجىدە

<code> مۇشۇنىڭغا ئوخشاش بىر قۇر تېكىستتە ، ئورالغان كودىڭىز بۇ >html<ئېلېمېنتقا ئوخشايدۇ.

ئېلېمېنت	نەتىجىدە
`<code>`	مۇشۇنىڭغا ئوخشاش بىر قۇر تېكىستتە ، ئورالغان كودىڭىز بۇ `>html<`ئېلېمېنتقا ئوخشايدۇ.
`<pre>`	<div> <h1> ماۋزۇ </ h1> <p> بۇ يەردە بىر نەرسە ... </p> </div> ئەسكەرتىش: بەلگە ئىچىدىكى كودلارنى `pre`ئىمكانقەدەر سولغا يېقىنلاشتۇرۇڭ. ئۇ بارلىق بەتكۈچلەرنى بېرىدۇ.
`<pre class="prettyprint">`	Google-code-prettify كۈتۈپخانىسىنى ئىشلىتىپ ، كود بۆلەكلىرى سەل ئوخشىمايدىغان كۆرۈنۈش ئۇسلۇبى ۋە ئاپتوماتىك گرامماتىكىلىق يورۇتۇشقا ئېرىشىسىز. <div> <h1> ماۋزۇ </ h1> <p> بۇ يەردە بىر نەرسە ... </p> </div> Google-code-prettify نى چۈشۈرۈپ ، ئىشلىتىش ئۇسۇلىنى ئوقۇڭ.

<pre>

<div>
  <h1> ماۋزۇ </ h1>
  <p> بۇ يەردە بىر نەرسە ... </p>
</div>

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

<pre class="prettyprint">

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

<div> <h1> ماۋزۇ </ h1> <p> بۇ يەردە بىر نەرسە ... </p> </div>

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

بەلگە بەلگىسى

<span class="label">

بەدىنىڭىزدىكى ھەر قانداق جۈملىلەرگە دىققەت قىلىڭ ياكى بايراق قىلىڭ.

ھەر قانداق نەرسىگە بەلگە قويۇڭ

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

بەلگە	نەتىجىدە
`<span class="label">Default</span>`	سۈكۈتتىكى
`<span class="label success">New</span>`	يېڭى
`<span class="label warning">Warning</span>`	ئاگاھلاندۇرۇش
`<span class="label important">Important</span>`	مۇھىم
`<span class="label notice">Notice</span>`	دىققەت

Media grid

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

كىچىك كۆرۈنۈش

كىچىك كۆرۈنۈشتىكى كىچىك كۆرۈنۈشلەر .media-gridھەر قانداق چوڭلۇقتا بولىدۇ ، ئەمما ئۇلار بىۋاسىتە قاچىلانغان Bootstrap تور سىستېمىسىغا بىۋاسىتە سىزىلغان ۋاقىتتا ئەڭ ياخشى ئىشلەيدۇ. رەسىمنىڭ كەڭلىكى 90 ، 210 ۋە 330 غا ئوخشاش بىر قانچە پېكسىل تاختا بىلەن بىرلەشتۈرۈلۈپ .span2، .span4ۋە .span6ستون چوڭلۇقىغا تەڭ كېلىدۇ.

چوڭ

ئوتتۇراھال

كىچىك

ئۇلارنى كودلاش

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

<ul class = "media-grid" > 
  <li>
    <a href = "#"> _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#"> _ 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

جەدۋەل قۇرۇش

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

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

ئىستون بېشىنى ھەمىشە قاتلاملىق <thead>>> دەپ <thead>ئوراپ قويۇڭ .<tr><th>

ستون ماۋزۇسىغا ئوخشاش ، ئۈستەل يۈزىڭىزنىڭ بارلىق مەزمۇنلىرى ئورالغان بولۇشى كېرەك ، <tbody>شۇڭا قاتلاملىرىڭىز <tbody>>> .<tr><td>

مىسال: كۆڭۈلدىكى جەدۋەل ئۇسلۇبى

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

#	بىرىنچى ئىسمى	فامىلىسى	تىل
1	بەزىلىرى	بىرى	ئىنگىلىزچە
2	جو	Sixpack	ئىنگىلىزچە
3	Stu	Dent	كود

<table>
  ...
</table>

مىسال: زەبرا سىزىقلىق

جەدۋەللىرىڭىزگە ئازراق زىننەت بۇيۇمى قوشۇڭ ، .zebra-stripedدەرسنى قوشۇڭ.

#	بىرىنچى ئىسمى	فامىلىسى	تىل
1	بەزىلىرى	بىرى	ئىنگىلىزچە
2	جو	Sixpack	ئىنگىلىزچە
3	Stu	Dent	كود

ئەسكەرتىش: Zebra-striping بولسا IE8 ۋە ئۇنىڭدىن تۆۋەن كونا توركۆرگۈچلەردە ئىشلەتكىلى بولمايدىغان ئىلغار ئىلگىرىلەش.

<table class = "zebra-striped" > 
...
</table>

مىسال: Zebra- سىزىقلىق w / TableSorter.js

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

#	بىرىنچى ئىسمى	فامىلىسى	تىل
2	جو	Sixpack	ئىنگىلىزچە
3	Stu	Dent	كود
1	سىزنىڭ	بىرى	ئىنگىلىزچە

<script src = "js / jquery / jquery.tablesorter.min.js" > </script> 
<script > 
  $ ( function () { 
    $ ( "جەدۋەل # sortTableExample" ). جەدۋەل ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-striped" > 
  ...
</table>

مۇقىم بالداق

ئۇ نېمە؟

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

خاسلاشتۇرغىلى بولىدۇ

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

تامچە ئۆز ئىچىگە ئالىدۇ

ئاساسلىق يول باشلاشنىڭ بىر قىسمى بولۇش سۈپىتىڭىز بىلەن ، بىز سىزنىڭ دېڭىزغا چۈشۈش ئىقتىدارىڭىزنى قوشتۇق. ئۇنىڭ قانداق ئىشلىنىدىغانلىقىنى يۇقىرىدىكى ئىككىنچى دەرىجىلىك nav نى (ئوڭغا توغرىلاپ) تەكشۈرۈپ بېقىڭ. تامچە خەتكۈچلەرمۇ نۆۋەتتىكى بەت تاللاشنى كۆرسىتىشنى liقوللايدۇ ..active

ئەسكەرتىش: ھەر قانداق بەتتىكى ئۈستى بالداقنى ئىشلەتكەندە ، ئۇنى قوشۇش ئارقىلىق كەلتۈرۈپ چىقىرىدىغان قاپلىنىشنى padding-top: 40px;ھېسابلاڭ body.

بەتكۈچ ۋە دورىلار

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

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

<ul class = "بەتكۈچ" > 
  <li class = "active" > <a href = "#"> باشبەت </a> </li >  
  <li> <a href = "#"> ئارخىپ </a> </li> 
  <li> <a href = "#"> ئۇچۇرلار </a> </li> 
  <li> <a href = "#"> تەڭشەكلەر </a> </li > 
  <li> <a href = "#"> ئالاقىلىشىش </a> </li> 
</ul>

<ul class = "دورىلار" > 
  <li class = "active" > <a href = "#"> باشبەت </a> </li >  
  <li> <a href = "#"> ئارخىپ </a> </li> 
  <li> <a href = "#"> ئۇچۇرلار </a> </li> 
  <li> <a href = "#"> تەڭشەكلەر </a> </li > 
  <li> <a href = "#"> ئالاقىلىشىش </a> </li> 
</ul>

نان

Breadcrumb يولباشچىسى ئىشلەتكۈچىلەرنىڭ بىر دېتال ياكى تور بېكەتنىڭ قەيەردىلىكىنى كۆرسىتىشنىڭ ئۇسۇلى سۈپىتىدە ئىشلىتىلىدۇ ، ئەمما دەسلەپكى يول باشلاش ئۈچۈن ئەمەس.

<ul class = "breadcrumb" > 
  <li> <a href = "#"> باش بەت </a> <span class = "divider" > / </span> </li>   
  <li> <a href = "#"> ئوتتۇرا بەت </a> <span class = "divider" > / </span> </li>   
  <li> <a href = "#"> يەنە بىرى </a> <span class = "divider" > / </span> </li>   
  <li class = "active" > سىز بۇ يەردە </li> 
</ul>

Pagination

ئۇلترا ئاددىي ۋە ئەڭ ئاددىي ئۇسلۇبتىكى Rdio دىن ئىلھام ئالغان. چوڭ بۆلەكنى قولدىن بېرىپ قويۇش تەس ، ئاسان كېڭەيتىشكە بولىدۇ ھەمدە چوڭ چېكىش رايو��ى بىلەن تەمىنلەيدۇ.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" > <a href = "#"> & larr ; ئالدىنقى </a> </li>  
    <li class = "active" > <a href = "#"> 1 </a> </li >  
    <li> <a href = "#"> 2 </a> </li> 
    <li> <a href = "#"> 3 </a> </li> 
    <li> <a href = "#"> 4 </a> </li> 
    <li> <a href = "#"> 5 </a> </li> 
    <li class = "next" > <a href = "#"> كېيىنكى & rarr; </a> </li>  
  </ul>
</div>

ئاساسىي ئاگاھلاندۇرۇش

.alert-message

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

Javascript نى ئېلىڭ »

Holy guacamole! ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز.

ئاھ! بۇنى ۋە بۇنى ئۆزگەرتىپ قايتا سىناڭ.

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

Heads up! بۇ سىزنىڭ دىققىتىڭىزگە موھتاج ئاگاھلاندۇرۇش ، ئەمما ئۇ تېخى چوڭ ئىش ئەمەس.

مىسال كودى

<div class = "ئاگاھلاندۇرۇش-ئاگاھلاندۇرۇش" > 
  <a class = "close" href = "#"> × </a> _  
  <p> <strong> مۇقەددەس گاكامول! </ strong> ئەڭ ياخشى تەكشۈرۈڭ ، سىز بەك ياخشى كۆرۈنمەيسىز. </p>
</div>

ئۇچۇرلارنى توسۇش

.alert-message.block-message

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

Javascript نى ئېلىڭ »

Holy guacamole! بۇ بىر ئاگاھلاندۇرۇش! ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

بۇ ھەرىكەتنى قىلىڭ ياكى بۇنى قىلىڭ

ئاھ! خاتالىق تاپتىڭىز! بۇنى ۋە بۇنى ئۆزگەرتىپ قايتا سىناڭ.

Duis mollis est non commodo luctus
Nisi erat porttitor ligula
Ec lacinia odio sem nec elit

بۇ ھەرىكەتنى قىلىڭ ياكى بۇنى قىلىڭ

ياخشى! سىز بۇ ئاگاھلاندۇرۇش ئۇچۇرىنى مۇۋەپپەقىيەتلىك ئوقۇدىڭىز. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur مەسخىرە مۇس. Maecenas faucibus mollis interdum.

بۇ ھەرىكەتنى قىلىڭ ياكى بۇنى قىلىڭ

Heads up! بۇ سىزنىڭ دىققىتىڭىزگە موھتاج ئاگاھلاندۇرۇش ، ئەمما ئۇ تېخى چوڭ ئىش ئەمەس.

بۇ ھەرىكەتنى قىلىڭ ياكى بۇنى قىلىڭ

مىسال كودى

<div class = "ئاگاھلاندۇرۇش-ئۇچۇر توسۇش-ئۇچۇر ئاگاھلاندۇرۇشى" > 
  <a class = "close" href = "#"> × </a> _  
  <p> <strong> مۇقەددەس گاكامول! بۇ بىر ئاگاھلاندۇرۇش! </ strong> ئەڭ ياخشى تەكشۈرۈڭ ، سىز بەك ياخشى كۆرۈنمەيسىز. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "ئاگاھلاندۇرۇش-ھەرىكەت" > 
    <a class = "btn small" href = "#"> بۇ ھەرىكەتنى قىلىڭ </a> <a class = "btn small" href = "#"> ياكى بۇنى قىلىڭ </a>     
  </div>
</div>

Modals

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

Javascript نى ئېلىڭ »

قورال قوراللىرى

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

Javascript نى ئېلىڭ »

Lorem ipsum dolar sit amet illo خاتالىق ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus ئاقىۋەت ئاقىۋىتى ، ئاپتوماتىك تەبىئىي ئىلو ۋولۇپتام odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam Architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo volu.

Popovers

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

Javascript نى ئېلىڭ »

باشلاش

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

Javascript ھۆججىتىنى كۆرۈش »

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

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

ھۆججەت	چۈشەندۈرۈش
bootstrap-modal.js	بىزنىڭ Modal قىستۇرمىسىمىز ئەنئەنىۋى مودېل js قىستۇرمىسىدىكى دەرىجىدىن تاشقىرى نېپىز! بىز پەقەت twitter دا تەلەپ قىلىدىغان يالىڭاچ ئىقتىدارلارنىلا ئۆز ئىچىگە ئېلىشقا ئالاھىدە كۆڭۈل بۆلدۇق.
bootstrap-alerts.js	ئاگاھلاندۇرۇش قىستۇرمىسى ئاگاھلاندۇرۇشلارغا يېقىن ئىقتىدار قوشۇش ئۈچۈن دەرىجىدىن تاشقىرى كىچىك دەرس.
bootstrap-dropdown.js	بۇ قىستۇرما bootstrap ئۈستى بالداق ياكى بەتكۈچ يولباشچىغا چۈشۈش ئۆز-ئارا تەسىر كۆرسىتىش ئۈچۈن.
bootstrap-scrollspy.js	ScrollSpy قىستۇرمىسى bootstrap ئۈستى بالداققا سىيرىلما ئورۇنغا ئاساسەن ئاپتوماتىك يېڭىلاش nav نى قوشۇش ئۈچۈندۇر.
bootstrap-tabs.js	بۇ قىستۇرما يەرلىك مەزمۇنلار ئارقىلىق ۋېلىسىپىت مىنىش ئۈچۈن تېز ، ھەرىكەتچان بەتكۈچ ۋە دورا ئىقتىدارىنى قوشىدۇ.
bootstrap-twipsy.js	Jason Frame يازغان ئېسىل jQuery.tipsy قىستۇرمىسىغا ئاساسەن; twipsy يېڭىلانغان نەشرى بولۇپ ، ئۇ رەسىمگە تايانمايدۇ ، كارتون ئۈچۈن css3 ئىشلىتىدۇ ، يەرلىك ماۋزۇ ساقلاشقا سانلىق مەلۇمات خاسلىقى!
bootstrap-popover.js	قاڭقىش قىستۇرمىسى قوللىنىشچان پروگراممىڭىزغا قىستۇرما دېتال قوشۇش ئۈچۈن ئاددىي كۆرۈنمە يۈزى بىلەن تەمىنلەيدۇ. ئۇ boostrap-twipsy.js قىستۇرمىسىنى كېڭەيتىدۇ ، شۇڭا تۈرىڭىزگە پوپايكىلارنى قوشقاندا بۇ ھۆججەتنىمۇ تۇتۇڭ.

Javascript لازىممۇ؟

ياق! Bootstrap ئالدى بىلەن CSS كۈتۈپخانىسى قىلىپ لايىھەلەنگەن. بۇ javascript ئۆز ئىچىگە ئالغان ئۇسلۇبلارنىڭ ئۈستىگە ئاساسىي ئۆز-ئارا تەسىر كۆرسىتىش قەۋىتى بىلەن تەمىنلەيدۇ.

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

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

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

Bootstrap دا Preboot نى قانداق ئىشلەتكەنلىكىمىزنى ۋە كېيىنكى تۈردە ئازراق ئىجرا قىلىشنى تاللىسىڭىز ، ئۇنىڭدىن قانداق پايدىلىنىدىغانلىقىڭىزنى تەكشۈرۈپ بېقىڭ.

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

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

<link rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" />    
<script src = "js / less-1.1.3.min.js" > </script>

.Js ھەل قىلىش چارىسىنى ھېس قىلمامسىز؟ كودىڭىزنى ئورۇنلاشتۇرغاندا ئازراق Mac دېتالىنى ئىشلىتىپ بېقىڭ ياكى Node.js نى ئىشلىتىڭ .

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

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

ئۆزگەرگۈچى مىقدار

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

// ئۇلىنىش
@linkColor : # 8b59c2;         
@linkColorHover :     قاراڭغۇ ( @linkColor , 10 ); 
 
// كۈلرەڭ
@black : # 000;             
@grayDark :           يەڭگىل ( @black , 25 %); 
@gray :               يەڭگىل ( @black , 50 %); 
@grayLight :          يەڭگىل ( @black , 70 %); 
@grayLighter :        يەڭگىل ( @black , 90 %); 
@ ئاق : #fff;             
 
// Accent Colors
@blue : # 08b5fb;              
@ يېشىل : # 46a546 ;             
@red : # 9d261d;               
@yellow : # ffc40d;            
@orange : # f89406;            
@pink : # c3325f;              
@purple : # 7a43b6;            
 
// ئاساسىي تور
@basefont : 13px ;          
@baseline : 18px ;

باھا بېرىش

ئاز بولسا CSS نىڭ نورمال گرامماتىكىسىدىن باشقا يەنە بىر خىل باھا بېرىش ئۇسلۇبى بىلەن تەمىنلەيدۇ /* ... */.

// بۇ بىر باھا
/ * بۇمۇ بىر باھا * /

Wazoo نى ئارىلاشتۇرۇڭ

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

خەت نۇسخىسى

#font {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    خەت نۇسخىسى - ئېغىرلىقى : @weight ; 
    قۇر - ئېگىزلىكى : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    خەت نۇسخىسى - ئائىلە : «Helvetica Neue» ، Helvetica ، Arial ، sans - serif ;   
    font - size : @size ; 
    خەت نۇسخىسى - ئېغىرلىقى : @weight ; 
    قۇر - ئېگىزلىكى : @lineHeight ; 
  }
  ...
}

Gradients

#gradient {
  ...
  . vertical ( @startColor : # 555, @endColor: # 333) { 
    تەگلىك - رەڭ : @endColor ; 
    تەگلىك - تەكرارلاش : تەكرارلاش - x ;
    تەگلىك - رەسىم : - khtml - تەدرىجىي ( سىزىقلىق ، سول ئۈستى ، سول ئاستى ، ( @startColor ) دىن ، ( @endColor ) ) ; // Konqueror   
    تەگلىك - رەسىم : - moz - سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // FF 3.6+   
    تەگلىك - رەسىم : - ms - سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // IE10   
    تەگلىك - رەسىم : - webkit - تەدرىجىي ( سىزىقلىق ، سول ئۈستى ، سول ئاستى ، رەڭ - توختاش ( 0 % ، @startColor ) ، رەڭ - توختىتىش ( 100 % ، @endColor )); // Safari 4+ ، Chrome 2+    
    تەگلىك - رەسىم : - webkit - سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // Safari 5.1+ ، Chrome 10+   
    تەگلىك - رەسىم : - o - سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // Opera 11.10   
    تەگلىك - رەسىم : سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // ئۆلچەم  
  }
  ...
}

مەشغۇلاتلار

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

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// بەزى ئىستونلارنى ياساڭ
. ستونلار ( @columnSpan : 1 ) {  
  كەڭلىكى : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

Compiling Less

/ Lib / دىكى ھۆججەتلەرنى ئۆزگەرتكەندىن كېيىن .less، bootstrap - *. *. *. Css ۋە bootstrap - *. *. *. Min.css ھۆججىتىنى قايتا ھاسىل قىلىش ئۈچۈن ئۇلارنى قايتا ياساپ چىقىشىڭىز لازىم. ئەگەر سىز GitHub غا تارتىش تەلىپىنى يوللىسىڭىز ، چوقۇم قايتا ئويلىشىڭىز كېرەك.

تۈزۈشنىڭ ئۇسۇللىرى

ئۇسۇل	قەدەملەر
گىرىم بويۇملىرى	تۆۋەندىكى بۇيرۇقنى ئىجرا قىلىش ئارقىلىق npm بىلەن ئازراق بۇيرۇق قۇرى تۈزگۈچىنى قاچىلاڭ: $ npm lessc نى قاچىلاڭ قاچىلاپ بولغاندىن كېيىن `make`bootstrap مۇندەرىجىسىڭىزنىڭ يىلتىزىدىن ئىجرا قىلىڭ ، ھەممىڭىز تەييار. بۇنىڭدىن باشقا ، ئەگەر سىزدە قول سائىتى ئورنىتىلغان بولسا ، `make watch`ھەر قېتىم bootstrap lib دىكى ھۆججەتنى تەھرىرلىگەندە bootstrap نى ئاپتوماتىك قايتا قۇرۇشقا ئىجرا بولۇشىڭىز مۇمكىن (بۇ تەلەپ قىلىنمايدۇ ، پەقەت قۇلايلىق ئۇسۇل).
Javascript	ئەڭ يېڭى Less.js نى چۈشۈرۈڭ ۋە ئۇنىڭغا (ۋە Bootstrap) يولىنى قوشۇڭ `head`. <link rel = "stylesheet / less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script> .سىز ھۆججەتلەرنى قايتا رەتلەش ئۈچۈن ، ئۇلارنى ساقلاڭ ۋە بېتىڭىزنى قايتا يۈكلەڭ. Less.js ئۇلارنى رەتلەپ يەرلىك ساقلاشقا ساقلايدۇ.
بۇيرۇق قۇرى	ئەگەر سىزدە ئازراق بۇيرۇق قۇر قورالى قاچىلانغان بولسا ، تۆۋەندىكى بۇيرۇقنى ئىجرا قىلىڭ: $ lessc ./lib/bootstrap.less> bootstrap.css ئەگەر بەزى بايتلارنى `--compress`ساقلىماقچى بولسىڭىز ، بۇ بۇيرۇققا قوشۇڭ.
Mac ئەپ دېتالى	غەيرىي رەسمىي Mac دېتالى .less ھۆججىتىنىڭ مۇندەرىجىسىنى كۆرىدۇ ۋە كۆرگەن .سىز ھۆججەتنى ساقلىغاندىن كېيىن كودنى يەرلىك ھۆججەتلەرگە توپلايدۇ. ئەگەر ياقتۇرسىڭىز ، ئاپتوماتىك كىچىكلىتىش ۋە تۈزۈلگەن ھۆججەتلەرنىڭ قايسى مۇندەرىجىگە ئايلىنىدىغانلىقى توغرىسىدىكى ئەپتىكى مايىللىقنى ئالماشتۇرالايسىز.

Hotlink the CSS

ئۇنى ئاز ئىشلىتىڭ

GitHub دىكى Fork

Bootstrap قىسقىچە تارىخى ، توركۆرگۈچنى قوللاش ۋە باشقىلار

تارىخ

توركۆرگۈنى قوللاش

نېمىلەرنى ئۆز ئىچىگە ئالىدۇ

تېز باشلاش مىساللىرى

كاتەكچە سىستېمىسى ئۆلچەملىك 940px نى تاشلاڭ ياكى ئۆزىڭىزنىڭ دومىلىتىڭ

كۆڭۈلدىكى تور

كاتەكچە بەلگە

تۈۋرۈكلەرنى ئۆچۈرۈش

ئۇۋا تۈۋرۈكى

ئۇۋىغان ئىستونلارنىڭ مىسالى

ئۆزىڭىزنىڭ تورىنى دومىلىتىڭ

تورنىڭ ئىچىدە

ھازىر خاسلاشتۇرۇش

تور بەت قۇرۇشتىكى ئاساسىي قېلىپلار

مۇقىم ئورۇنلاشتۇرۇش

سۇيۇقلۇق ئورۇنلاشتۇرۇش

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

ماۋزۇ ۋە كۆپەيتىلگەن

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

مىسال ئابزاس

مىسال ماۋزۇسىنىڭ تارماق ماۋزۇسى بار…

Misc. ئېلېمېنتلار

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

بىر ئابزاسقا ئەھمىيەت بېرىش

ئادرېس

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

Blockquotes

نەقىل كەلتۈرۈش

تىزىملىك

تەرتىپسىز<ul>

Unstyled<ul.unstyled>

زاكاز قىلىندى<ol>

چۈشەندۈرۈشdl

كود

كودنى كۆرسىتىش

بەلگە بەلگىسى

ھەر قانداق نەرسىگە بەلگە قويۇڭ

مېدىيا رەسىم ۋە سىنلارنى كۆرسىتىدۇ

Media grid

كىچىك كۆرۈنۈش

چوڭ

ئوتتۇراھال

كىچىك

ئۇلارنى كودلاش

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

جەدۋەل قۇرۇش

مىسال: كۆڭۈلدىكى جەدۋەل ئۇسلۇبى

مىسال: زەبرا سىزىقلىق

مىسال: Zebra- سىزىقلىق w / TableSorter.js

جەدۋەل

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

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

مەيدان چوڭلۇقى

كۇنۇپكىلار

مىسال كۇنۇپكىلىرى

باشقا چوڭلۇقى

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

ئۇلىنىشلار

كۇنۇپكىلار

يول باشلاش

مۇقىم بالداق

تۈر ئىسمى

ئۇ نېمە؟

خاسلاشتۇرغىلى بولىدۇ

تامچە ئۆز ئىچىگە ئالىدۇ

بەتكۈچ ۋە دورىلار

نان

Pagination

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

ئاساسىي ئاگاھلاندۇرۇش

مىسال كودى

تەرتىپسىز`<ul>`

Unstyled`<ul.unstyled>`

زاكاز قىلىندى`<ol>`

چۈشەندۈرۈش`dl`