بسم الله الرحمن الرحیم

آموزش طراحی قالب ریسپانسیو

بخش هشتم (طراحی سایر بخش های قالب با بوت استرپ)

نمایش لیست آموزش های Bootstrap

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

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

 ابتدا باید زیر نوار آبی رنگ یک فضای خاکستری ایجاد کنید، برای اینکار از کد زیر کمک می گیریم

 <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 silverBackground heightBreak light-gray-bg ">
            </div>
        </div>
    </div>

حال باید یک باکس سفید رنگ ایجاد کنیم.

<section class="section whiteBackground clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="title">Don't Miss Out Our Offers</h1>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    <button type="button" class="btn btn-info">Read More...</button>
                    <button type="button" class="btn btn-info">Read More...</button>
                    <br />
                    <br />
                </div>
            </div>
        </div>
    </section>

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

بسم الله الرحمن الرحیم

آموزش طراحی قالب ریسپانسیو

بخش هشتم (طراحی سایر بخش های قالب با بوت استرپ)

نمایش لیست آموزش های Bootstrap

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

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

 ابتدا باید زیر نوار آبی رنگ یک فضای خاکستری ایجاد کنید، برای اینکار از کد زیر کمک می گیریم

 <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 silverBackground heightBreak light-gray-bg ">
            </div>
        </div>
    </div>

حال باید یک باکس سفید رنگ ایجاد کنیم.

<section class="section whiteBackground clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="title">Don't Miss Out Our Offers</h1>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    <button type="button" class="btn btn-info">Read More...</button>
                    <button type="button" class="btn btn-info">Read More...</button>
                    <br />
                    <br />
                </div>
            </div>
        </div>
    </section>

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

Button در بوت استرپ

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

 <button type="button">Read More...</button>

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

<button type="button" class="btn">Read More...</button>

همچنین در بوت استرپ ما می توانیم از 6 رنگ متفاوت برای هر Element ایی استفاده کنیم. به طور مثال این رنگ ها برای Button به صورت زیر است.

• btn-default
• btn-primary
• btn-success
• btn-info
• btn-warning
• btn-danger
• btn-link

این رنگ ها برای بخش های مختلف قالب در دسترس است به طور مثال اگر شما بخواهید از رنگ danger برای متن های خود استفاده کنید می بایست از کلاس text-danger استفاده کنید.

در این قالب ما از استایل btn-info برای Button های بخش متن خود استفاده کرده ایم.

همچنین اگر نیاز داشته باشید سایز Button خود را مشخص کنید، بوت استرپ این امکان را به شما می دهد تا یکی از سه سایز زیر را برای Button خود انتخاب کنید.

• btn-lg
• btn-md
• btn-sm
• btn-xs

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

Model در بوت استرپ

Modal به پنجره ای گفته می شود که شما می توانید به صورت Popup آن را توسط بوت استرپ باز کنید. برای باز کردن و نمایش یک Modal کافی است که به Button های خود دو پراپرتی زیر را اضافه کنید.

data-toggle="modal" 
data-target="#myModal"

نهایتا کد Button شما باید به صورت زیر می باشد.

 <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Read More...</button>

پراپرتی data-toggle مشخص می کند که شما قصد دارید توسط این Button یک Modal را نمایش دهید.

پراپرتی data-target با دریافت ID مربوط  به Modal مشخص می کند که چه Modal ایی باید با کلیک بر روی Button نمایش داده شود.

حال باید Modal خود را نیز به صفحه اضافه کنیم، Modal ما چیزی جز چند Div نیست:

 <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Product details</h4>
                </div>
                <div class="modal-body">
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

در کد بالا ما ابتدا یک Div ایجاد کرده ایم، ID این Div با data-target مربوط به Button باید یکی باشد. سایر بخش های Modal ثابت می باشند.

Modal از 4  بخش اصلی تشکیل شده است:

Header: در اینجا شما می توانید Button مربوط به بستن Modal خود را قرار دهید.

Title: عنوان Modal خود را می توانید در این بخش مشخص کنید.

Body: بدنه اصلی Modal می باشد.

Footer: در این بخش می توانید نوار فوتر Modal خود را طراحی کنید.

اگر بخواهید سایز modal خود را تغییر دهید می توانید کلاس modal-sm  و modal-lg را به کد زیر اضافه کنید.

• modal-sm
• modal-lg

مثلا برای بزرگ تر شدن modal می توانید به صورت زیر عمل کنید

 <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Product details</h4>
                </div>
                <div class="modal-body">
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

در طراحی قالب ها معمولا Modal ها را در پایین ترین قسمت Body قرار می دهند به همین دلیل ما نیز کد Modal خود را در پایین صفحه قبل از شروع کد های jquery قرار می دهیم.

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

<img src="1.jpg" class="img-rounded"> //فقط گوشه های تصویر را گرد می کند
<img src="1.jpg" class="img-circle"> // کل تصویر را به صورت دایره شکل نمایش می دهد
<img src="1.jpg" class="img-thumbnail"> // استایل پیش فرض برای تصاویر
<img src="1.jpg" class="img-responsive"> // ایجاد قابلیت تغییر سایز و ریسپانسیو شدن تصاویر

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

<section class="section whiteBackground clearfix whiteBackground">
            <div class="imageWrapper">
                <ul class="footerImg">
                    <li>
                        <img class="img-responsive" src="img/1.jpg" alt="ABLY">
                    </li>
                    <li>
                        <img class="img-responsive" src="img/2.jpg" alt="ABLY">
                    </li>
                    <li>
                        <img class="img-responsive" src="img/4.jpg" alt="ABLY">
                    </li>
                    <li>
                        <img class="img-responsive" src="img/5.jpg" alt="ABLY">
                    </li>
                    <li>
                        <img class="img-responsive" src="img/6.jpg" alt="ABLY">
                    </li>
                </ul>
            </div>
    </section>

در نهایت نوبت بخش Footer می رسد، که برای طراحی این بخش از تگ  Footer مربوط به HTML5 استفاده خواهیم کرد.

<footer class="clearfix" id="footer">
        <!-- footer start -->
        <div class="subfooter">
            <div class="container">
                <div class="subfooter-inner">
                    <div class="row">
                        <div class="col-md-12">
                            <p class="text-center">Copyright &copy; 2015 The Project by <a href="http://Ably.ir" target="_blank">Ably</a>. All Rights Reserved</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer end -->
    </footer> 

تمام کدی که تاکنون نوشته ایم به صورت زیر خواهد بود

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Ably.ir:.Bootstrap</title>
    <!-- Bootstrap css -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" />


    <link href="css/mainStyle.css" rel="stylesheet" />


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">

    <!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine1/style.css" />
    <script type="text/javascript" src="engine1/jquery.js"></script>
    <!-- End WOWSlider.com HEAD section -->


</head>
<body>
    <!-- Start info-bar -->
    <div class="info-bar">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3 col-sm-3 col-xs-12  col-md-offset-1">
                    <span class="info-bar-text ">
                        Login | Sign Up
                    </span>
                </div>

                <div class="col-md-2 col-sm-3 col-xs-12 ">
                    <span class="info-bar-text ">
                        Email:Hello@Eduonline.ir
                    </span>
                </div>

                <div class="col-md-3 col-sm-3 col-xs-12 ">
                    <span class="info-bar-text ">
                        Tel:0912-097-5516
                    </span>
                </div>
            </div>

        </div>
    </div>
    <!-- End info-bar -->
    <!-- Start Menu -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="http://Ably.ir">
                    <img alt="Ably Image" src="img/Ably-Brand.png">
                </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="http://Ably.ir">Home</a></li>
                    <li><a href="http://Ably.ir">Tutorial</a></li>
                    <li><a href="http://Ably.ir">E-Books</a></li>
                    <li><a class="active" href="http://Ably.ir/page/ContactUS">Contact us</a></li>
                    <li><a href="http://Ably.ir/page/about-me">About us</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="User Name">
                        <input type="password" class="form-control" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-default">Login</button>
                </form>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="http://Ably.ir/">Change Password</a></li>
                    <li><a href="http://Ably.ir">Sign up</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Share <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Facebook</a></li>
                            <li><a href="#">twitter</a></li>
                            <li><a href="#">Linked-in</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-header">Ably sites</li>
                            <li><a href="#">Ably social</a></li>
                            <li><a href="#">Ably Froum</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- End Menu -->
    <!-- Start WOWSlider.com BODY section -->
    <div class="container-fluid header-slider">
        <div class="row">
            <div id="wowslider-container1">
                <div class="ws_images">
                    <ul>
                        <li><a href="http://ably.ir" target="_blank"><img src="data1/images/sliderfullscreenslide2.jpg" alt="Ably Teams" title="Ably Teams" id="wows1_0" /></a>آموزش برنامه نویسی </li>
                        <li><a href="http://wowslider.com"><img src="data1/images/bg1.jpg" alt="wowslideshow" title="Ably.ir" id="wows1_1" /></a></li>
                        <li><img src="data1/images/webdevelopment.jpg" alt="web development" title="web development" id="wows1_2" /></li>
                    </ul>
                </div>
                <div class="ws_bullets">
                    <div>
                        <a href="#" title="Ably Teams"><span><img src="data1/tooltips/sliderfullscreenslide2.jpg" alt="Ably Teams" />1</span></a>
                        <a href="#" title="Ably.ir"><span><img src="data1/tooltips/bg1.jpg" alt="Ably.ir" />2</span></a>
                        <a href="#" title="web development"><span><img src="data1/tooltips/webdevelopment.jpg" alt="web development" />3</span></a>
                    </div>
                </div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.net">wowslider.net</a> by WOWSlider.com v8.6</div>
                <div class="ws_shadow"></div>
            </div>
        </div>
    </div>
    <!-- End WOWSlider.com BODY section -->
    <!-- Start main content -->






    <section class="light-gray-bg pv-30 clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2 class="text-center">Ably <strong>Features</strong></h2>
                    <div class="separator"></div>
                    <p class="large text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptas facere vero ex tempora saepe perspiciatis ducimus sequi animi.</p>
                </div>
                <div class="col-md-4 ">
                    <div class="pv-30 ph-20 feature-box bordered shadow text-center">
                        <h3>UI &amp; Design</h3>
                        <div class="separator clearfix"></div>
                        <p class="large text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptas facere vero ex tempora saepe perspiciatis ducimus sequi animi.</p>
                        <a href="page-services.html">Read More </a>
                    </div>
                </div>
                <div class="col-md-4 ">
                    <div class="pv-30 ph-20 feature-box bordered shadow text-center ">
                        <span class="icon default-bg circle"><i class="fa fa-connectdevelop"></i></span>
                        <h3>Latest Technologies</h3>
                        <div class="separator clearfix"></div>
                        <p>Iure sequi unde hic. Sapiente quaerat sequi inventore veritatis cumque lorem ipsum dolor sit amet, consectetur.</p>
                        <a href="page-services.html">Read More </a>
                    </div>
                </div>
                <div class="col-md-4 ">
                    <div class="pv-30 ph-20 feature-box bordered shadow text-center ">
                        <span class="icon default-bg circle"><i class="fa icon-snow"></i></span>
                        <h3>The Best way</h3>
                        <div class="separator clearfix"></div>
                        <p>Inventore dolores aut laboriosam cum consequuntur delectus sequi lorem ipsum dolor sit amet, consectetur.</p>
                        <a href="page-services.html">Read More </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section default-bg clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                        <div class="row text-center">
                            <div class="col-sm-8">
                                <h1 class="title">Don't Miss Out Our Offers</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quasi explicabo consequatur consectetur, a atque voluptate officiis eligendi nostrum.</p>
                            </div>
                            <div class="col-sm-4">
                                <br>
                                <p><a class="btn btn-lg btn-gray-transparent btn-animated" href="#">Learn More<i class="fa fa-arrow-right pl-20"></i></a></p>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 silverBackground heightBreak light-gray-bg ">
            </div>
        </div>
    </div>
    <section class="section whiteBackground clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="title">Don't Miss Out Our Offers</h1>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Read More...</button>
                    <br />
                    <br />
                </div>
            </div>
        </div>
    </section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 silverBackground heightBreak light-gray-bg ">
            </div>
        </div>
    </div>
    <section class="section whiteBackground text-danger clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="title">Don't Miss Out Our Offers</h1>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Read More...</button>
                    <br />
                    <br />
                </div>
            </div>
        </div>
    </section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 silverBackground heightBreak light-gray-bg ">
            </div>
        </div>
    </div>
    <section class="section whiteBackground clearfix whiteBackground">
            <div class="imageWrapper">
                <ul class="footerImg">
                    <li>
                        <img class="img-responsive" src="img/1.jpg" alt="ABLY">
                    </li>
                    <li>
                        <img class="img-responsive" src="img/2.jpg" alt="ABLY">
                    </li>
                    <li>
                        <img class="img-responsive" src="img/4.jpg" alt="ABLY">
                    </li>
                    <li>
                        <img class="img-responsive" src="img/5.jpg" alt="ABLY">
                    </li>
                    <li>
                        <img class="img-responsive" src="img/6.jpg" alt="ABLY">
                    </li>
                </ul>
            </div>
    </section>

    <footer class="clearfix" id="footer">
        <!-- footer start -->
        <div class="subfooter">
            <div class="container">
                <div class="subfooter-inner">
                    <div class="row">
                        <div class="col-md-12">
                            <p class="text-center">Copyright &copy; 2015 The Project by <a href="http://Ably.ir" target="_blank">Ably</a>. All Rights Reserved</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer end -->
    </footer>


    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Product details</h4>
                </div>
                <div class="modal-body">
                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>


    <!-- End main  content -->
    <!-- jquery main file -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap js -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Jquery wow Slider -->

    <script type="text/javascript" src="engine1/wowslider.js"></script>
    <script type="text/javascript" src="engine1/script.js"></script>

</body>
</html>

همچنین کل CSS هایی که تاکنون نوشته ایم به صورت زیر خواهد بود:

.whiteBackground {
    background-color: #ffffff;
    color: black;
}


.info-bar-text {
    color: white;
    text-align: center;
    line-height: 25px;
    vertical-align: middle;
}

.info-bar {
    background-color: black;
}

.navbar-brand img {
    margin-top: -10px;
}

.header-slider {
    margin-top: -19px;
}



.separator {
    height: 1px;
    margin: 20px auto 15px;
    position: relative;
    width: 100%;
}


.heightBreak {
    height: 50px;
}

.subfooter {
    color: #999;
    font-size: 14px;
    line-height: 1.3;
}

.subfooter {
    background-color: #f5f5f5;
    border-top: 1px solid #eaeaea;
    padding: 25px 0;
}


.separator:after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.09) 35%, rgba(0, 0, 0, 0.09) 70%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    bottom: -1px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}

.shadow-narrow:before, .shadow:before {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 60%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.shadow-narrow:after, .shadow:after {
    border-radius: 10%;
    bottom: 2px;
    box-shadow: 0 5px 7px #999;
    content: "";
    height: 50%;
    left: 50%;
    margin-left: -48%;
    position: absolute;
    transition: all 0.3s ease-in-out 0s;
    width: 96%;
    z-index: 1;
}

.shadow, .shadow-narrow {
    background-color: #fff;
    position: relative;
}

    .shadow *, .shadow-narrow * {
        position: relative;
        z-index: 3;
    }

.bordered {
    border-radius: 3px;
}

.shadow, .shadow-narrow {
    background-color: #fff;
    position: relative;
}

.feature-box, .feature-box-2 {
    margin-bottom: 30px;
}

    .bordered, .feature-box-2.boxed {
        border: 1px solid #f1f1f1;
    }

.pv-30 {
    padding-bottom: 30px;
    padding-top: 30px;
}

.ph-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.object-visible, .touch .object-non-visible {
    transition: opacity 0.6s ease-in-out 0s;
}

.object-visible, .touch .object-non-visible {
    opacity: 1 !important;
}

.object-non-visible {
    opacity: 0;
}


.light-gray-bg {
    background-color: #fafafa;
    border-bottom: 1px solid #f3f3f3;
    border-top: 1px solid #f3f3f3;
}

.default-bg {
    background-color: #09afdf;
    color: #ffffff;
}
.imageWrapper {
    margin: 0 -10px;
    width: 100%;

}
.footerImg, .footerImg li {
    margin: 0 -10px 0 6px;
    padding: 0 0 0 0;
    display: inline-block;
}

    .footerImg li img{
        width: 269px;
        height: 200px;
    }

فایل های پروژه را نیز می توانید از بخش زیر دانلود کنید

دانلود پروژه بوت استرپ