Bootstrap سان گهٽ استعمال ڪندي
LESS سان بوٽ اسٽريپ کي ترتيب ڏيو ۽ وڌايو ، سي ايس ايس پري پروسيسر، متغيرن جو فائدو وٺڻ لاءِ، ميڪسينس، ۽ وڌيڪ استعمال ڪيو بوٽ اسٽريپ جي سي ايس ايس ٺاهڻ لاءِ.
LESS سان ٺهيل
ڇو گهٽ؟
بوٽ اسٽريپ LESS سان ٺهيل آهي بنيادي طور تي، هڪ متحرڪ اسٽائل شيٽ ٻولي جيڪا اسان جي سٺي دوست، Alexis Sellier پاران ٺاهي وئي آهي . اهو ترقي ڪندڙ سسٽم تي ٻڌل CSS کي تيز، آسان ۽ وڌيڪ مزو ڏئي ٿو.
ڇا شامل آهي؟
CSS جي توسيع جي طور تي، LESS ۾ متغير شامل آهن، ڪوڊ جي ٻيهر استعمال لائق اسنپٽس لاءِ ميڪسين، سادي رياضي لاءِ آپريشن، nesting، ۽ حتي رنگ جا ڪم.
متغير
CSS ۾ رنگن ۽ پکسل جي قيمتن کي منظم ڪرڻ ۾ ٿورڙو درد ٿي سگھي ٿو، عام طور تي ڪاپي ۽ پيسٽ سان ڀريل. گهٽ سان نه جيتوڻيڪ - رنگن يا پکسل ويلز کي متغير طور تفويض ڪريو ۽ انهن کي هڪ ڀيرو تبديل ڪريو.
ملائيندڙ
اهي ٽي سرحد ريڊيس بيان جيڪي توهان کي باقاعده ol' CSS ۾ ڪرڻ گهرجن؟ ھاڻي اھي ھڪڙي لڪير تي ھيٺ آھن mixins جي مدد سان، ڪوڊ جا ٽڪرا توھان ڪٿي به استعمال ڪري سگھو ٿا.
آپريشنز
پنھنجي گرڊ، اڳواٽ، ۽ وڌيڪ سپر لچڪدار ٺاھيو رياضي تي عملن سان. گھڻا، ورهايو، شامل ڪريو، ۽ گھٽايو پنھنجي طريقي سان سي ايس ايس جي صفائي.
Bootstrap variables LESS variables، انھن جا قدر، ۽ استعمال جون ھدايتون
هائپر لنڪس
@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 |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#ايئي | |
@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 |
بوٽ اسٽريپ ميڪس
جي باري ۾ mixins
بنيادي مرکبات
هڪ بنيادي ميڪسين لازمي طور تي هڪ شامل يا جزوي طور تي CSS جي هڪ ٽڪڙي لاءِ آهي. اهي صرف هڪ CSS ڪلاس وانگر لکيل آهن ۽ ڪٿي به سڏي سگهجن ٿا.
- . عنصر {
- . صاف فڪس ()؛
- }
پيرا ميٽرڪ ميڪس
ھڪڙو پيرا ميٽرڪ ميڪسين ھڪڙو بنيادي ميڪسين وانگر آھي، پر اھو پڻ اختياري ڊفالٽ قدرن سان پيرا ميٽرز (ان ڪري نالو) قبول ڪري ٿو.
- . عنصر {
- . سرحد - ريڊيس ( 4px )؛
- }
آساني سان پنهنجو پاڻ کي شامل ڪريو
بوٽ اسٽريپ جون لڳ ڀڳ سڀئي ميڪسينز mixins.less ۾ محفوظ ٿيل آهن، هڪ شاندار افاديت .less فائل جيڪا توهان کي ٽول ڪٽ ۾ موجود .less فائلن مان ڪنهن ۾ به ميڪسين استعمال ڪرڻ جي قابل بڻائي ٿي.
تنهن ڪري، اڳتي وڌو ۽ موجوده استعمال ڪريو يا پنهنجو پاڻ کي شامل ڪرڻ لاء آزاد محسوس ڪريو جيئن توهان کي ضرورت آهي.
شامل ڪيل ميڪس
افاديت
| ملائڻ | پيرا ميٽرز | استعمال |
|---|---|---|
.clearfix() |
ڪو به | ڪنهن به والدين کي شامل ڪريو اندر اندر floats صاف ڪرڻ لاء |
.tab-focus() |
ڪو به | لاڳو ڪريو ويب ڪٽ فوڪس انداز ۽ گول فائر فاڪس آئوٽ لائن |
.center-block() |
ڪو به | خودڪار مرڪز هڪ بلاڪ-سطح عنصر استعمال ڪنديmargin: auto |
.ie7-inline-block() |
ڪو به | display: inline-blockIE7 سپورٽ حاصل ڪرڻ لاء باقاعده کان علاوه استعمال ڪريو |
.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() |
ڪو به | هڪ عنصر ٺاهيو هڪ 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 |
هڪ عنصر کي n ڀيرا ان جي اصل سائيز جي ماپ ڪريو |
.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 |
ساڄي ۽ تري ۾ ڪنهن به عنصر کي resizable بڻائي |
.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 |
بٽڻن لاءِ استعمال ڪيو ويو گريڊيئينٽ ۽ ٿورو اونڌو بارڊر تفويض ڪرڻ لاءِ |
LESS سان گڏ بوٽ اسٽريپ گڏ ڪرڻ
گڏ ڪرڻ جو اوزار
ميڪ فائل سان نوڊ
انسٽال ڪريو LESS ڪمانڊ لائن ڪمپلر npm سان ھيٺ ڏنل حڪم هلائڻ سان.
$ npm انسٽال ڪريو گھٽ
هڪ دفعو انسٽال ٿيل صرف makeتوهان جي بوٽ اسٽريپ ڊاريڪٽري جي روٽ مان هلايو ۽ توهان سڀ سيٽ آهيو.
اضافي طور تي، جيڪڏهن توهان وٽ واچر نصب ڪيو آهي، توهان هلائي سگهو ٿا make watchبوٽ اسٽريپ خودڪار طريقي سان ٻيهر تعمير ڪيو جڏهن توهان بوٽ اسٽريپ ليب ۾ فائل کي ايڊٽ ڪيو (اهو گهربل ناهي، صرف هڪ سهولت جو طريقو).
ڪمانڊ لائن
انسٽال ڪريو LESS ڪمانڊ لائن ٽول نوڊ ذريعي ۽ ھيٺ ڏنل حڪم ھلايو:
$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 فائل کي محفوظ ڪرڻ کان پوءِ.
جيڪڏھن توھان چاھيو، توھان ترجيحات کي ٽوگل ڪري سگھو ٿا ايپ ۾ خودڪار گھٽائڻ لاءِ ۽ ڪھڙي ڊاريڪٽري ۾ مرتب ٿيل فائلون ختم ٿين ٿيون.
وڌيڪ ميڪ ايپس
ڪڪڙ
Crunch Adobe Air تي ٺهيل هڪ بهترين ڏسندڙ LESS ايڊيٽر ۽ مرتب ڪندڙ آهي.
ڪوڊ ڪٽ
ساڳئي ماڻهوءَ پاران ٺاهيل غير رسمي Mac ايپ، CodeKit هڪ Mac ايپ آهي جيڪا LESS، SASS، Stylus، ۽ CoffeeScript کي گڏ ڪري ٿي.
سادو
ميڪ، لينڪس، ۽ پي سي ايپ ڊريگ ۽ ڊراپ گڏ ڪرڻ لاءِ گھٽ فائلون. پلس، ماخذ ڪوڊ GitHub تي آهي .