مشاوره رایگان
دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

نحوه ایجاد یک وب سایت تک صفحه ای با بوت استرپ 4

نحوه ایجاد یک وب سایت تک صفحه ای با بوت استرپ 4

 

در این آموزش یک وب سایت تک صفحه ای با Bootstrap 4 می سازیم.

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

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

 

 

فهرست مطالب

 

  1. مقدمه
  2. شروع کار
  3. ایجاد نوار ناوبری (Navbar)
  4. طراحی بخش بالایی صفحه
  5. بخش خدمات
  6. بخش درباره ما
  7. بخشهای خدمات بیشتر و فراخوان اقدام
  8. بخش نمونه کارها
  9. بخش توصیه نامه (تب های بوت استرپ)
  10. بخش وبلاگ و پاورقی
  11. واکنش گرا کردن صفحه با Media Query ها
  12. نتیجه

 

 

مقدمه

 

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

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

 

 

شروع کار

 

کد HTML ما در فایل "index.html" قرار می گیرد. بنابراین ، ما این فایل را ایجاد می کنیم و کتابخانه های CSS و JavaScript لازم را به آن اضافه می کنیم.

در اینجا می توانید کتابخانه های Bootstrap 4 را که باید وارد کنیم ، مشاهده کنید.

کتابخانه های CSS را در بخش "head" فایل “index.html” اضافه می کنیم ، مانند زیر:

<!doctype html>
<html lang="en">
 
    <head>
 
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
        <title>clicksite</title>
 
        <!-- CSS -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,600">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
        <link rel="stylesheet" href="assets/css/animate.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="stylesheet" href="assets/css/media-queries.css">
 
        <!-- Favicon and touch icons -->
        <link rel="shortcut icon" href="assets/ico/favicon.png">
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
 
    </head>
 
    <body>
        <!-- beginning of the page's code -->

 

سپس کتابخانه های JavaScript را در قسمت پایین "index.html" اضافه می کنیم:

<!-- end of the page's code -->
 
        <!-- Javascript -->
        <script src="assets/js/jquery-3.2.1.min.js"></script>
        <script src="assets/js/jquery-migrate-3.0.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/retina-1.1.0.min.js"></script>
        <script src="assets/js/waypoints.min.js"></script>
        <script src="assets/js/scripts.js"></script>
 
    </body>
 
</html>

 

همانطور که مشاهده می کنید ، کتابخانه های مختلفی مانند: فونت هایی که استفاده خواهیم کرد ، کتابخانه های Bootstrap ، jQuery ، نمادهای Font Awesome و غیره و همچنین کدهای CSS و JS (JavaScript) اختصاصی خود را اضافه می کنیم.

ما CSS سفارشی را در فایل "style.css" در پوشه (assets/css/style.css) اضافه می کنیم و با برخی از کدها شروع می کنیم که در تمام بخشهای صفحه استفاده خواهد شد:

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #888;
    line-height: 30px;
    text-align: center;
}
 
strong { font-weight: 600; }
 
a, a:hover, a:focus {
    color: #9b59b6;
    text-decoration: none;
    transition: all .3s;
}
 
h1, h2 {
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 300;
    color: #555;
    line-height: 50px;
}
 
/* ... continues ... */

همانطور که مشاهده می کنید من از دو فونت گوگل در این الگو استفاده کرده ام: Open Sans برای متن عادی و Montserrat برای عناوین.

برای کوتاه کردن آموزش ، همه کدها را در اینجا نیاورده ام.

 

 

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

 

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

<!-- Top menu -->
<nav class="navbar navbar-dark fixed-top navbar-expand-md navbar-no-bg">
    <div class="container">
        <a class="navbar-brand" href="index.html">clicksite</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#top-content">Top</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#about-us">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#portfolio">Work</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#testimonials">Clients</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scroll-link" href="#blog">Blog</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

 

سپس استایل منو را با استفاده از چند کد CSS در فایل "style.css" که داخل پوشه assets/css/style.css است ، تغییر می دهیم :

/***** Top menu *****/
 
.navbar {
    background: #444;
    -o-transition: all .6s;
    -moz-transition: all .6s;
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    backface-visibility: hidden;
}
 
.navbar.navbar-no-bg {
    background: #444;
    background: rgba(0, 0, 0, 0.2);
}
 
.navbar-dark .navbar-nav {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
}
 
.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    border: 0;
}
 
.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}
 
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    outline: 0;
}
 
.navbar-expand-md .navbar-nav .nav-link {
    padding-left: 1rem;
    padding-right: 1rem;
}
 
.navbar-brand {
    width: 136px;
    background: url(../img/logo.png) left center no-repeat;
    border: 0;
    text-indent: -99999px;
}

 

برای پیمایش (scroll) صفحه با کلیک روی پیوندهای منو ، ما از برخی از کد های جاوا اسکریپت در فایل "scripts.js" درون پوشه assets/js/scripts.js استفاده می کنیم.

همچنین برخی از انیمیشن ها را با استفاده از کتابخانه Waypoints jQuery به نوار ناوبری اضافه می کنیم و در "scripts.js" آن را مقداردهی اولیه می کنیم.

سرانجام ، همانطور که در انتهای این مقاله مشاهده خواهید کرد ، آن را واکنش گرا نیز می کنیم.

 

 

 

طراحی بخش بالایی صفحه

 

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

کد HTML به صورت زیر است:

<!-- Top content -->
<div class="top-content">
    <div class="container">
 
        <div class="row">
            <div class="col-md-8 offset-md-2 text">
                <h1 class="wow fadeInLeftBig">clicksite</h1>
                <div class="description wow fadeInLeftBig">
                    <p>
                        This is a free responsive one page template made with the Bootstrap framework. 
                        Check it out now. Download it, customize and use it as you like!
                    </p>
                </div>
                <div class="top-big-link wow fadeInUp">
                    <a class="btn btn-primary btn-link-1" href="mailto:clicksite.ir@gmail.com">Download it</a>
                    <a class="btn btn-primary btn-link-2 scroll-link" href="#services">Learn more</a>
                </div>
            </div>
        </div>
 
    </div>            
</div>

 

و کد CSS :

/***** Top content *****/
 
.top-content {
    padding: 210px 0;
}
 
.top-content .text {
    color: #fff;
}
 
.top-content .text h1 {
    margin-top: 25px;
    color: #fff;
}
 
.top-content .description {
    margin: 30px 0 10px 0;
}
 
.top-content .description p {
    opacity: 0.8;
}
 
.top-content .top-big-link {
    margin-top: 45px;
}

 

ما از دو دکمه پیش فرض Bootstrap استفاده می کنیم اما آنها را متناسب با طراحی خود تنظیم می کنیم.

 

کد CSS دکمه اول:

.btn-link-1 {
    display: inline-block;
    height: 50px;
    margin: 0 5px;
    padding: 0 28px;
    background: #9b59b6;
    background: rgba(155, 89, 182, 0.7);
    border: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 48px;
    color: #fff;
    border-radius: 4px;
    transition: all .3s;
}
 
.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active, .btn-link-1:active:focus,
.btn-link-1.btn-primary:not(:disabled):not(.disabled):active,
.btn-link-1.btn-primary:not(:disabled):not(.disabled):active:focus {
    background: #9b59b6;
    background: rgba(155, 89, 182, 0.9);
    outline: 0;
    color: #fff;
    box-shadow: none;
}

 

برای پس زمینه تمام صفحه ما از پلاگین Backstretch jQuery استفاده می کنیم و آن را در "scripts.js" مقداردهی اولیه می کنیم. به صورت زیر:

$('.top-content').backstretch("assets/img/backgrounds/1.jpg");

 

ما همچنین هنگام بارگیری سایت ، برخی از انیمیشن ها را به عناصر مختلف صفحه اضافه می کنیم ، با کلاس های wow و fadeInLeftBig و fadeInUp و غیره. برای این منظور از کتابخانه های "Animate.css" و "WOW.js" استفاده می کنیم که در" scripts.js "مقداردهی اولیه می شوند.

 

 

بخش خدمات

 

بخش خدمات همراه با یک عنوان ، برخی متن ها و برخی از آیکون های Font Awesome ، با پس زمینه gradient است. کد HTML این بخش به صورت زیر است:

<!-- Services -->
<div class="services-container section-container">
    <div class="container">
        <div class="row">
            <div class="col services section-description wow fadeIn">
                <h2>Our Services</h2>
                <div class="divider-1 wow fadeInUp"><span></span></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 services-box wow fadeInUp">
                <div class="row">
                    <div class="col-md-4">
                        <div class="services-box-icon">
                            <i class="fas fa-magic"></i>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <h3>Web Design</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 services-box wow fadeInDown">
                <div class="row">
                    <div class="col-md-4">
                        <div class="services-box-icon">
                            <i class="fas fa-cog"></i>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <h3>UI / UX</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 services-box wow fadeInUp">
                <div class="row">
                    <div class="col-md-4">
                        <div class="services-box-icon">
                            <i class="fab fa-google"></i>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <h3>Marketing</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

و این کد CSS است:

/***** Services *****/
 
.services-box {
    padding-top: 30px;
    text-align: left;
}
 
.services-box .services-box-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    font-size: 40px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    border-radius: 28px;
    background: #9b59b6; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffb24b 0%, #9b59b6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb24b), color-stop(100%,#9b59b6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffb24b 0%,#9b59b6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb24b', endColorstr='#9b59b6',GradientType=0 ); /* IE6-9 */
}
 
.services-box h3 {
    margin-top: 0;
    padding: 0 0 10px 0;
}

 

 

بخش درباره ما

 

 

بخش درباره ما ، دارای یک عنوان و مقداری متن در سمت چپ و یک تصویر در سمت راست است.

کد HTML آن:

<!-- About us -->
<div class="about-us-container section-container section-container-gray-bg">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-7 about-us-box wow fadeInLeft">
                <div class="about-us-box-text">
                    <h3>About Us</h3>
                    <p class="medium-paragraph">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                        sed do eiusmod tempor incididunt ut labore et. Ut wisi enim ad minim veniam, quis nostrud.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 
                        Ut wisi enim ad minim veniam, quis nostrud. 
                        Exerci tation ullamcorper suscipit <a href="#">lobortis nisl</a> ut aliquip ex ea commodo consequat. 
                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.
                        Ut wisi enim ad minim veniam, quis nostrud.
                    </p>
                </div>
            </div>
            <div class="col-12 col-lg-5 about-us-box wow fadeInUp">
                <div class="about-us-box-img">
                    <img src="assets/img/about/1.jpg" alt="about" data-at2x="assets/img/about/1.jpg">
                </div>
            </div>
        </div>
    </div>
</div>

 

کد ساده و مشابه کد قسمت های قبلی است.

در برچسب تصویر به ویژگی "data-at2x" توجه کنید. این به این دلیل است که ما از کتابخانه Retina.js برای ارائه تصاویر با وضوح بالا برای دستگاه های Retina استفاده می کنیم.

معمولاً این کتابخانه در پوشه تصویر جستجو می کند و نسخه 2x@ (اندازه دو برابر) آن تصویر را به طور خودکار در دستگاه های دارای صفحه نمایش Retina ارائه می دهد.

اما در این حالت ، ما با ویژگی "data-at2x" ، مشخص می کنیم که از کدام تصویر استفاده کنیم. برای کسب اطلاعات بیشتر ، روی پیوند بالا کلیک کنید.

استایل و کد CSS این بخش:

/***** About us *****/
 
.about-us-box {
    margin-top: 100px;
}
 
.about-us-box-text {
    padding-right: 30px;
    text-align: left;
}
 
.about-us-box-text h3 {
    margin-top: 0;
}
 
.about-us-box-text .medium-paragraph {
    margin-top: 20px;
    margin-bottom: 20px;
}
 
.about-us-box-text a {
    border-bottom: 1px dashed #9b59b6;
}
 
.about-us-box-text a:hover,
.about-us-box-text a:focus {
    border: 0;
}
 
.about-us-box-img img {
    border-radius: 4px;
}

 

 

بخشهای خدمات بیشتر و فراخوان اقدام

 

بخش «خدمات بیشتر» مشابه بخش «خدمات» در بالا و بخش «فراخوان اقدام» مانند بخش «بالای صفحه» است. بنابراین ، من کد آنها را در اینجا نمی آورم. در صورت تمایل ، کد این بخش ها را می توانید درون سورس این صفحه ببینید.

 

 

بخش نمونه کارها

 

 

در بخش نمونه کارها سه پروژه جدید تجاری شرکت فرضی است که ما این سایت را برای آن می سازیم.

هر پروژه دارای یک تصویر ، یک عنوان و یک متن کوتاه است. نمونه کارها را می توان به گونه ای گسترش داد که برای هر پروژه یک صفحه اختصاصی با تمام جزئیات آن پروژه در نظر گرفته شود.

در انتهای این بخش یک دکمه "بارگیری بیشتر" وجود دارد که باید پروژه های بیشتری را بارگیری کند ، ترجیحاً بدون بارگیری مجدد صفحه. این کار را می توان با استفاده از AJAX انجام داد.

 

کد HTML نمونه کارها در اینجا است:

<!-- Portfolio -->
<div class="portfolio-container section-container">
    <div class="container">
        <div class="row">
            <div class="col portfolio section-description wow fadeIn">
                <h2>Our Portfolio</h2>
                <div class="divider-1 wow fadeInUp"><span></span></div>
                <p>We've completed 537 projects since we started back in 2010. Check them out!</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 portfolio-box wow fadeInUp">
                <div class="portfolio-box-image">
                    <img src="assets/img/portfolio/1.jpg" alt="" data-at2x="assets/img/portfolio/1.jpg">
                </div>
                <h3><a href="#">Acme branding</a> <i class="fas fa-angle-right"></i></h3>
                <div class="portfolio-box-date"><i class="far fa-calendar"></i> March 2018</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div>
            <div class="col-md-4 portfolio-box wow fadeInDown">
                <div class="portfolio-box-image">
                    <img src="assets/img/portfolio/2.jpg" alt="" data-at2x="assets/img/portfolio/2.jpg">
                </div>
                <h3><a href="#">WordPress design</a> <i class="fas fa-angle-right"></i></h3>
                <div class="portfolio-box-date"><i class="far fa-calendar"></i> February 2018</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div>
            <div class="col-md-4 portfolio-box wow fadeInUp">
                <div class="portfolio-box-image">
                    <img src="assets/img/portfolio/3.jpg" alt="" data-at2x="assets/img/portfolio/3.jpg">
                </div>
                <h3><a href="#">Created 150 flyers</a> <i class="fas fa-angle-right"></i></h3>
                <div class="portfolio-box-date"><i class="far fa-calendar"></i> January 2018</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
            </div>
        </div>
        <div class="row">
            <div class="col section-bottom-button wow fadeInUp">
                <a class="btn btn-primary btn-link-3" href="#">Load more</a>
            </div>
        </div>
    </div>
</div>

 

و کد CSS  آن:

/***** Portfolio *****/
 
.portfolio-box {
    padding-top: 30px;
    text-align: left;
}
 
.portfolio-box-image {
    overflow: hidden;
    border-radius: 4px;
}
 
.portfolio-box-image img {
    -o-transition: all .8s;
    -moz-transition: all .8s;
    -webkit-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
}
 
.portfolio-box-image:hover img {
    -o-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
}
 
.portfolio-box h3 {
    margin-top: 30px;
}
.portfolio-box h3 a { color: #555; }
.portfolio-box h3 a:hover, 
.portfolio-box h3 a:focus { color: #9b59b6; }
 
.portfolio-box h3 i {
    padding-left: 10px;
    color: #ccc;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}
.portfolio-box h3:hover i { padding-left: 15px; }
 
.portfolio-box-date {
    padding-bottom: 10px;
    font-size: 14px;
    color: #aaa;
    text-transform: uppercase;
}
 
.portfolio-box-date i {
    padding-right: 5px;
    color: #ddd;
}
 
.portfolio-container .section-bottom-button {
    padding-top: 40px;
}

 

 

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

 

 

برای بخش توصیه نامه ها/مشتری ها ، ما از مولفه Bootstrap Tabs استفاده می کنیم.

 

در اینجا کد HTML نهایی این بخش:

<!-- Testimonials -->
<div class="testimonials-container section-container section-container-image-bg">
    <div class="container">
        <div class="row">
            <div class="col testimonials section-description wow fadeIn"></div>
        </div>
        <div class="row">
            <div class="col-md-10 offset-md-1 testimonial-list wow fadeInUp">
 
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
                        <div class="testimonial-image">
                            <img src="assets/img/testimonials/1.jpg" alt="testimonial-1" data-at2x="assets/img/testimonials/1.jpg">
                        </div>
                        <div class="testimonial-text">
                            <p>
                                "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 
                                Lorem ipsum dolor sit amet."<br>
                                <a href="#">Lorem Ipsum, dolor.co.uk</a>
                            </p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
                        <div class="testimonial-image">
                            <img src="assets/img/testimonials/2.jpg" alt="testimonial-2" data-at2x="assets/img/testimonials/2.jpg">
                        </div>
                        <div class="testimonial-text">
                            <p>
                                "Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
                                ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip."<br>
                                <a href="#">Minim Veniam, nostrud.com</a>
                            </p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
                        <div class="testimonial-image">
                            <img src="assets/img/testimonials/3.jpg" alt="testimonial-3" data-at2x="assets/img/testimonials/3.jpg">
                        </div>
                        <div class="testimonial-text">
                            <p>
                                "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. 
                                Lorem ipsum dolor sit amet."<br>
                                <a href="#">Lorem Ipsum, dolor.co.uk</a>
                            </p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="tab4-tab">
                        <div class="testimonial-image">
                            <img src="assets/img/testimonials/4.jpg" alt="" data-at2x="assets/img/testimonials/4.jpg">
                        </div>
                        <div class="testimonial-text">
                            <p>
                                "Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
                                ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                                lobortis nisl ut aliquip."<br>
                                <a href="#">Minim Veniam, nostrud.com</a>
                            </p>
                        </div>
                    </div>
                </div>
 
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true"></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false"></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false"></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab4-tab" data-toggle="tab" href="#tab4" role="tab" aria-controls="tab4" aria-selected="false"></a>
                    </li>
                </ul>
 
            </div>
        </div>
    </div>
</div>

 

و کد CSS این بخش:

/***** Testimonials *****/
 
.testimonials-container {
    padding-bottom: 70px;
}
 
.testimonial-list {
    margin-top: 30px;
    text-align: center;
}
 
.testimonial-list .testimonial-image img {
    max-width: 160px;
    border-radius: 4px;
}
 
.testimonial-list .testimonial-text {
    margin-top: 30px;
    opacity: 0.8;
}
 
.testimonial-list .testimonial-text a {
    color: #fff;
    border-bottom: 1px dashed #fff;
}
.testimonial-list .testimonial-text a:hover, 
.testimonial-list .testimonial-text a:focus { color: #fff; border: 0; }
 
.testimonial-list .nav-tabs {
    margin-top: 45px;
    border: 0;
    justify-content: center;
}
 
.testimonial-list .nav-tabs li {
    margin-left: 10px;
    margin-right: 10px;
}
 
.testimonial-list .nav-tabs li a {
    width: 16px;
    height: 16px;
    padding: 0;
    background: none;
    border: 1px solid #fff;
    border-color: rgba(255, 255, 255, 0.8);
    -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
 
.testimonial-list .nav-tabs li a:hover,
.testimonial-list .nav-tabs li a:focus {
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #fff;
    border-color: rgba(255, 255, 255, 0.8);
}
 
.testimonial-list .nav-tabs li a.active,
.testimonial-list .nav-tabs li a.active:focus {
    background: #9b59b6; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffb24b 0%, #9b59b6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb24b), color-stop(100%,#9b59b6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffb24b 0%,#9b59b6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffb24b 0%,#9b59b6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb24b', endColorstr='#9b59b6',GradientType=0 ); /* IE6-9 */
 
    border: 0;
}

 

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

 

 

بخش وبلاگ و پاورقی

 

 

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

 

 

واکنش گرا کردن صفحه با Media Query ها

 

ما از برخی CSS های سفارشی در فایل "media-queries.css" در پوشه assets/css/media-queries.css به همراه مدیا کوئری های پیش فرض بوت استرپ استفاده می کنیم.

 

به این ترتیب ما اجزای الگو را به دلخواه خود سفارشی می کنیم. کد سفارشی ما به صورت زیر است:

@media (min-width: 992px) and (max-width: 1199px) {
 
    .services-box .services-box-icon { width: 60px; height: 60px; font-size: 32px; line-height: 60px; border-radius: 22px; }
 
    .about-us-box-text { padding-right: 0; }
     
}
 
@media (min-width: 768px) and (max-width: 991px) {
 
    .navbar-expand-md .navbar-nav .nav-link { padding-left: 0.6rem; padding-right: 0.6rem; }
 
    .top-content { padding: 180px 0; }
 
    .section-description p { padding: 0; }
 
    .services-box .services-box-icon { width: 50px; height: 50px; font-size: 26px; line-height: 50px; border-radius: 18px; }
 
    .about-us-box { margin-top: 80px; }
    .about-us-box:last-child { margin-top: 50px; }
    .about-us-box-text { padding-right: 0; text-align: center; }
 
    .more-services-box .more-services-box-icon { width: 50px; height: 50px; font-size: 26px; line-height: 50px; border-radius: 18px; }
 
    .portfolio-box h3:hover i { padding-left: 10px; }
 
    .blog-box h3:hover i { padding-left: 10px; }
 
}
 
@media (max-width: 767px) {
 
    .navbar.navbar-no-bg { background: #444; }
    .navbar-dark .navbar-toggler { border-color: #444; }
    .navbar-dark .navbar-toggler:focus { background: #333; outline: 0; }
    .navbar-expand-md .navbar-nav .nav-link { padding-top: 0.3rem; padding-bottom: 0.3rem; }
 
    .top-content { padding: 140px 0; }
    .top-content .top-big-link { margin-top: 25px; }
    .top-content .top-big-link a.btn { margin-top: 10px; }
 
    .section-description p { padding: 0; }
 
    .services-container { padding-bottom: 60px; }
    .services-box { text-align: center; }
    .services-box h3 { margin-top: 20px; padding-top: 10px; }
 
    .about-us-box { margin-top: 80px; }
    .about-us-box:last-child { margin-top: 50px; }
    .about-us-box-text { padding-right: 0; text-align: center; }
 
    .more-services-box { text-align: center; }
    .more-services-box h3 { margin-top: 20px; padding-top: 10px; }
 
    .portfolio-box { text-align: center; }
    .portfolio-box-image { max-width: 540px; margin: 0 auto; }
 
    .blog-box { text-align: center; }
    .blog-box-image { max-width: 540px; margin: 0 auto; }
    .blog-box h3 { margin-top: 30px; }
 
    footer { text-align: center; }
    .footer-right { padding-top: 10px; text-align: center; }
    .footer-bottom { padding-top: 20px; }
 
}
 
@media (max-width: 415px) {
 
    h1, h2 { font-size: 32px; }
 
}
 
/* Retina-ize images/icons */
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
 
    /* logo */
    .navbar-brand {
        background-image: url(../img/logo@2x.png) !important; background-repeat: no-repeat !important; background-size: 136px 39px !important;
    }
 
}

 

 

نتیجه

 

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

آموزش طراحی وب با ASP.NET Core MVC (تحت پروژه سایت اشتراک فیلم)

فصلِ: 5 , تعداد قسمت ها: 176 , سطح: صفر تا صد
موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش Bootstrap آموزش Ajax آموزش JQUERY

این فصل در یک نگاه:

در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…

توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد.   آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از  ASP.NET CORE  MVC 3.0 و V…
دانلود و ادامه توضیحات

ساخت پروژه دیوار بصورت دو سکویی با ASP.NET Core و Xamarin

فصلِ: 5 , تعداد قسمت ها: 135 , سطح: صفر تا صد
موضوعات: آموزش ASP.NET آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET MVC آموزش Bootstrap

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…
دانلود و ادامه توضیحات

آموزش صفر تا صد بوت استرپ

فصلِ: 2 , تعداد قسمت ها: 13 , سطح: صفر تا صد
موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …

توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…
دانلود و ادامه توضیحات

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

فصلِ: 6 , تعداد قسمت ها: 23 , سطح: صفر تا صد
موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…

سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …
دانلود و ادامه توضیحات

آموزش طراحی وبسایت و اپلیکیشن اندروید ورزش3 (Varzesh3)

فصلِ: 4 , تعداد قسمت ها: 78 , سطح: متوسط
موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش JQUERY آموزش HTML5 آموزش Ajax آموزش Bootstrap آموزش JAVASCRIPT

این فصل در یک نگاه:

…

در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …
دانلود و ادامه توضیحات

پکیج آموزش پروژه محور PHP ساخت سایت نیازمندی ها مشابه شیپور

فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد
موضوعات: آموزش PHP آموزش Bootstrap آموزش CSS آموزش JQUERY آموزش HTML آموزش PHP MVC آموزش Ajax آموزش HTML5

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
دانلود و ادامه توضیحات

آموزش api نویسی

فصلِ: 5 , تعداد قسمت ها: 201 , سطح: صفر تا صد
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش Bootstrap آموزش برنامه نویسی آندروید

این فصل در یک نگاه:

ایجاد پروژه آژانس مسافرتی.....…

فصل اول: آشنایی با مبانی برنامه نویسی اندروید   آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…
دانلود و ادامه توضیحات

وبینار آموزش تکنیکهای ایمیل مارکتینگ | روشهای تبدیل بازدیدکننده به مشتری

فصلِ: 1 , تعداد قسمت ها: 2 , سطح: متوسط
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش Ajax آموزش Bootstrap آموزش Laravel آموزش PHP MVC آموزش ایمیل مارکتینگ آموزش وردپرس

این فصل در یک نگاه:

بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…

  وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ   اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…
دانلود و ادامه توضیحات

آموزش تصویری لاراول - پروژه محور و کاربردی

فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش ساخت فروشگاه اینترنتی آموزش Bootstrap آموزش Laravel

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
دانلود و ادامه توضیحات

پکیج پروژه محور ساخت سایت مشابه آپارات با فریم ورک های react.js و laravel

فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش NodeJs آموزش Bootstrap آموزش Laravel آموزش Symphony

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
دانلود و ادامه توضیحات
به راهنمایی نیاز دارید؟و یا سردرگم هستید؟
021-4762 3380 901-000-5000 تماس از ساعت 8 الی 16:30 آدرس های ایمیل سایت: clicksite.ir@gmail.com
کسب درآمد کنید
اگر در هر زمینه ای مربوط به رشته های مهندسی و یا برنامه نویسی به تخصص خودایمان دارید،پس زمان را تلف نکنید و هم اکنون دست به کار شوید.به جمع متخصصی بپیوندید،گامی در راستای ارتقا سطح آموزش های تصویری فارسی بردارید. کلیک سایت از طرف همه مهندسین ،شما را دعوت به همکاری می نماید.وجود شما افتخاری برای همه ماست.
نماد اعتماد الکترونیک
لوگو ساماندهی
logo-samandehi

مقالات

آموزش PHP

آموزش HTML

آموزش CSS

آموزش برنامه نویسی آندروید

مقالات آموزش CSS

مدیریت و پشتیبانی سرور

مشاهده سبد این پنجره را مجددا نمایش نده!

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
انتخاب فایل
ارسال فایل
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید