Twitter Bootstrap

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

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

Hotlink the CSS

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

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

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

GitHub دىكى Fork

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

GitHub دىكى Bootstrap »

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

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

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

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

<div class = "row">
  <div class = "span6 ستون" >   
    ...
  </div>
  <div class = "span10 ستون" >   
    ...
  </div>
</div>

ستونلارنى ئۆچۈرۈش

8 offset 4

4 offset 4

5 offset 3

10 offset 6

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

كەڭلىكى 940px كەڭلىك ، مەركەزلىك قاچا ئورۇنلاشتۇرۇشى ھەر قانداق تور بېكەت ياكى بەت ئۈچۈن.

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

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

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

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

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

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

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.

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

سىز يەنە <strong>ۋە بىلەن كىچىك ماۋزۇلارنى قوشالايسىز<em>

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.

ئادرېس

بۇ addressئېلېمېنت ئىشلىتىلىدۇ - سىز پەرەز قىلدىڭىز! - ئادرېس. ئۇنىڭ قانداق كۆرۈنۈشى:

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

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

قىسقارتىلما

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

Blockquotes

<blockquote> <p> <cite>

blockquoteئەتراپىڭىزنى paragraphۋە citeخەتكۈچلىرىڭىزنى ئوراپ جەزملەشتۈرۈڭ . مەنبەنى تىلغا ئالغاندا ، citeئېلېمېنتنى ئىشلىتىڭ. CSS ئاپتوماتىك ھالدا em dash (& mdash;) بىلەن ئىسىمنى ئالدى.

لورېم ئىپسۇم دولور ئولتۇرغان ئامەت ، كونسېرۋاتىپنىڭ يېيىشلىك سەرخىللىرى ، sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ...
دوكتور جۇلىئۇس ھىببېرت

تىزىملىك

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

Jeremy Bixby
Robert Dezure
جوش ۋاشىنگتون
Anton Capresi
مېنىڭ كوماندا ئەزالىرى
- George Castanza
- Jerry Seinfeld
- Cosmo Kramer
- Elaine Bennis
- Newman
John Jacob
Paul Pierce
Kevin Garnett

Unstyled`<ul.unstyled>`

Jeremy Bixby
Robert Dezure
جوش ۋاشىنگتون
Anton Capresi
مېنىڭ كوماندا ئەزالىرى
- George Castanza
- Jerry Seinfeld
- Cosmo Kramer
- Elaine Bennis
- Newman
John Jacob
Paul Pierce
Kevin Garnett

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

Jeremy Bixby
Robert Dezure
جوش ۋاشىنگتون
Anton Capresi
مېنىڭ كوماندا ئەزالىرى
1. George Castanza
2. Jerry Seinfeld
3. Cosmo Kramer
4. Elaine Bennis
5. Newman
John Jacob
Paul Pierce
Kevin Garnett

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

جەدۋەل قۇرۇش

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

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

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

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

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

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

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

<table class = "common-table"> class = "common-table" >
  ...
</table>

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

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

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

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

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

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

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

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

مۇقىم بالداق

ئۇ نېمە؟

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

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

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

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

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

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

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

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

<ul class = "بەتكۈچ"> class = "tabs" >
  <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 = "دورىلار"> 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>

Pagination

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

<div class = "pagination"> 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>

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

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

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

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

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

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

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

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

ئاھ! خاتالىق تاپتىڭىز!بۇنى ۋە بۇنى ئۆزگەرتىپ قايتا سىناڭ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus amet fermentum.

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

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

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

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

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

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

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

Modals

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

قورال كۆرسەتمىلىرى

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

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.

تۆۋەندە!

توغرا!

left!

يۇقىرىدا!

Popovers

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

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

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

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

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

<link rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "all" /> rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "all" />    
<script type = "text / javascript" src = "js / less-1.0.41.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;            
// Baseline
@baseline : 20px ;

باھا بېرىش

Less يەنە 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 ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    خەت نۇسخىسى - ئائىلە : «گرۇزىيە» ، دەۋر يېڭى رومان ، ۋاقىت ، سان - serif ;     
    font - size : @size ; 
    خەت نۇسخىسى - ئېغىرلىقى : @weight ; 
    قۇر - ئېگىزلىكى : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    خەت نۇسخىسى - ئائىلە : «موناكو» ، تېز يوللانما يېڭى ، مونوپول   
    font - size : @size ; 
    خەت نۇسخىسى - ئېغىرلىقى : @weight ; 
    قۇر - ئېگىزلىكى : @lineHeight ; 
  }
}

Gradients

#gradient {
  . توغرىسىغا ( @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    
    - ms - سۈزگۈچ : % ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor ); // IE8 +  
    سۈزگۈچ : e (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor )); // IE6 & IE7 
    تەگلىك - رەسىم : سىزىقلىق - تەدرىجىي ( سول ، @startColor , @endColor ); // Le standard   
  }
  . 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   
    - ms - سۈزگۈچ : % ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor ); // IE8 +  
    سۈزگۈچ : e (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor )); // IE6 & IE7 
    تەگلىك - رەسىم : سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // ئۆلچەم  
  }
  . يۆنىلىشلىك ( @startColor : # 555, @endColor: # 333, @deg: 45deg) { 
    ...
  }
  . تىك - ئۈچ خىل رەڭ ( @startColor : # 00b3ee, @midColor : # 7a43b6, 
    ...
  }
}

مەشغۇلات ۋە تور سىستېمىسى

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

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// كاتەكچە سىستېمىسى
. قاچا {
  width : @siteWidth ; 
  margin : 0 auto ;  
  . clearfix ();
}
. ستونلار ( @columnSpan : 1 ) {  
  display : inline ; 
  float : left ;
  كەڭلىكى : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - left : @gridGutterWidth ; 
  &: بىرىنچى - بالا {
    margin - left : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! مۇھىم _          
}

Bootstrap

Twitter Bootstrap

Hotlink the CSS

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

GitHub دىكى Fork

كاتەكچە سىستېمىسى ئۆلچەملىك 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

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

جەدۋەل قۇرۇش

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

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

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

جەدۋەل

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

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

كۇنۇپكىلار

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

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

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

ئۇلىنىشلار

كۇنۇپكىلار

يول باشلاش

مۇقىم بالداق

تۈر ئىسمى

ئۇ نېمە؟

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

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

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

Pagination

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

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

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

مودا ، قورال كۆرسەتمىسى ۋە پوپايكىلاردا مەزمۇننى كۆرسىتىدىغان زاپچاسلار

Modals

Modal Heading

قورال كۆرسەتمىلىرى

Popovers

Popover Title

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

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

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

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

باھا بېرىش

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

خەت نۇسخىسى

Gradients

مەشغۇلات ۋە تور سىستېمىسى

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

Unstyled`<ul.unstyled>`

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

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