آموزش طراحی سایت دیجیکالا با BootStrap 4

معرفی بوت استرپ ۴ و امکانات جدید آن

بعد از نزدیک به ۲ سال ارتقا و کدنویسی نسخه بوت استرپ ۴ توسط Mark otto و Jacob Thornton منتشر شد. نسخه ای که تغییرات اساسی به ویژه در ریسپانسیو سایت داشته است. درBootstrap 4 سایزبندی ریسپانسیو تغییرات اساسی داشته و بازه ۰ تا 576 پیکسل برای گوشی های همراه به آن اضافه شده که مشکلات بسیاری از طراحان وبسایت را برطرف خواهد کرد. اگر تاکنون با این فریم ورک و قابلیت های آن آشنا نشدید پیشنهاد میکنیم از این لینک استفاده کنی پس از آن به ادامه مطالعه این دوره بپردازید.

بررسی نسخه های پیشین ‌Bootstrap

اولین نسخه بوت استرپ که ۴ سال پیش منتشر شد، امکانات کمی برای ریسپانسیو کردن همراه خود داشت و در طراحی آن از سایه ها استفاده شده بود. این نسخه چندان شناخته شده نبود و استقبال زیادی از آن نشد ولی بستری مناسب برای پیشرفت و ارایه نسخه های جدید فراهم کرد.

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

انتشار بوت استرپ ۳ با موج عظیمی از رضایت کاربران و رویکرد مثبت طراحان همراه بود و به قدری همه گیر شد که در حال حاضر ۱.۵ درصد از سایت های دنیا با این فریم ورک طراحی شده اند. این ارقام زمانی جالب تر میشود که سایت های پربازدید و مطرح را بررسی کنیم زیرا ۱۳.۵ درصد از سایت هایی که رنک الکسا آنها زیر ۱۰ هزار است از فریم ورک بوت استرپ در طراحی خود استفاده کرده اند.برای یادگیری این نسخه میتونی از این لینک استفاده کنی.

با ورود بوت استرپ ۴ به طوری کلی اینترنت اکسپلورر از لیست مرورگرهایی که با این فریم ورک انطباق دارند خارج شد زیرا این مرورگر از دستورات Flexbox پشتیبانی نمیکند و بستر اصلی نسخه ۴ براساس Flex نوشته شده است. میتوان گفت نسخه جدید بیشتر از آنکه ریسپانسیو باشد انعطاف پذیر است.

علاوه براین سایز بندی Media Query ها در نسخه جدید کاملا تغییر کرده و در بازه های ۵۷۶، ۷۶۸، ۹۹۲ و ۱۲۰۰ پیکسل تقسیم بندی شده است. این تقسیم بندی جدید به شما کمک میکند مرز مشخصی میان موبایل، تبلت و دسکتاپ داشته باشید.

طراحی سایت انعطاف پذیر چیست؟

عبارت Flexbox که مخفف Flexible Box است را میتوان از آخرین دستاوردها کنسرسیوم جهانی وب دانست که در دستورات CSS3 اضافه شده است. این سیستم جدید به شما اجازه میدهد انعطاف بیشتری در ستون بندی محتوا داشته باشید. در بوت استرپ ۳ شما یک ساختار ۱۲ ستونه در اختیار داشتید که هرکدام عرض یکسانی داشتند و فاصله میان آنها ۱۵ پیکسل بود، با ترکیب چند ستون میشد باکس بندی های مختلفی ایجاد نمود ولی امکان نداشت که شما ۵ یا ۷ المان با عرض مساوی در صفحه ایجاد کنید. بعنوان مثال در طراحی سایت شرکتی و نمایش لوگوی مشتریان شما باید همیشه از تعداد زوج برای مشتریان استفاده میکردید.

ولی طراحی انعطاف پذیر امکاناتی ایده آل برای ستون بندی و چیدمان المان ها در اختیار شما قرار میدهد. چند ویژگی مهم Flex به شرح زیر است:

تعداد المان های موجود در یک ردیف محدود نیست و براساس عرض هر کدام چیدمان انجام میشود. همچنین فاصله میان المان ها و عرض هرکدام در یک ردیف براساس عرض صفحه و تعداد آنها محاسبه میشود و عملا شما در هر سایزی نمایش صحیح خواهید داشت.

میتوان ترتیب چیدمان محتوا را به راحتی تغییر داد. چیدمان المان ها در راستای عمودی و محل قرارگیری آنها نسبت به هم به راحتی قابل انجام است.

فضای اختصاصی داده شده به هر المان قابل تعیین بوده و فضای باقی مانده به صورت مساوی بین سایر المان ها تقسیم میشود.

اینها تنها نمونه ای از امکانات Flex در طراحی سایت بود که همگی به خوبی در بوت استرپ ۴ به کار گرفته شده اند. استفاده از این ساختار جدید و البته grid که نسخه دو بعدی همین Flex محسوب میشود به شما امکان میدهد سایت هایی پیچیده تر و مدرن تر بسازید.

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

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

پیش نیاز این دوره : دوره آموزش BootStrap 4

آموزش طراحی سایت دیجیکالا با BootStrap 4