د بوټسټریپ سره لږ کارول
بوټسټریپ د LESS سره تنظیم او پراخه کړئ ، د CSS پری پروسیسر ، ترڅو د بوټسټریپ CSS جوړولو لپاره د متغیرونو ، مکسینونو او نورو څخه ګټه پورته کړي.
د لږ سره جوړ شوی
ولې لږ؟
بوټسټریپ د دې په اصلي کې لږ سره جوړ شوی ، زموږ د ښه ملګري ، الیکسس سیلیر لخوا رامینځته شوی متحرک سټایل شیټ ژبه . دا د سیسټمونو پراساس CSS ګړندی ، اسانه او ډیر ساتیري رامینځته کوي.
څه پکې شامل دي؟
د CSS د تمدید په توګه، LESS کې متغیرونه، د کوډ د بیا کارونې وړ ټوټې لپاره مکسینونه، د ساده ریاضیاتو لپاره عملیات، ځړول، او حتی د رنګ افعال شامل دي.
متغیرات
په CSS کې د رنګونو او پکسل ارزښتونو اداره کول یو څه درد کیدی شي ، معمولا د کاپي او پیسټ څخه ډک وي. که څه هم لږ سره نه - رنګونه یا د پکسل ارزښتونه د متغیر په توګه وټاکئ او یوځل یې بدل کړئ.
مکسین
هغه درې سرحدی ریډیس اعالمیه چې تاسو اړتیا لرئ په منظم ډول CSS کې جوړ کړئ؟ اوس دوی د مکسین په مرسته یوې کرښې ته ښکته شوي، د کوډ ټوټې چې تاسو یې هرچیرې بیا کارولی شئ.
عملیات
د عملیاتو سره په الوتنه کې ریاضی کولو سره خپل گرډ ، مخکښ او ډیر انعطاف وړ کړئ. ډیری، ویشل، اضافه کول، او د CSS هوښیارتیا ته ستاسو لاره کمول.
د بوټسټریپ متغیرات لږ متغیرونه، د دوی ارزښتونه، او د کارونې لارښوونې
Hyperlinks
@linkColor |
#08c | د ډیفالټ لینک متن رنګ | |
@linkColorHover |
darken(@linkColor, 15%) |
د ډیفالټ لینک متن هوور رنګ |
گرډ سیسټم
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723٪ |
@fluidGridGutterWidth |
2.127659574٪ |
ټایپوګرافي
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
خړ رنګونه
@black |
#000 | |
@grayDarker |
#۲۲۲ | |
@grayDark |
#۳۳۳ | |
@gray |
#555 | |
@grayLight |
#۹۹۹ | |
@grayLighter |
#eeee | |
@white |
#fff |
تلفظ رنګونه
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
اجزا
تڼۍ
@primaryButtonBackground |
@linkColor |
فورمې
@placeholderText |
@grayLight |
نوبار
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
فارم ریاستونه او خبرتیاوې
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
د بوټسټریپ مکسونه
د مخلوط په اړه
اساسي مخلوطونه
یو بنسټیز مکسین په اصل کې د CSS د یوې برخې لپاره یو شامل یا جز دی. دوی یوازې د CSS ټولګي په څیر لیکل شوي او هرچیرې بلل کیدی شي.
- . عنصر {
- . clearfix ();
- }
پارامیټریک مکسونه
د پیرامیټریک مکسین یوازې د لومړني مکسین په څیر دی ، مګر دا د اختیاري ډیفالټ ارزښتونو سره پیرامیټرې (له همدې امله نوم) هم مني.
- . عنصر {
- . سرحد - شعاع ( 4px )؛
- }
په اسانۍ سره خپل ځان اضافه کړئ
د بوټسټریپ نږدې ټول مکسینونه په mixins.less کې زیرمه شوي دي ، یو په زړه پوری افادیت .less فایل چې تاسو ته دا وړتیا درکوي چې په تولک کټ کې په هر .less فایلونو کې مکسین وکاروئ.
نو، مخکې لاړشئ او موجود یې وکاروئ یا د اړتیا په صورت کې خپل ځان اضافه کړئ.
مخلوط شامل دي
اسانتیاوې
| مکسین | پیرامیټونه | کارول |
|---|---|---|
.clearfix() |
هیڅ نه | په دننه کې د فلوټس پاکولو لپاره کوم پلار ته اضافه کړئ |
.tab-focus() |
هیڅ نه | د ویبکیټ تمرکز سټایل پلي کړئ او د فایرفاکس خاکه ګرد کړئ |
.center-block() |
هیڅ نه | په اتوماتيک ډول د بلاک کچې عنصر په کارولو سره مرکزmargin: auto |
.ie7-inline-block() |
هیڅ نه | display: inline-blockد IE7 ملاتړ ترلاسه کولو لپاره منظم سربیره وکاروئ |
.size() |
@height: 5px, @width: 5px |
په چټکۍ سره لوړوالی او عرض په یوه کرښه کې تنظیم کړئ |
.square() |
@size: 5px |
.size()د ورته ارزښت په څیر عرض او لوړوالی تنظیم کولو لپاره رامینځته کیږي |
.opacity() |
@opacity: 100 |
په ټولو شمیرو کې د شفافیت فیصده تنظیم کړئ (د مثال په توګه "50" یا "75") |
فورمې
| مکسین | پیرامیټونه | کارول |
|---|---|---|
.placeholder() |
@color: @placeholderText |
placeholderد ننوتلو لپاره د متن رنګ تنظیم کړئ |
ټایپوګرافي
| مکسین | پیرامیټونه | کارول |
|---|---|---|
#font > #family > .serif() |
هیڅ نه | یو عنصر جوړ کړئ د سیرف فونټ سټیک څخه کار واخلئ |
#font > #family > .sans-serif() |
هیڅ نه | یو عنصر جوړ کړئ د سینز سیرف فونټ سټیک څخه کار واخلئ |
#font > #family > .monospace() |
هیڅ نه | یو عنصر جوړ کړئ د مونوسپیس فونټ سټیک څخه کار واخلئ |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
په اسانۍ سره د فونټ اندازه ، وزن او مخکښ تنظیم کړئ |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
د فونټ کورنۍ سیرف ته تنظیم کړئ، او اندازه، وزن، او مخکښ کنټرول کړئ |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
د فونټ کورنۍ sans-serif ته تنظیم کړئ، او اندازه، وزن، او مخکښ کنټرول کړئ |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
د فونټ کورنۍ مونوسپیس ته تنظیم کړئ ، او اندازه ، وزن او مخکښ کنټرول کړئ |
گرډ سیسټم
| مکسین | پیرامیټونه | کارول |
|---|---|---|
.container-fixed() |
هیڅ نه | د خپل مینځپانګې ساتلو لپاره یو ثابت پلنوالی (سره ترتیب شوی @siteWidth) کانټینر چمتو کړئ |
.columns() |
@columns: 1 |
د گرډ کالم جوړ کړئ چې هر شمیر کالمونه پراخوي (د 1 کالم لپاره ډیفالټ) |
.offset() |
@columns: 1 |
د ګریډ کالم د کیڼ حاشیې سره آفسیټ کړئ چې د کالمونو شمیر پراخوي |
.gridColumn() |
هیڅ نه | یو عنصر د گرډ کالم په څیر تیر کړئ |
د CSS3 ملکیتونه
| مکسین | پیرامیټونه | کارول |
|---|---|---|
.border-radius() |
@radius: 5px |
د عنصر کونجونه ګرد کړئ. کیدای شي یو واحد ارزښت یا څلور ځای جلا شوي ارزښتونه وي |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
یو عنصر ته د ډراپ سیوري اضافه کړئ |
.transition() |
@transition |
د CSS3 لیږد اغیزه اضافه کړئ (د بیلګې په توګه، all .2s linear) |
.rotate() |
@degrees |
یو عنصر n درجو ته وګرځوئ |
.scale() |
@ratio |
یو عنصر د اصلي اندازې نه څو ځله اندازه کړئ |
.translate() |
@x: 0, @y: 0 |
یو عنصر په x او y الوتکو کې حرکت وکړئ |
.background-clip() |
@clip |
د عنصر پس منظر کرپ کړئ (د دې لپاره ګټور border-radius) |
.background-size() |
@size |
د CSS3 له لارې د شالید عکسونو اندازه کنټرول کړئ |
.box-sizing() |
@boxmodel |
د یو عنصر لپاره د بکس ماډل بدل کړئ (د بیلګې په توګه، border-boxد بشپړ چوک لپاره input) |
.user-select() |
@select |
په یوه پاڼه کې د متن کرسر انتخاب کنټرول کړئ |
.resizable() |
@direction: both |
هر عنصر په ښي او ښکته کې د اندازې وړ وړ کړئ |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
د هر عنصر مینځپانګه د CSS3 کالمونو څخه کار واخلئ |
شالید او تدریجي
| مکسین | پیرامیټونه | کارول |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
یو عنصر ته یو شفاف پس منظر رنګ ورکړئ |
.#translucent > .border() |
@color: @white, @alpha: 1 |
یو عنصر ته یو شفاف سرحد رنګ ورکړئ |
.#gradient > .vertical() |
@startColor, @endColor |
د کراس براوزر عمودی شالید تدریجي رامینځته کړئ |
.#gradient > .horizontal() |
@startColor, @endColor |
د کراس براوزر افقی شالید تدریجي رامینځته کړئ |
.#gradient > .directional() |
@startColor, @endColor, @deg |
د کراس براوزر لارښود شالید تدریجي رامینځته کړئ |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
د کراس براوزر درې رنګه شالید تدریجي رامینځته کړئ |
.#gradient > .radial() |
@innerColor, @outerColor |
د کراس براوزر ریډیل شالید تدریجي رامینځته کړئ |
.#gradient > .striped() |
@color, @angle |
د کراس براوزر پټې شوي شالید تدریجي رامینځته کړئ |
.#gradientBar() |
@primaryColor, @secondaryColor |
د تڼیو لپاره د تدریجي او یو څه تیاره سرحد ټاکلو لپاره کارول کیږي |
د کم سره د بوټسټریپ تالیف کول
د راټولولو لپاره وسایل
نوډ د میک فایل سره
د لاندې کمانډ په چلولو سره د npm سره د کم کمانډ لاین کمپیلر نصب کړئ:
$ npm لږ نصب کړئ
یوځل نصب شو یوازې makeستاسو د بوټسټریپ لارښود له ریښې څخه وګرځئ او تاسو ټول چمتو یاست.
برسېره پردې، که تاسو څارونکی نصب کړی وي، تاسو کولی شئ د بوټسټریپmake watch په اتوماتيک ډول بیا جوړ کړئ هرکله چې تاسو د بوټسټریپ لیب کې فایل ترمیم کړئ (دا اړتیا نلري، یوازې د اسانتیا طریقه).
د قوماندې کرښه
د کمانډ لاین وسیله د نوډ له لارې نصب کړئ او لاندې کمانډ چل کړئ:
$lessc ./lib/bootstrap.less > bootstrap.css
ډاډ ترلاسه کړئ چې پدې --compressکمانډ کې شامل کړئ که تاسو هڅه کوئ چې ځینې بایټونه خوندي کړئ!
جاوا سکرپٹ
وروستی Less.js ډاونلوډ کړئ او د هغې لپاره لاره (او بوټسټریپ) په کې شامل کړئ <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
د .less فایلونو د بیا تنظیمولو لپاره، یوازې خوندي کړئ او خپل پاڼه بیا پورته کړئ. Less.js دوی تالیف کوي او په محلي ذخیره کې یې ساتي.
غیر رسمي میک اپلیکیشن
غیر رسمي میک اپلیکیشن د .less فایلونو لارښودونه ګوري او د کتل شوي .less فایل له هر خوندي کولو وروسته محلي فایلونو ته کوډ تالیف کوي.
که تاسو غواړئ، تاسو کولی شئ په اپلیکیشن کې غوره توبونه د اتوماتیک کمولو لپاره او په کوم ډایرکټر کې راټول شوي فایلونه پای ته ورسیږي.
د ماک نور اطلاقات
کرنچ
کرنچ یو ښه ښکاري لږ ایډیټر او کمپیلر دی چې په Adobe Air کې جوړ شوی.
CodeKit
د غیر رسمي میک ایپ په څیر د ورته سړي لخوا رامینځته شوی ، کوډ کیټ یو میک ایپ دی چې LESS ، SASS ، سټیلس ، او کافي سکریپټ ترکیب کوي.
ساده
ماک، لینوکس، او د PC ایپ د لږو فایلونو د ډریګ او ډراپ تالیف لپاره. برسیره پردې، د سرچینې کوډ په GitHub کې دی .