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

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

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

سلام. در دو قسمت قبلی از آموزش بوتسترپ ۴ (قسمت اول , قسمت دوم ) مباحثی رو از این فریمورک بررسی کردیم و آموزش دادیم. در این قسمت با ما همراه باشید تا بوتسترپ ۴ رو تا آخر یاد بگیرید .ودر آخر نیز یک قالب واکنشگرای رایگان از ivahid هدیه بگیرید!

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

بوتسترپ ۴ آلفا یک کلاس پیشوند-Inverse اضافه کرده که خودش رنگی رو برای جدول انتخاب میکنه.

کلاس table-inverse را برای فعال کردن این ویژگی اضافه کنید.

بیاید عملا ببینید. کد زیر رو به بخش features درست بعد از کد بالا (آخرین کد قسمت قبلی آموزش) اضافه کنید.

HTML
همونطور که می بینید در اینجا هیچ چیز خاصی به جز یک جدول ساده وجود نداره اما بوتسترپ ۴ استایل ها رو دستکاری میکنه. به تصویر پایین نگاه کنید.

 

 

فرم های بوتسترپ ۴

فرم های بوتسترپ ۴ واکنشگرا هستند به طوریکه به صورت عمودی در صفحه نمایش انباشه شده اند و به صورت پیشفرض دارای استایل display: block و width: 100% هستند. و این به کاربر این امکان رو میده تا در تمامی اندازه های صفحه نمایش صفحه رو به صورت کامل ببینه, اما هنوز هم میتونه سفارشی باشه.

برای استفاده از فرم های بوت استرپ, فقط کافیه کلاس form-control رو به همه ی field ها مثل input, text-area و… اضافه کنید. همچنین باید تگ <fieldset> رو به همراه کلاس form-group بهش اضافه کنید.

بیاید عملا ببینید. کد زیر رو با کدی که در بخش تماس با ما قرار داده بودید جایگزین کنید.

HTML
توجه داشته باشید که من هم مقداری کلاس پشتیبان alert-success برای آگاه کردن کاربران که فرم با موفقیت ارسال شد اضافه کردم.

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

بوت استرپ ۳, دوازده کامپوننت قابل استفاده مجدد glyphicon که میشد از اونها برای اهداف مختلف استفاده کرد ارائه میداد. اما در بوت استرپ ۴ آلفا این ویژگی کاهش یافته. برای آیکون شبکه های اجتماعی بخش فوترمون از کلاس های آیکون Font-Awesome استفاده می کنیم. کد زیر رو به بخش فوترتون اضافه کنید.

HTML
نتیجه ی این همه کدی که تا حالا نوشتید تصویر زیر هست.

سفارشی کردن استایل ها

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

فایل custom.css رو باز کنید و استایل های کلی زیر رو برای عناصر و کلاس های اساسی تون اضافه کنید.

HTML
سپس, چند استایل برای افکت parallax مون از طریق parallax و کلاس parallax-pattern-overlay راه اندازی می کنیم.

HTML
برای کلاس heading مون باید یک حداکثر عرض مشخص به اندازه ی ۹۶۰px تعیین کنیم و سپس به هر تگ header چند font-size و چند استایل بیشتر برای تاکید هر کدام بدیم.

HTML
حالا بیاید تا چند استایل به فرممون اضافه کنیم. فرم های پیش فرض بوت استرپ مقدار نرمالی padding و یک border radius زیبا دارند اما برای قالب تک صفحه ای واکنشگرامون از طراحی flat استفاده خواهیم کرد. استایل های زیر رو کپی و سپس اضافه کنید.

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

HTML
در گام آخر, برخی عناصر رو در viewport های ۷۶۸px از طریق دستور media سفارشی سازی می کنیم. برای مثال اندازه بعضی از column ها رو سفارشی سازی می کنیم تا در این سایز صفحه خوب به نظر برسه.

HTML

نتیجه

و این چیزیه که شما انجام دادید! آزادانه طرح و کد های بالا رو سفارشی سازی کنید.

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

 

و در آخر نیز یک قالب زیبای واکنشگرا (پیش نمایش) که میتوانید از این قسمت آنرا دریافت کنید.

 

از سایت های زیر هم میتوانید برای یادگیری بیشتر بوتسترپ استفاده کنید:

 

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

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