Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, eros at vestibulum.
Bootstrap بولسا Twitter دىكى توربېكەت ۋە تور بېكەتلەرنىڭ تەرەققىياتىغا باشلاش ئۈچۈن لايىھەلەنگەن قورال ئامبىرى.
ئۇ باسما ، شەكىل ، كۇنۇپكا ، جەدۋەل ، كاتەكچە ، يول باشلاش ۋە باشقا CSS ۋە HTML نى ئۆز ئىچىگە ئالىدۇ.
نېرۋا ئاگاھلاندۇرۇشى: Bootstrap Less بىلەن ياسالغان بولۇپ ، زامانىۋى توركۆرگۈچلەرنى كۆزدە تۇتۇپ دەرۋازىدىن چىقىپ ئىشلەش ئۈچۈن لايىھەلەنگەن.
ئەڭ تېز ۋە ئەڭ ئاسان باشلاش ئۈچۈن ، بۇ پارچىنى تور بېتىڭىزگە كۆچۈرۈڭ.
ئاز ئىشلىتىش ھەۋەسكارى؟ چاتاق يوق ، پەقەت repo نى كلونلاپ بۇ قۇرلارنى قوشۇڭ:
Github دىكى رەسمىي Bootstrap repo ئارقىلىق چۈشۈرۈش ، چاتاش ، تارتىش ، ھۆججەت مەسىلىسى ۋە باشقىلار.
Twitter نىڭ دەسلەپكى كۈنلىرىدە ، ئىن ers ېنېرلار ئۆزى بىلىدىغان ھەرقانداق كۇتۇپخانىنى ئىشلىتىپ ، ئالدىنقى قاتاردىكى تەلەپلەرنى قاندۇردى. Bootstrap Twitter دىكى تۇنجى Hackweek دەۋرىدە ئوتتۇرىغا قويۇلغان ۋە تەرەققىيات تېزلەشكەن خىرىسلارغا جاۋاب سۈپىتىدە باشلانغان.
Twitter دىكى نۇرغۇنلىغان ئىنژېنېرلارنىڭ ياردىمى ۋە ئىنكاسى بىلەن Bootstrap كۆرۈنەرلىك ئۆسۈپ ، ئاساسىي ئۇسلۇبلارنىلا ئەمەس ، بەلكى تېخىمۇ نەپىس ۋە چىداملىق ئالدى يۈز لايىھىلەش ئەندىزىسىنى ئۆز ئىچىگە ئالىدۇ.
Dev.twitter.com دا تېخىمۇ كۆپ ئوقۇڭ
Bootstrap Chrome ، Safari ، Internet Explorer ۋە Firefox قاتارلىق ئاساسلىق زامانىۋى توركۆرگۈچلەردە سىناق قىلىنغان ۋە قوللانغان.
Bootstrap تۈزۈلگەن CSS ، تولۇقلانمىغان ۋە ئۈلگە قېلىپلىرى بىلەن تولۇق.
Bootstrap نىڭ بىر قىسمى سۈپىتىدە تەمىنلەنگەن سۈكۈتتىكى تور سىستېمىسى 940px كەڭلىكتىكى 16 ئىستون تورى. ئۇ مودا بولغان 960 تور سىستېمىسىنىڭ تەمى ، ئەمما سول ۋە ئوڭ تەرىپىگە قوشۇمچە پەرقى يوق.
بۇ يەردە كۆرسىتىلگەندەك ، ئىككى خىل «ستون» ئارقىلىق ئاساسىي ئورۇنلاشتۇرۇش ھاسىل قىلغىلى بولىدۇ ، ھەر بىرى تور تورىمىزنىڭ بىر قىسمى دەپ ئېنىقلىغان 16 ئاساسى ئىستوننىڭ بىر قانچەسىنى ئۆز ئىچىگە ئالىدۇ. تېخىمۇ كۆپ ئۆزگىرىشلەر ئۈچۈن تۆۋەندىكى مىساللارنى كۆرۈڭ.
- <div class = "row" >
- <div class = "span6 ستون" >
- ...
- </div>
- <div class = "span10 ستون" >
- ...
- </div>
- </div>
سۈكۈتتىكى ۋە ئاددىي 940px كەڭلىكتە ، پەقەت بىرلا تور بېكەت ياكى بەت تەمىنلىگەن مەركەزلىك ئورۇنلاشتۇرۇش <div.container>
.
- <body>
- <div class = "قاچا" >
- ...
- </div>
- </body>
كىچىك ، ئەڭ چوڭ كەڭلىك ۋە سول تەرەپ يان بالداق بىلەن جانلىق ، ئەۋرىشىم سۇيۇقلۇق بەت قۇرۇلمىسى. ئەپ ۋە ھۆججەتلەر ئۈچۈن ناھايىتى ياخشى.
- <body>
- <div class = "قاچا-سۇيۇقلۇق" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "مەزمۇن" >
- ...
- </div>
- </div>
- </body>
تور بەتلىرىڭىزنى تۈزۈشنىڭ ئۆلچەملىك تىپىك قاتلاملىرى.
پۈتكۈل مەتبەئە تورى بىزنىڭ preboot.less ھۆججىتىمىزدىكى ئىككى ئاز ئۆزگەرگۈچى مىقدارنى ئاساس قىلىدۇ: @basefont
ۋە @baseline
. بىرىنچىسى ، ئىشلىتىلگەن ئاساسىي خەت چوڭلۇقى ، ئىككىنچىسى ئاساسى سىزىق ئېگىزلىكى.
بىز بۇ ئۆزگەرگۈچى مىقدارلارنى ۋە بىر قىسىم ماتېماتىكىنى ئىشلىتىپ ، بارلىق تىپلىرىمىزنىڭ گىرۋەكلىرى ، تاختىلىرى ۋە سىزىق ئېگىزلىكىنى ھاسىل قىلىمىز.
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>
<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>
ئېلېمېنت ئەڭ يېقىن ئەجدادلىرى ياكى پۈتۈن خىزمەت گەۋدىسى ئۈچۈن ئالاقىلىشىش ئۇچۇرلىرىغا ئىشلىتىلىدۇ. ئۇنىڭ قانداق كۆرۈنۈشى:
ئەسكەرتىش: مەزمۇندىكى ھەر بىر قۇر <address>
چوقۇم بىر قۇر ئۈزۈش ( <br />
) بىلەن ئاخىرلىشىشى ياكى بۆلەك دەرىجىلىك بەلگە (مەسىلەن ، <p>
) بىلەن ئورالغان بولۇپ ، مەزمۇننى مۇۋاپىق تەشكىللىشى كېرەك.
قىسقارتىلمىسى ۋە قىسقارتىلمىسى ئۈچۈن خەتكۈچنى ئىشلىتىڭ ( <abbr>
HTML5 دە ۋاقتى ئۆتكەن ). خەتكۈچ جەدۋىلىنى خەتكۈچنىڭ ئىچىگە قويۇپ ، تولۇق ئىسىمغا ماۋزۇ قويۇڭ.<acronym>
<blockquote>
<p>
<small>
بىر بۆلەكنى ئۆز ئىچىگە ئېلىش ، ئوراش ۋە خەتكۈچلەرنى ئوراش <blockquote>
. ئېلېمېنتنى ئىشلىتىپ مەنبەڭىزنى نەقىل كەلتۈرۈڭ ، ئۇنىڭدىن بۇرۇن em dash غا ئېرىشىسىز .<p>
<small>
<small>
—
Lorem ipsum dolor amet ، كونسېرۋاتىپلىق ماسلاشتۇرغۇچى سەرخىل. پۈتۈن سان پوسېرې ئانتېن ۋېنېناتىس داپىبۇس پوسېرې مەخمەل ئالكېتىنى يوقىتىدۇ.
دوكتور جۇلىئۇس ھىببېرت
<ul>
<ul.unstyled>
<ol>
dl
<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>
ئالدىنقى مىسالنى ئالساق ، jQuery ۋە Tablesorter قىستۇرمىسى ئارقىلىق رەتلەش ئىقتىدارىنى تەمىنلەش ئارقىلىق جەدۋەللىرىمىزنىڭ ئىشلىتىلىشچانلىقىنى ئۆستۈرىمىز. تۈرنى ئۆزگەرتىش ئۈچۈن ھەر قانداق ئىستوننىڭ بېشىنى چېكىڭ.
# | بىرىنچى ئىسمى | فامىلىسى | تىل |
---|---|---|---|
1 | سىزنىڭ | بىرى | ئىنگىلىزچە |
2 | جو | Sixpack | ئىنگىلىزچە |
3 | Stu | Dent | كود |
- <script src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <script >
- $ ( function () {
- $ ( "جەدۋەل # sortTableExample" ). جەدۋەل ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
بارلىق جەدۋەللەرنى ئوقۇشچان ۋە كېڭەيتىش شەكلىدە كۆرسىتىش ئۈچۈن سۈكۈتتىكى ئۇسلۇبلار بېرىلگەن. ئۇسلۇب تېكىست كىرگۈزۈش ، تاللاش تىزىملىكى ، تېكىست ، رادىئو كۇنۇپكىسى ۋە تەكشۈرۈش رامكىسى ۋە كۇنۇپكىلار ئۈچۈن تەمىنلەنگەن.
.form-stacked
جەدۋىلىڭىزنىڭ HTML غا قوشۇڭ ، ئۇلارنىڭ سول تەرىپىگە ئەمەس ، بەلكى ئۇلارنىڭ ئۈستى تەرىپىدە بەلگە بولىدۇ. ئەگەر شەكلىڭىز قىسقا بولسا ياكى ئېغىرراق جەدۋەللەرگە ئىككى ئىستون كىرگۈزسىڭىز ، بۇ ناھايىتى ياخشى ئىشلەيدۇ.
ئەھدىنامە سۈپىتىدە كۇنۇپكىلار ھەرىكەتكە ئىشلىتىلىدۇ ، ھالبۇكى ئوبيېكتلارغا ئۇلىنىش ئىشلىتىلىدۇ. مەسىلەن ، «چۈشۈرۈش» بىر كۇنۇپكا ، «يېقىنقى پائالىيەت» ئۇلىنىش بولالايدۇ.
بارلىق كۇنۇپكىلار سۇس كۈلرەڭ ئۇسلۇبقا سۈكۈت قىلىدۇ ، ئەمما ئوخشىمىغان رەڭ ئۇسلۇبىغا بىر قاتار ئىقتىدارلىق دەرسلەرنى ئىشلىتىشكە بولىدۇ. بۇ دەرسلەر كۆك .primary
سىنىپ ، سۇس كۆك رەڭلىك .info
سىنىپ ، يېشىل .success
سىنىپ ۋە قىزىل .danger
سىنىپنى ئۆز ئىچىگە ئالىدۇ. ئۇنىڭدىن باشقا ، ئۆزىڭىزنىڭ ئۇسلۇبىنى دومىلىتىش ئاسان.
قوللانغان ھەر قانداق نەرسىگە كۇنۇپكا ئۇسلۇبىنى ئىشلىتىشكە بولىدۇ .btn
. ئادەتتە سىز بۇلارنىلا ئىشلىتىپ <a>
، ئېلېمېنتلارنى <button>
تاللىسىڭىز بولىدۇ. <input>
ئۇنىڭ قانداق كۆرۈنۈشى:
چوڭ ياكى كىچىك كۇنۇپكىلارمۇ؟ ئۇنىڭغا ئېرىشىڭ!
مەلۇم سەۋەبلەر تۈپەيلىدىن ئاكتىپلانمىغان ياكى ئەپ تەرىپىدىن چەكلەنگەن كۇنۇپكىلارغا چەكلەنگەن ھالەتنى ئىشلىتىڭ. ئۇ .disabled
ئۇلىنىش ۋە ئېلېمېنتلار ئۈچۈندۇر :disabled
.<button>
div.alert-message
بىر ھەرىكەتنىڭ مەغلۇبىيىتى ، مۇمكىن بولغان مەغلۇبىيىتى ياكى مۇۋەپپەقىيىتىنى گەۋدىلەندۈرۈش ئۈچۈن بىر قۇر ئۇچۇر. بولۇپمۇ شەكىللەر ئۈچۈن پايدىلىق.
div.alert-message.block-message
ئازراق چۈشەندۈرۈشنى تەلەپ قىلىدىغان ئۇچۇرلار ئۈچۈن بىزدە ئابزاس ئۇسلۇبى ئاگاھلاندۇرۇشى بار. بۇلار تېخىمۇ ئۇزۇن خاتالىق ئۇچۇرىنى كۆپۈككە ئايلاندۇرۇش ، ئىشلەتكۈچىنى ساقلىنىۋاتقان ھەرىكەتتىن ئاگاھلاندۇرۇش ياكى بۇ بەتكە تېخىمۇ ئەھمىيەت بېرىش ئۈچۈن ئۇچۇرلارنى كۆرسىتىشكە تولىمۇ ماس كېلىدۇ.
مودېللار - دىئالوگ ياكى چىراغ ساندۇقى ئارقا كۆرۈنۈشنى ساقلاپ قېلىش ئىنتايىن مۇھىم بولغان ئەھۋال ئاستىدا كونتېكىست ھەرىكەت ئۈچۈن ناھايىتى ياخشى.
بىر ئېسىل بەدەن…
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.
پوپايكىلارنى ئىشلىتىپ بەت يۈزىگە قوشۇمچە ئۇچۇرلارنى تەمىنلەڭ.
Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, eros at vestibulum.
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 ;
Less يەنە CSS نىڭ نورمال گرامماتىكىسىدىن باشقا يەنە بىر خىل باھا بېرىش ئۇسلۇبى بىلەن تەمىنلەيدۇ /* ... */
.
- // بۇ بىر باھا
- / * بۇمۇ بىر باھا * /
ئارىلاشما ماددىلار 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 ;
- }
- }
- #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
- تەگلىك - رەسىم : سىزىقلىق - تەدرىجىي ( سول ، @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
- تەگلىك - رەسىم : سىزىقلىق - تەدرىجىي ( @startColor , @endColor ); // ئۆلچەم
- }
- . يۆنىلىشلىك ( @startColor : # 555, @endColor: # 333, @deg: 45deg) {
- ...
- }
- . تىك - ئۈچ خىل رەڭ ( @startColor : # 00b3ee, @midColor : # 7a43b6, @colorStop: 50%,
- ...
- }
- }
ھەشەمەتكە ئېرىشىپ ، ماتېماتىكىنى ئىجرا قىلىپ ، تۆۋەندىكىدەك جانلىق ۋە كۈچلۈك ئارىلاشمىلارنى ھاسىل قىلىڭ.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // كاتەكچە سىستېمىسى
- . قاچا {
- width : @siteWidth ;
- margin : 0 auto ;
- . clearfix ();
- }
- . ستونلار ( @columnSpan : 1 ) {
- كەڭلىكى : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }