درخواست پیش فاکتور

آموزش Bootstrap 4 بر پایه یک پروژه عملی – قسمت دوم

  • ۶ دی ۱۳۹۶
  • 491 نفر
  • یک دیدگاه
  • وحید عظیمی
 
1 Star2 Stars3 Stars4 Stars5 Stars

آموزش Bootstrap 4 : در قسمت قبلی از آموزش بوتسترپ ۴ , نحوه دانلود و نصب بوت استرپ و ساختار فایل ها و پوشه های یک قالب واکنشگرا رو یاد گرفتیم و ایجاد کردیم. در این قسمت از آموزش بوتسترپ ۴ به مباحث بعدی یعنی نشانه گذاری و شبکه بندی و … میپردازیم. با ما همراه باشید.

آموزش Bootstrap 4

آموزش Bootstrap 4 : نشانه گذاری مقدماتی

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

HTML
توجه دارید که در کد بالا ما فایل های bootstrap.min.css رو که در قسمت قبلی آموزش وارد فولدر css قالبمون کرده بودیم رو فراخوانی کردیم. همچنین فایل های فونت (مثل font awsome) رو هم فراخوانی کردیم.

به علاوه, میتونیم با اضافه کردن کد زیر, اینترنت اکسپلورر رو مجبور به رندر کردن صفحه در حالت واکنشگرا بکنیم (درواقع اون رو مجبور کنیم که صفحه ی ما رو به صورت واکنشگرا نمایش بده).

HTML
برای شروع, ما از قالب زیر به عنوان سند Html آغازین قالب واکنشگرامون استفاده می کنیم. توجه داشته باشید که من لینک تعدادی از کتابخانه های میزبانی شده در سرور های دیگه مثل Font Awsome و Google Fonts رو به کد زیر اضافه کردم. همچنین همونطور که میبینید فایل های کتابخانه ی جی کوئری مثل (jquery.min.js) و جاوااسکریپتمون (مثل bootstrap.min.js) رو هم اضافه کردم.

HTML

کار با شبکه ها

سیستم شبکه ی بوت استرپ ۴ می تواند ۱۲ ستون داشته باشد و شما میتونید برای صفحات با رزولوشن متفاوت, ستون هایی با مقیاس دلخواهتون رو انتخاب کنید.در زیر میتونید نگاهی کلی به سیستم شبکه بندی بوتسترپ در سایز medium داشته باشید. شبکه بندی پایین فقط در صفحاتی با رزولوشن بالاتر از ۴۸em قابل نمایشه.

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

اجازه بدید تا اول همه چیز رو درون یک کلاس با نام wrapper قرار بدیم و سپس هر قسمت از سندمون رو از طریق تگ section تقسیم کنیم و برای هر کدوم به طور خاص کلاس هایی قرار بدیم.(توجه داشته باشید کد هایی که در ادامه میان, بین دو تگ <body> و <body/> سند html مون قرار میگیرن)

HTML
در مرحله ی بعد, کلاس container بوت استرپ رو اضافه می کنیم. با اینکار عناصر ما بسته بندی میشن و میتونیم درون این کلاس از شبکه بندی بوت استرپ استفاده کنیم. ما از یک container از نوع fixed استفاده خواهیم کرد. به این معنا که به هنگام تغییر رزولوشن صفحه نمایش, تا زمانی که عنصر ما به یک نقطه شکست مشخص برخورد نکرد, عرض عنصر ثابت باقی میمونه. یا واضح تر بگم, در صورتی که رزولوشن صفحه نمایش بزرگتر از عرض انتخابی ما برای عنصر باشه, اون عنصر با همون عرض انتخابی ما نمایش داده میشه و اما اگه سایز صفحه نمایش کوچکتر از عرض عنصر ما بشه, عنصر هم خودش رو کوچیک میکنه تا از صفحه بیرون نزنه.

توجه داشته باشید که ما دایو container رو در بخش header قرار نمیدیم چرا که میخوایم تمام قسمت های قالب واکنشگرا بشن. بیاین با هم انجامش بدیم.

HTML
در ادامه, ما نیاز داریم تا سطر ها (row) و ستون ها (col) رو درون دایو container قرار بدیم. هدف اصلی استفاده از کلاس های row اینه که این کلاس ها, ستون رو در مواقعی که شامل محتوا هست بسته بندی کنند. بیاید اضافه کردن سطر ها و ستون ها رو با تعدادی کلاس اضافی شروع کنیم. از این کلاس ها نترسید! بعدا درموردشون بیشتر صحبت خواهیم کرد.

HTML
 

استفاده از Jumbotron

Jumbotron, پیام های تجاری ایجاد و بازدیدکنندگان رو به انجام کاری تشویق میکنه. Jumbotron بوت استرپ (با نام سابق: hero unit) یک بنر بزرگ به شکل بخشی با متن بزرگ, پس زمینه ی خاکستری روشن است که با کادری که حاشیه های گرد داره احاطه شده.

برای ساخت یک Jumbotron, باید کلاس Jumbotron رو به عنصر div و سپس تگ های header رو بهش اضافه کنید. برای قالبمون از کلاس Jumbotron استفاده خواهیم کرد اما ما میخوایم بیشتر شخصی سازیش کنیم. برای مدرن تر ساختن این قالب از Jumbotron برای ساخت یک اثر parallax استفاده خواهیم کرد. کد زیر رو درون بخش header اضافه کنید.

توجه: ما همچنین یک کلاس jumbotron-fluid برای دادن حالت واکنشگرا به قالبمون, اضافه کردیم.

HTML
 

کلاس های مقدماتی تایپوگرافی

بوت استرپ کلاس های مخصوصی برای نمایش دادن عناوین داره که برای ایستا بودن بیشتر از عناوین معمولی طراحی شده. در واقع, چهار سایز/ کلاس نمایش دادن عناوین وجود دارد:

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

عدد بزرگتر به معنای اندازه ی بزرگتر متن است. در مثال بالا (بخش هدر) ما از display-2 درون تگ h2 استفاده کرده ایم که متن را به اندازه ی دومش نمایش می دهد.

و حالا بیاین کد زیر رو به بخش درباره ی ما اضافه کنیم:

HTML
هیچ چیز خاصی در این کد وجود نداره: من فقط یک کلاس div رو با کلاس هایی به همراه عکس ها و تگ های هدر, درونش اضافه کردم اما به تگ <mark> توجه کنید. این یک عنصر HTML5 است که متن ها را به صورت هایلایت یا تاکید شده برای اهمیت دادن به یک کلمه یا یک جمله نشان می دهد. اساساً بوت استرپ شیوه نمایش مخصوص به خودش رو برای این عنصر داره. به تصویر زیر نگاه کنید.

کلاس های تایپوگرافی را در مقاله ای دیگر مورد بحث قرار می دهیم.

ایجاد card ها

card ها اجزای جدید بوت استرپ ۴ آلفا هستند. اون ها به عنوان یک کانتینر با استایل هایی سبک و ساده و به جای well ها, پنل ها و thumnail ها وارد کار شدند. این اجزا از تنظیمات مختلف استایل مانند چیدمان, رنگ, عناوین و … پشتیبانی می کنند.

برای ساخت یک card, کافیه کلاس های card و card-block رو به div اضافه کنید. برای عنوانش کلاس card-title را و برای متنش کلاس card-text را اضافه کنید.

کد زیر را درون بخش درباره ی ما اضافه کنید.

HTML

افزودن Tooltip ها

بوتسترپ ۴ آلفا نیازمند یک کتابخانه سوم به نام tether برای فعالسازی تولتیپ ها هست. برای استفاده از تولتیپ ها آدرس کتابخانه ی tether.min.js رو قبل از محل فراخوانی bootstrap.js به قالبتون اضافه کنید.

برای استفاده از تولتیپ ها از طریق tether, به سادگی یک لینک بسازید و عبارت data-toggle=”tooltip” رو به ویژگی هاش اضافه کنید. سپس متن تولتیپ خودتون رو به عنوان مقدار صفت title لینک قرار بدید. به نمونه کد زیر توجه کنید:

Html
در نمونه ی بالا ما فقط از تگ لینک استفاده کردیم. اما تولتیپ ها فقط به لینک ها محدود نمیشن.

شما میتونید از اونها در button ها و div ها هم استفاده کنید. برای مقداردهی اولیه همه ی تولتیپ ها در یک صفحه, نیاز هست تا یک کد جاوااسکریپت رو به زیر لینک فراخوانی tether.min.js اضافه کنید تا تولتیپ ها رو براساس صفت data-toggle شون انتخاب کنه.

میتونید از کد زیر استفاده کنید:

Html, JavaScript
بیاید عملکردش رو در بخش features مون ببینیم. کد زیر رو کپی و در کلاس col-lg-12 پیست کنید.

Html
در اینجا قسمت دوم آموزش Bootstrap 4 به پایان رسید. در ادامه همراه شما خواهیم بود با قسمت آخر آموزش بوتسترپ ۴

 
علی ۲۶/۱۰/۱۳۹۶ پاسخ دهید

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

لول رنگ - پالت رنگ های مورد تایید آی وحید درگاه پرداخت واسط پی پکس تاتسی | tutsi فروشگاه قالب اختصاصی تمی

شماره تماس شرکت