اولین سایت خود را با بوت استرپ 4.0 در قالب یک مینی پروژه بسازید!

پنج شنبه ۰۶ اردیبهشت ۹۷ توسط محمدسینا مرادی

 

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

پس با آرکادمی همراه باشید تا در ادامه به شما آموزش دهیم که چگونه یک سایت بوت استرپی ساده بسازید،ما ویژگی های جدید کتابخانه را نیز مورد بررسی قرار میدهیم.

حالا بیاید شروع کنیم.

در حال ساختن چه چیزی هستیم؟

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

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

نوار ناوبری(Navbar)

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

<nav class="navbar navbar-light bg-light">
    <a href="#" class="navbar-brand">My portfolio</a>
</nav>

نتیجه به صورت زیر است.

کلاس bg-light رنگ خاکستری را برای پس زمینه میسازد در حالی که کلاس navbar-light متن را سیاه میکند.به طور پیش فرض رنگ متنها در نوار ناوبری آبی است اما من فکر میکنم که با کلاس navbar-light بهتر و زیباتر باشد.

حالا بیاید برخی دیگر از محتویات یک نوار ناوبری را به کدی که ساخته ایم اضافه کنیم.

<ul class="navbar-nav">
  <li class="navbar-item">
    <a href="#" class="nav-link">Homepage</a>
  </li>
  <li class="navbar-item">
    <a href="#" class="nav-link">Blog</a>
  </li>
  <li class="navbar-item">
    <a href="#" class="nav-link">About</a>
  </li>
  <li class="navbar-item">
    <a href="#" class="nav-link">Contact Us</a>
  </li>
</ul>

به سه کلاس navbar-nav ، navbar-link و navbar-item توجه کنید،این کلاس ها با هم گزینه های نوار ناوبری را به طریقی که شما میخواهید میسازند.

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

حالا ما نیاز داریم که وقتی یک دستگاه کوچک تر صفحه سایت ما را باز کرد نوار ناوبریمان تغییر کند و او بتواند صفحه را بدون هیچ کوچک نمایی یا بزرگ نمایی ببیند برای اینکار به صورت یک منو آن را نمایش میدهیم که به زبان ساده "رسپانسیو" نامیده میشود.برای این منظور ما باید دو کار را انجام دهیم.

1.گزینه های نوار ناوبری را به درون یک منو میفرستیم.

2.برای منو یک نشانه ایجاد کنیم.

برای اینکه بتوانیم منو را به صورت افتادنی باز کنیم به این قطعه کد نیاز داریم.

<nav class="navbar navbar-light bg-light navbar-expand-md">
...
</nav>

این کد به ما میگوید که وقتی میخواهیم نوار ناوبریمان در حالت گسترش یافته یا برعکس باشد در نقطه پایانی MD که در 768 پیکسل باشد آن را تغییر دهد.

ما همچنین باید گزینه های نوار ناوبری خود را در یک Div (با دو کلاس collapse و navbar-collapse) قرار دهیم که به بوت استرپ میفهماند این بخشی است که میخواهیم به پایین بیفتد.

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
  ... 
  </ul>
</div>

باید آیدی navbarNav را به مشخصه data-target آیکون منو متصل کنیم.که کد را به این شکل مینویسیم:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
  <span class="navbar-toggler-icon"></span>
</button>

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

ساختن Jumbotron

خب ما نوار ناوبری را ساختیم حالا نیاز داریم تا گام بعدی را اجرا کنیم،در این مرحله که بسیار هم ساده است میخواهیم زیر نوار ناوبری را بسازیم که میتوان گفت اغلب برای عنوان و معرفی و... سایت به کار میرود.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
  <h1 class="display-3">Welcome to my website</h1>
  <p class="lead">I'm a developer and designer. Check my portfolio below</p>
</div>

حاصل این کد به صورت زیر است.

کلاس های display-3 که هدایتگر متن های تایپوگرافی هستند و متن را کمی بیشتر احیا میکنند که به نظر من بهتر هستند.

محتوای اصلی-شبکه و کارت

در زیر jumbotron ما قصد داریم محتوای اصلی وب سایت خود را اضافه کنیم که شامل چهار کارت می شود. کارت جزء کاملا جدیدی از بوت استرپ 4.0 است و جایگزین پانل ها،  ریز عکسها و... از Bootstrap 3.0 می شود.

ابتدا بیاید به آنچه میخواهیم بسازیم نگاهی کنیم.

ایجاد کردن Grid

برای اینکه آنها را به خوبی به این شکل ظاهر کنیم و همچنین مطمئن شویم که آنها به خوبی رسپانسیو هستند، باید کارتها را در یک شبکه(Grid) قرار دهیم. شبکه یکی از قطعات اصلی بوت استرپ است و بسیاری از توسعه دهندگان از این کتابخانه صرفا به دلیل شبکه استفاده می کنند.

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

در بالای نقطه شکستن ضربه، ما هر کدام از کارت ها را به نصف عرض می خواهیم، بنابراین ستون ها را به کلاس col-sm-6 می دهیم. هرچند که صفحه نمایش به نقطه ی lg می رسد، ما چهار کارت در عرض می خواهیم، پس این کدها را مینویسیم.

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-3">column</div>
    <div class="col-sm-6 col-lg-3">column</div>
    <div class="col-sm-6 col-lg-3">column</div>
    <div class="col-sm-6 col-lg-3">column</div>
  </div>
</div>

حاصل کار ما به صورت زیر است.

ساختن کارت ها

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

<div class="card">
  <img class="card-img-top" alt="Card header image" src="img1.png">
  <div class="card-body">
    <h5 class="card-title">Project 1</h5>
    <p class="card-text">An awesome project</p>
    <a href="#" class="btn btn-info">See project</a>
  </div>
</div>

برای تبدیل Div به یک کارت، کارت کلاس را به راحتی آب خوردن به آن اضافه می کنیم. اگر ما  بخواهیم یک تصویر در هدر کارت نمایش داده شود، کارت-img-top را اضافه می کنیم. همانطور که برای بقیه محتوا، ما از کلاس card-body، title card و text-card استفاده کردیم.

 

یک مشکل کوچک، این لایه زمانی که ردیف ها را دریافت میکند خوب به نظر نمیرسد پس باید بین ردیف ها کمی فاصله ایجاد کنیم تا این مشکل حل شود.

این شما را به یک مفهوم فاصله جدید در Bootstrap 4.0 معرفی می کند، که در آن شما می توانید کلاس ها را برای حاشیه تنظیم کنید. حال ما باید کلاس mt-3 را به divs کارت اضافه می کنیم.

<div class="card mt-3">
...
</div>

mt در اینجا مخفف margin-top است و عدد 3 در مقیاس از 1 تا 5 است که در آن 5 بیشترین است. شما همچنین می توانید به عنوان یک مثال pb-4 را انجام دهید که setuppad-bootom را تا 4 تنظیم می کند. هنگامی که آن را اضافه کردیم، ما یک سایت خوب با شبکه داریم که در آنها کارت ها را جایگذاری کرده ایم.

ساختن فرم تماس با ما

خب در حال رسیدن به پایان کار هستیم حالا ما میخواهیم فرم تماس را نیز به سایت اضافه کنیم.ما آن را یک عضو جدید از ردیفی که ساختیم میکنیم اما این بار از کلاس offset استفاده خواهیم کرد زیرا ما نمیخواهیم فرم تماسمان کاملا عرض را پر کند و نباید بالاتر از نقطه توقف md باشد.

پس از md  به طرف بالا ما عرض 6 ردیف را میدهیم و offset را سه، مانند کد زیر:

<div class="row mt-5">
  <div class="col-sm-12 col-md-6 offset-md-3">
    <h3>Reach out!</h3>
    ...form goes here...
  </div>
</div>

حالا بیاید به کد فرم تماس نگاهی بیاندازیم:

<form>
  <div class="form-group">
    <input type="text" class="form-control" id="email" placeholder="Your email..">
  </div>
  <div class="form-group">
    <textarea class="form-control" placeholder="Your message..">            
    </textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button></form>

کنترل هایی مانند <input> و <textarea> را با کلاس form-control استایل‌دهی کرده‌ایم. این کلاس فرم تماس ما را به صورت کلاسیک بوت استرپ می‌سازد، همانند عکس زیر:

تماس contact us

همین! تبریک میگوییم حالا شما توانستید اولین سایت خود را با بوت استرپ 4 بسازید.


کلیدواژه: طراحی وب طراحی سایت بوت استرپ 4 Bootstrap 4

منابع: medium.freecodecamp.org

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.