مجله خبری هاست ایران » طراحی و توسعه » آموزش Bootstrap 4؛ ساخت قالب تک صفحه‌ای یا one page
  • mag-telegram.jpg
  • landing96-300-420.jpg
توسعه وب طراحی و توسعه

آموزش Bootstrap 4؛ ساخت قالب تک صفحه‌ای یا one page

آموزش Bootstrap 4؛ ساخت قالب وب‌سایت تک صفحه‌ای یا one page

Bootstrap 4 با تغییرات زیاد و خصوصیات جدید به بازار آمده است. در این آموزش متوجه می‌شوید که ساخت قالب تک صفحه‌ای HTML با استفاده از Bootstrap 4 آلفا چقدر کار راحتی است. در این آموزش یاد می‌گیرید که چطور Bootstrap 4 را تنظیم کنید و چطور از برخی ویژگی‌های جدید آن استفاده کنید. همچنین می‌توانید ویدئوی این آموزش را روی یوتیوب مشاهده کنید:

در این مقاله موارد زیر را بررسی می‌کنیم:

  • دانلود فایل‌های بوت استرپ
  • تنظیم فایل‌های ضروری
  • نشانه‌گذاری پایه
  • کار با grids
  • Jumbotron
  • بعضی از کلاس‌های تایپوگرافی
  • کارت‌ها
  • tooltips بهبودیافته‌ی Bootstrap 4
  • جدول کلاس معکوس
  • فرم‌های پایه

قبل از شروع، مطمئن شوید که یک ویراستار کد مثل Sublime text و Notepad++ و کمی دانش کار با HTML و CSS را دارید.

منابع موردنیاز برای تکمیل آموزش ساخت قالب تک صفحه‌ای با bootstrap:

  • min.css
  • css (لازم است تا صفحه خالی را داخل پوشه css درست کنیم)
  • min.js
  • jQuery به‌وسیله Google’s Hosted library
  • فونت‌های Lato، Open Sans و Raleway Google
  • CDN) Font Awesome)
  • تعدادی عکس (می‌توانید همه تصاویر این آموزش را از اینجا دانلود کنید)

ساختار پوشه

ساختار پوشه

در این آموزش، ساختار پوشه شامل ۳ پوشه و یک فایل HTML خواهد بود:

Htmlبه‌عنوان فایل اصلی برای کل نشانه‌گذاری‌ها (markup) عمل می‌کند

پوشه imgبرای عکس‌ها

پوشه css- برای استایل صفحات (CSS)

پوشه js- برای جاوا اسکریپت

دانلود Bootstrap ۴

دو نسخه برای دانلود وجود دارد: نسخه کمپایل شده Bootstrap و نسخه فایل‌های سورس Bootstrap. می‌توانید فایل‌های سورس Bootstrap را از اینجا دانلود کنید.

دانلود Bootstrap 4

تنظیم فایل‌های ضروری

برای آموزش این قسمت، روی انتخاب فایل‌های ضروری تمرکز می‌کنیم که برای تمپلیت رسپانسیو تک صفحه‌ای نیاز داریم.


مقاله مرتبط: Bootstrap چیست؟


پس از دانلود، فایل‌های سورس Bootstrap را از حالت زیپ خارج کنید و فایل‌های زیر را داخل پوشه dist کپی کنید. می‌توانید این فایل‌ها را داخل پوشه css و js در پوشه بازشده dist  قرار دهید.

  • min.css
  • min.js

تنظیم فایل‌های ضروری bootstrap

به‌علاوه لازم است فایل tether.min.js را دانلود کنید یا از نسخه CDN نصب شده بر روی وب‌سایت Tether استفاده کنید تا بتوانید راهنماهای Bootstrap 4 Alpha را به کار ببرید. این فایل‌ها را داخل پوشه js پروژه‌ قرار دهید.

نشانه‌گذاری پایه

فایل HTML ما با <HTML5 <!DOCTYPE شروع می‌شود تا مشخص کند که فایل از چه زبان و نسخه‌ای استفاده می‌کند. سپس در قسمت <head> می‌توانیم تمام CSS، جاوا اسکریپت، لینک‌های فونت و عکس‌ها را قرار دهیم. برای اجرای این هدف، ممکن است بخواهید فایل‌های جاوا اسکریپت را در پایین فایل قرار دهید (درست قبل از بستن تگ </body> ).

ممکن است کدهای زیر را نیز اضافه کنیم تا Internet Explorer را مجبور کنیم حالت رندر خود و مشخصه‌ی متا نمایشگر را برای مشاهده‌ی رسپانسیو ارائه دهد.

برای شروع، از تمپلیت زیر برای شروع HTML قالب رسپانسیو تک صفحه‌ای استفاده خواهیم کرد. توجه کنید که برخی از لینک‌های hosted library مثل فونت Font Awesome و فونت‌های Google در کد زیر اضافه شده است.

نحوه کار با grids

سیستم grid بوت استرپ ۴ می‌تواند ۱۲ ستون داشته باشد و می‌توانید اندازه ستونی که می‌خواهید در اندازه‌های مختلف نمایشگر نشان دهید را انتخاب کنید. medium grid بوت استرپ۴ را با کلاس‌های زیر چک کنید.

نحوه کار با grids

در این آموزش خیلی درباره‌ی grid system صحبت نمی‌کنیم، هرچند مستقیماً سراغ مقیاس ستون خواهیم رفت که برای ساخت قالب تک صفحه‌ای استفاده می‌شود. ابتدا همه‌چیز را داخل یک div کلاس wrapper بپوشانیم، سپس هر بخش از فایل را از طریق تگ برش تقسیم می‌کنیم و قرار دادن classes specifically برای هر یک می‌دهیم.

سپس کلاس کانتینر bootstrap را برای پوشاندن عناصر و محتویات سیستم شبکه‌ای آن اضافه می‌کنیم. ما از یک کانتینر تثبیت‌شده استفاده خواهیم کرد. یعنی زمانی که نمایشگر تغییر می‌کند، عرض آن دست‌نخورده باقی می‌ماند تا زمانی که به یک نقطه انفصال مشخص برخورد کند.


مقاله مرتبط: نصب Bootstrap و سیستم Bootstrap Grid


توجه کنید که یک div برای container در بخش Heading قرار ندادیم چون می‌خواهیم آن را به تمام اندازه‌های مرورگر بسط دهیم.

در ادامه، لازم است ردیف‌ها و ستون‌ها را به divهای container اضافه کنیم. هدف اصلی ردیف‌ها این است که ستون دارای محتوا را بپوشانند. بیایید ردیف‌ها و ستون‌ها را به همراه بعضی کلاس‌های اضافی بیفزاییم.

استفاده از Jumbotron

Jumbotron پیام‌های بازاریابی و فراخوانی را ترسیم می‌کند. بوت استرپ  (Jumbotron(hero unit  یک بنر بزرگ شبیه بخشی با متن بزرگ و پوشش پس‌زمینه خاکستری روشن است که با جعبه‌ای که یک شعاع مرزی در آن است پوشیده می‌شود.

برای درست کردن یک Jumbotron لازم است کلاس Jumbotron را به یک عنصر div اضافه کنید سپس تگ‌های Headings را به آن بیفزایید. ما در تمپلیت قصد داریم کلاس Jumbotron را استفاده کنیم؛ اما ما چگونگی شکل و ظاهر آن را سفارشی می‌کنیم. برای اینکه تمپلیت جدیدتری درست کنیم قصد داریم از jumbotron برای ایجاد یک افکت جانشین‌سازی پار الکس استفاده کنیم.

کد زیر را داخل قسمت سر صفحه اضافه کنید.

توجه: همچنین یک کلاس jumbotron-fluid برای رسپانسیو بودن آن اضافه کردیم.

کلاس‌های تایپوگرافی پایه

بوت استرپ کلاس‌های خاصی برای نمایش Headings‌ دارد که برای برجسته‌تر کردن Heading‌های معمولی طراحی شده‌اند. اساساً ۴ اندازه یا کلاس نمایش Headings‌ وجود دارد:

  • display-1
  • display-2
  • display-3
  • display-4

هرچه شماره بزرگ‌تر باشد یعنی اندازه متن بزرگ‌تر است. در مثال بالا (بخش heading)، از display-2 داخل تگ h2 استفاده کرده‌ایم که متن را در سطح اندازه‌ی دوم ارائه می‌کند. حالا بیایید کد زیر را برای قسمت «درباره ما» اضافه کنیم.

چیز خاصی در این کد نیست؛ فقط یک div با کلاس‌هایی همراه تصاویر و تگ Headings داخلی اضافه کردیم؛ اما به تگ <mark> توجه کنید. این یک عنصر HTML5 است که متن را نشان‌دار شده یا برجسته نمایش می‌دهد تا روی یک کلمه یا جمله تأکید کند. اساساً Bootstrap رندرهای خودش را روی این عناصر دارد. تصویر زیر را نگاه کنید.

 

درباره‌ی کلاس‌های تایپوگرافی در مقالات جداگانه بیشتر بحث خواهیم کرد.

درست کردن کارت‌ها

کارت‌ها کامپوننت‌های جدیدی در بوت استرپ ۴ آلفا هستند. آن‌ها به‌عنوان یک کانتینر (container) با استایل‌های سبک به‌جای wells، پنل‌ها و thumbnails کار می‌کنند. آن‌ها از انواع گزینه‌های استایل مثل تنظیم، رنگ‌ها، Heading و چیزهای دیگر پشتیبانی می‌کنند.

برای درست کردن یک کارت به‌راحتی کارت و کلاس‌های card-block را به یک div اضافه کنید. برای عنوان آن کلاس card-title و برای متن معمولی card-text را اضافه کنید.

کپی-پیست کنید و کد زیر را به نشانه‌گذاری‌تان در بخش «درباره ما» درج کنید.

افزودن Tooltips

Bootstrap 4 Alpha به یک library ۳۰ قسمتی به نام tether نیاز دارد تا بتواند راهنماها را نشان دهد. برای استفاده از راهنماها به‌سادگی tether.min.js را درست قبل از فایل bootstrap.js  قرار دهید.

برای استفاده از راهنماها از طریق tether، به‌راحتی یک لینک خصیصه‌ی data-toggle=”tooltip” ایجاد کنید و متن راهنما را داخل خصیصه‌ی عنوان قرار دهید. کد نمونه‌ی زیر را چک کنید.

در مثال بالا از تگ‌های anchor استفاده کرده‌ایم اما راهنماها فقط محدود به این نیستند. می‌توانید آن را در دکمه‌ها و div ها استفاده کنید. برای مقداردهی اولیه به تمام راهنماها در یک صفحه لازم است کد جاوا اسکریپت را زیر لینک سورس tether.min.js اضافه کنید تا راهنماها به کمک ویژگی انتقال اطلاعات (data-toggle) خود انتخاب شوند.

می‌توانید به‌راحتی از کد زیر استفاده کنید. بیایید آن را عملاً در بخش خصوصیاتمان ببینیم. کد زیر را داخل کلاس col-lg-12 کپی-پیست کنید.

جدول کلاس پیشوند “Inverse”

Bootstrap 4 Alpha یک کلاس prefix –inverse جدید اضافه کرده است که خودش رنگ جدول را معکوس می‌کند. کلاس table-inverse را اضافه کنید تا خصیصه‌های آن را فعال کنید. بیایید این را در عمل ببینیم. کد را پایین در قسمت خصیصه‌ها، درست بعد از کد بالا کپی کنید.

همان‌طور که می‌بینید در اینجا چیز خاصی وجود ندارد فقط یک جدول معمولی است اما Bootstrap 4 استایل ها را به کار خواهد برد. تصویر زیر را ببینید.

prefix –inverse bootstrap

فرم‌های Bootstrap 4 

فرم‌های Bootstrap 4  رسپانسیو هستند که روی نمایشگرها با استفاده از استایل‌های پیش‌فرض display: block و width: ۱۰۰% به‌صورت عمودی انباشته شده‌اند. این به کاربر روی تمام نمایشگرها دید بهتری می‌دهد اما هنوز هم می‌تواند سفارشی شود.

برای استفاده از فرم Bootstrap به‌راحتی کلاس form-control را روی تمام تنظیمات فیلدها مثل ورودی‌ها، text-area و غیره اضافه کنید همچنین لازم است تگ <fieldset> را همراه کلاس form-group داخل آن اضافه کنید.

بیایید این عمل را ببینیم. کدی را که در قسمت تماس با ما، تنظیم کرده‌اید با کد زیر جایگزین کنید.

توجه کنید که در اینجا برخی کلاس‌های پشتیبانی alert-success را اضافه کردیم تا به کاربر اطلاع دهد که فرم با موفقیت ارسال‌شده است.

فوتر و آیکون‌ها

بوت استرپ ۳، ۱۲ عدد کامپوننت قابل‌استفاده مجدد glyphicons را ارائه می‌کند که برای اهداف مختلف می‌تواند به کار رود. در Bootstrap 4 Alpha این خصیصه در نظر گرفته نشده است.

برای بخش پانویسمان قصد داریم کلاس‌های آیکون فونت Awesome ((https://fortawesome.github.io/Font-Awesome/ را برای آیکون‌های شبکه‌های اجتماعی قرار دهیم.

با تمام کدهایی که تابه‌حال نوشته‌ایم. دقیقاً همان خروجی که در شکل زیر می‌بینید را خواهید داشت.

فوتر و آیکون‌ها وب‌سایت تک صفحه‌ای

سفارشی سازی وب‌سایت تک‌ صفحه‌ای

تا الان هر چیزی را روی HTML مان تنظیم کرده‌ایم، نیاز داریم استایل‌ها را سفارشی کنیم تا تمپلیت یک صفحه‌ای ما عالی به نظر برسد. custom.css را باز کنید و استایل‌های عمومی زیر را برای کلاس‌ها و عناصر پایه‌ای‌مان اضافه کنید.

سپس، برخی استایل‌های خود را برای افکت پارالکس از طریق parallax و کلاس parallax-pattern-overlay  تنظیم می‌کنیم.

برای کلاس heading به تنظیم خاصی با حداکثر عرض ۹۶۰ پیکسل نیاز داریم و سپس به هر تگ Headings کمی font-size و استایل‌های بیشتر برای تأکید بر هرکدام می‌دهیم.

سپس بیایید کمی استایل به فرم‌هایمان اضافه کنیم. فرم‌های پیش‌فرض Bootstrap مقدار نرمالی برای لایه گذاری (padding) و یک شعاع مرزی خوب دارند اما برای تمپلیت رسپانسیو یک-صفحه ای‌مان قصد داریم یک طراحی فلت به کار ببریم. استایل زیر را کپی-پیست کنید.

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

در آخر، برخی عناصر را روی نمایشگر ۷۶۸ پیکسلی از طریق کوئری‌های رسانه‌ای به‌ویژه با بعضی از اندازه‌های ستون‌ها سفارشی می‌کنیم تا برای این سایز از صفحه‌نمایش‌ها آن را خوش‌ظاهر کنیم.

نتیجه‌گیری

برای سفارشی کردن طراحی یا کدهایی که در بالا آموزش داده شد، می‌توانید تغییرات مد نظر خود را اعمال کنید. اگر می‌خواهید درباره Bootstrap 4 بیشتر بدانید همیشه می‌توانید به وب سایت Bootstrap  مراجعه کنید.

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه