خطای جاوا اسکریپت در bootstrap
پروژهی Awesome Bootstrap
Gulp #3
نصب bower
- ساده کردن تعریف وابستگیهای منابع پروژه با تعریف یک فایل bower.json
- نیازی به commit کردن واستگیهای پروژه نیست.
- با ذکر ورژن مربوط به وابستگی یا محدودهی قابل قبول برای آن، به روز رسانی منابع به سادگی با یک دستور انجام میشود.
- وابستگی های وابسته به یک منبع را نیز نصب میکند. برای مثال زمانیکه بوت استرپ را به عنوان وابستگی پروژه تعریف میکنیم، وابستگی آن یعنی jquery را چون در فایل bower.json بوت استرپ تعریف شدهاست، به صورت خودکار دانلود میکند.
- در نهایت افراد هم تیمی یا توسعه دهندگان دیگر به راحتی با زدن دستور bower install تمام وابستگیهای پروژه را میتوانند نصب کنند.
sudo npm install -g bower bower init
bower install bootstrap-sass-official --save bower install fontawesome --save bower install bootstrap-rtl --save
نصب پلاگینهای مورد نیاز gulp
sudo npm install gulp gulp-ruby-sass gulp-notify gulp-bower --save-dev
نوشتن تسکها برای گالپ
var gulp = require('gulp'), sass = require('gulp-ruby-sass'), notify = require('gulp-notify'), bower = require('gulp-bower');
var config = { sassPath = './resources/sass', bowerDir = './bower_components' }
// create a task to do bower install gulp.task('bower', function() { return bower() .pipe(gulp.dest(config.bowerDir)) });
// Copy js files to public folder gulp.task('js', function() { return gulp.src([config.bowerDir + '/bootstrap-sass-official/assets/javascripts/bootstrap.min.js', config.bowerDir + '/jquery/dist/jquery.min.js' ]) .pipe(gulp.dest('./public/js')); }); // Copy fontawesome icons to public/fonts folder gulp.task('icons', function() { return gulp.src(config.bowerDir + '/fontawesome/fonts/**.*') .pipe(gulp.dest('./public/fonts')); });
gulp.task('css', function() { return sass(config.sassPath + '/style.scss', { // Our coustom sass style: 'compressed', // minify css loadPath: [ // load paths to easy use import in resources/sass './resources/sass', config.bowerDir + '/bootstrap-sass-official/assets/stylesheets', // bootstrap sass files config.bowerDir + '/fontawesome/scss' // awesome icons sass files ] }) });
gulp.task('css', function() { return sass(config.sassPath + '/style.scss', { // Our coustom sass style: 'compressed', // minify css loadPath: [ // load paths to easy use import in resources/sass './resources/sass', config.bowerDir + '/bootstrap-sass-official/assets/stylesheets', // bootstrap sass files config.bowerDir + '/fontawesome/scss' // awesome icons sass files ] }) .on('error', notify.onError(function(error) { return 'Error: ' + error.message; })) .pipe(gulp.dest('./public/css')); });
// Rerun the task when a file changes gulp.task('watch', function() { gulp.watch(config.sassPath + '/**/*.scss', ['css']); });
// Run this task with : gulp // OR gulp default gulp.task('default', ['bower', 'icons', 'css','js']);
مخزن گیت هاب
روش کار مون اینطوریه که توی اسمبلی که میخواهیم فایلهاش روی وب قابل دسترس باشند، یک attribute تعریف میکنیم، توی این تعریف، پسوند فایلهای مجاز، پیشوند نشانی شون و بعضی چیزای دیگه رو تعیین میکنیم
در مرحله بعدی، توی فایل web.config یک هندلر اضافه میکنیم و نهایتا فایلی رو که میخواهیم آدرس بدیم، با استفاده از یک تابع خاص آدرس میدیم، نهایتا نشانی به صورت زیر تولید میشه:
/Dynamic/Farayan.Web.JQuery/jquery-1.5.js
اگر مایل باشین، میتونم فایل هاش رو براتون توی همین سایت بذارم، از دات نت هم بهتره!
تنظیمات IIS برای توزیع فونتهای وب
- حجم فونتهای WOFF2 از WOFF (نسخه اول)، 20 درصد کمتر است.
- شاید مرورگر نتواند فونتهای WOFF2 را بدلیل عدم نگاشت آنها در IIS دریافت نماید و از سایر فونتهای تعریف شده استفاده نماید اما در هر درخواست ارسالی به سرور خطای 404 رخ میدهد که باعث اتلاف پهنای باند و رفت و برگشتهای بیهوده به سرور میشود.
- درخواست منابعی که با موفقیت انجام میشوند مرورگر از ارسال مجدد آنها خودداری میکند ولی درخواستهای 404 سمت مرورگر کش نمیشوند و در هر درخواست ارسال میگردند، بنابراین جلوگیری از این اتفاق برای منابعی که در هر بارگذاری صفحه فراخوانی میشوند مانند favicon.ico الزامی است.
Typography در طراحی وب
- Arial
- Courier New
- Helvetica
- Times New Roman
- Trebuchet
- Georgia
- Verdana
3. کد جاوا اسکریپت خود را تولید کنید (تمام سرویس دهندگان این امکان را پیاده سازی کرده اند).
4. قطعه کد جاوا اسکریپت تولید شده را، در قسمت <head> فایل (Layout.cshtml (Razor_ یا (Site.Master (ASPX کپی کنید.
5. CSS Selectorهای لازم برای فونت مورد نظر را تولید کنید.
6. کد css تولید شده را در فایل Site.css کپی کنید. در مثال جاری فونت کل اپلیکیشن را تغییر میدهیم. برای اینکار، خانواده فونت "bistro-script-web" را به تگ body اضافه میکنیم.
نکته: فونت cursive بعنوان fallback تعریف شده. یعنی در صورتی که بارگذاری و رندر فونت مورد نظر با خطا مواجه شد، از این فونت استفاده میشود. بهتر است فونتهای fallback به مقادیری تنظیم کنید که در اکثر پلتفرمها وجود دارند.
همین! حالا میتوانیم تغییرات اعمال شده را مشاهده کنیم. بصورت پیش فرض قالب پروژهها از فونت "Segoe UI" استفاده میکنند، که خروجی زیر را رندر میکند.
استفاده از فونت جدید "Bistro Script Web" وب سایت را مانند تصویر زیر رندر خواهد کرد.
همانطور که میبینید استفاده از فونتهای وب بسیار ساده است. اما بهتر است از اینگونه فونتها برای کل سایت استفاده نشود و تنها روی المنتهای خاصی مانند سر تیترها (h1,h2,etc) اعمال شوند.
جزئیات تغییرات در نسخه جدید Bootstrap 3
فی المثل برای کلیه المانهای فرم میبایست از کلاس form-control استفاده شود و بدون آن، استایل پیشفرض بوت استرپ به المانهای textbox، combobox، button و ... اعمال نمیشود. استفاده از class selectorها بجای element selectorها موجب افزایش حجم کدهای نوشته شده میشود.
علاوه بر آن در MVC با استفاده از Scaffolder هایی که از Html.EditorFor استفاده میکنند، با توجه به عدم پشتیبانی از HtmlAttributes در متد فوق الذکر، کار کمی دشوار میشود.
همچنین در برخی از مؤلفههای Bootstrap تغییرات صورت گرفته آنچنان اساسی است که بجای ارتقای ورژن، میبایست کل کدهای Viewها مجدداً تولید گردد. از جمله این تغییرات میتوان navbar را مثال زد که در نسخه 3 آن، دیگر از المانهای sibling پشتیبانی نشده و المانها میبایست nested (تودرتو) تعریف شوند. (به دلیل تغییر خصوصیت display از inline-block به block) و موارد بسیاری از این دست.
تقریباً هر کدی که با بوت استرپ 2 تولید شده دیگر قابل استفاده نبوده و دور ریختنی است.
شروع به کار با بوت استرپ 4
1) MahdiMajidzadeh/bootstrap-v4-rtl
متاسفانه اصلا برای یک کار رسمی مناسب نیست و منوهای آن به هم ریختهاست. list-group آن در حالت flush، کل عرض یک card را پر نمیکند و جداول آن نیز به همین صورت است. کامپوننت bread-crumb آن محل قرارگیری /های نامناسبی دارد. همچنین با آخرین نگارش بوت استرپ 4.1.3 سازگار نیست و از آن کمی عقب است و برای کار با آن، باید دقیقا همین بستهی ثالث را دریافت و اضافه کنید و مستقل از خود بوت استرپ اصلی نیست. اما به همراه یک بستهی npm مخصوص به خود است که یک مزیت به شمار میرود. مجوز آن، در مخزن کد Github آن ذکر نشده، اما در صفحهی npm آن MIT ذکر شدهاست.
یک نمونه خروجی آن:
2) DediData/Bootstrap-RTL
به نظر یک پروژهی خاتمه یافتهاست. با نگارش بوت استرپ 4.1.3 سازگار نیست و برای نگارش بتای آن تهیه شدهاست.
3) GhalamborM/bootstrap4-rtl
این پروژه، روش بهتری را نسبت به بستههای راست به چپ موجود، انتخاب کردهاست. در اینجا شما بوت استرپ اصلی را با آخرین نگارش آن به صورت مستقل دریافت، نصب و تنظیم میکنید. سپس ذیل آن کلاسهای راست به چپ این بستهی ثالث را اضافه میکنید.
مجوز GPL، برای اینکار انتخاب شدهاست. متاسفانه یک چنین مجوزی در تضاد با مجوز MIT بوت استرپ اصلی است. مجوز GPL یعنی کار مشتق شدهی از آن نیز باید سورس باز شود و قابل استفادهی در پروژههای تجاری غیر سورس باز نیست.
همچنین متاسفانه به صورت یک بستهی npm نیز ارائه نشدهاست و باید آخرین نگارش آنرا از GitHub به صورت مستقیم دریافت کنید.
با تمام این اوصاف، مشکلات ذکر شدهی مورد اولی که بررسی شد، در این نگارش وجود ندارند و بهترین خروجی را دریافت خواهید کرد:
4) PerseusTheGreat/bootstrap-4-rtl
روش راست به چپ سازی این نگارش نیز مانند حالت اولی است که بررسی شد و باید بستهی مستقل آنرا دریافت و استفاده کنید و به عنوان یک مکمل مطرح نیست. همچنین به همراه بستهی npm نیز ارائه نشدهاست و تا این تاریخ، باید آخرین به روز رسانیهای آنرا از همان آدرس GitHub آن مستقیما دریافت کنید. البته مزیت آن، به روز رسانی هفتگی آن است. همچنین مجوز MIT این بسته را نیز تغییر ندادهاست.
خروجی آن با خروجی بستهی سومی که معرفی شد، تقریبا یکی و مناسب است:
npm install @ghalamborm/bootstrap4-rtl
پ.ن.
این روزها ارائهی یک کتابخانهی جاوا اسکریپتی و یا CSS ای بدون بستهی npm متناظر با آن، ناقص به شمار میرود.