آموزش برنامه نویسی - تاپ دمی
ورود عضویت
ساخت فروشگاه اینترنتی با html ، css و bootstrap - بخش دوم

ساخت فروشگاه اینترنتی با html ، css و bootstrap - بخش دوم

طراحی وب

19 اردیبهشت، 1402

در ادامه بخش اول ، در این مقاله آموزشی به صورت رایگان و از صفر تا صد یک فروشگاه اینترنتی را به کمک html ، css و bootstrap با هم ایجاد می کنیم.

شروع به کار با سند html

در ادامه بخش قبل وارد فایل index.html شده و درون بخش body شروع به ایجاد header می کنیم ، مانند کد های زیر ابتدا یک تگ header ایجاد کرده و درون آن تگ div باکلاس top_header را قرار می دهیم (در ادامه کد های مربوط به این کلاس را در فایل css خود ایجاد می کنیم) ، سپس تگ div دیگری ایجاد کرده و از کلاس container که مربوط به بوت استرپ است اسفاده می کنیم تا محتوای ما در یک قالب استاندارد قرار بگیرند.

    <header>
        <div class="top_header">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-lg-6 col-12">
                        <ul class="top-menu top-menu-list list-unstyled">
                            <li><a href="#">خرید اقساطی </a></li>
                            <li><a href="#">موجودی کالا ها</a></li>
                            <li><a href="#">درباره ما</a></li>
                            <li><a href="#">تماس با ما</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-5 col-12 ">
                        <div class="header-lang ">
                            <ul class="top-menu top-menu-lang list-unstyled">
                                <li><a href="/"  class="link-active">فارسی</a></li>
                                <li><a href="/" class="">English</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="header_main">
                    <div class="row">
                        <div class="col-lg-3 col-md-4 col-12"><a href="/" class="">
                            <div class="header_logo text-center">
                                <img src="img/logo.svg" alt="logo1" class="logo">
                            </div>
                        </a></div>
                        <div class="col-lg-5 col-md-8 col-12">
                            <div class="c-header__search">
                                <form>
                                    <div class="input-group input-group-sm mb-3 search_top_header">
                                        <div class="input-group-prepend">
                        <span class="input-group-text input-group-text-custom" id="inputGroup-sizing-sm"><i
                                class="fa fa-search"></i></span>
                                        </div>
                                        <input type="text" class="input_custom form-control"
                                               aria-label="Sizing example input"
                                               aria-describedby="inputGroup-sizing-sm"
                                               placeholder="جستجو ... ">
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-lg-4 d-none d-lg-block">
                            <ul class="float-left list-inline header_main_nav list-unstyled">
                                <li class="list-inline-item">
                                    <a><i class="fa fa-user"></i>ورود</a>
                                </li>

                                <li class="list-inline-item">
                                    <a href="#" class="profile"><span class="iconprofile"><i
                                            class="fa fa-cart-arrow-down"></i></span>سبد خرید</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <nav class="navbar navbar-expand-lg navbar-light shadow-sm bg-white">
                    <div class="container">
                        <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse"
                                data-target="#navbar4">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse" id="navbar4">
                            <ul class="navbar-nav pl-lg-4">
                                <li class="nav-item px-lg-2 active"><a class="nav-link" href="#"> <span
                                        class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>
                                    خانه</a></li>
                                <li class="nav-item px-lg-2 active"><a class="nav-link" href="#"> <span
                                        class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>پرفروش‌ترین‌ها</a>
                                </li>
                                <li class="nav-item px-lg-2 active"><a class="nav-link" href="#"> <span
                                        class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>
                                        تخفیف‌ها و پیشنهادها
                                    </a></li>
                                <li class="nav-item px-lg-2 active"><a class="nav-link" href="#"> <span
                                        class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>شگفت‌انگیزها</a>
                                </li>

                                <li class="nav-item px-lg-2 dropdown d-menu">
                                    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
                                       aria-haspopup="true" aria-expanded="false"><span
                                            class="d-inline-block d-lg-none icon-width"><i
                                            class="far fa-caret-square-down"></i></span>

                                            دسته‌بندی کالاها
                                    </a>
                                    <div class="dropdown-menu shadow-sm sm-menu" aria-labelledby="dropdown01">
                                        <a class="dropdown-item" href="#">پوشاک</a>
                                        <a class="dropdown-item" href="#">مواد غذایی</a>
                                        <a class="dropdown-item" href="#">محصولات دیجیتال</a>
                                    </div>
                                </li>
                            </ul>

                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </header>

همانطور که در کد های بالا مشاهده می کنید در این بخش ما از کد های css و کلاس های bootstrap استفاده می کنیم برای مثال از کلاس های align-items ، justify-content ، navbar و... استفاده کرده ایم که روش کار با این کلاس ها و سایر کلاس های بوت استرپ را می توانید در دوره آموزشی بوت استرپ به صورت رایگان یادبگیرید.

در ادامه کلاس های css شخصی سازی شده را که در کد های بالا مشاهده کردیم به پروژه خود اضافه می کنیم ، مانند :top_header ، top-menu ، header_main و...

شروع به کار با css

قبل از شروع به کار با کلاس های شخصی سازی شده ابتدا فایل css خود را کامل می کنیم :

برای این کار ابتدا فونت های خود را مطابق دستور زیر قرار میدهیم :

@font-face {
  font-family: ;
  src: url();
  src: url() format(), url() format(), url() format();
}

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

body {
  background-color: #f6f8f9;
  text-align: right;
  direction: rtl;
  font-family: Yekan-Medium;
  font-weight: 400;
  line-height: 2;
}

برای مثال در کد بالا من نوع فونت استفاده شده در وب سایت را Yekan-Medium قرار دادام.

همینطور تگ های a خود را شخصی سازی می کنیم :

a {
  color: #333;
  text-decoration: none !important;
}

در ادامه کلاس های css شخصی سازی شده را به فایل استایل خود اضافه می کنیم :

.top_header{
  padding: 20px 0;
}

.top-menu-list{ display: flex; justify-content: flex-start; } .top-menu-lang { display: flex; justify-content: flex-end; } .top-menu li:first-child { margin-right: 0; } .top-menu li { font-size: 13px; font-weight: 500; color: #38484d; margin-right: 25px; }

.header-lang ul li a.link-active {
  font-weight: 700;
  color: #385898;
  box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
  border-radius: 10px;
  border: 1px solid #385898;
}
.header-lang ul li a {
  padding: 3px 15px;
}
.header_main {
  height: 83px;
  border-bottom: 2px solid #385898 !important;
  background: #fff;
  align-items: center;
  box-shadow: 0 2px 0 0 rgb(169 183 190 / 15%);
  border-radius: 10px 10px 0 0;
  color: #38484d;
}
.header_logo {
  padding: 0 30px;
  display: flex;
  align-items: center;
  box-shadow: -15px 0 15px -15px rgb(0 0 0 / 30%);
  margin-left: 15px;
}
.c-header__search input {
  width: 100%;
  border: 0;
  padding-right: 30px;
  height: 50px;
}
.search_top_header{
  top: 30px;
}
.input-group-text-custom{
  border: 0;
  background: #fff;
  color: #385898;
  font-size: 20px;
}
.input-group-text-custom > i{
  font-size: 18px;
}
.header_main_nav {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  margin-right: auto;
  height: 100%;
}
.header_main_nav li:first-child {
  border-right: none;
}
.header_main_nav li {
  border-right: 1px solid #eaf2f4;
}
.header_main_nav li a {
  display: block;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
.header_main_nav i {
  display: block;
  font-size: 20px;
  padding-bottom: 15px;
}

همانطور که مشاهده می کنید کد های دلخواه css خود را ایجاد کرده و نام کلاس آن را درون تگ های html خود قرار می دهیم شما می توانید از همین کد های برای ایجاد فروشگاه اینترنتی خود استفاده کنید و یا در آن ها تغییراتی را به وجود اورید.

در ادامه کد های تکمیل شده css کل وب سایت را مشاهده می کنید میتوانید دقیقا مانند استیال زیر را در فایل css خود قرار دهید و یا تغییرات مورد نیاز را اعمال کنید .

بخش اول


.input-group-text-custom > i{
  font-size: 18px;
}
.input_custom:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}
.c-header__search .search-border {
  position: absolute;
  bottom: 0;
  left: 45%;
  height: 2px;
  width: 10px;
  visibility: hidden;
  background-color: #385898;
  transition: all .2s ease;
}
.input-group-text-custom{
  border: 0;
  background: #fff;
  color: #385898;
  font-size: 20px;
}
.input_custom:focus {
  outline: none !important;
}
.search_top_header{
  top: 30px;
}
.navbar{
  align-items: center;
  box-shadow: 0 2px 0 0 rgb(169 183 190 / 15%);
  border-radius: 0 0 10px 10px;
  color: #38484d;
}
.nav-item .nav-link{
  color: #385898 !important;
  display: block;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  word-wrap: break-word;
  text-transform: capitalize;
  cursor: pointer;
  font-family: dana VF,tahoma;
}

.dropdown-menu {
  text-align: right;
  direction: rtl;
  width: 225px;
  font-family: dana VF,tahoma;
}
.dropdown-menu a:hover{
  color:#385898;font-weight:700;
  font-family: dana VF,tahoma;
}
.navbar-nav .nav-item i{
  font-size: 20px;
}
.title-subtitle {
  color: #385898 !important;
  font-size: 17px;
  font-weight: 500;
  line-height: 27px;
  margin-bottom: 9px;
  text-align: right;
}
.about_title-subtitle {
  color: #38484d;
  font-family: 'dana VF';
  font-size: 16px;
  padding: 7px 0;
  font-weight: 700;
}
.about_title-subtitle span {
  display: inline-block;
  position: relative;
}
.about_title-subtitle span:before{
  width: 30px;
  background: #385898 !important;
  display: block;
  left: -40px;
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1px;
  height: 2px;
}
.about{
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.about_text h1{
  font-size: 22px;
  font-weight: 600;
  color: #385898 !important;
}
.about_text p{
  font-size: 14px;
  font-family: 'Yekan-Regular';
  color: #454444;
}
.btn-outline-primary {
  color: #385898;
  border-color: #385898;
}
.btn-outline-primary:hover {
  color: #FFFFFF;
  border-color: #385898;
  background: #385898;
}
.owl-carousel-about img {
  filter: gray;
  -webkit-filter: grayscale(1);
  cursor: pointer;
}
.owl-carousel-about img {
  transition: all .4s ease-in-out;
}
.owl-carousel-about img:hover {
  filter: none;
}
.owl-carousel-about{
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.swiper-item {
  display: flex;
  flex-direction: column;

  border-left: 2px solid #f6f8f9;
  padding-bottom: 20px;
}
.swiper-item .swiper-item-title {
  font-weight: 600;
  color: #385898;
  font-size: 14px;
  text-align: center;
  font-family: 'Yekan-Regular';
}
.c-album .swiper-item img{
  padding: 20px 30px;
}
.swiper-item .swiper-item-link {
  width: 100%;
  height: 100%;
  position: absolute;
}
.box-title {
  color: #38484d;
  font-family: 'dana VF';
  font-size: 16px;
  border-bottom: 2px solid #f6f8f9;
  padding: 20px 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.box{
  background: #fff;
  box-shadow: 0 2px 0 0 rgb(169 183 190 / 15%);
  border-radius: 10px;
  /*margin: 10px 0;*/
  padding-bottom: 30px;
}
.icon-album {
  font-size: 20px;
  padding: 0 0 0 20px;
}
.m-banner {
  background: #fff;
  margin: 10px 0;
  box-shadow: 0 2px 0 0 rgb(169 183 190 / 15%);
  border-radius: 10px;
  border: 1px solid #ececec;
  text-align: center;
}
.m-banner img {
  border-radius: 10px;
}
.post-grid .content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px 25px;
  z-index: 3;
}
figure {
  display: block;
  overflow: hidden;
  position: relative;
}

بخش دوم


.blog-title {
  padding-bottom: 30px;
}
.blog-title-text {
  font-size: 14px;
  font-weight: 700;
  flex-grow: 1;
  position: relative;
}
.blog-title-text span {
  position: relative;
  z-index: 2;
  background: #f6f8f9;
  padding-left: 15px;
  color: #626e72;
}
.blog-title-text:after {
  content: "";
  height: 1px;
  width: 100%;
  background: #e7eaeb;
  position: absolute;
  right: 0;
  top: 16px;
}
.blog-title-show {
  color: #385898;
  margin-right: 1%;
  font-size: 13px;
  font-family: Yekan-Regular;
}
.blog-article-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 0 0 rgb(169 183 190 / 15%);
}
.blog-article-box img {
  border-radius: 10px 10px 0 0;
  width: 100%;
}
.blog-article-title {
  color: #385898;
}
.blog-article-title h6{
  min-height: 30px;
  font-size: 12px;
  font-family: 'Yekan-Regular';
}
.blog-article-time {
  font-size: 11px;
  font-family: 'Yekan-Regular';
  color: #5b6d73;
}
.blog-article-more {
  float: left;
  color: #4267b2;
  border: 1px solid #e7eaeb;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 11px;
  font-family: 'Yekan-Regular';
}
.blog-post-detail{
  border-top: 1px solid #cccc;
}

.min-footer {
  margin-top: 40px;
  background: #4268b2;
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-bottom: 10px;
}
.min-footer-category {
  line-height: 35px;
  margin-right: 2%;
}
.min-footer-title {
  line-height: 1.2;
  font-size: 16px;
  margin-bottom: 15px;
}
.min-footer-category li  {
  float: right;
  width: 50%;
  font-size: 12px;
}
.min-footer-access {
  line-height: 35px;
}
.min-footer-access ul {
  width: 100%;
}
.min-footer-access ul li {
  width: 50%;
  float: right;
  font-size: 12px;
}
.min-footer-description {
  padding: 0 20px 0 43px;
}
.min-footer-description p {
  font-size: 12px;
}
.min-footer-contact {
  margin-right: 2%;
}
.min-footer-title {
  line-height: 1.2;
  font-size: 16px;
  margin-bottom: 15px;
}
.min-footer-contact li {
  line-height: 36px;
  padding: 0;
}
.min-footer-icon {
  margin-left: 5px;
  font-size: 16px;
}
.min-footer-separator{
  margin: 10px 0!important;
  border-top: 1px solid #4d6eba!important;
}
.min-footer-social {
  display: flex;
  justify-content: space-between;
}
.min-footer-contact li {
  line-height: 36px;
  padding: 0;
  font-size: 13px;
  font-family: 'Yekan-Regular';
}
.min-footer-copyright {
  background: #2f5099;
  color: #fff;
  padding: 16px 44px;
  font-size: 12px;
}
.min-footer-social li i{
  font-size: 25px;
}

.blog-article .card {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  height: calc(100% - 0px);
  border: 1px solid #ddd;
}
.blog-article .card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: 0 center;
}
.blog-article .card h3 {
  padding: 10px 0;
  font-size: 25px;
  font-weight: 500;
  text-transform: uppercase;
}
.blog-article .card p {
  color: #555;
  font-size: 14px;
}
.blog-article .card .card-footer {
  background: transparent;
  border: 0;
  padding: 1rem;
  padding-bottom: 2rem;
}
.blog-article .card .btn {
  padding: 10px 35px;
}
.c-album .swiper-button-prev{
  right: 0;
  border-radius: 5px 0 0 5px;
  box-shadow: -1.5px 0 4px 0 rgb(0 0 0 / 15%);
}
.c-album .swiper-button-next{
  left: 0;
  border-radius: 0 5px 5px 0;
  box-shadow: 1.5px 0 4px 0 rgb(0 0 0 / 15%);
}
.c-album .swiper-button-prev, .c-album .swiper-button-next {
  top: calc(50% - 20px);
  position: absolute;
  z-index: 2;
  cursor: pointer;
  padding: 4px 5px 4px 8px;
  color: #385898;
}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
  content: 'prev';
  font-size: 15px;
  font-weight: 700;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
  content: 'next';
  font-size: 15px;
  font-weight: 700;
}
.box_shadow {
  /*box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);*/
  box-shadow: 0 -1px 1px 0 rgb(0 0 0 / 5%), 0 1px 5px 0 rgb(0 0 0 / 15%);
}
.header-lang ul li a.link-active {
  font-weight: 700;
  color: #385898;
  box-shadow: 0 0 15px 0 rgb(0 0 0 / 10%);
  border-radius: 10px;
  border: 1px solid #385898;
}
.header-lang ul li a {
  padding: 3px 15px;
}

بخش سوم

.product-tab{
  background: #fff;
  box-shadow: 0 2px 0 0 rgb(169 183 190 / 15%);
  border-radius: 10px;
  border: 1px solid #eaeef0;
}
.product-tab .nav-pills{
  border-radius: 10px 10px 0 0;
  border-bottom: 3px solid #eaeef0;
}
.product-tab .nav-item .nav-link{
  font-size: 18px;
  border: 0;
  border-left: 1px solid #eaeef0;
  border-top: 4px solid #fff;
  border-radius: 0;
  padding: 1rem 1.5rem;
}
.product-tab .nav-pills .nav-item .nav-link.active{
  border: 0;
  border-left: 1px solid #eaeef0;
  border-top: 4px solid #385898;
  background-color: #fff;
}
.product-tab .tab-pane{
  padding: 10px;
  color: #686868;
  font-size: 15px;
  font-family: 'Yekan-Regular';
}
.comments-head {
  border-bottom: 5px solid #eaeef0;
  padding-bottom: 20px;
}
.comments-head .title {
  font-size: 18px;
  font-weight: 700;
  color: #828282;
}
.comments-head .sub_title {
  font-size: 12px;
  color: #828282;
}
.btn-ui {
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  border: 0;
  padding: 5px 20px;
  cursor: pointer;
  display: inline-block;
}
.btn-ui.blue {
  background: #385898;
  box-shadow: 0 3px 4px 0 rgb(60 89 148 / 65%);
}
.product-tab .form-control {
  display: block !important;
  width: 100% !important;
  padding: .375rem .75rem !important;
  font-size: .75rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #495057 !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid #ced4da !important;
  border-radius: .25rem !important;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
}
.product-tab .tab-pane {
  padding: 20px;
}

.product-header{
  background: #fff;
  border-radius: 10px;
  margin-bottom: 5px;
  height: 70px;
  display: flex;
}
.pro-order{
  color: #fff;
  background: #385898;
  border-radius: 10px 0 0 10px;
  height: 69px;
  padding: 10px;
}

.pro-order .nav-link {
  color: #fff !important;
}
.product-header > p{
  padding: 10px;
  font-size: 17px;
  color: #535353;
  line-height: 55px;
}
.product-header > i{
  font-size: 24px;
  padding: 10px;
  line-height: 55px;
  color: #385898;
}
/*
*/

.wrapper {
  margin: 0 auto;
  width: 80%;
  text-align: center;
}
.image-gallery {
  margin: 0 auto;
  display: table;
}
.primary, .thumbnails {
  display: table-cell;
}
.thumbnails {
  width: 200px;
}
.primary {
  width: 600px;
  height: 400px;
  background-color: #cccccc;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 0 0 rgb(169 183 190 / 15%);
}
.thumbnail:hover .thumbnail-image, .selected .thumbnail-image {
  border: 4px solid #385898;
}
.thumbnail-image {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: 4px solid #fff;
}
.product-main{
  background: #fff;
  box-shadow: 0 2px 0 0 rgb(169 183 190 / 15%);
  border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  font-family: 'Yekan-Regular';
}
.list-text{
  color: #385898;
  font-weight: bolder;
  font-size: 18px;
}
.product-main .list-text-item li:before {
  color: #385898;
  font-weight: bolder;
  display: inline-block;
  width: 1em;
  content: "\2022";
  font-size: 16px;
}
.border_bottom {
  border-bottom: 1px solid #f2f2f2;
}
.modal {
  top: 110px !important;
}
.btn-send-order {
  background: #385898;
  box-shadow: 0 1px 0px 0 rgb(60 89 148 / 65%);
}
.close-modal {
  display: contents;
  color: #5b6d73;
  font-size: 15px;
}
.modal-title-custom {
  color: #5b6d73;
  font-size: 15px;
}
.modal-form{
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

ریسپانسیو

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

می توانید آموزش کامل responsive را در این مقاله مشاهده کنید.

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

@media (min-width:576px)
{
  .container,.container-sm{max-width:540px
  }
}
@media (min-width:768px)
{
  .container,.container-md,.container-sm
  {
    max-width:720px
  }
}
@media (min-width:992px)
{
  .container,.container-lg,.container-md,.container-sm
  {
    max-width:960px
  }
}
@media (min-width:1200px)
{
  .container,.container-lg,.container-md,.container-sm,.container-xl
  {
    max-width:1140px
  }
}
@media (min-width:1350px)
{
  .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl
  {
    max-width:1280px
  }
}
@media (min-width:1440px)
{
  .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl,.container-xxxl
  {
    max-width:1350px
  }
}
@media (min-width:1600px)
{
  .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl,.container-xxxl,.container-xxxxl
  {
    max-width:1500px
  }
}

ادامه کار با سند html

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

<min>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div id="carouselExampleControls" class="carousel slide box_shadow rounded" data-ride="carousel">
                    <div class="carousel-inner rounded">
                        <div class="carousel-item active">
                            <img src="./img/1.webp" class="d-block w-100" alt="slider1">
                        </div>
                        <div class="carousel-item">
                            <img src="img/2.webp" class="d-block w-100" alt="slider2">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
            <div class="col-12 mt-4">
                <div class="bg-white border-bottom p-3 shadow-sm about">
                    <div class="row">
                        <div class="col-lg-5 col-12 order-lg-first order-last">
                            <img src="img/3.webp" alt="" class="img-fluid">
                        </div>
                        <div class="col-lg-7 col-12 about_text">
                            <div class="about_title-subtitle"><span>عضویت ویژه</span></div>
                            <h1>مشتری ثابت ما باشید</h1>
                            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک
                                است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط
                                تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <!-- Swiper -->
                <div class="owl-carousel owl-theme bg-white owl-carousel-about shadow-sm">
                    <div class="item"><img src="img/logo1.png" alt=""></div>
                    <div class="item"><img src="img/logo2.png" alt=""></div>
                    <div class="item"><img src="img/logo3.png" alt=""></div>
                    <div class="item"><img src="img/logo4.png" alt=""></div>
                    <div class="item"><img src="img/logo5.png" alt=""></div>
                </div>
            </div>
            <div class="col-md-12 mt-4">
                <div class="box pb-0 box_shadow">
                    <div class="box-title">
                        <i class="fa fa-list p-2" aria-hidden="true"></i>
                        پرفروش ترین محصولات
                    </div>
                    <div class="c-box__content">
                        <div class="c-album swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="" class="swiper-lazy swiper-lazy-loaded" src="img/4.webp">
                                    <div class="swiper-item-title">  متن ساختگی</div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/5.webp">
                                    <div class="swiper-item-title"> متن ساختگی</div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/6.webp">
                                    <div class="swiper-item-title">  متن ساختگی</div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/5.webp">
                                    <div class="swiper-item-title"> متن ساختگی</div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="" class="swiper-lazy swiper-lazy-loaded" src="img/4.webp">
                                    <div class="swiper-item-title">  متن ساختگی</div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/5.webp">
                                    <div class="swiper-item-title"> متن ساختگی</div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/6.webp">
                                    <div class="swiper-item-title">  متن ساختگی</div>
                                </div>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                            <!-- Add Pagination -->
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-4">
                <aside class="m-banner box_shadow">
                    <a href="#" target="_blank">
                        <img src="img/7.webp" class="img-fluid">
                    </a>
                </aside>
            </div>
            <div class="col-md-12 mt-4">
                <div class="box pb-0 box_shadow">
                    <div class="box-title">
                        <i class="fa fa-list p-2" aria-hidden="true"></i>
                        محبوب ترین محصولات
                    </div>
                    <div class="c-box__content">
                        <div class="c-album swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/44.jpg">
                                    <div class="swiper-item-title">متن ساختگی  </div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/88.jpg">
                                    <div class="swiper-item-title"> متن ساختگی</div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/66.jpg">
                                    <div class="swiper-item-title">  متن ساختگی</div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/77.jpg">
                                    <div class="swiper-item-title">  متن ساختگی </div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/44.jpg">
                                    <div class="swiper-item-title"> متن ساختگی</div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/88.jpg">
                                    <div class="swiper-item-title"> متن ساختگی</div>
                                </div>
                                <div class="swiper-item swiper-slide">
                                    <a href="#" class="swiper-item-link"></a>
                                    <img alt="مش آجدار" class="swiper-lazy swiper-lazy-loaded" src="img/77.jpg">
                                    <div class="swiper-item-title">متن ساختگی </div>
                                </div>
                            </div>
                            <!-- Add Pagination -->
                            <div class="swiper-pagination"></div>
                            <!-- Add Pagination -->
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 mt-3">
                <section class="blog-article pt-5">
                    <div class="container">
                        <div class="d-flex align-self-center blog-title">
                            <div class="blog-title-text">
                                <span> مقالات</span>
                            </div>
                            <a href="/" target="blank" class="blog-title-show">مشاهده همه</a>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 col-lg-3 mb-lg-0 mb-2">
                                <div class="card shadow-sm">
                                    <img src="img/22.jpg"/>
                                    <div class="card-body blog-post-detail">
                                        <a href="/" target="_blank" class="blog-article-title">
                                            <h6>لورم ایپسوم متن ساختگی با تولید سادگی</h6>
                                        </a>
                                        <span class="blog-article-time">4 دقیقه مطالعه</span>
                                        <a href="/" target="_blank" class="blog-article-more">مطالعه بیشتر</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3 mb-lg-0 mb-2">
                                <div class="card shadow-sm">
                                    <img src="img/33.jpg"/>
                                    <div class="card-body blog-post-detail">
                                        <a href="/" target="_blank" class="blog-article-title">
                                            <h6>لورم ایپسوم متن ساختگی با تولید سادگی</h6>
                                        </a>
                                        <span class="blog-article-time">4 دقیقه مطالعه</span>
                                        <a href="/" target="_blank" class="blog-article-more">مطالعه بیشتر</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3 mb-lg-0 mb-2">
                                <div class="card shadow-sm">
                                    <img src="img/22.jpg"/>
                                    <div class="card-body blog-post-detail">
                                        <a href="/" target="_blank" class="blog-article-title">
                                            <h6>لورم ایپسوم متن ساختگی با تولید سادگی</h6>
                                        </a>
                                        <span class="blog-article-time">4 دقیقه مطالعه</span>
                                        <a href="/" target="_blank" class="blog-article-more">مطالعه بیشتر</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3 mb-lg-0 mb-2">
                                <div class="card shadow-sm">
                                    <img src="img/33.jpg"/>
                                    <div class="card-body blog-post-detail">
                                        <a href="/" target="_blank" class="blog-article-title">
                                            <h6>لورم ایپسوم متن ساختگی با تولید سادگی</h6>
                                        </a>
                                        <span class="blog-article-time">4 دقیقه مطالعه</span>
                                        <a href="/" target="_blank" class="blog-article-more">مطالعه بیشتر</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
</min>

بخش footer

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

<footer>
    <div class="min-footer">
        <div class="container">
            <div class="row flex-md-row">
                <div class="col-sm-6 col-lg-3 order-sm-1 order-lg-1 min-footer-link">
                    <section class="min-footer-category mt-4">
                        <div class="min-footer-title">دسته بندی
                        </div>
                        <ul class="list-unstyled">
                            <li>
                                <a href="/" class="text-white">تست</a>
                            </li>
                            <li>
                                <a href="/" class="text-white">تست</a>
                            </li>
                            <li>
                                <a href="/" class="text-white">تست</a>
                            </li>
                            <li>
                                <a href="/" class="text-white">تست</a>
                            </li>
                            <li>
                                <a href="/" class="text-white">تست</a>
                            </li>
                            <li>
                                <a href="/" class="text-white">تست</a>
                            </li>
                            <li>
                                <a href="/" class="text-white">تست</a>
                            </li>
                            <li>
                                <a href="/" class="text-white">تست</a>
                            </li>
                        </ul>
                    </section>
                </div>
                <div class="col-md-12 col-lg-5 order-sm-3 order-lg-2">
                    <section class="text-justify mt-4 min-footer-description">
                        <div class="min-footer-title text-center">درباره ما
                        </div>
                        <p class="">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان
                            گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط
                            تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است
                            چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط تکنولوژی
                            مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</p>
                    </section>
                </div>
                <div class="col-sm-6 col-lg-4 order-sm-2 order-lg-3">
                    <section class="min-footer-contact mt-4">
                        <div class="min-footer-title text-juxtify">تماس با ما</div>
                        <ul class="list-unstyled">
                            <li>
                                <i class="fa fa-map-signs p-2"></i>
                                <span>آدرس</span>
                            </li>
                            <li>
                                <ul class="p-0">
                                    <li class="d-inline-block">
                                        <i class="fa fa-phone p-2">
                                        </i>شماره تماس  
                                    </li>
                                    <li class="d-inline-block float-left">
                                        <span class="min-footer-phone">123456</span>
                                    </li>
                                </ul>
                            </li>
                            <div class="clearfix"></div>
                            <li>
                                <ul class="p-0">
                                    <li class="d-inline-block">
                                        <i class="fa fa-mail-bulk p-2">

                                        </i>ایمیل 
                                    </li>
                                    <li class="d-inline-block float-left">info@test.test</li>
                                </ul>
                            </li>
                            <hr class="min-footer-separator">
                        </ul>
                        <ul class="min-footer-social list-unstyled">
                            <li>
                                <a href="/" target="_blank">
                                    <i class="fab fa-telegram"></i>
                                </a>
                            </li>
                            <li>
                                <a href="/" target="_blank">
                                    <i class="fab fa-whatsapp"></i>
                                </a>
                            </li>
                            <li>
                                <a href="/" target="_blank">
                                    <i class="fab fa-twitter-square"></i>
                                </a>
                            </li>
                            <li>
                                <a href="/" target="_blank">
                                    <i class="fab fa-instagram"></i>
                                </a>
                            </li>
                            <li>
                                <a href="/" target="_blank">
                                    <i class="fab fa-linkedin"></i>
                                </a>
                            </li>
                            <li>
                                <a href="/" target="_blank">
                                    <i class="fab fa-facebook-square"></i>
                                </a>
                            </li>
                        </ul>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <div class="min-footer-copyright text-center">
        <div class="container">
            کلیه حقوق این وبسایت متعلق به  topdemy.ir می باشد.

        </div>
    </div>
</footer>

جمع بندی

در صورتی که شما کد های مقالات بخش اول و دوم این مقاله آموزشی را در ادیتور کد خود قرار دهید یک وب سایت فروشگاهی ایجاد کرده اید ، همچنین برای درک بهتر از ساختار این تگ ها و کد ها و استایل ها لازم است با html ، css و bootstrap کار کرده باشید.

آموزش css

آموزش html

آموزش bootstrap

تگها:

#html #css #Bootstrap #فریمورک

توسعه دهنده وب

تقريبا ٩ سال از اولين سايتي كه طراحي كردم ميگذره ، این اشتیاق از آن زمان ادامه پیدا کرد که در نهایت من به عنوان یک توسعه دهنده وب مشغول به كار شدم. طي اين سال ها تجربه اي كه از شركت در پروژه ها و چالش هاي ياگيري برنامه نویسی بدست آوردم ، تصميم گرفتم كه اين تجربه رو با بقيه اشتراك بزارم كه نتیجه ی آن شد تاپ دمی.

محبوب ترینها
دسته بندی مقالات
پی اچ پی
طراحی وب
جاوا اسکریپت
کاربردی
لاراول
دیتابیس

این مقاله چقدر مفید بود ؟

مقالات مشابه