آموزش Bootstrap در ۳۰ دقیقه با طراحی صفحه اصلی یک وب سایت

آموزش Bootstrap در ۳۰ دقیقه با طراحی صفحه اصلی یک وب سایت

 

 

Bootstrap یک کتابخانه سمت کاربر (front-end) رایگان و منبع باز برای طراحی وب سایت ها و برنامه های وب است. شامل الگوهای طراحی مبتنی بر HTML و CSS برای همه چیز از تایپوگرافی ، فرم ها ، دکمه ها ، ناوبری و سایر اجزای رابط کاربری و همچنین برنامه های افزودنی JavaScript است. برخلاف بسیاری از چارچوب های وب دیگر ، Bootstrap فقط به توسعه front-end (رابط کاربری) مربوط می شود.

 

نسخه های بسیاری از Bootstrap وجود دارد. در این مقاله ، ما قصد داریم با استفاده از Bootstrap 4 یک وب سایت بسازیم.

 

 

پیش نیازها

 

قبل از شروع ، مهارت هایی وجود دارد که باید برای یادگیری و استفاده از چارچوب Bootstrap بدانید:

• مبانی HTML
• دانش پایه CSS
• و برخی از اصول jQuery

 

 

فهرست مطالب

 

ما در هنگام ساخت یک وب سایت نمونه در این مقاله موضوعات زیر را پوشش خواهیم داد:

 

• بارگیری و نصب Bootstrap 4
• ویژگی های جدید Bootstrap 4
• سیستم  Grid در Bootstrap
• نوار ناوبری (Navbar)
• سرتیتر (header)
• دکمه ها
• بخش درباره (About)
• بخش نمونه کارها (Portfolio)
• بخش وبلاگ
• کارتها
• بخش معرفی تیم
• فرم تماس (Contact)
• قلم ها (font)
• جلوه های پیمایش
• جمع بندی و نتیجه گیری

 

 

بارگیری و نصب Bootstrap 4

 

سه روش برای نصب و گنجاندن Bootstrap 4 در پروژه شما وجود دارد:

 

• استفاده از npm

با اجرای این دستور می توانید Bootstrap 4 را نصب کنید:

npm install bootstrap

 

• استفاده از شبکه تحویل محتوا (CDN):

با قرار دادن این پیوند در پروژه خود بین برچسب های head:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 

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

از اینجا می توانید Bootstrap 4 را دانلود کنید. در داخل این فایل zip دو پوشه css و js وجود دارد.

 

 

ویژگی های جدید Bootstrap 4

 

موارد جدید در Bootstrap 4 چیست؟ و تفاوت بین بوت استرپ 3 و 4 چیست؟

 

Bootstrap 4 اکنون دارای برخی ویژگی های مفیدی است که در نسخه قبلی وجود نداشت:

 

• Bootstrap 4 با استفاده از Flexbox Grid نوشته شده است ، در حالی که Bootstrap 3 با استفاده از روش float نوشته شده است.
• بوت استرپ 4 از واحدهای rem در CSS استفاده می کند در حالی که بوت استرپ 3 از px استفاده می کند.
• پانل ها (Panel) ، تصاویر کوچک (thumbnail) و well ها کاملاً کنار گذاشته شده اند. می توانید جزئیات بیشتر درباره تغییرات تاثیر گذار و ویژگی های حذف شده Bootstrap 4 را در اینجا بخوانید.

بدون اینکه خیلی به جزئیات تغییرات بپردازیم ، بیایید به سراغ موارد مهمتری برویم.

 

 

سیستم شبکه ای در Bootstrap

 

سیستم Grid (شبکه ای) در Bootstrap به شما کمک می کند تا طرح خود را ایجاد کنید و به راحتی یک وب سایت واکنش گرا ایجاد کنید. به جز کلاس xs که دیگر در Bootstrap 4 وجود ندارد ، هیچ تغییری در نام کلاس ها به وجود نیامده.

 هر سطر شبکه به 12 ستون تقسیم شده است ، بنابراین طرح شما باید بر این اساس باشد.

برای استفاده از سیستم grid باید یک کلاس row به div اصلی اضافه کنید.

در زیر چند نمونه از کلاس های مربوط به ستون های شبکه grid در بوت استرپ را می بینید. در نام کلاس های زیر ، به جای عدد ۲ می تواند اعداد ۱ تا ۱۲ باشد ، این عدد اندازه ستون را به صورت کسری از ۱۲ مشخص می کند.

• col-lg-2 : (حروف lg در نام آن به معنی large است) ، این کلاس برای دستگاههای بزرگی مانند لپ تاپ ها استفاده می شود.
• col-md-2 : (حروف md در نام آن به معنی medium است) ، این کلاس برای دستگاه های متوسط مانند تبلت ها استفاده می شود.
• col-sm-2 : (حروف sm در نام آن به معنی small است) ، این کلاس برای دستگاه های کوچک مانند تلفن های همراه استفاده می شود.

 

 

نوار ناوبری یا Navbar

 

navbar در Bootstrap 4 بسیار جالب است و وقتی صحبت از ساخت نوار واکنش گرا می شود بسیار مفید است. برای بررسی این موضوع ، ما می خواهیم کلاس navbar را به فایل index.html خود اضافه کنیم:

<!-- navbar -->  
 <nav class="navbar navbar-expand-lg fixed-top ">  
 <a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">  
 <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">     <ul class="navbar-nav mr-4">
 <li class="nav-item">
     <a class="nav-link" data-value="about" href="#">About</a>        </li>  
<li class="nav-item">
    <a class="nav-link " data-value="portfolio"href="#">Portfolio</a>    
 </li>
 <li class="nav-item"> 
    <a class="nav-link " data-value="blog" href="#">Blog</a>         </li>   
<li class="nav-item">  
   <a class="nav-link " data-value="team" href="#">         Team</a>       </li>  
<li class="nav-item"> 
 <a class="nav-link " data-value="contact" href="#">Contact</a>       </li> 
</ul> 
</div></nav>

 

یک فایل main.css ایجاد و اضافه کنید تا بتوانید استایل های CSS را شخصی سازی کنید.

کد زیر را در برچسب head در فایل index.html پروژه قرار دهید:

<link rel="stylesheet" type="text/css" href="css/main.css">

 

با کمک CSS چند رنگ به نوار ناوبری اضافه می کنیم:

.navbar{ background:#F97300;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.nav-link:hover{ background: #f4f4f4; color: #f97300; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

 

شبکه بندی جدید Grid در 4 Bootstrap با سیستم Flexbox ساخته شده است ، بنابراین برای هم ترازی ، باید از ویژگی Flexbox استفاده کنید. به عنوان مثال ، برای قرار دادن منوی navbar در سمت راست ، باید یک ویژگی justify-content اضافه کرده و آن را روی flex-end تنظیم کنیم.

.navbar-collapse{
 justify-content: flex-end;
}

 

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

 

برای اینکه نور ناوبری رنگ پس زمینه روشن داشته باشد کلاس bg-light را اضافه کنید. برای پس زمینه تیره ، کلاس bg-dark و برای پس زمینه آبی روشن ، کلاس bg-primary را به نوار ناوبری اضافه کنید.

 

در زیر کد های این کلاس ها را می بینید:

.bg-dark{
background-color:#343a40 !important
}
.bg-primary{
background-color:#007bff !important
}

 

 

Header

 

<header class="header">
  
</header>

 

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

ابتدا یک فایل به نام main.js ایجاد کنید و قبل از برچسب بسته شدن body (یعنی بالای تگ <body/>)، آن را در فایل index.html قرار دهید:

<script type="text/javascript" src='js/main.js'></script>

 

در فایل main.js این کد کوچک از jQuery را وارد کنید:

$(document).ready(function(){
 $('.header').height($(window).height());
 
})

 

اگر یک تصویر پس زمینه مناسب هم برای هدر تنظیم کنیم ، ظاهر سایت خیلی بهتر می شود:

/*header style*/
.header{
 background-image: url('../images/headerback.jpg');
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
}

 

 

در مرحله بعدی یک روکش روی تصویر هدر اضافه می کنیم تا سرصفحه کمی حرفه ای تر به نظر برسد.

 

برای اضافه کردن روکش ، این کد را به فایل index.html پروژه اضافه کنید:

<header class="header">
  <div class="overlay"></div>
</header>

 

سپس ، این کد را به فایل main.css پروژه اضافه کنید:

.overlay{
 position: absolute;
 min-height: 100%;
 min-width: 100%;
 left: 0;
 top: 0;
 background: rgba(244, 244, 244, 0.79);
}

 

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

<header class="header">
  <div class="overlay"></div>
   <div class="container">
    
   </div>
  
</header>

 

سپس ، div دیگری اضافه کنید که حاوی توضیحات باشد.

<div class="description ">
   <h1>    Hello ,Welcome To My official Website
    <p>    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>   
 <button class="btn btn-outline-secondary btn-lg">See more</button>   </h1>  
</div>

ما به آن کلاسی با نام description می دهیم و کلاس text-center را اضافه می کنیم تا مطمئن شویم که محتوا در مرکز صفحه قرار می گیرد.

 

 

دکمه ها

 

کلاس های btn و btn-outline-second را به عنصر button اضافه کنید. بسیاری  کلاس های دیگر نیز در Bootstrap  برای دکمه ها وجود دارد.

نحوه استایل دهی به کلاس description در فایل main.css به شرح زیر است:

.description{
    position: absolute;
    top: 30%;
    margin: auto;
    padding: 2em;
    
}
.description h1{
 color:#F97300 ;
}
.description p{
 color:#666;
 font-size: 20px;
 width: 50%;
 line-height: 1.5;
}
.description button{
 border:1px  solid #F97300;
 background:#F97300;
 color:#fff;
}

 

بعد از همه اینها ، هدر ما به این شکل خواهد بود:

حالا هدر سایت جذاب و حرفه ای شده! موافق نیستید؟

 

 

بخش « درباره ما »

 

در این بخش ، ما از شبکه Grid در  Bootstrap برای تقسیم آن به دو قسمت استفاده خواهیم کرد.

برای شروع شبکه (grid) خود ، باید کلاس row را به والد div اختصاص دهیم.

<div class="row"></div>

 

بخش اول در سمت چپ و حاوی یک تصویر است ، بخش دوم در سمت راست و حاوی توضیحات است.

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

در اولین div در سمت چپ:

<div class="row"> 
 // left side
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/team-3.jpg" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
 </div>
 
</div>

 

پس از افزودن عناصر HTML در سمت راست ، ساختار کد به صورت زیر خواهد بود:

<div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/team-3.jpg" class="img-fluid">
    <span class="text-justify">S.Web Developer</span>
   </div>
   <div class="col-lg-8 col-md-8 col-sm-12 desc">
     
    <h3>D.John</h3>
    <p>
       ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   </div>
  </div>

 

نحوه ایجاد شکل ظاهری را در استایل های زیر می بینید:

.about{
 margin: 4em 0;
 padding: 1em;
 position: relative;
}
.about h1{
 color:#F97300;
 margin: 2em;
}
.about img{
 height: 100%;
    width: 100%;
    border-radius: 50%
}
.about span{
 display: block;
 color: #888;
 position: absolute;
 left: 115px;
}
.about .desc{
 padding: 2em;
 border-left:4px solid #10828C;
}
.about .desc h3{
 color: #10828C;
}
.about .desc p{
 line-height:2;
 color:#888;
}

 

 

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

 

در این مرحله یک بخش نمونه کارها ایجاد می کنیم که شامل یک گالری از نمونه کارها باشد.

 

ساختار کد HTML ما برای بخش نمونه کارها به این شکل است:

<!-- portfolio -->
<div class="portfolio">
     <h1 class="text-center">Portfolio</h1>
 <div class="container">
  <div class="row">
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port13.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port6.png" class="img-fluid">
   </div>
      
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port3.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port11.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/electric.png" class="img-fluid">
   </div>
      
<div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/Classic.jpg" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port1.png" class="img-fluid">
   </div>
   <div class="col-lg-4 col-md-4 col-sm-12">
    <img src="images/portfolio/port8.png" class="img-fluid">
   </div>
  </div>
 </div>
</div>

کلاس img-fluid را به هر تصویری که می خواهیم واکنش گرا باشد اضافه کرده ایم.

هر مورد در گالری ما 4 واحد ستون (از ۱۲ واحد) خواهد گرفت (به یاد داشته باشید ، col-md-4 برای دستگاه های متوسط و col-lg-4 برای دستگاه های بزرگ است). این در دستگاه های بزرگ مانند رایانه های رومیزی و رایانه لوحی بزرگ برابر با 33.33333٪ است و 12 ستون در یک دستگاه کوچک (مانند iPhone ، دستگاه های تلفن همراه) 100٪  فضا را اشغال می کند.

 

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

/*Portfolio*/
.portfolio{
 margin: 4em 0;
    position: relative; 
}
.portfolio h1{
 color:#F97300;
 margin: 2em; 
}
.portfolio img{
  height: 15rem;
  width: 100%;
  margin: 1em;
  
}

 

 

بخش وبلاگ

 

 

 

کارت ها

 

کارت های موجود در Bootstrap 4 طراحی وبلاگ را بسیار ساده تر می کنند. کارت ها برای مقالات و پست ها مناسب هستند.

برای ایجاد کارت ، ما از کلاس card استفاده می کنیم و آن را به یک عنصر div اختصاص می دهیم.

 

کلاس کارت دارای بسیاری از ویژگی ها است:

 

• کلاس card-header: سرصفحه کارت را مشخص می کند.
• کلاس card-body: برای بدنه کارت
• کلاس card-title: عنوان کارت
• کلاس card-footer: زیر صفحه کارت را مشخص می کند.
• کلاس card-image: برای تصویر کارت

 

بنابراین ، HTML وب سایت ما اکنون باید مانند این باشد:

<!-- Posts section -->
<div class="blog">
 <div class="container">
 <h1 class="text-center">Blog</h1>
  <div class="row">
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="images/posts/polit.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
     <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="images/posts/images.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
        <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
   <div class="col-md-4 col-lg-4 col-sm-12">
    <div class="card">
     <div class="card-img">
      <img src="images/posts/imag2.jpg" class="img-fluid">
     </div>
     
     <div class="card-body">
     <h4 class="card-title">Post Title</h4>
      <p class="card-text">
       
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
     </div>
     <div class="card-footer">
      <a href="" class="card-link">Read more</a>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

 

ما باید برخی از استایل های CSS را نیز به کارت ها اضافه کنیم:

.blog{
 margin: 4em 0;
 position: relative; 
}
.blog h1{
 color:#F97300;
 margin: 2em; 
}
.blog .card{
 box-shadow: 0 0 20px #ccc;
}
.blog .card img{
 width: 100%;
 height: 12em;
}
.blog .card-title{
 color:#F97300;
  
}
.blog .card-body{
 padding: 1em;
}

 

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

 

 

بخش معرفی اعضای تیم

 

 

در این بخش ما از سیستم grid برای توزیع فضای مساوی بین تصاویر استفاده خواهیم کرد. هر تصویر 3 واحد ستون از ۱۲ واحد ستون (کلاس col-md-3) از ردیف خود را اشغال می کند - که برابر با 25٪ از کل فضای سطر است.

 

ساختار HTML ما:

<!-- Team section -->
<div class="team">
 <div class="container">
    <h1 class="text-center">Our Team</h1>
  <div class="row">
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-2.jpg" class="img-fluid" alt="team">
    <div class="des">
      Sara
     </div>
    <span class="text-muted">Manager</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-3.jpg" class="img-fluid" alt="team">
    <div class="des">
       Chris
     </div>
    <span class="text-muted">S.enginner</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-2.jpg" class="img-fluid" alt="team">
    <div class="des">
      Layla 
     </div>
    <span class="text-muted">Front End Developer</span>
   </div>
   <div class="col-lg-3 col-md-3 col-sm-12 item">
    <img src="images/team-3.jpg" class="img-fluid" alt="team">
     <div class="des">
      J.Jirard
     </div>
    <span class="text-muted">Team Manger</span>
   </div>
  </div>
 </div>
</div>

 

و تعدادی استایل نیز برای بهبود نتیجه نهایی اضافه می کنیم:

.team{
 margin: 4em 0;
 position: relative;  
}
.team h1{
 color:#F97300;
 margin: 2em; 
}
.team .item{
 position: relative;
}
.team .des{
 background: #F97300;
 color: #fff;
 text-align: center;
 border-bottom-left-radius: 93%;
 transition:.3s ease-in-out;
 
}

 

با اضافه کردن یک پوشش به تصاویر در هنگام قرار گیری نشانگر موس روی آنها موافقید؟ اگر پاسخ شما بله است کافی است ، استایل های زیر را به فایل main.css اضافه کنید:

.team .item:hover .des{
 height: 100%;
 background:#f973007d;
 position: absolute;
 width: 89%;
 padding: 5em;
 top: 0;
 border-bottom-left-radius: 0;
}

 

و نتیجه کار:

 

 

فرم « تماس با ما »

 

 

فرم تماس آخرین بخشی است که باید اضافه شود. بخش فرم تماس شامل فرمی است كه از طريق آن بازديدكنندگان مي توانند ايميل ارسال كنند يا بازخورد بدهند. ما برای زیبایی فرم و واکنش گرا بودن طراحی آن از برخی کلاس های Bootstrap استفاده خواهیم کرد.

مانند Bootstrap 3 ، Bootstrap 4 نیز از کلاس form-control برای فیلد های ورودی استفاده می کند ، اما برخی ویژگی های جدید نیز اضافه شده است - مانند تغییر از input-group-addon (منسوخ شده) به input-group-prepend (برای استفاده از آیکون ها به عنوان برچسب ها ).

برای اطلاعات بیشتر می توانید به اسناد رسمی Bootstrap 4 نیز مراجعه کنید. در فرم تماس با ما ، هر فیلد ورودی را داخل یک div قرار می دهیم که دارای کلاس form-group باشد.

 

فایل index.html اکنون چیزی شبیه به این است:

<!-- Contact form -->
<div class="contact-form">
 <div class="container">
  <form>
   <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12">
      <h1>Get in Touch</h1> 
    </div>
    <div class="col-lg-8 col-md-8 col-sm-12 right">
       <div class="form-group">
         <input type="text" class="form-control form-control-lg" placeholder="Your Name" name="">
       </div>
       <div class="form-group">
         <input type="email" class="form-control form-control-lg" placeholder="YourEmail@email.com" name="email">
       </div>
       <div class="form-group">
         <textarea class="form-control form-control-lg">
          
         </textarea>
       </div>
       <input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
    </div>
   </div>
  </form>
 </div>
</div>

 

استایل های این بخش:

/* main.css */
.contact-form{
 margin: 6em 0;
 position: relative;  
}

.contact-form h1{
 padding:2em 1px;
 color: #F97300; 
}
.contact-form .right{
 max-width: 600px;
}
.contact-form .right .btn-secondary{
 background:  #F97300;
 color: #fff;
 border:0;
}
.contact-form .right .form-control::placeholder{
 color: #888;
 font-size: 16px;
}

 

 

فونت ها

 

فونت های پیش فرض بیش از اندازه تکراری هستند بنابراین ما قصد داریم از Google Font API استفاده کنیم و برای این پروژه Raleway را انتخاب می کنیم که یک فونت خوب و متناسب با طراحی این وب سایت است.

 

این پیوند را به فایل main.css خود اضافه کنید:

@import url('https://fonts.googleapis.com/css?family=Raleway');

و این استایل کلی را به main.css اضافه کنید:

html, h1, h2, h3, h4, h5, h6, a {
 font-family: "Raleway";
}

 

 

جلوه های پیمایش

 

 

آخرین چیزی که باقی مانده ، اثر پیمایشی است. در اینجا ، باید از jQuery استفاده کنیم. نگران نباشید اگر با آن آشنایی ندارید ، فقط این کد را در فایل main.js پروژه اضافه کنید:

$(".navbar a").click(function(){
  $("body,html").animate({
   scrollTop:$("#" + $(this).data('value')).offset().top
  },1000)
  
 })

 

و یک ویژگی data-value به هر پیوند Navbar اضافه کنید:

<li class="nav-item">
         <a class="nav-link" data-value="about" href="#">About</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="portfolio" href="#">Portfolio</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="blog" href="#">Blog</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="team" href="#">
         Team</a>
       </li>
       <li class="nav-item">
         <a class="nav-link " data-value="contact" href="#">Contact</a>
       </li>

 

برای هر بخش یک id تنظیم کنید.

 

توجه: برای عمل کردن پیمایش باید هر شناسه (id) یکسان با مشخصه data-value در پیوند متناظرش در navbar باشد:

<div class="about" id="about"></div>

 

 

جمع بندی و نتیجه گیری

 

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