تەوەرەی بووتستراپ
Bootstrap 4 بە گۆڕاوە نوێیەکانی Sass ی ناوەکیمان تایبەتمەند بکە بۆ هەڵبژاردەکانی ستایلە جیهانییەکان بۆ گۆڕینی ئاسان لە تەوەر و پێکهاتەکان.
لە Bootstrap 3 دا، تەوەرکردن بە شێوەیەکی بەرچاو بەهۆی سەرپێچی گۆڕاوەکان لە LESS، CSSی تایبەت و ستایلی تەوەرێکی جیاواز کە لە distفایلەکانماندا جێگیرمان کردبوو، بەڕێوە دەچوو. بە هەندێک هەوڵ، مرۆڤ دەتوانێت بە تەواوی دیزاینی دیمەنی Bootstrap 3 بکاتەوە بەبێ ئەوەی دەست لە فایلە ناوەکییەکان بدات. Bootstrap 4 ڕێگەیەکی ئاشنا، بەڵام کەمێک جیاواز پێشکەش دەکات.
ئێستا، تەوەرکردن بە گۆڕاوە ساسەکان و نەخشەکانی ساس و CSSی تایبەت بەدی دێت. هیچ ستایلی تەوەرێکی تایبەتتر نییە؛ لەبری ئەوە دەتوانیت تەوەرەی ناوەکی چالاک بکەیت بۆ زیادکردنی گرادێنت و سێبەر و زۆر شتی تر.
سوود لە فایلە سەرچاوەییەکانی Sass وەربگرە بۆ سوودوەرگرتن لە گۆڕاوەکان، نەخشەکان، میکسینەکان و زۆر شتی تر.
هەرکاتێک دەتوانیت، خۆت بەدوور بگرە لە دەستکاریکردنی فایلە ناوەکییەکانی Bootstrap. بۆ ساس، ئەوە واتە دروستکردنی ستایلشیتی تایبەت بە خۆت کە Bootstrap هاوردە دەکات بۆ ئەوەی بتوانیت دەستکاری بکەیت و درێژی بکەیتەوە. بەگریمانەیەک کە تۆ بەڕێوەبەری پاکێجێکی وەک npm بەکاردەهێنیت، پێکهاتەی پەڕگەیەکت دەبێت کە بەم شێوەیە دەبێت:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scssئەگەر فایلە سەرچاوەییەکانمان دابەزاندووە و بەڕێوەبەری پاکێج بەکارناهێنیت، ئەوا دەتەوێت بە دەستی شتێکی هاوشێوەی ئەو پێکهاتەیە ڕێکبخەیت، فایلە سەرچاوەییەکانی Bootstrap بە جیا لە فایلە سەرچاوەییەکانی خۆت بهێڵیتەوە.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scssلە custom.scss, تۆ فایلە سەرچاوەییەکانی Sass ی Bootstrap هاوردە دەکەیت. دوو بژاردەت هەیە: هەموو Bootstrap بخەرە ناوەوە، یان ئەو بەشانەی کە پێویستت پێیانە هەڵیبژێرە. ئێمە هانی ئەم دووەمیان دەدەین، هەرچەندە ئاگاداربن هەندێک پێداویستی و وابەستەیی لە سەرانسەری پێکهاتەکانماندا هەیە. هەروەها پێویستە هەندێک جاڤاسکڕێپت بۆ پێوەکراوەکانمان دابنێیت.
// Custom.scss
// Option A: Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";// Custom.scss
// Option B: Include parts of Bootstrap
// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";بەو ڕێکخستنە لە شوێنی خۆیدا، دەتوانیت دەست بکەیت بە دەستکاریکردنی هەریەکێک لە گۆڕاو و نەخشەکانی Sass لە custom.scss. هەروەها دەتوانیت دەست بکەیت بە زیادکردنی بەشەکانی Bootstrap لە ژێر // Optionalبەشەکە بەپێی پێویست. پێشنیار دەکەین کە ستاکی هاوردەکردنی تەواو لە bootstrap.scssفایلەکەمانەوە وەک خاڵی دەستپێک بەکاربهێنیت.
هەموو گۆڕاوێکی Sass لە Bootstrap 4 !defaultئاڵاکە لەخۆدەگرێت کە ڕێگەت پێدەدات بەهای پێشوەختەی گۆڕاوەکە لە Sass ی خۆتدا جێبەجێ بکەیت بەبێ دەستکاریکردنی کۆدی سەرچاوەی Bootstrap. بەپێی پێویست گۆڕاوەکان کۆپی بکە و لێیان بدە، بەهاکانیان دەستکاری بکە و !defaultئاڵاکە لابەرە. ئەگەر گۆڕاوێک پێشتر دیاری کراوە، ئەوا بە بەها پێشوەختەکانی Bootstrap دووبارە تەرخان ناکرێتەوە.
سەرپێچی گۆڕاوەکان لەناو هەمان پەڕگەی Sass دەتوانێت پێش یان دوای گۆڕاوە پێشوەختەکان بێت. بەڵام لە کاتی سەرپێچیکردن لە سەرانسەری پەڕگەکانی ساسدا، سەرپێچیکردنەکانت دەبێت پێش ئەوەی پەڕگەکانی Sass ی Bootstrap هاوردە بکەیت، بێت.
لێرەدا نموونەیەک دەخەینەڕوو کە background-colorو colorبۆ لە <body>کاتی هاوردەکردن و کۆکردنەوەی Bootstrap لە ڕێگەی npm دەگۆڕێت:
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";بەپێی پێویست بۆ هەر گۆڕاوێک لە Bootstrap دووبارەی بکەرەوە، لەوانەش هەڵبژاردە جیهانییەکانی خوارەوە.
بووتستراپ ٤ مشتێک نەخشەی Sass لەخۆدەگرێت، جووتە بەهای سەرەکی کە دروستکردنی خێزانەکانی CSSی پەیوەندیدار ئاسانتر دەکات. ئێمە نەخشەی ساس بەکاردەهێنین بۆ ڕەنگەکانمان و خاڵەکانی شکاندنی تۆڕ و زۆر شتی تر. هەروەک گۆڕاوەکانی ساس، هەموو نەخشەکانی ساس !defaultئاڵاکەیان تێدایە و دەتوانرێت سەرپێچی بکرێت و درێژ بکرێتەوە.
هەندێک لە نەخشەکانی ساسمان بە شێوەی دیفۆڵت تێکەڵ دەکرێن بۆ بەتاڵ. ئەمەش بۆ ئەوەیە کە ڕێگە بدات بە فراوانکردنی ئاسانی نەخشەیەکی دیاریکراوی ساس، بەڵام بە تێچووی لابردنی شتەکان لە نەخشەیەکدا کەمێک قورستر دەکات.
بۆ دەستکاریکردنی ڕەنگێکی هەبوو لە $theme-colorsنەخشەکەماندا، ئەمانەی خوارەوە زیاد بکە بۆ فایلە تایبەتەکەی ساسەکەت:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);بۆ زیادکردنی ڕەنگێکی نوێ بۆ $theme-colors، کلیل و بەهای نوێ زیاد بکە:
$theme-colors: (
"custom-color": #900
);بۆ لابردنی ڕەنگەکان لە $theme-colors, یان هەر نەخشەیەکی تر، بەکاربهێنە map-remove:
$theme-colors: map-remove($theme-colors, "success", "info", "danger");Bootstrap گریمانە دەکات کە هەندێک کلیلی تایبەت لەناو نەخشەکانی ساسدا هەبێت وەک چۆن ئێمە بەکاری هێناین و خۆمان ئەمانە درێژ دەکەینەوە. لەگەڵ خۆکارکردنی نەخشەکانی لەگەڵدا، لەوانەیە تووشی هەڵە بیت لەو شوێنانەی کە کلیلی نەخشەیەکی تایبەتی Sass بەکاردەهێنرێت.
بۆ نموونە ئێمە کلیلەکانی primary, success, و dangerfrom بەکاردەهێنین $theme-colorsبۆ بەستەرەکان و دوگمەکان و دۆخی فۆڕمەکان. گۆڕینی بەهاکانی ئەم کلیلانە نابێت هیچ کێشەیەک پێشکەش بکات، بەڵام لابردنی لەوانەیە ببێتە هۆی کێشەی کۆکردنەوەی ساس. لەم حاڵەتانەدا پێویستە دەستکاری کۆدی Sass بکەیت کە سوود لەو بەهایانە وەردەگرێت.
بووتستراپ چەندین فەنکشنی Sass بەکاردەهێنێت، بەڵام تەنها ژێرکۆمەڵێک بۆ تەوەرکردنی گشتی بەکاردەهێنرێت. ئێمە سێ فەنکشنمان داناوە بۆ وەرگرتنی بەها لە نەخشە ڕەنگاوڕەنگەکان:
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function gray($key: "100") {
@return map-get($grays, $key);
}ئەمانە ڕێگەت پێدەدەن یەک ڕەنگ لە نەخشەی ساس هەڵبژێریت زۆر وەک چۆن گۆڕاوێکی ڕەنگ لە v3 بەکاردەهێنیت.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}هەروەها فەنکشنێکی ترمان هەیە بۆ وەرگرتنی ئاستێکی دیاریکراو لە ڕەنگ لە $theme-colorsنەخشەکەوە. بەهاکانی ئاستی نەرێنی ڕەنگەکە ڕووناک دەکاتەوە، لە کاتێکدا ئاستە بەرزەکان تاریک دەبن.
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
$level: abs($level);
@return mix($color-base, $color, $level * $theme-color-interval);
}بە کردەوە، تۆ بانگی فەنکشنەکە دەکەیت و لە دوو پارامێتەردا تێدەپەڕیت: ناوی ڕەنگەکە لە $theme-colors(بۆ نموونە، سەرەتایی یان مەترسی) و ئاستێکی ژمارەیی.
.custom-element {
color: theme-color-level(primary, -10);
}دەتوانرێت لە داهاتوودا فەنکشنی زیادە زیاد بکرێت یان ساسی تایبەت بە خۆت بۆ دروستکردنی فەنکشنی ئاست بۆ نەخشەی زیادەی ساس، یان تەنانەت یەکێکی گشتی ئەگەر بتەوێت زیاتر قسەخۆش بیت.
یەکێک لە فەنکشنەکانی زیادە کە لە Bootstrap دا دەیخەینە ڕوو بریتییە لە فەنکشنی کۆنتراستی ڕەنگەکان، color-yiq. فەزای ڕەنگی YIQ بەکاردەهێنێت بۆ گەڕانەوەی ئۆتۆماتیکی ڕەنگێکی کۆنتراستی ڕووناکی ( #fff) یان تاریک ( #111) بە پشتبەستن بە ڕەنگی بنەڕەتی دیاریکراو. ئەم فەنکشنە بە تایبەتی بۆ میکسینەکان یان لوپەکان بەسوودە کە چەندین پۆل دروست دەکەیت.
بۆ نموونە بۆ دروستکردنی سواتچی ڕەنگەکان لە $theme-colorsنەخشەکەمانەوە:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}هەروەها دەتوانرێت بۆ پێداویستییەکانی کۆنتراستی یەکجارەکی بەکاربهێنرێت:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}هەروەها دەتوانیت ڕەنگێکی بنەڕەتی دیاری بکەیت بە فەنکشنەکانی نەخشەی ڕەنگەکانمان:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}Bootstrap 4 بە فایلە گۆڕاوە تایبەتمەندە ناوەکییەکانمان خۆکارانە بکە و بە ئاسانی هەڵبژاردەکانی CSS جیهانی بە $enable-*گۆڕاوە نوێیەکانی Sass بگۆڕە. بەهای گۆڕاوێک سەرپێچی بکە و npm run testبەپێی پێویست لەگەڵیدا دووبارە کۆبکەرەوە.
دەتوانیت ئەم گۆڕاوانە بۆ هەڵبژاردە سەرەکییە جیهانییەکان لە _variables.scssفایلەکەماندا بدۆزیتەوە و بەپێی خواستی خۆت دروستی بکەیت.
| گۆڕاو | بەهاکان | وەسف |
|---|---|---|
$spacer |
1rem(بەپێی پێشوەختە)، یان هەر بەهایەک > 0 |
بەهای فەواصلی پێشوەختە دیاری دەکات بۆ دروستکردنی بە شێوەیەکی بەرنامەیی سوودمەندییەکانی فەواصلمان . |
$enable-rounded |
true(بەپێی پێشوەختە) یانfalse |
ستایلە پێشوەختە پێناسەکراوەکان border-radiusلەسەر پێکهاتە جیاوازەکان چالاک دەکات. |
$enable-shadows |
trueیان false(بەپێی پێشوەختە) |
ستایلە پێشوەختە پێناسەکراوەکان box-shadowلەسەر پێکهاتە جیاوازەکان چالاک دەکات. |
$enable-gradients |
trueیان false(بەپێی پێشوەختە) |
گرادێنتەکانی پێشوەختە پێناسەکراو لە ڕێگەی background-imageستایلەکانەوە لەسەر پێکهاتە جیاوازەکان چالاک دەکات. |
$enable-transitions |
true(بەپێی پێشوەختە) یانfalse |
s پێشوەختە پێناسەکراوەکان transitionلەسەر پێکهاتە جیاوازەکان چالاک دەکات. |
$enable-hover-media-query |
trueیان false(بەپێی پێشوەختە) |
بەکارنەهاتووە |
$enable-grid-classes |
true(بەپێی پێشوەختە) یانfalse |
دروستکردنی پۆلەکانی CSS بۆ سیستەمی تۆڕەکە چالاک دەکات (بۆ نموونە، .container, .row, .col-md-1, هتد). |
$enable-caret |
true(بەپێی پێشوەختە) یانfalse |
چالاککردنی توخمە ساختەکان caret لەسەر .dropdown-toggle. |
$enable-print-styles |
true(بەپێی پێشوەختە) یانfalse |
ستایلەکان بۆ باشکردنی چاپکردن چالاک دەکات. |
زۆرێک لە پێکهاتە و سوودمەندییە جیاوازەکانی بووتستراپ لە ڕێگەی زنجیرەیەک ڕەنگەوە دروست دەکرێن کە لە نەخشەی ساسدا پێناسە کراون. ئەم نەخشەیە دەتوانرێت لە ساسدا لوپ بکرێت بۆ ئەوەی بە خێرایی زنجیرەیەک یاسا دروست بکرێت.
هەموو ڕەنگەکان لە Bootstrap 4 بەردەستە، وەک گۆڕاوەی Sass و نەخشەی Sass لە scss/_variables.scssفایلەکەماندا بەردەستە. ئەمە لە بڵاوکراوە بچووکەکانی دواتردا فراوانتر دەکرێت بۆ زیادکردنی سێبەری زیادە، زۆر هاوشێوەی پالێتی خۆڵەمێشی کە پێشتر لەخۆمان گرتووە.
لێرەدا چۆن دەتوانیت ئەمانە لە ساسەکەتدا بەکاربهێنیت:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }هەروەها پۆلەکانی سوودمەندی ڕەنگ بەردەستە بۆ ڕێکخستن colorو background-color.
لە داهاتوودا ئامانجمان ئەوەیە نەخشە و گۆڕاوەکانی ساس بۆ سێبەری هەر ڕەنگێک دابین بکەین وەک چۆن لەگەڵ ڕەنگە خۆڵەمێشیەکانی خوارەوە کردوومانە.
ئێمە ژێرکۆمەڵێک لە هەموو ڕەنگەکان بەکاردەهێنین بۆ دروستکردنی پالێتێکی ڕەنگی بچووکتر بۆ دروستکردنی ڕەنگەکان، هەروەها وەک گۆڕاوەی ساس و نەخشەی ساس لە scss/_variables.scssفایلەکەماندا بەردەستە.
کۆمەڵەیەکی فراوانی گۆڕاوە خۆڵەمێشیەکان و نەخشەیەکی ساس لە scss/_variables.scssبۆ سێبەری خۆڵەمێشی یەکگرتوو لە سەرانسەری پڕۆژەکەتدا.
لەناو _variables.scss, گۆڕاوە ڕەنگاوڕەنگەکانمان و نەخشەی ساس دەبینیتەوە. لێرەدا نموونەیەک لە $colorsنەخشەی ساس دەخەینەڕوو:
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;زیادکردن، لابردنی، یان دەستکاریکردنی بەهاکان لەناو نەخشەکەدا بۆ نوێکردنەوەی چۆنیەتی بەکارهێنانیان لە زۆرێک لە پێکهاتەکانی تردا. بەداخەوە لەم کاتەدا هەموو پێکهاتەیەک ئەم نەخشەی ساس کەڵک ناگرێت. نوێکارییەکانی داهاتوو هەوڵ دەدەن بۆ باشترکردنی ئەم بابەتە. تا ئەو کاتە پلان دابنێ بۆ بەکارهێنانی ${color}گۆڕاوەکان و ئەم نەخشەیەی ساس.
زۆرێک لە پێکهاتەکان و سوودمەندییەکانی Bootstrap بە @eachلوپ دروستکراون کە لەسەر نەخشەی Sass دووبارە دەبنەوە. ئەمە بە تایبەتی یارمەتیدەرە بۆ دروستکردنی جۆرەکانی پێکهاتەیەک لەلایەن ئێمە $theme-colorsو دروستکردنی جۆرە وەڵامدەرەوەکان بۆ هەر خاڵێکی شکاندن. لەگەڵ خۆکارکردنی ئەم نەخشانەی ساس و دووبارە کۆمپایکردنەوە، بە شێوەیەکی ئۆتۆماتیکی گۆڕانکارییەکانت دەبینیت کە لەم لوپانەدا ڕەنگ دەدەنەوە.
زۆرێک لە پێکهاتەکانی Bootstrap بە رێبازی پۆلی بنەڕەتی-دەستکاریکەر دروستکراون. ئەمەش واتە بەشێکی زۆری ستایلەکە لە پۆلێکی بنەڕەتیدا (بۆ نموونە، .btn) لە کاتێکدا گۆڕانکارییەکانی ستایلەکە لە پۆلەکانی دەستکاریکەردا قەتیس کراون (بۆ نموونە، .btn-danger). ئەم پۆلە دەستکاریکەرانە لە $theme-colorsنەخشەکەوە دروست دەکرێن بۆ ئەوەی ژمارە و ناوی پۆلەکانی دەستکاریکەرەکانمان بەپێی خواستی خۆت دروست بکرێت.
لێرەدا دوو نموونە دەخەینەڕوو کە چۆن بەسەر $theme-colorsنەخشەکەدا لوپ دەکەین بۆ دروستکردنی دەستکاریکەر بۆ .alertپێکهاتەکە و هەموو .bg-*سوودمەندییەکانی پاشبنەمامان.
// Generate alert modifier classes
@each $color, $value in $theme-colors {
.alert-#{$color} {
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
}
}
// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}ئەم لوپانەی ساس تەنها لە نەخشەی ڕەنگاوڕەنگدا سنووردار نین، هەروەها. هەروەها دەتوانیت گۆڕانکاری وەڵامدەرەوەی پێکهاتەکانت یان سوودمەندەکانت دروست بکەیت. بۆ نموونە سوودمەندییەکانی ڕێکخستنی دەقی وەڵامدەرەوەمان وەربگرە کە ئێمە @eachلوپێک بۆ $grid-breakpointsنەخشەی ساس لەگەڵ پرسیارێکی میدیا تێکەڵ دەکەین.
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.text#{$infix}-left { text-align: left !important; }
.text#{$infix}-right { text-align: right !important; }
.text#{$infix}-center { text-align: center !important; }
}
}ئەگەر پێویستت بە دەستکاریکردنی $grid-breakpoints, گۆڕانکارییەکانت بۆ هەموو ئەو لوپانە دەگونجێت کە لەسەر ئەو نەخشەیە دووبارە دەبنەوە.
بووتستراپ ٤ نزیکەی دوو دەیان تایبەتمەندی تایبەتمەندی CSS (گۆڕاوەکان) لە CSS ی کۆکراوەی خۆیدا لەخۆدەگرێت. ئەمانە دەستڕاگەیشتنێکی ئاسان بە بەها بەکارهێنراوەکانی باو وەک ڕەنگەکانی تەوەرەکانمان، خاڵەکانی شکاندن و ستاکەکانی فۆنتە سەرەتاییەکان دابین دەکەن لەکاتی کارکردن لە پشکنەری وێبگەڕەکەت، سندوقی کۆد، یان نموونەسازی گشتی.
لێرەدا ئەو گۆڕاوانە دەخەینەڕوو کە ئێمە لەخۆیان دەگرین (تێبینی بکە کە the :rootis required). ئەوان لە _root.scssفایلەکەماندا جێگیرن.
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}گۆڕاوەکانی CSS نەرمییەکی هاوشێوەی گۆڕاوەکانی Sass پێشکەش دەکەن، بەڵام بەبێ ئەوەی پێویستی بە کۆکردنەوە هەبێت پێش ئەوەی خزمەتیان بە وێبگەڕەکە بکرێت. بۆ نموونە لێرەدا ئێمە فۆنت و شێوازی لینکی لاپەڕەکەمان بە گۆڕاوەکانی CSS ڕێست دەکەینەوە.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}هەروەها دەتوانن گۆڕاوەکانی خاڵی شکاندنمان لە پرسیارە میدیاییەکانتان بەکاربهێنن:
.content-secondary {
display: none;
}
@media (min-width(var(--breakpoint-sm))) {
.content-secondary {
display: block;
}
}