ساخت یک صفحه فرود با استفاده از Bootstrap ۴

چهارشنبه, ۲۶ تیر ۱۳۹۸، ۰۳:۱۸ ب.ظ

بوت استرپ 4 در حال حاضر محبوب ترین فریمورک front-end در جهان است. شما می توانید از این فریمورک برای ایجاد هر نوع رابط کاربری، از قالب های مدیریتی تا وب سایت های کامل و پر از امکانات استفاده کنید. دراین آموزش گام به گام ، به چگونگی ایجاد یک صفحه فرود واکنش گرا با استفاده از Bootstrap 4 نگاهی خواهیم کرد. شما حتی می توانید از این صفحه طراحی شده به عنوان یک صفحه اصلی استفاده کنید و یا آن را به یک کمپین بازاریابی مشخص متصل کنید.

bootstrap4stable2 صفحه فرودی که خواهیم ساخت پنج بخش دارد:

بخش نوار ناوبری ثابت
بخش hero
بخشی سه ستونه برای نمایش خدمات
بخشی تمام عرض برای مشاهده تماس ها
بخش فوتر

با این حال، با پیروی از همان منطق، می توانید بخش های دیگری برای توصیفات، نمونه های وبلاگ و سایر انواع محتوا ایجاد کنید. در زیر نمای نهایی این صفحه نشان داده شده است :
landing-page-full
پس بیایید شروع کنیم.

1. راه اندازی بوت استرپ 4

چند روش برای راه اندازی اولیه Bootstrap 4 وجود دارد. شما می توانید:

فایل کامپایل شده CSS و جاوا اسکریپت بوت استرپ را دانلود کرده و سپس آن را به صفحه HTML خود اضافه کنید.
بوت استرپ 4 با استفاده از سورس اصلی آن راه اندازی کنید (اگر می خواهید فایل های Sass را ویرایش کنید، این روش را انتخاب کنید)
از نسخه های کامپایل شده بوت استرپ CDN استفاده کنید.

در این مقاله ما از اولین روش استفاده خواهیم کرد. فایل کوچک شده ی CSS را به قسمت <head> صفحه HTML خود و فایل جاوا اسکریپت را درست قبل از تگ بسته ی <body> قرار دهید. از آنجایی که همه پلاگین های Bootstrap 4 به jQuery نیاز دارند ، شما همچنین باید قبل از فایل جاوا اسکریپت بوت استرپ ، کتابخانه جی کوئری را قرار دهید.

در اینجا فایل HTML صفحه مورد نظر نشان داده شده است. همانطور که میبینید فایل های CSS و جاوا اسکریپت مورد نیاز به صفحه اضافه شده اند. فایلی نیز با نام style.css برای سفارشی سازی استایل صفحه به سند ما افزوده شده است :

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap Landing Page by Developer Drive</title>
   
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/style.css" rel="stylesheet">
   
   </head>
   
   <body>
   
       <!-- Here comes the rest of the code -->

       <script src="scripts/jquery.min.js"></script>
       <script src="scripts/bootstrap.bundle.min.js"></script>
   </body>
</html>

2. نوار ناوبری را ایجاد کنید

بوت استرپ 4 شامل کامپوننت فوق العاده عالی و از پیش طراحی شده ای برای نوار ناوبری است که به شما اجازه می دهد یک منوی واکنش گرا را فقط با چند خط کد HTML به صفحه فرود خود اضافه کنید. کد زیر را در بخش <body> از فایل HTML خود قرار دهید:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">Hello Consultancy</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
        aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
            
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home 
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

مهمترین چیزی در مورد Bootstrap 4 باید بدانید این است که این فریمورک برای هر چیزی تقریبا دارای کلاس های مفید است. به عنوان مثال، دارای کلاس bg-light. ( به مثال بالا نگاه کنید) برای افزودن یک پس زمینه روشن و کلاس bg-dark. برای افزودن یک پس زمینه تیره است که میتوان آنها را به هر عنصری در HTML اضافه کرد. با Bootstrap 4 شما می توانید طرح های خود را با کمترین کد نویسی در CSS ایجاد کنید.

با این حال، اگرچه کلاس fixed-top ، نوار ناوبری را به سمت بالا fix می کند، اما شما باید فضای بیشتری برای آن ایجاد کنید. بنابراین، قانون زیر را به فایل style.css سفارشی خود اضافه کنید. اگر نمیخواهید یک نوار ناوبری ثابت در بالای صفحه داشته باشید به سادگی کلاس fixed-top را از صفحه خود حذف کنید :

body {
    padding-top: 56px;
}

3. بخش hero را بسازید

بخش hero بخشی جدایی ناپذیر از بیشتر صفحات فرود است. در این بخش معمولا یک عکس پس زمینه کامل، یک عنوان، یک توصیف کوتاه و یک دکمه تماس وجود دارد. خوشبختانه، Bootstrap 4 دارای یک قسمت از پیش طراحی شده به نام Jumbotron است که به شما اجازه می دهد به راحتی یک بخش hero را به صفحه خود اضافه کنید. برای این کار نیاز است به عنصری است که بخش hero را نگه می دارد کلاس jumbotron. را اضافه کرد :

<header class="jumbotron jumbotron-fluid">
    <div class="container-fluid text-center"> 
       <h1 class="display-3">The Best Solution for Your Business</h1>
       <p class="lead pb-4">We help you maximize performance and build a healthy organization.</p>
       <p><a href="#" class="btn btn-primary btn-lg" role="button">Learn More</a></p>
    </div>
</header>

اگر بخواهید یک بخش hero تمام عرض داشته باشید، از کلاسهای Container-fluid. و jumbotron-fluid. استفاده کنید . اگر نمیخواهید تمام عرض صفحه با آنها پوشیده شود کافی است ، از container. و jumbotron. استفاده کنید (برای توضیحات بیشتر بهاسناد Jumbotron نگاهی بیندازید).

کد بالا همچنین از کلاسهای display-3. و text. (کلاس های تایپیوگرافی بوت استرپ 4)و کلاس text-center. (کلاس ترازبندی در بوت استرپ 4) استفاده میکند. شما همچنین باید یک تصویر پس زمینه را به بخش Jumbotron در فایل style.css سفارشی خود اضافه کنید. اگر میخواهید میتوانید رنگ پیشفرض پس زمینه دکمه های primary را نیز تغییر دهید:

.jumbotron {
    background: url("image.jpg") no-repeat center;
}
.btn-primary {
    background-color: #c60063;
    border-color: #c60063;
}

همانطور که در شکل زیر نشان داده شده است تاکنون بخش های مربوط به نوار ناوبری و Hero را ایجاد کرده ایم :
landing-page-hero

4. بخش سه ستونه را برای ارائه سرویس ها ایجاد کنید

برای ایجاد بخش خدمات میخواهیم سه ستون را ایجاد کنیم، برای این کار از سیستم grid واکنش گرا در بوت استرپ 4 استفاده میکنیم. این شبکه grid شامل ردیف ها و ستون هایی است که صفحه را تقسیم بندی می کنند. به طور پیش فرض، هر ردیف شامل 12 ستون (با این حال، شما می توانید این مورد را در تنظیمات Sass خود تغییر دهید) است. می توانید تعداد ستون هایی را که می خواهید با استفاده از کلاس های ستون مشخص کنید. به عنوان مثال کلاس col-4 4 ستون از 12 ستون پیشفرض را به خود اختصاص میدهد.

بوت استرپ 4 دارای پنج نقطه واکنش گرا است که برای grid تعریف میشوند: خیلی کوچک (پیش فرض)، کوچک، متوسط، بزرگ و فوق العاده بزرگ. بر اساس اندازه صفحه نمایشی که وب سایت شما در آن نمایش می یاد میتوان نحوه ی نمایش ستون ها را مشخص کرد.

به عنوان مثال، در کد زیر، .col-md-4 بر روی grid های متوسط، بزرگ و خیلی بزرگ اعمال می شود. این بدان معنی است که تبلت ها و دسکتاپ ها بخش خدمات را در 3 ستون برابر در کنار یکدیگر نشان می دهند. و گوشی های هوشمند با نمایشگرهای کوچک و یا حتی خیلی کوچک، آنها را زیر یکدیگر به شکل یک ستون (یک ستون در هر ردیف) نمایش می دهند.

<section id="services" class="container">
   <h2 class="display-4 text-center mt-5 mb-3">Our Services</h2>
   
   <div class="row text-center">
      <div class="col-md-4 mb-4">
         <div class="card h-100">
            <img class="card-img-top" src="design.jpg" alt="Design">
            <div class="card-body">
               <h4 class="card-title">Design</h4>
               <p class="card-text">Deliver the best user experience 
               with our carefully designed responsive websites and applications!</p>
            </div>
            <div class="card-footer py-4">
               <a href="#" class="btn btn-secondary">See portfolio &raquo;</a>
            </div>
         </div>
      </div>
      
      <div class="col-md-4 mb-4">
         <div class="card h-100">
            <img class="card-img-top" src="development.jpg" alt="Development">
            <div class="card-body">
               <h4 class="card-title">Development</h4>
                  <p class="card-text">You need software that works on every device. 
                  Leverage the latest technologies and the most powerful tools!</p>
            </div>
            <div class="card-footer py-4">
               <a href="#" class="btn btn-secondary">See projects &raquo;</a>
            </div>
         </div>
      </div>
      
      <div class="col-md-4 mb-4">
         <div class="card h-100">
            <img class="card-img-top" src="analytics.jpg" alt="Analytics">
            <div class="card-body">
               <h4 class="card-title">Analytics</h4>
               <p class="card-text">Consult our experts to set up proper goals and 
               find the best stack for your next application!</p>
            </div>
            <div class="card-footer py-4">
               <a href="#" class="btn btn-secondary">See testimonials &raquo;</a>
            </div>
         </div>
      </div>
   </div>
</section>

کد های بالا همچنین از کامپوننت های Card در بوت استرپ 4 استفاده می کنند که دارای پنج کلاس از قبل ساخته شده است: .card ، .card-img-top ، .card-body، .card-title. و .card-text . کلاس h-100. یکی از کلاسهای ابزار اندازه گیری بوت استرپ 4 است که شما می توانید بر روی هر عنصری که می خواهید استفاده کنید. این کلاس ارتفاع هر کارت را با مقدار 100٪ تنظیم می کند.

شما همچنین می توانید دکمه های secondary را در فایل style.css خود تغییر دهید و آن را با بقیه صفحه اصلی خود مطابقت دهید، به عنوان مثال:

btn-secondary {
    background-color: transparent;
    border-color: #c60063;
    color: #c60063;
}

و اکنون به همین سادگی بخش خدمات ما در سه ستون به شکل زیر ایجاد شد :
landing-page-cards

5. بخشی تمام عرض را برای مشاهده مشخصات تماس ایجاد کنید

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

<section class="container-fluid text-center py-4 mt-4" id="contact">
   <h2 class="display-4 pb-4 my-4">Get in touch with us today!</h2>
   <p class="lead pb-3">Send us a message and we will get back to 
   you as soon as possible.</p>
   <a href="#" class="btn btn-primary btn-lg mb-4" role="button">Contact us</a>
</section>

همانند بخش Jumbotron، شما همچنین باید یک تصویر پس زمینه را به قسمت تماس در فایل style.css خود اضافه کنید:

#contact {
    background: url("contact.jpg") no-repeat center;
}

در اینجا نحوه نمایش بخش تماس به شرح زیر است:

landing-page-contact-section

6. بخش فوتر را ایجاد کنید

صفحات فرود معمولا فوتر های ساده ای دارند، بنابراین کد زیر به سادگی یک پیام کپی رایت به پایین صفحه شما اضافه می کند:

<footer class="py-3 bg-light">
   <div class="container">
      <p class="text-center">Copyright &copy; Hello Consultancy 2019</p>
   </div>
</footer>

و اکنون صفحه ما به طور کامل طراحی شد! در شکل زیر دوباره کل صفحه فرود را مشاهده میکنید :
landing-page-full

نتیجه

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

دوره های آموزشی

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

بحث و گفتگو

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

مقالات آموزشی لرن سورس

منبع: لرن سورس

۰ ۹۸/۰۴/۲۶

شهربانو دوستی

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی