آموزش صفر تا صد ساخت قالب بوت استرپ به صورت فارسی

Bootstrap-Theme

قالب بندی وایرفی تم بوت استرپ

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

  • Navigation
  • Hero / Header Section
  • About Us Section
  • Services Section
  • Counter Section
  • Testimonials Section
  • Contact Section
  • Footer
نحوه ایجاد تم بوت استرپ سفارشی

ساختار فایل قالب

پس از ساخت طرح خود در Mockflow، زمان آن است که ابتدا فایل‌ها و پوشه‌های لازم را ایجاد کنیم تا مشغول کار روی تم اصلی شویم. ما باید فایل ها و پوشه های زیر را به این ترکیب ایجاد کنیم:

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

دانلود فایل های بوت استرپ

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

بوت استرپ را دانلود کنید

دانلود پلاگین های ضروری مانند جی کوئری

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

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

  • bundle.min.js
  • easing.min.js
  • min.js
  • js
  • min.js

دانلود فونت آیکون Font Awesome

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

فونت عالی را دانلود کنید

تصاویر

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

تصاویر بوت استرپ

توجه : تمام تصاویر تصویر از Freepik آمده است.

نشانه گذاری اولیه برای ایجاد یک تم بوت استرپ

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Market Farsi 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>

ناوبری یا همان Navbar

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

ما نشانه‌گذاری ناوبری بوت استرپ را اضافه می‌کنیم و سپس کلاس  normal-nav را اضافه  می‌کنیم که بعداً از آن برای تبدیل نوار ناوبری به یک نوار ناوبری چسبنده sticky  استفاده می‌کنیم  ، یک نوار ناوبری ثابت در بالای بخش هدر در حالی که کاربر پیمایش می‌کند. 

ما از تگ‌های لنگر anchor برای پیمایش راحت در سراسر وب‌سایت از طریق شناسه وب‌سایت هر بخش با استفاده از jQuery استفاده می‌کنیم و به‌طور خودکار پیوندها را در فهرست ناوبری بر اساس موقعیت اسکرول از طریق پلاگین جی کوئری Scrollspy به‌روزرسانی می‌کنیم.  

<!--Navbar Start-->
   <nav class="navbar navbar-expand-lg fixed-top navbar-kleo normal-nav">
    <div class="container">
        <a class="navbar-brand logo" href="">
            <img src="images/kleo-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" id="mySidenav">
                <li class="nav-item active">
                    <a href="#top" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">About</a>
                </li>
                <li class="nav-item">
                    <a href="#services" class="nav-link">Services</a>
                </li>
                <li class="nav-item">
                    <a href="#testimonials" class="nav-link">Testimonials</a>
                </li>
                <li class="nav-item">
                    <a href="#contact" class="nav-link">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- Navbar End -->

بخش هدر قالب یا Hero / Header Section

در مرحله بعد، بیایید بخش Hero / Header  خود را ایجاد کنیم. به طور معمول این یک جزء jumbotron است اما ما این بار از این مؤلفه بوت استرپ استفاده نمی کنیم، به جای آن از یک نشانه گذاری بخش معمولی که دارای تمام بوت استرپ لازم و کلاس های سفارشی است که ما به آن نیاز داریم تا بعداً در CSS قالب خود خوب شخصی سازی شود. ما باید ای دی با نام "id="top را  درون  تگ <section> خود اضافه کنیم  تا بتوانیم در این قسمت از وب سایت خود به بالای صفحه اسکرول کنیم و در آینده کدهای جی کوئری لازم را برای این کار اضافه کنیم.

<!-- 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">Creating Bootstrap Theme From Scratch</h1>
                    <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">Learn More <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 -->

بخش درباره ما

اکنون قالب بوت استرپ ما به یک بخش درباره ما نیاز دارد. این یک ستون ساده برای عنوان و بخش دو ستونی خواهد بود که در آن متن ساختگی خود را در ستون دوم و تصویری را به ستون اول که از Freepik آمده است اضافه می کنیم. در نهایت، "id="about را  در  درون  تگ <section>   خود برای ویژگی پیمایش jQuery خود قرار می دهیم.

<!-- 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">About Us</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">Learn more <span class="ml-2 right-icon"><i class="fas fa-arrow-right"></i></span></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- About End -->

بخش خدمات یا همان Services 

در مرحله بعد، الگو به بخش خدمات یا Services Section نیاز دارد. برای این بخش از قالب خود، از  نمادهای فونت آیکون  برای هر سرویس با استفاده از متن پبش ساخته در یک سه لایه بندی به صورت شطرنجی با تک ستونی در بالا عنوان استفاده خواهیم کرد. ما همچنین خدمات شناسه id را در تگ section  خود برای ویژگی پیمایش خود که بعداً در کدهای 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">Our Services</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">
            <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">Web Design</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">App Development</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">Mobile Development</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">Websites</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">Applications</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">Mobile Apps</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">Clients</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</Section>
<!-- Accomplished End -->

بخش مشتریان Testimonials Section

در مرحله بعد، ما اکنون ویژگی اسلاید carousel بوتستراپ را در بخش Testimonials  خود ادغام می کنیم. اگر با carousel آشنا نیستید، به یک جزء نمایش اسلاید گفته می شود که با استفاده از عناصر رسانه ای مختلف مانند تصاویر، اسلایدها یا متن مانند اسلاید می شود.

ما از اجزای اسلاید برای چرخش در آواتار، توصیفات و نام‌های کلاینت ساختگی خود استفاده خواهیم کرد. همچنین  id شناسه testimonials  را در تگ section  خود  برای پیمایش در آینده قرار خواهیم داد.

<!-- 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">Testimonials</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 -->

افزودن بخش تماس به قالب

ایجاد قالب بوت استرپ ما مستلزم بخش تماس است. بخش تماس یکی از با ارزش ترین بخش های یک وب سایت است که اغلب برای بازدیدکنندگان جدید در یک ماموریت مورد استفاده قرار می گیرد. در این قسمت ما یک شبکه ستونی برای عنوان خود و یک شبکه طرح بندی دو ستونی دیگر برای محتوای داخلی مخاطب اضافه می کنیم. ستون اول شبکه دو طرح بندی دارای اطلاعات تماس ساختگی و ستون دوم شامل یک فرم تماس است که کاربران می توانند از آن برای ارسال پیام به ما استفاده کنند. ما همچنین باید   شناسهcontact id را در  تگ section  برای افکت پیمایش بعداً زمانی که کدهای جی کوئری خود را اضافه می کنیم قرار دهیم.

<!-- Contact Start -->
    <section class="section" 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">Contact</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">Get Connected</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> +1-689-888-5495</p>
                        <p class="text-sub size-15 mb-4"><i class="fas fa-envelope"></i> [email protected]</p>
                        <p class="text-sub size-15 mb-4"><i class="fas fa-map-marker-alt"></i> 200 Lexington Ave, New York, NY 10016, USA</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">
                                        <label for="email">Email:</label>
                                        <input type="email" class="form-control" id="email" placeholder="Enter Your Email.." />
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="subject">Subject:</label>
                                        <input type="text" class="form-control" id="subject" placeholder="Enter Your Subject.." />
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label for="message">Message:</label>
                                        <textarea name="message" id="message" rows="4" class="form-control" placeholder="Enter Your Message.."></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> Send Message</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- contact End -->

افزودن پاورقی به قالب

در نهایت، ما یک نشانه گذاری بخش پاورقی را در پایین تم بوت استرپ خود اضافه می کنیم. این به سادگی دارای نماد کپی رایت و سالی است که سایت ایجاد می شود.

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

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

وب سایت CSS وجود ندارد

افزودن Stylesheet یا همان استایل دهی

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

استایل دهی اصلی یا General CSS

قبل از حرکت بیشتر، باید 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 ابزار خود را اضافه خواهیم کرد. این کدهای 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 یا استایل های ناوبری

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

/*********************************************/
/*              NAVBAR CSS                  "/
/*********************************************/
 
.nav-item .nav-link {
  text-decoration: none;
  display: inline-block;
  color: #343a40;
}
.navbar-kleo {
  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-kleo .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-kleo .navbar-nav li .nav-link {
  padding-right: 0px;
  padding-left: 0px;
}
.navbar-kleo .navbar-toggles {
  font-size: 18px;
  background: 0 0;
  border: 1px solid transparent;
  color: #ffffff;
  outline: 0;
  padding: .26rem .76rem;
}
.navbar-kleo .navbar-nav li.active a, .navbar-kleo .navbar-nav li a:hover, .navbar-kleo .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-kleo .navbar-toggles {
  border: 1px solid transparent;
  padding: .26rem .76rem;
  outline: 0;
}
.sticky-nav.navbar-kleo {
  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-kleo .navbar-nav {
  margin-top: 0px;
}
.sticky-nav.navbar-kleo .navbar-nav li a {
  color: #8a8aa0 !important;
}
.sticky-nav.navbar-kleo .navbar-nav li.active a, .sticky-nav.navbar-kleo .navbar-nav li a:hover, .sticky-nav.navbar-kleo .navbar-nav li a:active {
  color: #6C55A3 !important;
}
.navbar-toggler:focus {
  outline: none;
}

Buttons CSS یا استایل دهی دکمه ها قالب

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

/*********************************************/
/*              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;
}

Services Section CSS یا استایلدهی بخش خدمات

اکنون که کار براش CSS سفارشی خود را به پایان رساندیم، بیایید به بخش خدمات برویم و کمی سفارشی سازی اضافه کنیم. اساساً، کدهای CSS زیر به سادگی برخی از ویژگی‌های آیکون‌های فونت فوق‌العاده مانند پس‌زمینه، اندازه و حاشیه را که در نشانه‌گذاری بالا استفاده کردیم، تنظیم می‌کنند.

/*********************************************/
/*              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;
}

Accomplished Projects Counter Section CSS یا استایل شمارنده پروژه ها

اکنون زمان آن است که مقداری CSS برای شمارنده پروژه های انجام شده خود قرار دهیم. هر مورد گرید را در یک کادر حاشیه قرار می دهیم که بعداً محتوای داخل هر جعبه را از طریق 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 یا استایل فرم ها

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

/*********************************************/
/*                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;
}

اکنون برای CSS اسلایدر خود، هر آیتم را از طریق  کلاس 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);
}

استایل دهی بخش پاورقی قالب

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

/*********************************************/
/*              FOOTER CSS                  "/
/*********************************************/
 
.footer {
  background-color: #6C55A3;
  padding-top: 20px;
}
.footer p {
  color: #fff;
}

ریسپانسیو سازی با کمک CSS

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

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

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

/*********************************************/
/*              RESPONSIVE CSS               "/
/*********************************************/
 
@media (min-width: 200px) and (max-width: 768px) {
  .navbar-kleo {
    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-kleo .navbar-nav {
    margin-top: 0px;
  }
  .navbar-kleo .navbar-nav li a {
    margin: 0px;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    color: #9b9bae !important;
  }
  .navbar-kleo>.container {
    width: 90%;
  }
  .navbar-collapse {
    padding: 0 20px;
  }
  .navbar-kleo .navbar-nav li.active a {
    border-color: transparent;
  }
  .navbar-kleo .navbar-nav li.active a, .navbar-kleo .navbar-nav li a:hover, .navbar-kleo .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;
  }
}

اکنون که همه CSS خود را در جای خود قرار می دهیم، تم بوت استرپ ما در این لحظه چیزی شبیه به این خواهد بود:

وب سایت بوت استرپ با CSS

همچنین متوجه خواهید شد که برخی از ویژگی‌ها مانند افکت اسکرول، اسلایدرها و منو موبایل همراه هنوز کار نمی‌کنند زیرا ما کدهای جی کوئری خود را قرار نداده‌ایم. اجازه دهید این کار را در مرحله بعد انجام دهیم.

اضافه کردن کدهای جی کوئری jQuery 

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

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

تبدیل نوار ناوبری به نوار ناوبری چسبنده

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

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

کد ما هر زمان که پنجره با نقطه شروع موقعیت اسکرول فعلی از طریق  var startPoint = $(window).scrollTop(); انجام می شود. در این کد، ما همچنین باید بررسی کنیم که آیا موقعیت بزرگتر یا مساوی   50 pixels است . اگر آن را  بالا  یا  برابر  به50 pixels  ما را به کلاس sticky-nav اضافه کنید   . در غیر این صورت، کلاس sticky-nav را حذف خواهیم کرد  .

سعی کنید قبل از پایان hero/header، کمی از بالای صفحه به پایین اسکرول کنید و می‌بینید که نوار ناوبری به قسمت بالای موضوع می‌چسبد.

افکت اسکرول و پلاگین Scrollspy jQuery

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

// 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
});

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

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

وب سایت بوت استرپ

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

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

// 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;
    }
});

اکنون پروژه ما کامل شده است. اکنون می‌توانید تمام انیمیشن‌هایی را که در تم بوت استرپ ما ایجاد شده است، اسکرول کرده و تماشا کنید.

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

تم وب سایت بوت استرپ

نتیجه

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

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

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

asakereh
Lead Engine and Php Code Expert
Copyright © 2021 MarketState
MarketState Theme By HA66.