نمونه سایت با بوت استرپ
نمونه سایت با بوت استرپ
بوت استرپ (Bootstrap) یکی از محبوب‌ترین فریم‌ورک‌های طراحی وب است که به توسعه‌دهندگان این امکان را می‌دهد تا سایت‌های واکنش‌گرا و زیبا را با سرعت و کارایی بالا ایجاد کنند. استفاده از بوت استرپ به دلیل کامپوننت‌های از پیش طراحی شده و سیستم گرید انعطاف‌پذیر آن، فرآیند طراحی وب‌سایت را ساده‌تر و سریع‌تر می‌کند. با استفاده از بوت استرپ، می‌توانید نمونه‌های متنوعی از سایت‌های مدرن و حرفه‌ای را طراحی کنید که به خوبی در تمامی دستگاه‌ها و اندازه‌های صفحه نمایش به نمایش درآیند.
یکی از نمونه‌های برتر سایت با بوت استرپ، وب‌سایت‌های شرکتی هستند که نیاز به طراحی تمیز و کاربرپسند دارند. این وب‌سایت‌ها معمولاً شامل بخش‌های مختلفی مانند معرفی خدمات، نمونه‌کارها، و فرم‌های تماس هستند که با استفاده از بوت استرپ به راحتی می‌توانند طراحی و پیاده‌سازی شوند. بوت استرپ با فراهم کردن کامپوننت‌های آماده مثل دکمه‌ها، جداول، فرم‌ها و نوار جستجو، این فرآیند را به مراتب آسان‌تر می‌کند و به توسعه‌دهندگان کمک می‌کند تا وب‌سایت‌هایی با طراحی حرفه‌ای و عملکرد بالا بسازند.
سایت‌های فروشگاهی نیز از بوت استرپ بهره زیادی می‌برند. با استفاده از بوت استرپ، می‌توانید طرح‌های واکنش‌گرا و موبایل‌فرندلی برای فروشگاه‌های آنلاین خود طراحی کنید که تجربه کاربری بهتری را ارائه می‌دهد. بوت استرپ به توسعه‌دهندگان این امکان را می‌دهد که گالری‌های محصولات، صفحات پرداخت و فرم‌های ثبت‌نام را با طراحی و عملکرد بهینه بسازند و به مشتریان تجربه‌ای راحت و بدون مشکل ارائه دهند.
وب‌سایت‌های خبری و بلاگ‌ها نیز از بوت استرپ برای طراحی صفحات مقالات و بخش‌های مختلف اخبار بهره می‌برند. با استفاده از بوت استرپ، می‌توانید بخش‌های متنوع مانند کاروسل‌ها، نوار جستجو، و لیست‌های مطالب را طراحی کنید که به کاربران اجازه می‌دهد به راحتی به محتواهای مختلف دسترسی پیدا کنند و از مطالعه آنها لذت ببرند.
مجتمع فنی تهران، به عنوان یکی از مراکز معتبر در زمینه آموزش طراحی وب، دوره ریسپانسیو و بوت استرپ برگزار می‌کند. این دوره‌ها شامل آموزش‌های عملی و جامع در زمینه طراحی سایت‌های واکنش‌گرا با استفاده از بوت استرپ هستند و به شما کمک می‌کنند تا با تکنیک‌ها و ابزارهای روز طراحی وب آشنا شوید. با شرکت در این دوره‌ها، می‌توانید مهارت‌های خود را در زمینه طراحی سایت‌های حرفه‌ای و مدرن با بوت استرپ ارتقاء دهید و پروژه‌های موفق‌تری را اجرا کنید.
در نهایت، استفاده از نمونه سایت با بوت استرپ به شما این امکان را می‌دهد که وب‌سایت‌هایی با طراحی زیبا، عملکرد بالا و واکنش‌گرا بسازید. با بهره‌گیری از دوره‌های آموزشی معتبر مانند دوره‌های ریسپانسیو مجتمع فنی تهران، می‌توانید به یک توسعه‌دهنده حرفه‌ای در زمینه طراحی وب تبدیل شوید و به موفقیت بیشتری در پروژه‌های طراحی سایت خود دست یابید.
استایل عمومی
قبل از استایل هر بخش ، باید استایل عمومی را اضافه کنیم. استایل عمومی ، کد های CSS هستند که فقط استایل های اولیه ما مانند فونتی را که قصد استفاده از آن را در کل صفحه خود داریم ، اندازه اولیه فونت و رنگ زمینه را مشخص می کنند.
/*********************************************/
/* GENERAL CSS */
/****************************************/
@import url(“https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap”);
body {
font-family: “Poppins”, sans-serif;
color: #343a40;
background: #ffffff;
}
a {
outline: none;
color: #6C55A3;
text-decoration: none !important;
}
a:hover {
color: #53407f;
}
p {
line-height: 1.9;
}
h1, h2, h3, h4, h5, h6 {
font-family: “Poppins”, sans-serif;
}
استایل های کمکی
در این مرحله استایل های کمکی (utility CSS) را اضافه خواهیم کرد. این کدهای CSS شامل کلاسهای زیادی برای انجام کارهای کوچک و یکبار مصرف مانند کلاس هایی برای اعمال اندازه فونت خاص ، رنگ ها ، پس زمینه ها و کلاس هایی برای تنظیم یک ویژگی خاص است. هر کدام از کلاس های کمکی فقط یک ویژگی ظاهری را تنظیم می کنند.
/*********************************************/
/* UTILITY CSS */
/*********************************************/
.text-sub {
color: #9b9bae !important;
}
.bg-grey {
background-color: #F8F6FA !important;
}
.title {
color: #343a40;
}
.header-colorize {
font-weight: 700;
color: #6C55A3;
}
.section {
padding: 120px 0px 120px 0px;
position: relative;
}
.size-14 {
font-size: 14px;
}
.size-15 {
font-size: 15px;
}
.size-18 {
font-size: 18px;
}
.right-icon {
line-height: 0;
font-size: 19px;
}
.learn-more {
color: #6C55A3;
font-weight: 700;
}
.highlight {
background: rgba(122, 96, 183, 0.1);
-webkit-box-shadow: 0 1px 2px rgba(122, 96, 183, 0.5);
box-shadow: 0 1px 2px rgba(122, 96, 183, 0.5);
color: #6c55a3;
border-radius: 13px;
display: inline-block;
padding: .25em .4em;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.header-bg {
padding: 170px 0 140px;
background-image: url(‘../images/header-background.png’);
background-size: cover;
background-repeat: no-repeat;
background-position: left bottom;
}
.header-bg .header-small-title {
letter-spacing: 2px;
}
.header-bg .main-title {
font-size: 2.8rem;
line-height: 1.35;
color: #6C55A3;
}
استایل نوار ناوبری
طرح اصلی نوار ناوبری بوت استرپ یک طراحی عمومی است. در این قسمت از استایل ، ما می خواهیم ظاهر نوار خود را به گونه ای تنظیم کنیم که کاملاً متفاوت و متناسب با طرح زمینه ما باشد. ما با استایل دهی به پیوند ها ، لوگو و سپس دکمه تغییر حالت نوار ناوبری ، کار را ادامه می دهیم.
/*********************************************/
/* NAVBAR CSS */
/*********************************************/
.nav-item .nav-link {
text-decoration: none;
display: inline-block;
color: #343a40;
}
.navbar-clicksite {
margin-bottom: 0px;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background-color: transparent;
padding: 14px 0px;
width: 100%;
border-radius: 0px;
z-index: 999;
}
.navbar-brand {
cursor: pointer;
}
.navbar-clicksite .navbar-nav li a {
line-height: 26px;
color: rgba(255, 255, 255, 0.7);
font-size: 15px;
font-weight: 600;
-webkit-transition: all 0.3s;
transition: all 0.3s;
background-color: transparent !important;
padding: 6px 0;
margin: 0 20px;
}
.navbar-clicksite .navbar-nav li .nav-link {
padding-right: 0px;
padding-left: 0px;
}
.navbar-clicksite .navbar-toggles {
font-size: 18px;
background: 0 0;
border: 1px solid transparent;
color: #ffffff;
outline: 0;
padding: .26rem .76rem;
}
.navbar-clicksite .navbar-nav li.active a, .navbar-clicksite .navbar-nav li a:hover, .navbar-clicksite .navbar-nav li a:active {
color: #ffffff !important;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
background-color: transparent;
border-color: #6C55A3;
}
.navbar-toggler {
font-size: 24px;
margin-top: 5px;
margin-bottom: 0px;
color: #000;
}
.fas.fa-bars {
color: #6C55A3 !important;
}
.sticky-nav.navbar-clicksite .navbar-toggles {
border: 1px solid transparent;
padding: .26rem .76rem;
outline: 0;
}
.sticky-nav.navbar-clicksite {
margin-top: 0px;
background-color: #ffffff;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
color: #000000 !important;
}
.sticky-nav.navbar-clicksite .navbar-nav {
margin-top: 0px;
}
.sticky-nav.navbar-clicksite .navbar-nav li a {
color: #8a8aa0 !important;
}
.sticky-nav.navbar-clicksite .navbar-nav li.active a, .sticky-nav.navbar-clicksite .navbar-nav li a:hover, .sticky-nav.navbar-clicksite .navbar-nav li a:active {
color: #6C55A3 !important;
}
.navbar-toggler:focus {
outline: none;
}
استایل دکمه ها
/*********************************************/
/* BUTTONS CSS */
/*********************************************/
.btn {
border-radius: 4px;
padding: 12px 30px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
font-weight: 700;
font-size: 15px !important;
}
.btn:focus {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.btn:hover {
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.btn.btn-primary {
color: #ffffff;
background-color: #6C55A3 !important;
border: 1px solid #6C55A3 !important;
-webkit-box-shadow: 0 4px 20px rgba(94, 98, 255, 0.15);
box-shadow: 0 4px 20px rgba(94, 98, 255, 0.15);
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary.focus, .btn.btn-primary:active, .btn.btn-primary.active {
background-color: #53407f !important;
border: 1px solid #53407f !important;
-webkit-box-shadow: 0 3px 10px rgba(94, 98, 255, 0.5);
box-shadow: 0 3px 10px rgba(94, 98, 255, 0.5);
color: #ffffff !important;
}
استایل بخش خدمات
/*********************************************/
/* SERVICES CSS */
/*********************************************/
.services-container .services-icon {
height: 72px;
width: 72px;
background: rgba(108, 85, 163, 0.08);
font-size: 30px;
display: inline-block;
border-radius: 50% 50%;
line-height: 74px;
text-align: center;
color: #6C55A3;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.services-container .services-title {
font-size: 1.4rem;
color: #343a40;
}
استیل بخش شمارنده پروژه های انجام شده
اکنون وقت آن است که کمی استایل برای پیشخوان پروژه های انجام شده خود اضافه کنیم. فعلاً اطراف هر مورد در این بخش خط حاشیه ای (border) اضافه می کنیم و بعداً محتوای داخل هر جعبه را از طریق jQuery متحرک می کنیم.
/********************************************************************/
/* ACCOMPLISHED PROJECTS COUNTER CSS */
/*******************************************************************/
.accomplished-counter-icon {
font-size: 52px;
}
.accomplished-counter-bg .accomplished-counter-box {
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.accomplished-accomplished-counter-bg {
background: #6C55A3;
}
.accomplished-counter-bg .accomplished-counter-bg {
background-color: #6C55A3;
opacity: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
استایل فرم ها
در این مرحله ، برخی از استایل ها را برای فرم های خود تنظیم می کنیم. بوت استرپ ، دقیقاً مانند هر چارچوب جلویی دیگری ، به فرم ها یک استایل اولیه می دهد تا طراحی و تجربه کاربر را هنگام استفاده از آنها بهبود دهد ، اما ما می خواهیم آن را به ویژه از لحاظ کلی و اندازه فونت، کمی سفارشی کنیم.
/*********************************************/
/* FORMS CSS */
/*********************************************/
.form-control:focus {
background-color: #fbfbfb;
border-color: #6C55A3;
-webkit-box-shadow: none;
box-shadow: none;
}
.form-control {
background-color: rgba(52, 58, 64, 0.01);
border: 1px solid rgba(155, 155, 174, 0.3);
padding: 9px 11px;
font-size: 14px;
}
.form-control::-webkit-input-placeholder {
font-size: 15px;
color: #9b9bae;
}
.form-control:-ms-input-placeholder {
color: #9b9bae;
font-size: 15px;
}
.form-control::-ms-input-placeholder {
font-size: 15px;
color: #9b9bae;
}
.form-control::placeholder {
color: #9b9bae;
font-size: 15px;
}
استایل اسلاید ها
/*********************************************/
/* CAROUSEL CSS */
/*********************************************/
.col-center {
margin: 0 auto;
float: none !important;
}
.carousel {
margin: 50px auto;
padding: 0 70px;
}
.carousel .item {
color: #999;
font-size: 14px;
text-align: center;
overflow: hidden;
min-height: 290px;
}
.carousel .item .img-box {
width: 135px;
height: 135px;
margin: 0 auto;
padding: 5px;
border: 1px solid #ddd;
border-radius: 50%;
}
.carousel .img-box img {
width: 100%;
height: 100%;
display: block;
border-radius: 50%;
}
.carousel .testimonial {
padding: 30px 0 10px;
}
.carousel .overview {
font-style: italic;
}
.carousel .overview b {
text-transform: uppercase;
color: #6C55A3;
}
.carousel .carousel-control {
width: 40px;
height: 40px;
margin-top: -20px;
top: 50%;
background: none;
}
.carousel-control i {
font-size: 68px;
line-height: 42px;
position: absolute;
display: inline-block;
color: rgba(0, 0, 0, 0.8);
text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
}
.carousel .carousel-indicators {
bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
width: 21px;
height: 0px;
margin: 1px 3px;
}
.carousel-indicators li {
background: #999;
border-color: transparent;
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
}
.carousel-indicators li.active {
background: #6C55A3;
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);
}
استایل پاورقی
/*********************************************/
/* FOOTER CSS */
/*********************************************/
.footer {
background-color: #6C55A3;
padding-top: 20px;
}
.footer p {
color: #fff;
}
استایل های واکنش گرایی
سرانجام ، وقت آن است که تعدادی استایل برای واکنش گرا کردن صفحه اضافه کنیم. ما ابتدا با استایل های صفحه های کوچک مثل موبایل شروع می کنیم سپس به استایل های صفحه های بزرگتر مثل تبلت و رایانه می پردازیم.
سپس ، اندازه فونت عنوان اصلی صفحه را در صفحه های کوچکتر تغییر می دهیم تا در نمای تبلت خوب به نظر برسند.
/*********************************************/
/* RESPONSIVE CSS */
/*********************************************/
@media (min-width: 200px) and (max-width: 768px) {
.navbar-clicksite {
background-color: #ffffff !important;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
margin-top: 0px;
color: #ffffff !important;
}
.navbar-toggler {
margin-bottom: 0px;
font-size: 24px;
margin-top: 0px;
color: #343a40;
}
.navbar-clicksite .navbar-nav {
margin-top: 0px;
}
.navbar-clicksite .navbar-nav li a {
margin: 0px;
-webkit-transition: all 0.4s;
transition: all 0.4s;
color: #9b9bae !important;
}
.navbar-clicksite>.container {
width: 90%;
}
.navbar-collapse {
padding: 0 20px;
}
.navbar-clicksite .navbar-nav li.active a {
border-color: transparent;
}
.navbar-clicksite .navbar-nav li.active a, .navbar-clicksite .navbar-nav li a:hover, .navbar-clicksite .navbar-nav li a:active {
color: #6C55A3 !important;
}
}
@media (max-width: 425px) {
.header-bg .main-title {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.header-bg {
padding: 120px 0;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.header-bg {
background: none !important;
}
}
اگر در این مرحله صفحه را در مرورگر مشاهده کنید ، متوجه خواهید شد که برخی از ویژگی ها مانند جلوه پیمایش (scroll effect) ، اسلاید ها و ناوبری موبایلی هنوز کارایی ندارند زیرا هنوز کدهای jQuery را قرار نداده ایم. در مرحله بعدی این کار را می کنیم.
افزودن کد های jQuery
$( document ).ready(function() {
});
ثابت کردن نوار ناوبری
$(window).scroll(function() {
var startPx = $(window).scrollTop();
startPx >= 50 ? $(“.normal-nav”).addClass(“sticky-nav”) : $(“.normal-nav”).removeClass(“sticky-nav”);
});
جلوه پیمایش و پلاگین Scrollspy jQuery
// SCROLL TO DIV
$(‘.nav-item a, .mouse-down a’).on(‘click’, function(event) {
var $anchor = $(this);
$(‘html, body’).stop().animate({
scrollTop: $($anchor.attr(‘href’)).offset().top – 0
}, 1700, ‘easeInOutQuint’);
event.preventDefault();
});
// SCROLLSPY
$(“.navbar-nav”).scrollspy({
offset: 90
});
قسمت دوم کد ما به سادگی تابع scrollspy را فراخوانی می کند تا اثر scrollspy به طور خودکار به روز رسانی پیوندها را در یک لیست ناوبری بر اساس موقعیت پیمایش آغاز کند.
شمارش پروژه های انجام شده
// COUNTER
var initial = 0;
$(window).scroll(function() {
var msTop = $(‘#accomplished-counter’).offset().top – window.innerHeight;
if (initial == 0 && $(window).scrollTop() > msTop) {
$(‘.accomplished-counter-value’).each(function() {
var $this = $(this),
countData = $this.attr(‘counter’);
$({
countNo: $this.text()
}).animate({
countNo: countData
},
{
easing: ‘linear’,
duration: 2300,
step: function() {
$this.text(Math.floor(this.countNo));
},
complete: function() {
$this.text(this.countNo);
}
});
});
initial = 1;
}
});
پروژه ما کامل شد. اکنون می توانید صفحه را پیمایش کنید و تمامی انیمیشن های آن را ببینید.
می توانید این صفحه را در لینک زیر ببینید. در هنگام مشاهده حتماً عرض مرورگر خودتان را تغییر دهید تا تغییر شکل سایت در دستگاه های مختلف مثل تلفن همراه ، تبلت و رایانه را در عمل ببینید:
نتیجه
سعی کنید از این الگو در طراحی بعدی خود استفاده کنید و در صورت تمایل آن را به دلخواه خود سفارشی کنید. چه کسی می داند شاید شما با تغییر این الگو یک طراحی بسیار بهتر برای وب سایت خود ایجاد کنید.