ساخت یک صفحه نمونه با بوت استرپ از ابتدا

ساخت یک صفحه نمونه با بوت استرپ از ابتدا

 

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

Bootstrap روش های ساده ای برای حل چالش های مختلف در ایجاد قالب های وب سایت واکنش گرا از طریق مجموعه ای قدرتمند و قوی ارائه می دهد. ایجاد تم Bootstrap بدون نیاز به تغییر کد های اولیه صفحه برای هر پروژه ، ویژگی اصلی این چارچوب است. با اطمینان ، راه حل های آماده را به همراه سایر ماژول های شخص ثالث ارائه می دهد که می توانید بدون نگرانی در مورد پشتیبانی ، آنها را در پروژه خود ادغام کنید زیرا جامعه بزرگی از توسعه دهندگان آماده کمک به شما در صورت بروز هر نوع مشکلی در طراحی هستند.

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

 

امروز ، من قصد دارم به شما نشان دهم که چگونه می توانید در عرض چند دقیقه یک تم یا الگوی اولیه Bootstrap را از ابتدا ایجاد کنید.

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

 

 

 

فهرست مطالب

 

• طراحی اولیه صفحه
• ساختار فایل های پروژه
• دانلود فایل های Bootstrap
• دانلود افزونه های مهم jQuery
• دانلود فونت Awesome
• دانلود تصاویر
• نشانه گذاری های اولیه html
• نوار ناوبری
• بخش Hero  یا سربرگ
• بخش درباره ما
• بخش خدمات
• بخش شمارنده پروژه های انجام شده
• بخش رضایت نامه ها
• بخش تماس با ما
• پاورقی
• اضافه کردن شیوه نامه های استایل
• استایل های عمومی
• استایل های کمکی
• استایل های نوار ناوبری
• استایل های دکمه ها
• استایل های بخش خدمات
• استایل های شمارنده پروژه های انجام شده
• استایل های فرم ها
• استایل های اسلایدها
• استایل های پاورقی
• استایل های واکنش گرایی
• افزودن کدهای jQuery
• ثابت کردن نوار ناوبری
• جلوه پیمایش و افزونه Scrollspy jQuery
• شمارش پروژه های انجام شده
• نتیجه

 

 

طراحی اولیه صفحه

 

قبل از شروع به کد نویسی ، بهتر است ابتدا طرح اولیه آن را بسازیم. من از Mockflow برای ایجاد طرح اولیه خود استفاده می کنم. از لحاظ فنی ، طرح اولیه ما شامل اجزای زیر است:

 

• نوار ناوبری
• بخش Hero یا سربرگ
• بخش درباره ما
• بخش خدمات
• بخش تعداد پروژه ها
• بخش رضایت نامه ها
• بخش تماس با ما
• پاورقی

 

 

ساختار فایل های پروژه

 

پس از طراحی اولیه صفحه در Mockflow و قبل از اینکه وارد نشانه گذاری های html شویم باید ابتدا فایل ها و پوشه های لازم را ایجاد کنید ،. فایل ها و پوشه های زیر را ایجاد کنید:

root/
|—css/
|——custom.css
|—webfonts/
|—images/
|—js/
|——script.js
|—index.html

 

 

دانلود فایل های Bootstrap

 

سپس، باید فایل های منبع Bootstrap را دانلود کرده و به پوشه JavaScript و CSS پروژه اضافه کنید. برای این کار ، به صفحه دانلود Bootstrap بروید و فایلهای منبع را دانلود کنید. در داخل فایل های منبع دانلود شده، باید bootstrap.min.css را در پوشه CSS پروژه کپی کنید. همچنین باید bootstrap.min.js و bootstrap.bundle.min.js را در پوشه JavaScript پروژه کپی کنید.

 

 

دانلود افزونه های مهم jQuery

 

پس از دانلود فایلهای منبع Bootstrap ، همچنین لازم است فایلهای لازم jQuery و JavaScript را که از آنها در Bootstrap استفاده خواهیم کرد ، دانلود کنیم. ابتدا با jQuery شروع می کنیم. به صفحه دانلود jQuery بروید و آخرین نسخه فشرده شده و کوچک شده را بارگیری کرده و در داخل پوشه JavaScript پروژه قرار دهید. در مرحله بعدی ، پلاگین jQuery Easing را از صفحه GitHub آن دانلود کنید و فایل jquery.easing.min.js را در پوشه JavaScript پروژه قرار دهید. آخرین پلاگین برای دانلود Scrollspy است. فایل scrollspy.min.js را نیز در پوشه JavaScript پروژه قرار دهید.

 

پس از بارگیری همه این فایل ها ، فایلهای jQuery یا JavaScript زیر را در داخل پوشه JavaScript خواهیم داشت:

• bootstrap.bundle.min.js
• jquery.easing.min.js
• jquery.min.js
• script.js
• scrollspy.min.js

 

 

دانلود فونت Awesome

 

این تم نیاز به دانلود فایل های منبع Font Awesome از طریق صفحه دانلود آن دارد تا بتوانیم آیکون هایی را به پروژه خود اضافه کنیم. پس از دانلود ، پوشه webfonts را در داخل پوشه اصلی پروژه و فایل all.css در پوشه CSS پروژه کپی کنید.

 

 

دانلود تصاویر

 

من قبلاً تمام تصاویری را که برای این تم نیاز داریم تنظیم کرده ام. می توانید آنها را از اینجا دانلود کرده و درون پوشه images پروژه قرار دهید.

 

 

نشانه گذاری های اولیه html

 

پس از بارگیری همه فایل های لازم این پروژه ، اکنون وقت آن است که کدهای اولیه html را به همراه پیوندهای آن به فایل های CSS و jQuery و JavaScript تنظیم کنیم. در داخل فایل index.html ، باید کدهای زیر را اضافه کنیم:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Bootstrap Theme</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS -->
    <link rel="stylesheet" href="css/all.css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/custom.css" rel="stylesheet" type="text/css" />
 
</head>
<body>
    <!-- JS -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/scrollspy.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

 

 

نوار ناوبری

 

پس از ایجاد نشانه گذاری های اولیه html صفحه، کار را در بخش نوار ناوبری (navbar) در همان فایل ادامه می دهیم. Navbar یک مولفه واکنش گرا برای نمایش امکانات جابجایی در وب سایت است و در نمایشگرهای کوچک مثل موبایل به صورت عمودی با امکان مخفی شدن است ولی در نمایشگر های بزرگتر به یک قالب افقی تبدیل می شود. ما تگ های نوار ناوبری را اضافه می کنیم و سپس کلاس normal-nav را اضافه می کنیم که بعداً از آن استفاده خواهیم کرد تا نوار ناوبری را به نوار چسبیده تبدیل کنیم تا هنگام scroll صفحه نوار به صورت ثابت بالای صفحه بماند. از تگ های <a> و jQuery  برای حرکت (scroll) روان در صفحه هنگام کلیک کردن لینک هر بخش استفاده خواهیم کرد و به طور خودکار لینک ها را در نوار ناوبری بر اساس موقعیت پیمایش (scroll) از طریق پلاگین Scrollspy jQuery تغییر شکل می دهیم. کد نهایی این بخش به صورت زیر است. این کد را بالای سایر کد ها درون تگ body اضافه کنید.

<!--Navbar Start-->
       <nav class="navbar navbar-expand-lg fixed-top navbar-clicksite normal-nav">
        <div class="container">
            <a class="navbar-brand logo" href="">
                <img src="images/clicksite-logo.png" height="21">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto navbar-center farsi" id="mySidenav">
                    <li class="nav-item active">
                        <a href="#top" class="nav-link">خانه</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about" class="nav-link">درباره</a>
                    </li>
                    <li class="nav-item">
                        <a href="#services" class="nav-link">خدمات</a>
                    </li>
                    <li class="nav-item">
                        <a href="#testimonials" class="nav-link">رضایت نامه ها</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" class="nav-link">تماس</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Navbar End -->

 

 

بخش Hero  یا سربرگ

 

در این قسمت بخش hero یا سربرگ صفحه را ایجاد می کنیم. معمولاً این بخش یک مولفه jumbotron  است اما ما این بار از این مولفه بوت استرپ استفاده نخواهیم کرد ، در عوض یک نشان گذاری معمولی با تمامی کلاسهای لازم بوت استرپ و کلاس های سفارشی خودمان استفاده می کنیم. شناسه top را نیز در برچسب این بخش پروژه اضافه می کنیم تا بتوانیم از طریق پیوند ها به بالای صفحه برویم. بعداً کدهای jQuery لازم را نیز برای این مورد اضافه می کنیم. کد نهایی بخش hero به صورت زیر است. این کد را زیر کد قسمت قبل (زیر نوار ناوبری) اضافه کنید:

<!-- Header Start -->
    <section class="header-bg align-items-center position-relative d-flex" id="top">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="header-title">
                        <p class="highlight font-weight-bold size-16 text-uppercase header-small-title title mb-3 ml-1">Bootstrap Theme</p>
                        <h1 class="font-weight-bold main-title mb-4">Clicksite Theme</h1>
                        <p class="text-sub ml-2 mb-4 pb-2"><strong><a href="mailto:clicksite.ir@gmail.com">Clicksite</a></strong></p>
                        <p class="text-sub ml-2 mb-4 pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                        <a href="" class="btn btn-primary ml-2">بیشتر بدانید <span class="ml-2 right-icon"><i class="fas fa-arrow-right"></i></span></a>
                    </div>
                </div>
                <div class="col-lg-5 offset-lg-1">
                    <div class="mt-5 mt-lg-0">
                        <img src="images/header-2.png" alt="" class="img-fluid mx-auto d-block">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Header End -->

 

 

بخش درباره ما

در این قسمت  بخش «درباره ما» را به صفحه اضافه می کنیم. این بخش شامل یک تک ستون ساده برای عنوان و دو ستون زیر عنوان خواهد بود که در آن متن ساختگی خود را در ستون دوم و یک تصویر را در ستون اول قرار می دهیم. سرانجام ، آیدی مورد نیاز برای ناوبری jQuery را در برچسب این بخش قرار می دهیم. کد نهایی این بخش به صورت زیر است. این کد را زیر کد قسمت قبل (زیر بخش hero) قرار دهید:

<!-- About Start -->
    <section class="section bg-grey" id="about">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8">
                    <div class="text-center mb-5">
                        <h2 class="highlight header-colorize text-uppercase mb-3">درباره ما</h2>
                        <p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
            </div>

            <div class="row align-items-center">
                <div class="col-lg-5">
                    <img src="images/header-about.png" alt="" class="img-fluid mx-auto d-block">
                </div>
                <div class="col-lg-6 offset-lg-1">
                    <div class="text-sub mt-5 mt-lg-0">
                        <h3 class="title font-weight-medium mb-4">A perfect bootstrap theme for all types of business.</h3>
                        <p class="mb-4 size-15">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.</p>
                        <p class="mb-4 size-15">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                        <a href="" class="learn-more size-15">بیشتر بدانید <span class="ml-2 right-icon"><i class="fas fa-arrow-right"></i></span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- About End -->

 

 

بخش خدمات

 

در این مرحله بخش خدمات را به صفحه اضافه می کنیم. برای این قسمت از تم خود ، از آیکون های font-awesome و یک متن ساختگی برای هر سرویس در یک شبکه سه ستونی استفاده می کنیم. همچنین آیدی این بخش را مشخص می کنیم تا بعداً در کدهای jQuery برای پیمایش صفحه از آیدی آن استفاده کنیم. کد نهایی بخش خدمات به صورت زیر است. این کد را زیر کد قسمت قبل (زیر بخش «درباره ما») قرار دهید:

<!-- Services Start -->
    <section class="section" id="services">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8">
                    <div class="text-center mb-5">
                        <div class="text-center mb-5">
                        <h2 class="highlight header-colorize text-uppercase mb-3">خدمات ما</h2>
                        <p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                    </div>
                </div>
            </div>
            <div class="row farsi">
                <div class="col-lg-4 col-md-6">
                    <div class="services-container pr-4 pl-4">
                        <div class="services-icon mt-3">
                            <i class="far fa-window-maximize"></i>
                        </div>
                        <h4 class="mb-4 mt-4 services-title font-weight-bold">طراحی سایت</h4>
                        <p class="text-sub size-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="services-container pr-4 pl-4">
                        <div class="services-icon mt-3">
                            <i class="far fa-window-restore"></i>
                        </div>
                        <h4 class="mb-4 mt-4 services-title font-weight-bold">توسعه نرم‌افزار</h4>
                        <p class="text-sub size-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="services-container pr-4 pl-4">
                        <div class="services-icon mt-3">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <h4 class="mb-4 mt-4 services-title font-weight-bold">نرم‌افزار موبایل</h4>
                        <p class="text-sub size-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- Services End -->

 

 

بخش شمارنده پروژه های انجام شده

 

اکنون که بخش خدمات را راه اندازی کردیم ، با استفاده از آیکون های font-awesome ، یک بخش چهار ستونی اضافه می کنیم و بعداً آن را از طریق jQuery متحرک سازی خواهیم کرد. کد این قسمت به صورت زیر است و باید آن را زیر کد قسمت قبل (زیر بخش خدمات) قرار دهید.

<!-- Accomplished Start -->
    <Section class="section accomplished-counter-bg">
        <div class="accomplished-counter-bg"></div>
        <div class="container">
            <div class="row align-items-center" id="accomplished-counter">
                <div class="col-lg-3 col-md-6">
                    <div class="accomplished-counter-box text-center px-4 py-5 mb-4 mb-lg-0">
                        <div class="text-white">
                            <i class="far fa-window-maximize accomplished-counter-icon mx-auto"></i>
                            <h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="90">0</span>+</h1>
                            <p class="mb-0 text-white-70 font-weight-bold">وب سایت‌ها</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="accomplished-counter-box text-center mb-4 mb-lg-0 px-4 py-5">
                        <div class="text-white">
                            <i class="far fa-window-restore accomplished-counter-icon mx-auto"></i>
                            <h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="82">0</span>+</h1>
                            <p class="mb-0 text-white-70 font-weight-bold">برنامه‌ها</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="accomplished-counter-box text-center mb-4 mb-lg-0 px-4 py-5">
                        <div class="text-white">
                            <i class="fas fa-mobile-alt accomplished-counter-icon mx-auto"></i>
                            <h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="15">0</span></h1>
                            <p class="mb-0 text-white-70 font-weight-bold">اپ‌های موبایل</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="accomplished-counter-box text-center mb-4 mb-lg-0 px-4 py-5">
                        <div class="text-white">
                            <i class="far fa-smile-beam accomplished-counter-icon mx-auto"></i>
                            <h1 class="mb-2 mt-3"><span class="accomplished-counter-value mt-4" counter="187">0</span></h1>
                            <p class="mb-0 text-white-70 font-weight-bold">مشتری‌ها</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Section>
    <!-- Accomplished End -->

 

 

بخش رضایت نامه ها

 

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

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

<!-- Testimonials Start -->
    <section class="section bg-grey" id="testimonials">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8">
                    <div class="text-center mb-5">
                        <h2 class="highlight text-uppercase mb-3 header-colorize">رضایت نامه ها</h2>
                        <p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-9 col-center m-auto">

            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Carousel indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>   
                <!-- Wrapper for carousel items -->
                <div class="carousel-inner">
                    <div class="item carousel-item active">
                        <div class="img-box"><img src="images/client.jpg" alt=""></div>
                        <p class="testimonial">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet."</p>
                        <p class="overview"><b>Kit Johnson</b>, Account Analyst</p>
                    </div>
                    <div class="item carousel-item">
                        <div class="img-box"><img src="images/client2.jpg" alt=""></div>
                        <p class="testimonial">"Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Utmtc tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio."</p>
                        <p class="overview"><b>Rick Gomez</b>, App Developer</p>
                    </div>
                    <div class="item carousel-item">
                        <div class="img-box"><img src="images/client3.jpg" alt=""></div>
                        <p class="testimonial">"Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget rutrum."</p>
                        <p class="overview"><b>Chris Smith</b>, CEO, ProTools</p>
                    </div>
                </div>
                <!-- Carousel controls -->
                <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev">
                    <i class="fa fa-angle-left"></i>
                </a>
                <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next">
                    <i class="fa fa-angle-right"></i>
                </a>
            </div>

        </div>
            </div>
        </div>
    </section>
    <!-- Testimonials End -->

 

 

بخش «تماس با ما»

 

الگوی این صفحه به شکلی است که نیازمند بخش «تماس با ما» است. بخش تماس یکی از با ارزش ترین قسمتهای یک وب سایت است که اغلب مورد استفاده بازدیدکننده های جدیدی است که برای هدف خاصی به سایت آمده اند. در این قسمت از الگو ، می خواهیم یک شبکه تک ستونی برای عنوان و یک شبکه دو ستونی دیگر برای محتوای داخلی اضافه کنیم. ستون اول شبکه دو ستونی دارای اطلاعات ساختگی تماس است و ستون دوم شامل یک فرم تماس است که کاربران می توانند برای ارسال پیام به ما استفاده کنند. باید آیدی این بخش را نیز در برچسب آن قرار دهیم تا بعداً وقتی کدهای jQuery را اضافه می کنیم ، برای اثر پیمایشی روان (scroll) از آن استفاده کنیم. کد نهایی این بخش به صورت زیر است. این کد را زیر کد قسمت قبل (زیر بخش رضایت نامه ها) قرار دهید.

<!-- Contact Start -->
    <section class="section farsi" id="contact">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8">
                    <div class="text-center mb-5">
                         <h2 class="highlight header-colorize text-uppercase mb-3">تماس با ما</h2>
                        <p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-4">
                    <div class="contact-info">
                        <h4 class="title mb-4 font-weight-bold">در تماس باشید!</h4>
                        <p class="text-sub size-15">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                           <p class="text-sub size-15 mb-4"><i class="fas fa-phone"></i> 659-888-5495</p>
                        <p class="text-sub size-15 mb-4"><i class="fas fa-mobile-alt"></i> 00989123456789</p>
                        <p class="text-sub size-15 mb-4"><i class="fas fa-envelope"></i> help4usr@gmail.com</p>
                        <p class="text-sub size-15 mb-4"><i class="fas fa-map-marker-alt"></i> ایران - تهران</p>
                    </div>
                </div>

                <div class="col-lg-7 offset-lg-1">
                    <div class="custom-form mt-4 mt-lg-0">
                        <form>
                            <div class="row">
                                 <div class="col-lg-12">
                                    <div class="form-group font-weight-bold">
                                        <label for="email">ایمیل:</label>
                                        <input type="email" class="form-control" id="email" placeholder="ایمیل تان را وارد کنید.." />
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group font-weight-bold">
                                        <label for="subject">عنوان:</label>
                                        <input type="text" class="form-control" id="subject" placeholder="عنوان پیام را وارد کنید.." />
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group font-weight-bold">
                                        <label for="message">پیام:</label>
                                        <textarea name="message" id="message" rows="4" class="form-control" placeholder="پیام را وارد کنید.."></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                     <button href="" class="btn btn-primary"><span class="mr-2 left-icon"><i class="fas fa-envelope"></i></span> ارسال پیام</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- contact End -->

 

 

پاورقی

 

سرانجام ، یک بخش پاورقی به پایین صفحه اضافه خواهیم کرد. این قسمت فقط دارای نماد حق چاپ و سال ساخت صفحه خواهد بود. کد نهایی این قسمت به صورت زیر است. این کد را زیر کد قسمت قبل (زیر بخش تماس) و پیش از تگ بسته شدن <body/> قرار دهید.

<!-- Footer Start -->
    <section class="footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                        <p class="text-center white">2020 © Clicksite. All Rights Reserved.</p>
                </div>
            </div>
        </div>
    </section>
    <!-- Footer End -->

 

پس از افزودن همه نشان گذاری ها ، الگوی اولیه کامل می شود ولی نیازمند استایل دهی است. با استفاده از custom.css در قسمت بعدی آموزش مقداری استایل به آن اضافه خواهیم کرد.

 

 

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

 

برای بهبود ظاهر الگو ، اکنون استایل های خود را برای هر بخش از الگو در داخل فایل custom.css اضافه می کنیم.

 

 

استایل عمومی

 

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

/*********************************************/
/*                GENERAL CSS                  */
/*********************************************/

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
body {
  font-family: "Poppins", sans-serif;
  color: #343a40;
  background: #ffffff;
}
a {
  outline: none;
  color: #6C55A3;
  text-decoration: none !important;
}
a:hover {
  color: #53407f;
}
p {
  line-height: 1.9;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
}

 

 

استایل های کمکی

 

در این مرحله استایل های کمکی (utility CSS) را اضافه خواهیم کرد. این کدهای CSS شامل کلاسهای زیادی برای انجام کارهای کوچک و یکبار مصرف مانند کلاس هایی برای اعمال اندازه فونت خاص ، رنگ ها ، پس زمینه ها و کلاس هایی برای تنظیم یک ویژگی خاص است. هر کدام از کلاس های کمکی فقط یک ویژگی ظاهری را تنظیم می کنند.

/*********************************************/
/*                UTILITY CSS                  */
/*********************************************/

.text-sub {
  color: #9b9bae !important;
}
.bg-grey {
  background-color: #F8F6FA !important;
}
.title {
  color: #343a40;
}
.header-colorize {
  font-weight: 700;
  color: #6C55A3;
}
.section {
  padding: 120px 0px 120px 0px;
  position: relative;
}
.size-14 {
  font-size: 14px;
}
.size-15 {
  font-size: 15px;
}
.size-18 {
  font-size: 18px;
}
.right-icon {
  line-height: 0;
  font-size: 19px;
}
.learn-more {
  color: #6C55A3;
  font-weight: 700;
}
.highlight {
  background: rgba(122, 96, 183, 0.1);
  -webkit-box-shadow: 0 1px 2px rgba(122, 96, 183, 0.5);
  box-shadow: 0 1px 2px rgba(122, 96, 183, 0.5);
  color: #6c55a3;
  border-radius: 13px;
  display: inline-block;
  padding: .25em .4em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.header-bg {
  padding: 170px 0 140px;
  background-image: url('../images/header-background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left bottom;
}
.header-bg .header-small-title {
  letter-spacing: 2px;
}
.header-bg .main-title {
  font-size: 2.8rem;
  line-height: 1.35;
  color: #6C55A3;
}

 

 

استایل نوار ناوبری

 

طرح اصلی نوار ناوبری بوت استرپ یک طراحی عمومی است. در این قسمت از استایل ، ما می خواهیم ظاهر نوار خود را به گونه ای تنظیم کنیم که کاملاً متفاوت و متناسب با طرح زمینه ما باشد. ما با استایل دهی به پیوند ها ، لوگو و سپس دکمه تغییر حالت نوار ناوبری ، کار را ادامه می دهیم.

/*********************************************/
/*                NAVBAR CSS                   */
/*********************************************/

.nav-item .nav-link {
  text-decoration: none;
  display: inline-block;
  color: #343a40;
}
.navbar-clicksite {
  margin-bottom: 0px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background-color: transparent;
  padding: 14px 0px;
  width: 100%;
  border-radius: 0px;
  z-index: 999;
}
.navbar-brand {
  cursor: pointer;
}
.navbar-clicksite .navbar-nav li a {
  line-height: 26px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 600;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-color: transparent !important;
  padding: 6px 0;
  margin: 0 20px;
}
.navbar-clicksite .navbar-nav li .nav-link {
  padding-right: 0px;
  padding-left: 0px;
}
.navbar-clicksite .navbar-toggles {
  font-size: 18px;
  background: 0 0;
  border: 1px solid transparent;
  color: #ffffff;
  outline: 0;
  padding: .26rem .76rem;
}
.navbar-clicksite .navbar-nav li.active a, .navbar-clicksite .navbar-nav li a:hover, .navbar-clicksite .navbar-nav li a:active {
  color: #ffffff !important;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  background-color: transparent;
  border-color: #6C55A3;
}
.navbar-toggler {
  font-size: 24px;
  margin-top: 5px;
  margin-bottom: 0px;
  color: #000;
}
.fas.fa-bars {
  color: #6C55A3 !important;
}
.sticky-nav.navbar-clicksite .navbar-toggles {
  border: 1px solid transparent;
  padding: .26rem .76rem;
  outline: 0;
}
.sticky-nav.navbar-clicksite {
  margin-top: 0px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
  color: #000000 !important;
}
.sticky-nav.navbar-clicksite .navbar-nav {
  margin-top: 0px;
}
.sticky-nav.navbar-clicksite .navbar-nav li a {
  color: #8a8aa0 !important;
}
.sticky-nav.navbar-clicksite .navbar-nav li.active a, .sticky-nav.navbar-clicksite .navbar-nav li a:hover, .sticky-nav.navbar-clicksite .navbar-nav li a:active {
  color: #6C55A3 !important;
}
.navbar-toggler:focus {
  outline: none;
}

 

 

استایل دکمه ها

 

بوت استرپ به طور پیش فرض استایل های مختلفی از دکمه ها را با طراحی عمومی ارائه می دهد. برای این بخش ، ما می خواهیم پس زمینه ، رنگ و فونت دکمه ها را سفارشی کنیم. در این استایل به طور خاص بر روی اندازه دکمه اصلی (primary) بوت استرپ کار خواهیم کرد زیرا در الگوی خود از شکل های دیگر دکمه های بوت استرپ استفاده نخواهیم کرد.

/*********************************************/
/*          BUTTONS CSS                        */
/*********************************************/

.btn {
  border-radius: 4px;
  padding: 12px 30px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-weight: 700;
  font-size: 15px !important;
}
.btn:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.btn:hover {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
.btn.btn-primary {
  color: #ffffff;
  background-color: #6C55A3 !important;
  border: 1px solid #6C55A3 !important;
  -webkit-box-shadow: 0 4px 20px rgba(94, 98, 255, 0.15);
  box-shadow: 0 4px 20px rgba(94, 98, 255, 0.15);
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary.focus, .btn.btn-primary:active, .btn.btn-primary.active {
  background-color: #53407f !important;
  border: 1px solid #53407f !important;
  -webkit-box-shadow: 0 3px 10px rgba(94, 98, 255, 0.5);
  box-shadow: 0 3px 10px rgba(94, 98, 255, 0.5);
  color: #ffffff !important;
}

 

 

استایل بخش خدمات

 

در این قسمت به بخش خدمات ، کمی استایل سفارشی اضافه می کنیم. به طور کلی استایل های زیر برخی از خصوصیات آیکون های font-awesome مانند تصویر زمینه ، اندازه و خط حاشیه (border) را تنظیم می کند. از font-awesome  در کد html در مراحل قبلی استفاده کردیم.

/*********************************************/
/*                SERVICES CSS                 */
/*********************************************/
.services-container .services-icon {
  height: 72px;
  width: 72px;
  background: rgba(108, 85, 163, 0.08);
  font-size: 30px;
  display: inline-block;
  border-radius: 50% 50%;
  line-height: 74px;
  text-align: center;
  color: #6C55A3;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.services-container .services-title {
  font-size: 1.4rem;
  color: #343a40;
}

 

 

استیل بخش شمارنده پروژه های انجام شده

 

اکنون وقت آن است که کمی استایل برای پیشخوان پروژه های انجام شده خود اضافه کنیم. فعلاً اطراف هر مورد در این بخش خط حاشیه ای (border) اضافه می کنیم و بعداً محتوای داخل هر جعبه را از طریق jQuery متحرک می کنیم.

/********************************************************************/
/*               ACCOMPLISHED PROJECTS COUNTER CSS                  */
/*******************************************************************/

.accomplished-counter-icon {
  font-size: 52px;
}
.accomplished-counter-bg .accomplished-counter-box {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.accomplished-accomplished-counter-bg {
  background: #6C55A3;
}
.accomplished-counter-bg .accomplished-counter-bg {
  background-color: #6C55A3;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

 

 

استایل فرم ها

 

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

/*********************************************/
/*                  FORMS CSS                  */
/*********************************************/

.form-control:focus {
  background-color: #fbfbfb;
  border-color: #6C55A3;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.form-control {
  background-color: rgba(52, 58, 64, 0.01);
  border: 1px solid rgba(155, 155, 174, 0.3);
  padding: 9px 11px;
  font-size: 14px;
}
.form-control::-webkit-input-placeholder {
  font-size: 15px;
  color: #9b9bae;
}
.form-control:-ms-input-placeholder {
  color: #9b9bae;
  font-size: 15px;
}
.form-control::-ms-input-placeholder {
  font-size: 15px;
  color: #9b9bae;
}
.form-control::placeholder {
  color: #9b9bae;
  font-size: 15px;
}

 

 

استایل اسلاید ها

 

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

/*********************************************/
/*                 CAROUSEL CSS                 */
/*********************************************/

.col-center {
  margin: 0 auto;
  float: none !important;
}
.carousel {
  margin: 50px auto;
  padding: 0 70px;
}
.carousel .item {
  color: #999;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  min-height: 290px;
}
.carousel .item .img-box {
  width: 135px;
  height: 135px;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 50%;
}
.carousel .img-box img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.carousel .testimonial {
  padding: 30px 0 10px;
}
.carousel .overview {
  font-style: italic;
}
.carousel .overview b {
  text-transform: uppercase;
  color: #6C55A3;
}
.carousel .carousel-control {
  width: 40px;
  height: 40px;
  margin-top: -20px;
  top: 50%;
  background: none;
}
.carousel-control i {
  font-size: 68px;
  line-height: 42px;
  position: absolute;
  display: inline-block;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
}
.carousel .carousel-indicators {
  bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
  width: 21px;
  height: 0px;
  margin: 1px 3px;
}
.carousel-indicators li {
  background: #999;
  border-color: transparent;
  box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
}
.carousel-indicators li.active {
  background: #6C55A3;
  box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
}

 

 

استایل پاورقی

 

پاورقی ما طراحی ساده ای دارد. فقط فضای خالی (padding) به بالای آن اضافه می کنیم و یک رنگ سفید ساده به متن پاورقی خود می دهیم.

/*********************************************/
/*                  FOOTER CSS                   */
/*********************************************/

.footer {
  background-color: #6C55A3;
  padding-top: 20px;
}
.footer p {
  color: #fff;
}

 

 

استایل های واکنش گرایی

 

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

بین حداقل عرض 200 پیکسل و حداکثر عرض 768 پیکسل ، دکمه تغییر حالت نوار ناوبری را داریم و باید استایل این دکمه را مشخص کنیم. باید عرض مناسب container و سپس margin و padding و رنگ را مشخص کنیم.

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

/*********************************************/
/*              RESPONSIVE CSS               */
/*********************************************/

@media (min-width: 200px) and (max-width: 768px) {
  .navbar-clicksite {
    background-color: #ffffff !important;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    margin-top: 0px;
    color: #ffffff !important;
  }
  .navbar-toggler {
    margin-bottom: 0px;
    font-size: 24px;
    margin-top: 0px;
    color: #343a40;
  }
  .navbar-clicksite .navbar-nav {
    margin-top: 0px;
  }
  .navbar-clicksite .navbar-nav li a {
    margin: 0px;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    color: #9b9bae !important;
  }
  .navbar-clicksite>.container {
    width: 90%;
  }
  .navbar-collapse {
    padding: 0 20px;
  }
  .navbar-clicksite .navbar-nav li.active a {
    border-color: transparent;
  }
  .navbar-clicksite .navbar-nav li.active a, .navbar-clicksite .navbar-nav li a:hover, .navbar-clicksite .navbar-nav li a:active {
    color: #6C55A3 !important;
  }
}
@media (max-width: 425px) {
  .header-bg .main-title {
    font-size: 2rem;
  }
}
@media (max-width: 768px) {
  .header-bg {
    padding: 120px 0;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .header-bg {
    background: none !important;
  }
}

 

اگر در این مرحله صفحه را در مرورگر مشاهده کنید ، متوجه خواهید شد که برخی از ویژگی ها مانند جلوه پیمایش (scroll effect) ، اسلاید ها و ناوبری موبایلی هنوز کارایی ندارند زیرا هنوز کدهای jQuery را قرار نداده ایم. در مرحله بعدی این کار را می کنیم.

 

 

افزودن کد های jQuery

 

اکنون وقت آن است که برخی از کدهای jQuery را در فایل script.js قرار دهید تا عملکرد برخی از ویژگی ها فعال شود. ما به سادگی با فراخوانی متد ready شروع می کنیم. اساساً ، بدون آماده شدن سند ، نمی توان یک صفحه وب را دستکاری کرد. jQuery وضعیت آمادگی یک صفحه وب را تشخیص می دهد. هنگامی که صفحه Document Object Model (DOM) برای اجرای کد JavaScript آماده شد ، کد زیر یک بار اجرا می شود:

$( document ).ready(function() {
});

 

 

ثابت کردن نوار ناوبری

 

نوار ناوبری چسبیده یا ثابت اساساً یک منو است که در حالی که کاربر به پایین صفحه پیمایش (scroll) می کند ، نوار ناوبری در بالای قسمت هدر قفل یا ثابت می شود. برای اضافه کردن این جلوه به صفحه ، کد زیر را در داخل تابع ready قسمت قبل اضافه می کنیم.

$(window).scroll(function() {
    var startPx = $(window).scrollTop();
    startPx >= 50 ? $(".normal-nav").addClass("sticky-nav") :  $(".normal-nav").removeClass("sticky-nav");
});

 

هر زمان که پنجره پیمایش (scroll) شود این کد اجرا می شود و نقطه بالای پیمایش فعلی پنجره در متغیر startPx ذخیره می شود. در این کد ، ما همچنین باید بررسی کنیم که موقعیت بزرگتر یا مساوی 50 پیکسل باشد. اگر بزرگتر یا برابر با 50 پیکسل باشد ، کلاس sticky-nav را اضافه می کنیم. در غیر این صورت ، کلاس sticky-nav را حذف خواهیم کرد.

 

پس از اضافه کردن این کد داخل تابع ready ، از بالای صفحه تا قبل از پایان بخش سرصفحه (hero) کمی پیمایش (scroll) کنید و می بینید که نوار ناوبری به قسمت بالای صفحه می چسبد.

 

 

 

جلوه پیمایش و پلاگین Scrollspy jQuery

 

برای این بخش ، دو هدف را برای صفحه خود در نظر داریم: اول ، ما انیمیشن پیمایش را پیاده سازی خواهیم کرد ، سپس از اثر پلاگین scrollspy jQuery استفاده خواهیم کرد تا لینک ها را در لیست پیمایش به طور خودکار بر اساس موقعیت پیمایش به روز کند. کد زیر را داخل تابع ready زیر کد قسمت قبلی اضافه کنید:

// SCROLL TO DIV
    $('.nav-item a, .mouse-down a').on('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - 0
        }, 1700, 'easeInOutQuint');
        event.preventDefault();
    });

    // SCROLLSPY
    $(".navbar-nav").scrollspy({
        offset: 90
    });

کد ما یک مدیریت کننده رویداد کلیک را به عناصر لینکی که درون تگی با کلاس nav-item یا کلاس mouse-down باشد اختصاص می دهد. سپس اشاره گری به شی jQuery عنصری که کلیک شده را درون متغیر anchor$ قرار می دهد. بقیه کد ، انیمیشن در حال اجرا روی HTML و عناصر body را متوقف می کند و یک انیمیشن با ویژگی های مشخص شده در کد را شروع می کند.

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

 

 

شمارش پروژه های انجام شده

 

سرانجام ، می خواهیم کد خود را برای شمارش پروژه های انجام شده اضافه کنیم. این کد یک انیمیشن به صورت شمارنده ای از مقدار صفر به مقدار مشخص شده با ویژگی ها و مدت زمان مشخص شده اضافه می کند. این کد را زیر کد قسمت قبلی داخل تابع ready اضافه کنید:

// COUNTER
    var initial = 0;

    $(window).scroll(function() {
        var msTop = $('#accomplished-counter').offset().top - window.innerHeight;
        if (initial == 0 && $(window).scrollTop() > msTop) {
            $('.accomplished-counter-value').each(function() {
                var $this = $(this),
                    countData = $this.attr('counter');
                $({
                    countNo: $this.text()
                }).animate({
                        countNo: countData
                    },

                    {
                        easing: 'linear',
                        duration: 2300,
                        step: function() {
                            $this.text(Math.floor(this.countNo));
                        },
                        complete: function() {
                            $this.text(this.countNo);
                        }

                    });
            });
            initial = 1;
        }
    });

 

پروژه ما کامل شد. اکنون می توانید صفحه را پیمایش کنید و تمامی انیمیشن های آن را ببینید.

 

می توانید نسخه نمایشی این صفحه را در لینک زیر ببینید. در هنگام مشاهده حتماً عرض مرورگر خودتان را تغییر دهید تا تغییر شکل سایت در دستگاه های مختلف مثل تلفن همراه ، تبلت و رایانه را در عمل ببینید:

 

 

 

نتیجه

 

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

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