آموزش به روز رسانی bootstrap 4 در phoenix

bootstrap

#1

با درود خدمت شما مطمئنن آخرین نسخه bootstrap در طراحی شما می تواند کارایی بهتری داشته باشد و شما را در طراحی سایت تواناتر نماید به همین ترتیب بنده سعی کردم با آموزش های موجود اینترنت و همینطور تجربه شخصی خودم این آموزش رو به زبان فارسی برگردونم

سورس آموزش از لینک زیر می باشد و یک نکته کوچک :

مرحله اول:

وارد پروژه فونیکس شده و به پوششه assets برید

مرحله دوم:

حالا زمان این است که کامند های زیر را به ترتیب در این مسیر انجام بدهید .

npm install --save-dev sass-brunch
npm install --save font-awesome
npm install --save copycat-brunch
npm install --save jquery
npm install --save bootstrap
npm install --save tether (bootstrap dep)
npm install --save popper.js (bootstrap dep)

مرحله سوم:

شما باید در این مرحله این آدرس را ایجاد نمایید

assets/static/fonts

نکته : این مسیر به صورت خودکار ایجاد نمی گردد پس حتما باید یا در ترمینال یا به صورت دستی در محیط گرافیکی ساخته شود

مرحله چهارم:

حالا زمانش هست که شما بیایید و دستور touch .gitkeep را در مسیر assets/static/fonts بزنید توجه کنید اگر این مورد انجام شه این فایل شناخته نمی شود .

مرحله پنجم:

قبل از هرچیزی شما می تونید برای اطلاعات بیشتر به لینک http://brunch.io/#documentation مراجعه کنیددر همون مسیر assets شما باید فایل brunch-config.js‍ رو باز کنید وقتی باز کردید اول سر گروه files‍ رو پیدا کنید که فکر می کنم اویل فایلتون باشه و بعد توش بیایید stylesheets پیدا کنید و تغییرش بدید به کد زیر

stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["priv/static/css/app.scss"]
      }
    },

اگر توجه کرده باشید یک خطی تقریبا اضافه شد به کد های شما

مرحله ششم:

حالا زمانش هست که دنبال سرگروه plugins بگردید و اون رو به روز رسانی کنید

plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
      mode: 'native',
      options: {
        includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // Tell sass-brunch where to look for files to @import
        precision: 8 // Minimum precision required by bootstrap-sass
      }
    },
    copycat: {
      "fonts" : ["static/fonts", "node_modules/font-awesome/fonts"],
      verbose : false, //shows each file that is copied to the destination directory
      onlyChanged: true //only copy a file if it's modified time has changed (only effective when using brunch watch)
    }
  },

حالا قسمت پلاگین به روز رسانی شد و باید به مرحله بعدی بریم

مرحله هفتم :

در اینجا نیاز هست سرگروه paths رو پیدا کنید و اون رو تغییر بدید به کد زیر

paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor","scss", "fonts"],
    // Where to compile files to
    public: "../priv/static"
  },

مرحله هشت:

در آخرین مرحله این فایل شما باید در آخر این فایل npm رو به روز رسانی کنید به شرح زیر

npm: {
    enabled: true,
    globals: { // Bootstrap's JavaScript requires both '$' and 'jQuery' in global scope
      $: 'jquery',
      jQuery: 'jquery',
      Tether: 'tether',
      Popper: 'popper.js',
      bootstrap: 'bootstrap', // Require Bootstrap's JavaScript globally
    }
  }

مرحله نهم:

حالا نیاز هست به مسیر web/static/css/app.css برید و اون رو تغییر نام بدید به app.sass

مرحله دهم:

حالا زمانش هست که فایل تغییر نام داده شده بالا را باز کنید و در آن دو خط زیر را قرار بدهید

@import 'font-awesome';
@import 'bootstrap';

شما در ۹ مرحله بالا که بر طبق گفته های اون لینک مرجع این آموزش بود ۹۹ درصد مسیر را آمدید ولی من یک مشکلی در این پست دیدم که گفته نشده بود یا من توجه نکردم حذف فایل phoenix.css در همان مسیر app.css باعث می شود کد های بوتسترپ شما کار کند . بخاطر اینکه در آن فایل کد های بوتسترپ سفارشی شده نسخه قبل بوده و باعث تداخل می شود

شما با ۱۰ مرحله توانستید به روز رسانی را انجام بدهید .

نکته : این آموزش بر اساس npm می باشد و شما می توانید از cdn خود bootstrap استفاده کنید

پست به حالت دانشنامه در می آید اگر مشکلی پیدا کردید لطفا در این مسیر همراهی نمایید


ویدیو آموزش html , css , bootstrap
#2

آموزش خوبی بود ممنون،
از فریمورک های مدرنتر و جدیدتر مثل materialize یا bulma هم استفاده کردی؟
راستش من خیلی وقته bootstrap رو کنار گذاشتم و ازmaterial design و materialize استفاده میکنم، اما حالا قصد دارم توی پروژه از bulma استفاده کنم چون خیلی ساده و سبکه، گفتم شاید کار کرده باشی و نظر بدی


#3

منم خیلی میپسندم :+1:


#4

تشکر ازت توماج عزیز من بیشتر مترجم بودم تا سازنده آموزش .

به نظرم materialize یک ترند فشن طراحی سایتی بود که امسال زیاد صحبتی ازش نیست . جز اینکه بخوایم برخی از کاستوم های اون رو برای انیمیشنش اونم بر اساس علاقه شخصی استفاده کنیم. به همین منظور طراحی هایی که از گرافیست می گیرم چون خبری از موارد مربوط به این کتابخونه css نیست منم ازش استفاده نمی کنم ولی در گذشته چندین باری استفاده کردم البته روی پروژه ای که بوتسترپ بوده.

به نظرم هیچ چی جای bootstrap نمی گیره برای ریسپانسیو سازی اون . الهام بخش خیلی از کتابخونه های جدید بود فقط در زمینه امنیمشن وارد نشد که واقعا جزو هدفش نبود ولی برای پاسخگو کردن صفحات وبسایت خیلی خوبه . من در خیلی از موارد حتی از کامپوننت هایی که js داره هم استفاده نمی کنم فقط css اون رو cdn استفاده می کنم

برای من سواله چرا bulma شما رو جذب کرده ؟ چه چیزی داره؟ مثلا شما از بوتسترپ ۴ استفاده نکنید بگید این باید در پروژه ام باشه ؟


#5

می‌تونه سلیقه ای هم باشه بوت استراپ به نظرم خیلی بی روحه :roll_eyes:


#6

واقعیت امر یک روزی به طرح های مینمال می گفتن بی روح . یک روزی ما مجبور بودییم برای مشتری کتف های سایت رو با گل و بلبل ببریم که خوشش بیاد . اسلاید شو های بزرگ داشتن هدر . هرچی شلوغ تر بهتر ولی الان چطور… به نظرم این برنامه نویس نیست که تصمیم می گیره چی باشه اینجا نقطه و خط قرمز گرافیست است


#7

خیلی قدیمی شده، با تکنولوژی های js هم خیلی مشکل داره. من materialize و ترجیه میدم


#8

:joy::joy::joy::joy::joy::joy:
یادمه، تازه وقتی مد بود که ماه و ستاره دنبال کرسر موس راه بیفته خیلی خنده دارتر بود. اون زمان یه عده متوحم هم بود که ته تهش میتونستن با clone cd کار کنن، بعد یه سایت گل و بلبلی هم داشتن که پر از چرندیات بود و حتی یه حرف درست توش پیدا نمیشد. اسم خودشونم گذاشته بودم بر ترین تیم امنیتی ایران.
خیلی خنده دار بود، هم خودشون هم حرفاشون. به وبمسترها پول میدادن که صفحه دیفیس اونا رو بزارن توی سایت هاشون بعد بگن توسط تیم امنیتی … هک شد.
دوران عجیبی بود، هنوزم از این موارد هست اما به شکل های دیگه


#9

وقتی اولین بار ماه و ستاره کنار موس دیدم ذوق مرگ شدم :slight_smile: فکر کنم ۱۱ سالم اینا میشد :slight_smile: