مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
ساخت یک وب سایت با Bootstrap
ساخت یک وب سایت با Bootstrap
Bootstrap ، که موضوع این آموزش است ، یک چارچوب front-end (سمت کاربر) است که به شما کمک می کند با سرعت و سهولت بیشتری وب سایت های واکنش گرا را ایجاد کنید. برای اولین بار توسط توییتر توسعه داده شده و اکنون در همه جا از برنامه های وب گرفته تا تم های وردپرس استفاده می شود. از جمله مشتریان مشهور آن شامل Spotify ، LinkedIn و ... هستند. این چارچوب همچنین کاملاً رایگان ، همه کاره و بصری است.
با استفاده از Bootstrap می توانید HTML استاندارد را به صفحات وب پیچیده تبدیل و آنها را مطابق با نیازهای خود تنظیم کنید. Bootstrap همچنین با قابلیت های اضافی مانند اسلاید ها ، دکمه ها ، پنجره های بازشو و موارد دیگر همراه است.
آخر اینکه بوت استرپ میانبرهای زیادی برای ایجاد صفحات وب به شما می دهد که باعث صرفه جویی در وقت و انرژی شما می شود. تمام آنچه شما نیاز دارید درک اساسی HTML و CSS برای ایجاد صفحات وب واکنش گرا، mobile-first (کد css اولیه برای موبایل باشد و سپس برای صفحه های بزرگتر تغییر کند) و سازگار با همه مرورگرهای مدرن است.
پ.ن. اگرچه Bootstrap بسیار جذاب است ، اما برای افراد کاملاً مبتدی گزینه مناسبی نیست. اگر هیچ تجربه ای در استفاده از نشانه گذاری های html ندارید ، می توانید از «سایت ساز» ها یا وردپرس برای ایجاد وب سایت استفاده کنید.
فهرست مطالب
مرحله اول: راه اندازی و بررسی اجمالی
- ساخت یک صفحه HTML
- بارگیری Bootstrap از CDN یا میزبانی محلی
- وارد کردن jQuery
- بارگیری جاوا اسکریپت های Bootstrap
- همه را کنار هم قرار دهید
مرحله دوم: صفحه اصلی خود را طراحی کنید
- افزودن نوار ناوبری
- وارد کردن CSS های سفارشی
- ساخت یک نگهدارنده برای محتوای صفحه
- افزودن عکس پس زمینه و جاوا اسکریپت های سفارشی
- افزودن لایه پوششی
- وارد کردن عنوان و متن صفحه
- ساخت دکمه CTA
- ساخت یک بخش سه ستونه
- افزودن فرمی برای تماس
- افزودن بخش معرفی تیم
- ساخت یک پاورقی دو ستونه
- افزودن مدیا کوئری ها
- ساخت صفحه های اضافی
- ساخت پنجره محاوره ای مقید
- انتشار وب سایت
کل زمان لازم برای ساخت این وب سایت با بوت استرپ: ۳ تا ۴ ساعت
سطح مهارت مورد نیاز: مبتدی تا متوسط
مرحله اول: راه اندازی و بررسی اجمالی
برای استفاده از Bootstrap ، ابتدا باید آن را به صفحه وب اضافه کنید. برای این منظور ، دو امکان متفاوت دارید: بارگیری آن از راه دور یا بارگیری و استفاده از Bootstrap به صورت محلی. با این حال ، برای هر دو ، ابتدا به صفحه ای برای بارگیری در آن نیاز دارید.
ساخت یک صفحه HTML
به عنوان اولین قدم در این آموزش ، یک الگوی HTML ساده به عنوان پایه ایجاد خواهیم کرد که در آن از Bootstrap استفاده می کنیم. برای این منظور ، اولین کاری که باید انجام دهید این است که یک پوشه در کامپیوتر یا سرور خود برای فایل های پروژه ایجاد کنید. در این آموزش، ما برای سادگی این پوشه را bootstrap می نامیم. در این پوشه ، یک فایل متنی جدید ایجاد کنید و آن را index.html بنامید. آن را با یک ویرایشگر متن به انتخاب خود باز کنید (به عنوان مثال ++Notepad) و سپس کد زیر را در آن جای گذاری کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clicksite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
فراموش نکنید که قبل از ادامه ، فایل خود را ذخیره کنید.
بارگیری Bootstrap از CDN
همانطور که قبلاً توضیح داده شد ، بوت استرپ عمدتاً از استایل ها و اسکریپت ها تشکیل شده است. به همین ترتیب ، آنها می توانند مانند سایر موارد مشابه مانند فونت های سفارشی ، در هدر و یا پایین صفحه وب بارگیری شوند. چارچوب بوت استرپ ، مسیری برای بارگیری خود از طریق CDN (شبکه تحویل محتوا) ارائه می دهد. آدرس بارگیری بوت استرپ را می توانید در پایین صفحه رسمی دانلود آن پیدا کنید.
برای وارد کردن بوت استرپ به صفحه خود ، کافیست کد زیر را در بخش <head> الگوی صفحه خود وارد کنید.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
برای اطمینان از اینکه از آخرین نسخه بوت استرپ استفاده می کنید ، حتماً لینک دانلود را از صفحه رسمی آن بردارید.
پس از این تغییرات وقتی که فایل را ذخیره کنید ، هر مرورگری که آن را باز کند ، فایل های Bootstrap را به طور خودکار بارگیری می کند.
استفاده از روش راه دور ایده خوبی است زیرا بسیاری از کاربران بدلیل بارگیری قبلی این فایل برای سایر وب سایت های مبتنی بر Bootstrap ، آن را در حافظه نهان مرورگر خود دارند. در این صورت ، آنها مجبور نیستند هنگام مراجعه به سایت شما آن را بارگیری مجدد کنند و این منجر به افزایش سرعت بارگیری صفحه شما می شود. در نتیجه ، این روش پیشنهادی برای سایتهای منتشر شده در اینترنت است. با این حال ، برای آزمایش و توسعه ، یا اگر می خواهید از اتصال به اینترنت مستقل باشید ، می توانید کپی فایل های Bootstrap را دریافت و از آن استفاده کنید. این همان کاری است که ما برای این آموزش Bootstrap انجام می دهیم.
میزبانی محلی از فایل های Bootstrap
یک راه جایگزین برای راه اندازی Bootstrap این است که آن را در هارد دیسک خود بارگیری کنید و از فایل ها به صورت محلی استفاده کنید. گزینه های بارگیری را در همان مکان پیوندهای نسخه ی راه دور پیدا می کنید. فایل های CSS و JS کامپایل شده را حتماً دریافت کنید زیرا شما به فایلهای منبع نیازی ندارید.
پس از اتمام بارگیری ، فایل را از حالت فشرده خارج کرده و محتوای آن را در همان فهرستی که index.html در آن هست ، کپی کنید. پس از آن ، می توانید CSS های بوت استرپ را به این صورت در پروژه خود بارگیری کنید:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
این کد شامل مسیر پرونده ای است که می توان فایل Bootstrap را در آن پیدا کنید. مطمئن شوید که مسیر داخل کد با تنظیمات واقعی شما مطابقت دارد. به عنوان مثال ، اگر نسخه دیگری از Bootstrap را بارگیری کرده باشید، ممکن است نام فهرست ها متفاوت باشد.
وارد کردن jQuery
برای اینکه عملکرد کامل بوت استرپ را بدست آورید ، باید کتابخانه jQuery را نیز بارگیری کنید. در اینجا نیز امکان بارگیری آن از راه دور یا میزبانی محلی آن را دارید.
(توجه : بوت استرپ 5 ، استفاده از jQuery را متوقف می کند و به جای آن از JavaScript ساده استفاده می کند. ما در ادامه به تغییرات نسخه بعدی هم خواهیم پرداخت. با این حال ، برای نسخه فعلی ، بوت استرپ 4 ، هنوز به jQuery احتیاج دارید ، بنابراین این آموزش شامل jQuery خواهد بود.)
پیوند به آخرین نسخه کتابخانه jQuery را در اینجا پیدا می کنید (برای دریافت URL از راه دور روی هر یک از پیوندها کلیک کنید). می توانید از کد زیر برای افزودن jQuery به صفحه html خود استفاده کنید. برای استفاده از jQuery در بوت استرپ می توانید این تگ را درست قبل از تگ بستن body یعنی <body/> قرار دهید.
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
گزینه دیگر این است که ، jQuery را بارگیری کنید (راست کلیک کنید سپس ...Save Link As را انتخاب کنید) ، آن را از حالت فشرده خارج کنید و آن را در پوشه پروژه قرار دهید. سپس ، آن را به همان روش در همان محل فایل خود قرار دهید:
<script src="jquery-3.5.1.min.js"></script>
بارگیری جاوا اسکریپت های Bootstrap
آخرین مرحله در راه اندازی Bootstrap بارگیری کتابخانه جاوا اسکریپت Bootstrap است. این کتابخانه در نسخه بارگیری شده چارچوب بوت استرپ گنجانده شده است و همچنین می توانید پیوندهایی به منابع از راه دور را در همان مکان ذکر شده در بالا پیدا کنید. با این حال ، ما آن را در مکانی متفاوت از استایل بارگیری خواهیم کرد. بجای سرصفحه ، دقیقاً پس از فراخوانی jQuery ، در پایین صفحه قرار می گیرد.
می توانید برای بارگیری jQuery از راه دور اینگونه عمل کنید:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
و یا محلی به صورت زیر:
<script src="bootstrap/js/bootstrap.min.js"></script>
نتیجه مرحله اول
اگر مراحل بالا را به درستی دنبال کرده باشید ، در پایان باید فایلی داشته باشید که برای راه حل از راه دور به این شکل است:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clicksite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
و این چیزی است که شما باید برای نسخه ای که همه فایل ها را به صورت محلی بارگیری می کند داشته باشید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clicksite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="jquery-3.5.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
اگر مشابه آن چیزی هست که در فایل شماست و کار خود را ذخیره کرده اید ، اکنون آماده رفتن به مرحله بعدی هستید.
مرحله دوم: طراحی صفحه اصلی
کارهای آماده سازی زیادی انجام دادیم. با این حال ، خیلی هم سخت نبود به علاوه ، اکنون بخش جذاب کار آغاز می شود.
در حال حاضر ، وقتی سایت تمرینی خود را در یک مرورگر باز می کنید ، فقط یک صفحه خالی مشاهده می کنید. حالا زمان تغییر آن است. به منظور آموزش بوت استرپ ، در این مقاله آموزشی یک صفحه اصلی با عناصر مختلف ایجاد خواهیم کرد تا بتوانیم موارد استفاده فراوان از بوت استرپ را به شما نشان دهیم.
افزودن نوار ناوبری
اولین کاری که می خواهیم انجام دهیم افزودن یک نوار ناوبری به بالای صفحه است. با این کار بازدید کنندگان شما می توانند در بین صفحات سایت شما جابه جا شوند و بقیه صفحات شما را نیز پیدا کنند.
برای این کار، از کلاس navbar استفاده خواهیم کرد. این یکی از عناصر پیش فرض Bootstrap است که در ادامه این آموزش آن را بسیار مشاهده خواهید کرد. این کلاس یک نوار پیمایش ایجاد می کند که به طور پیش فرض واکنش گرا نیز هست و به طور خودکار در صفحه های کوچکتر متناسب با فضای در دسترس تغییر شکل می دهد. همچنین پشتیبانی داخلی برای افزودن برند و لوگوی تجاری ، طرح های رنگی ، فاصله و سایر اجزای سازنده را ارائه می دهد.
می توانید با قرار دادن کد زیر درست بعد از برچسب <body> شروع کنید:
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
برخی توضیحات کد:
- navbar-expand-md : این تعیین می کند که در چه شرایطی ، نوار پیمایش از حالت عمودی (حالت همبرگری) به یک نوار افقی در اندازه کامل گسترش می یابد. در این حالت ، آن را روی صفحه های متوسط تنظیم کرده ایم که در Bootstrap چیزی بیشتر از 768px است (یعنی وقتی عرض صفحه 768px یا بیشتر باشد ، نوار گسترش یابد).
- navbar-brand : این برای نام تجاری یا برند وب سایت شما استفاده می شود. همچنین می توانید یک فایل تصویر آرم یا لوگو را در اینجا قرار دهید.
- navbar-toggler : دکمه تغییر وضعیت منوی جمع شده را نشان می دهد. قطعه "data-toggle="collapse تعریف می کند که این منو به منوی همبرگر تبدیل می شود ، نه به کشویی ، که گزینه دیگری است. مهم است که شما یک data-target را با شناسه CSS (تعریف شده توسط #) تعریف کنید و یک <div> با همان نام را در اطراف عنصر navbar قرار دهید.
- navbar-toggler-icon : همانطور که احتمالاً حدس می زنید ، این آیکونی را مشخص می کند که کاربران روی آن کلیک می کنند تا منو در صفحه های کوچکتر باز شود.
- navbar-nav : کلاس عنصر لیست <ul> که آیتم های لیست <li> که منو هستند را نگه می دارد. منو ها با کلاس های nav-item و nav-link نشان داده می شوند.
چرا این همه جزئیات؟
زیرا این نکته ی بوت استرپ است. بوت استرپ با همه ی این استانداردها است که به شما امکان می دهد با مقدار کمی HTML و CSS سریع عناصر را ایجاد کنید. همچنین لازم نیست نگران طرح بندی باشید ، زیرا همه موارد از قبل در Bootstrap تنظیم شده اند. بعلاوه همه ی این طراحی ها از قبل واکنش گرا هست تا برای صفحه موبایل هم مناسب باشد! می خواهید ببینید که چقدر بوت استرپ مفید است؟ اگر پاسخ شما بله است ، حتماً ادامه آموزش را بخوانید.
موارد بالا برای افزودن یک نوار پیمایش به سایت شما کافی است. با این حال ، در حال حاضر ، به نظر می رسد هنوز خیلی کم و ابتدایی است. تصویر زیر نتیجه کار تا این مرحله است:
این سادگی به این دلیل است که استایل های زیادی به آن متصل نیست. در حالی که می شود رنگ های پیش فرض را اضافه کرد (به عنوان مثال ، با قرار دادن کلاس های bg-dark و navbar-dark) ، ما می خواهیم رنگ های مورد نیاز خودمان را اضافه کنیم.
اضافه کردن فایل CSS سفارشی
خوشبختانه ، اگر می خواهید یک ظاهر طراحی پیش فرض را تغییر دهید ، لازم نیست که در یک کتابخانه بزرگ از فایل های استایل گشت بزنید و تغییرات را با دست انجام دهید. درعوض ، دقیقاً مانند وردپرس ، برای بازنویسی استایل ها می توانید فایل های CSS خود را اضافه کنید.
برای این منظور ، به سادگی با برنامه ویرایشگر متن خود یک فایل خالی ایجاد کنید و آن را main.css بنامید. آن را ذخیره کنید ، سپس آن را به بخش head سایت Bootstrap خود اضافه کنید (در زیر سایر استایل ها):
<link rel="stylesheet" type="text/css" href="main.css">
این کد برای یک فایل استایل است که در پوشه اصلی قرار دارد. اگر تصمیم دارید این فایل را داخل پوشه css قرار دهید ، حتما آدرس آن را نیز در لینک اصلاح کنید.
به این شکل می توانید CSS سفارشی را به سایت خود اضافه کنید. به عنوان مثال ، برای استایل دادن به پس زمینه صفحه و همچنین نوار ناوبری و عناصر آن ، می توانید از استایل هایی مانند زیر استفاده کنید:
body {
padding: 0;
margin: 0;
background: #f2f6e9;
}
.navbar {
background:#6ab446;
}
.nav-link,
.navbar-brand {
color: #fff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000;
}
.navbar-collapse {
justify-content: flex-end;
}
و نتیجه کار تا اینجا:
بهتر از قبل به نظر می رسد ، اینطور نیست؟
ساخت یک نگهدارنده برای محتوای صفحه
بعد از نوار پیمایش ، مورد بعدی که لازم داریم ظرفی برای محتوای صفحه است. این در Bootstrap بسیار آسان است زیرا تمام آنچه برای آن نیاز است قرار دادن این تگ زیر navbar است:
<header class="page-header header container-fluid">
</header>
به کلاس container-fluid توجه کنید. این یکی دیگر از کلاسهای پیش فرض Bootstrap است. اعمال آن بر روی عنصر div به طور خودکار یک مجموعه استایل های CSS را روی آن اعمال می کند.
قسمت fluid در کلاس container-fluid اطمینان می دهد که این ظرف در کل عرض صفحه کشیده شده است. همچنین فقط کلاس container هست که عرض ثابت روی آن اعمال می شود ، بنابراین همیشه دو طرف صفحه فضای خالی هست.
با این حال ، اگر اکنون صفحه را تازه سازی (refresh) کنید ، هنوز تغییری مشاهده نخواهید کرد (مگر اینکه سورس کد صفحه را ببینید). به این دلیل که شما فقط یک عنصر HTML خالی ایجاد کرده اید. اکنون این تغییر شروع می شود.
افزودن عکس پس زمینه و جاوا اسکریپت سفارشی
به عنوان مرحله بعدی در این آموزش Bootstrap ، می خواهیم یک تصویر پس زمینه ی تمام صفحه ای را برای هدر صفحه اصلی خود قرار دهیم. برای این منظور ، باید از jQuery یا JavaScript استفاده کنیم تا تصویر در سراسر صفحه کشیده شود.
این کار را به همان روشی انجام می دهیم که CSS سفارشی را در آن گنجانده ایم. ابتدا یک فایل متنی با نام main.js ایجاد کرده و آن را داخل پوشه سایت خود قرار دهید. سپس ، آن را قبل از بسته شدن برچسب <body/> درون index.html فراخوانی کنید.
<script src="main.js"></script>
بعد از آن ، می توانید این قطعه از کد jQuery را کپی کنید و داخل فایل main.js قرار دهید تا عنصر <header> در کل صفحه کشیده شود:
$(document).ready(function(){
$('.header').height($(window).height());
})
با این حال ، همانطور که گفته شد ، Bootstrap 5 دیگر با کتابخانه jQuery همراه نخواهد بود. بنابراین ، به عنوان یک گزینه جایگزین و برای آینده نگر کردن طراحی سایت خود ، می توانید با JavaScript ساده به همان نتیجه برسید:
var ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
document.querySelector(".header").style.height = window.innerHeight + "px";
})
سپس ، تنها چیزی که باقی مانده است تنظیم تصویر پس زمینه است. می توانید این کار را مانند زیر در فایل main.css انجام دهید:
.header {
background-image: url('images/header-background.jpg');
background-size: cover;
background-position: center;
position: relative;
}
اگر تصویری با اندازه مناسب در محلی که توسط مسیر بالا مشخص شده قرار دهید ، نتیجه ای مشابه این بدست خواهید آورد:
اضافه کردن لایه پوششی
برای شیک بودن تصویر پس زمینه ، یک لایه پوششی نیز اضافه می کنیم. برای این منظور ، یک div دیگر در داخل عنصر <header> که قبلاً ایجاد کرده اید ، ایجاد کنید.
<div class="overlay"></div>
سپس ، می توانید موارد زیر را در فایل CSS سفارشی خود اضافه کنید:
.overlay {
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
با این کار یک پوشش کدر روی تصویری که قبلاً وارد کرده اید ایجاد می شود. اینکار باعث می شود متن های داخل صفحه (که در مرحله بعدی اضافه می کنیم) راحت تر خوانده شود:
افزودن عنوان و متن صفحه
در این مرحله ، می خواهید عنوان و متن صفحه را اضافه کنیم. به این ترتیب ، بازدید کنندگان شما بلافاصله می دانند که در کدام سایت قرار دارند و باید چه انتظاری از آن داشته باشند.
برای ایجاد این موارد ، کافیست این قطعه را درون تگی که در مرحله آخر تنظیم کرده اید ، زیر لایه پوششی اضافه کنید:
<div class="description">
<h1>Welcome to the Landing Page!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.</p>
</div>
پس از آن ، استایل های زیر را به main.css اضافه کنید.
.description {
left: 50%;
position: absolute;
top: 45%;
transform: translate(-50%, -55%);
text-align: center;
}
.description h1 {
color: #6ab446;
}
.description p {
color: #fff;
font-size: 1.3rem;
line-height: 1.5;
}
با انجام این کار ، صفحه اصلی اکنون به این شکل است:
اضافه کردن دکمه CTA
هیچ صفحه ای بدون درخواست اقدام (CTA یا Call To Action) کامل نیست ، اغلب به صورت یک دکمه است. به همین دلیل کم لطفی است اگر نحوه ایجاد آن در Bootstrap را در این آموزش قرار ندهیم.
خوشبختانه ، چارچوب بوت استرپ ابزارهای زیادی را برای ایجاد سریع و آسان دکمه ها ارائه می دهد. نمونه های زیادی را می توانید در اینجا بیابید. در اینجا ، کد html زیر را درست در زیر محتوای صفحه درون تگ <description> اضافه می کنیم:
<button class="btn btn-outline-secondary btn-lg">Tell Me More!</button>
علاوه بر این ، ما این استایل های CSS را به main.css اضافه می کنیم:
.description button {
border:1px solid #6ab446;
background:#6ab446;
border-radius: 0;
color:#fff;
}
.description button:hover {
border:1px solid #fff;
background:#fff;
color:#000;
}
پس از ذخیره و بارگیری مجدد ، صفحه به این شکل است:
اضافه کردن یک بخش سه ستونی
ما در همین مرحله هم می توانیم کاملاً از طراحی این صفحه راضی باشیم. با این حال ، هنوز کار ما با این صفحه تمام نشده است. در مرحله بعدی ، می خواهیم برای اطلاعات بیشتر سه ستون در زیر محتوای اصلی ایجاد کنیم. این یکی از ویژگی های مهم بوت استرپ است که امکان ایجاد شبکه را فراهم می کند و هیچ آموزش برای Bootstrap ، بدون آن کامل نیست. در اینجا نحوه انجام این کار را می بینید:
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<h3 class="feature-title">Lorem ipsum</h3>
<img src="images/column-1.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h3 class="feature-title">Lorem ipsum</h3>
<img src="images/column-2.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
</div>
</div>
</div>
اولین چیزی که باید به آن توجه کرد ، عنصر row (ردیف) است. هر وقت ستون ایجاد می کنید به این عنصر نیاز دارید تا به عنوان ظرفی (container) در شبکه (grid) عمل کند.
در مورد ستون ها ، همه ی آنها کلاسهای مختلفی دارند: col-lg-4 ، col-md-4 و col-sm-12. این نشان می دهد که ما با ستون ها و اندازه ای که در صفحه های مختلف به دست می آورند سر و کار داریم.
برای درک این موضوع ، باید بدانید که در یک شبکه (grid) بوت استرپ ، جمع وزنی تمام ستون های یک ردیف همیشه عدد دوازده می شود. بنابراین ، دادن کلاسهای فوق به آنها بدین معنی است که آنها یک سوم (۴ تقسیم بر ۱۲) صفحه نمایش را در صفحه های بزرگ (lg) و متوسط (md) اشغال می کنند اما کل صفحه (دوازده ستون از دوازده ستون) را در دستگاههای کوچک (sm) اشغال می کنند.
همچنین متوجه خواهید شد که ما تصاویر را اضافه کرده و کلاس image-fluid را به آنها اضافه کرده ایم. این کار به منظور واکنش گرایی آنها به اندازه صفحه است تا به اندازه مناسب در هر نمایشگری ، نمایش داده شوند.
علاوه بر این ، می توانید استایل زیر را در فایل مربوط به استایل ها قرار دهید:
.features {
margin: 4em auto;
padding: 1em;
position: relative;
}
.feature-title {
color: #333;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
}
.features img {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
margin-bottom: 16px;
}
وقتی کد html به زیر محتوای اصلی و استایل ها به فایل CSS اضافه شود و ذخیره شود ، صفحه به این شکل می شود:
به هر حال ، اگر نمی خواهید از طریق CSS سایه اطراف جعبه ها یا box shadow را به صورت دستی روی عناصر خود تنظیم کنید ، می توانید کلاس های از پیش تعیین شده Bootstrap را برای آن استفاده کنید. این کلاس ها shadow-sm و shadow و shadow-lg هستند. اطلاعات بیشتر را در اینجا ببینید.
اضافه کردن فرم تماس
حتماً متوجه شده اید که یکی از ستون ها هنوز خالی است. این کار عمدی بود زیرا می خواهیم یک فرم تماس به آن اضافه کنیم. این یک روش بسیار معمول برای صفحات اصلی است که به بازدیدکنندگان اجازه می دهد تا با آنها تماس بگیرند.
ایجاد فرم تماس در Bootstrap بسیار آسان است:
<h3 class="feature-title">Get in Touch!</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" name="">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address" name="email">
</div>
<div class="form-group">
<textarea class="form-control" rows="4"></textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
به این کلاسهای CSS توجه کنید:
- form-group - برای قرار گرفتن در اطراف قسمتهای مختلف فرم برای قالب بندی آنها استفاده می شود.
- form-control - قسمت های فرم مانند ورودی ها ، text area و غیره را نشان می دهد.
کارهای بیشتری وجود دارد که می توانید با فرم ها انجام دهید ، این موارد را می توانید در اسناد پیدا کنید. با این حال ، برای اهداف این آموزش، موارد فوق کافی است. کد html فوق را داخل ستون خالی باقیمانده قرار دهید و سپس این استایل ها را در main.css اضافه کنید:
.features .form-control,
.features input {
border-radius: 0;
}
.features .btn {
background-color: #589b37;
border: 1px solid #589b37;
color: #fff;
margin-top: 20px;
}
.features .btn:hover {
background-color: #333;
border: 1px solid #333;
}
هنگامی که این کار را انجام دهید ، فرم زیر را بدست می آورید:
اضافه کردن بخش معرفی تیم
چیدمان کارت مورد دیگری است که بوت استرپ در آن بسیار عالی عمل می کند. کلاسهای CSS سفارشی آن ایجاد یک طرح مانند سایت Pinterest را به یک کار ساده تبدیل می کند. در ادامه ، ما از این امکان برای راه اندازی یک بخش معرفی اعضای تیم شرکت فرضی خودمان استفاده خواهیم کرد ، جایی که اعضای تیم و موقعیت آنها را در شرکت نشان می دهیم.
با این حال ، می خواهیم این بخش را به رنگ دیگری در آوریم. به همین دلیل ، ما ابتدا عنصر <div> دیگری را برای تغییر پس زمینه در صفحه خود قرار می دهیم. در داخل آن ، تگ دیگری با کلاس سفارشی برای قابلیت تنظیم بیشتر و به دنبال آن یک ردیف (row) وجود دارد.
<div class="background">
<div class="container team">
<div class="row">
</div>
</div>
</div>
ایجاد کارت آسان است ، کافی است کلاس card را به یک عنصر بدهید. همچنین می توانید از کلاس های grid برای تغییر اندازه آن و تعیین تعداد کارت ها در یک ردیف استفاده کنید. بعلاوه ، از آنجا که می خواهیم تمام محتوای کارت در مرکز قرار داشته باشند ، کلاس text-center را نیز به آن اضافه خواهیم کرد.
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
</div>
کارت ها می توانند عناصر مختلفی داشته باشند. در اینجا ، ما یک تصویر چهره در بالا می خواهیم ، به دنبال آن یک عنوان (نام شخص) و یک توصیف که می گوید کار آنها چیست. احتمالاً تعجب آور نیست که بگوییم Bootstrap کلاسهای سفارشی را برای همه اینها ارائه می دهد.
برای تصاویر ، ما از کلاس card-img-top برای قرار دادن یک تصویر در انتهای بالایی کارت استفاده خواهیم کرد. همچنین کلاس rounded-circle را به آن می دهیم تا تصویر گرد شود.
پس از آن ، ما یک عنصر جدید با کلاس card-body ایجاد می کنیم که به ترتیب شامل یک عنوان و پاراگراف با کلاس های card-title و card-text است. در زیر همه این کاربرد ها را می بینید:
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
وقتی این کد را درون عنصر سطر قرار می دهیم ، هشت بار آن را زیر هم کپی می کنیم و فایلهای تصویری را در مکان های مربوطه قرار می دهیم ، این نتیجه را می گیریم:
البته ، برای اینکه به این شکل به نظر برسد ، برخی از CSS های سفارشی را نیز در نظر گرفتیم. در زیر استایل هایی است که می توانید به فایل استایل خود اضافه کنید:
.background {
background: #dedec8;
padding: 4em 0;
}
.team {
color: #5e5e55;
padding: 0 180px;
}
.team .card-columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.team .card {
background:none;
border: none;
}
.team .card-title {
font-size: 1.3rem;
margin-bottom: 0;
text-transform: uppercase;
}
اضافه کردن پاورقی دو ستونه
بسیار خوب ، ما اکنون به پایان آموزش Bootstrap رسیده ایم. آخرین چیزی که می خواهیم به صفحه اصلی خود اضافه کنیم ، یک قسمت پاورقی با دو ستون است. در این مرحله از آموزش ، این دیگر نباید مشکل بزرگی برای شما ایجاد کند.
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Additional Information</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<p>Clicksite
<br/>clicksite.ir@gmail.com
<br/>+ 01 234 567 88
<br/>+ 01 234 567 89</p>
</div>
<div>
<div class="footer-copyright text-center">© 2020 Copyright: Clicksite</div>
</footer>
علاوه بر علامت گذاری معمول grid ، این بخش چند امکان را برای تغییر استایل متن با بوت استرپ برجسته می کند:
- text-uppercase
- font-weight-bold
- text-center
از اسم کلاسها باید کاملاً مشخص باشد که چه کاری انجام می دهند. می توانید اطلاعات بیشتر در مورد Bootstrap و typography (استایل دهی به متن) را در اینجا بیابید.
علاوه بر موارد فوق ، می توانید از استایلی شبیه کد زیر استفاده کنید:
.page-footer {
background-color: #222;
color: #ccc;
padding: 60px 0 30px;
}
.footer-copyright {
color: #666;
padding: 40px 0;
}
این کد منجر به ایجاد یک پاورقی زیبا می شود که به این شکل است:
اضافه کردن Media Query
اکنون صفحه آماده است. همچنین کاملاً واکنش گرا هم است. با این حال ، در مرورگر تلفن همراه ، برخی از بخش ها هنوز کاملاً درست ظاهر نشده اند. به عنوان مثال ، تصویر هدر در دستگاه های تلفن همراه به این صورت است:
با این وجود ، جای نگرانی نیست ، شما می توانید با یک media query ساده این مسئله را به راحتی اصلاح کنید. اصلاح این مورد نیز به همان روشی انجام می شود که در موارد قبلی انجام شد مگر اینکه از SASS برای گردآوری سایت Bootstrap خود استفاده کنید. فقط باید نقاط انفصال (breakpoint ها) از پیش تعیین شده موجود در بوت استرپ را در خاطر داشته باشید.
در نتیجه ، برای اصلاح مشکل فوق ، می توانید به سادگی یک قطعه کد مانند این را استفاده کنید:
@media (max-width: 575.98px) {
.description {
left: 0;
padding: 0 15px;
position: absolute;
top: 10%;
transform: none;
text-align: center;
}
.description h1 {
font-size: 2em;
}
.description p {
font-size: 1.2rem;
}
.features {
margin: 0;
}
}
پس از آن ، همه چیز آنطور است که باید باشد:
ساخت صفحه های دیگر سایت
تاکنون ، ما فقط یک صفحه برای وب سایت بوت استرپ خود ساخته ایم. با این حال ، ممکن است بخاطر داشته باشید که هنگام تنظیم منوی ناوبری، پیوند صفحه های مختلفی را به آن اضافه کردیم. با این حال ، در حال حاضر ، وقتی این پیوندها را کلیک می کنید ، هیچ اتفاقی نمی افتد.
هیچ کاری آسانتر از این نیست که این وضعیت را تغییر دهید و صفحات اضافی را به وب سایت Bootstrap خود اضافه کنید. ساده ترین راه این است که به سادگی یک کپی از index.html تهیه کنید و نام دیگری به آن بدهید.
بنابراین ، به عنوان مثال ، می توانیم کپی را about.html نامگذاری کنیم. با این حال ، چرا آن را کپی کنید و از ابتدا شروع نکنید؟ زیرا با کپی کردن می توانید از قسمتهایی از صفحه که تغییر نکرده استفاده کنید (مثلاً منوی ناوبری) و فقط مواردی را که می خواهید تغییر دهید ، حذف یا اصلاح کنید. به عنوان مثال ، در زیر می بینید که صفحه about به چه شکل است:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Us</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="background">
<div class="container team">
<h1>About Us</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.</p>
<div class="row">
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-2.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-2.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-2.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-2.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Additional Information</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<p>Clicksite
<br/>clicksite.ir@gmail.com
<br/>+ 01 234 567 88
<br/>+ 01 234 567 89</p>
</div>
</div>
<div class="footer-copyright text-center">© 2020 Copyright: Clicksite</div>
</footer>
<script src="jquery-3.5.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="main.js"></script>
</body>
</html>
وقتی فایل دوم را دارید ، تنها کاری که باید انجام دهید این است که مطمئن شوید پیوند موجود در منوی ناوبری به آن اشاره می کند:
<a class="nav-link" href="about.html">About</a>
برای این که کد بالا به درستی عمل کند باید فایل about.html در همان پوشه ای باشد که index.html در آن هست. اگر اینطور نباشد و about.html در یک پوشه دیگر مثلاً در یک زیر پوشه به نام html باشد ، می توانید به این شکل پیوند دهید:
<a class="nav-link" href="html/about.html">About</a>
به همین سادگی ، اکنون شما یک صفحه دوم در سایت Bootstrap خود دارید که از منوی ناوبری قابل دسترسی است! فقط مطمئن شوید که ، هر زمان که پیوندهای ناوبری را تغییر می دهید یا صفحات بیشتری به سایت خود اضافه می کنید ، همیشه باید پیوندها را در سایر فایل ها نیز به روز کنید.
کادر محاوره ای مقید
ما همچنین یک کادر محاوره ای مقید برای وب سایت خود ایجاد خواهیم کرد. این کار ضروری نیست اما فرصتی عالی برای نشان دادن برخی دیگر از قابلیتهای Bootstrap و کامل تر کردن این آموزش است.
درصورتی که با این اصطلاح آشنا نیستید ، کادر محاوره ای مقید یا modal به معنای پنجره باز شو است که در بالای وب سایت ظاهر می شود. می توانید از آن برای انواع و اقسام اهداف استفاده کنید. در اینجا ، ما می خواهیم یک پنجره برای درخواست عضویت در یک خبرنامه ایجاد کنیم.
نمایش کادر محاوره ای
طبق معمول ، Bootstrap نشانه گذاری ها و کلاس های خاص خود را برای دستیابی به این هدف ارائه می دهد. با این حال ، قبل از ساخت کادر محاوره ای مقید، ابتدا می خواهیم فراخوان آن را ایجاد کنیم. در غیر این صورت هیچوقت نمی توانیم ببینیم چه کاری انجام می دهیم.
برای انجام این کار ، کافی است این قطعه از JavaScript را به فایل main.js خود اضافه کنید:
setTimeout(function() {
$('#demo-modal').modal();
}, 500);
این قطعه کد جاوا اسکریپت باعث می شود که فرایند نمایش دیالوگ پس از یک زمان مشخص آغاز شود (زمان آغاز توسط عددی در کد مشخص شده). برای نسخه ی نمایشی ، ما زمان آن را روی 500 میلی ثانیه تنظیم کرده ایم ، زیرا می خواهیم بعد از بارگیری صفحه دیالوگ را به سرعت ببینیم و زمان کمتری برای تست مصرف کنیم. در یک صفحه منتشر شده در اینترنت ، طبیعتاً آن را روی یک فاصله زمانی طولانی تر تنظیم می کنید تا بازدیدکنندگان شما پس از مدتی حضور در صفحه شما ، پنجره باز شونده را ببینند.
همچنین ، توجه داشته باشید که موارد بالا هنوز یک تابع jQuery است ، و این نحوه استفاده بوت استرپ از دیالوگ ها در این مرحله است. همانطور که قبلاً بحث شد ، این در Bootstrap 5 متفاوت خواهد بود. در Bootstrap 5 از جاوا اسکریپت ساده استفاده می شود.
ساختن یک دیالوگ مقید
طراحی دیالوگ را شروع می کنیم. همه چیز با سه عنصر تو در تو شروع می شود که کلاسهای آنها به ترتیب کلاسهای modal و modal-dialog و modal-content هستند.
<div id="demo-modal" class="modal fade">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
</div>
</div>
</div>
این موارد دیالوگ را در بالای سایت شما ایجاد می کند و پنجره مقید (modal) را تنظیم می کند که می توان آن را با محتوا پر کرد.
ما همچنین عنصر modal را با آیدی demo-modal# مشخص کرده ایم تا انتخاب آن را در کد CSS ، آسان تر کرده و همچنین با متد فراخوان JavaScript که در قسمت قبل نوشتیم ، کار کند. کلاس fade این اطمینان را می دهد که ظاهر و ناپدید شدن دیالوگ ناگهانی نیست. همچنین ، modal-lg اندازه پنجره دیالوگ را تعیین می کند و کلاس modal-dialog-centered آن را به صورت عمودی در مرکز صفحه قرار می دهد.
با این حال ، این کد را کجا قرار دهیم؟ این پرسش بسیار خوبی است. نشانه گذاری دیالوگ مقید ، باید دقیقاً قبل از برچسب بسته شدن <body/> و زیر فراخوانی های jQuery و هر فایل JavaScript قرار داده شود.
با این وجود ، اگرچه کد این دیالوگ در کد html صفحه است ، اما به دلیل کلاس modal ، در صفحه نمایش داده نمی شود مگر اینکه فراخوانده شود.
اضافه کردن محتویات کادر محاوره ای
در مرحله بعدی ، ما می خواهیم یک هدر دیالوگ با یک تصویر در داخل و همچنین دکمه برای بستن دیالوگ اضافه کنیم. می توانید این کار را با قرار دادن این نشانه گذاری در داخل modal-content انجام دهید:
<div class="modal-header">
<img class="rounded-circle mx-auto" src="images/email-icon.png" alt="modal image">
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span>x</span>
</button>
</div>
به کلاس mx-auto برای تصویر توجه کنید. این یک کلاس کمکی Bootstrap برای در مرکز قرار دادن انواع عناصر است. اطلاعات بیشتر در این مورد را می توانید در اینجا ببینید. برای دکمه بستن ، باید "data-dismiss="modal را اضافه کنید تا با کلیک کردن آن پنجره ی دیالوگ بسته شود.
این چیزی است که ما تاکنون داریم:
اکنون به بدنه modal توجه می کنیم ، که آن را در زیر modal-header قرار می دهیم و شامل عنوان ، متن و فرم دریافت آدرس ایمیل می باشد. کد زیر:
<div class="modal-body text-center">
<h4>Subscribe to our newsletter</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu.</p>
<div class="input-group">
<input type="email" class="form-control" placeholder="Enter your email address" name="email">
<div class="input-group-append">
<input type="submit" class="btn" value="Subscribe">
</div>
</div>
</div>
اگر این آموزش را از ابتدا دنبال کرده باشید، کلاسهای modal-body و text-center باید با توجه به نامشان برای شما گویا باشند. با این حال ، به input-group در پایین کد ، توجه کنید. این یک کلاس Bootstrap است که به شما امکان می دهد ورودی هایی مانند فیلد های فرم و دکمه ها را در کنار یکدیگر قرار دهید.
کلاس input-group-append دکمه را بعد از قسمت فرم قرار می دهد. اگر بخواهید چیزی را قبل از آن قرار دهید ، از کلاس input-group-prepend باید استفاده کنید. آنچه در اینجا ارائه می شود به صورت زیر است:
بسیار خوب ، به نظر می رسد تنها چیزی که باقی مانده است یک استایل برای دیالوگ است. بنابراین ، برای تغییر ظاهر دیالوگ به صورت تصویر بالا ، استایل زیر را در فایل استایل main.css خود قرار دهید:
#demo-modal .modal-content {
border-radius: 0;
padding: 2rem;
}
#demo-modal .modal-header {
border-bottom: none;
}
#demo-modal h4 {
color: #000;
font-size: 30px;
margin: 0 0 25px;
font-weight: bold;
text-transform: capitalize;
}
#demo-modal .close {
background: #c0c3c8;
border-radius: 50%;
color: #fff;
font-size: 19px;
font-weight: normal;
height: 30px;
opacity: 0.5;
padding: 0;
position: absolute;
right: 26px;
text-align: center;
top: 26px;
width: 30px;
}
#demo-modal .close span {
position: relative;
top: -3px;
}
#demo-modal .modal-body p {
color: #999;
}
#demo-modal .form-control,
#demo-modal .btn {
min-height: 46px;
}
#demo-modal .btn {
background-color: #1da098;
border: none;
color: #fff;
min-width: 150px;
transition: all 0.4s;
}
#demo-modal .btn:hover,
#demo-modal .btn:focus {
background-color: #12968d;
}
کد نهایی صفحه اصلی
در این مرحله کد صفحه اصلی کامل شده است در زیر کد کامل صفحه اصلی را می بینید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clicksite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<header class="page-header header container-fluid">
<div class="overlay"></div>
<div class="description">
<h1>Welcome to the Landing Page!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.</p>
<button class="btn btn-outline-secondary btn-lg">Tell Me More!</button>
</div>
</header>
<div class="container features">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<h3 class="feature-title">Lorem ipsum</h3>
<img src="images/column-1.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<h3 class="feature-title">Lorem ipsum</h3>
<img src="images/column-2.jpg" class="img-fluid">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<h3 class="feature-title">Get in Touch!</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" name="">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address" name="email">
</div>
<div class="form-group">
<textarea class="form-control" rows="4"></textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send" name="">
</div>
</div>
</div>
<div class="background">
<div class="container team">
<div class="row">
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-2.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-2.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-2.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
<img class="card-img-top rounded-circle" src="images/team-image-2.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Job Description</p>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Additional Information</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<h6 class="text-uppercase font-weight-bold">Contact</h6>
<p>Clicksite
<br/>clicksite.ir@gmail.com
<br/>+ 01 234 567 88
<br/>+ 01 234 567 89</p>
</div>
</div>
<div class="footer-copyright text-center">© 2020 Copyright: Clicksite</div>
</footer>
<script src="jquery-3.5.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="main.js"></script>
<div id="demo-modal" class="modal fade">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<img class="rounded-circle mx-auto" src="images/email-icon.png" alt="modal image">
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span>x</span>
</button>
</div>
<div class="modal-body text-center">
<h4>Subscribe to our newsletter</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu.</p>
<div class="input-group">
<input type="email" class="form-control" placeholder="Enter your email address" name="email">
<div class="input-group-append">
<input type="submit" class="btn" value="Subscribe">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
در زیر تصویر نهایی صفحه اصلی سایت را می بینید:
انتشار وب سایت
اگر مراحل این آموزش را پیگیری کرده باشید ، اکنون باید یک وب سایت کامل و واکنش گرا داشته باشید.
با این حال تاکنون هیچ کس به جز شما نمی تواند آن را ببیند. برای تغییر این وضعیت، به یک میزبان وب و دامنه نیاز دارید. به این ترتیب ، افراد می توانند آدرس وب سایت شما را در مرورگر خود وارد کنند و سپس به وب سایت تازه ساخته شده شما دسترسی آنلاین پیدا کنند.
برای اینکه این امکان را فراهم کنید ، باید سایت را بر روی سرور خود بارگذاری کنید. این کار را می توانید با یک FTP Client مانند FileZilla انجام دهید. آدرس میزبان FTP ، نام کاربری و رمز ورود خود را از میزبان سایت خود دریافت کنید تا از راه دور به سرور خود متصل شوید. پس از انجام این کار ، باید بتوانید فایل ها و فهرست های موجود در آنجا را مشاهده کنید.
در این پنجره به دایرکتوری مربوط به دامنه سایت تان بروید (معمولاً دایرکتوری ریشه). پس از انجام این کار ، پوشه فایل های Bootstrap را نیز بر روی هارد دیسک خود پیدا کنید ، همه فایل های مربوط به سایت را در داخل این پوشه انتخاب کنید و سپس آنها را به سرور (دایرکتوری که در پنجره فوق پیدا کردید) بکشید و رها کنید تا بارگذاری آغاز شود. بسته به سرعت اتصال و همچنین تعداد و اندازه فایل ها ، روند کار مدتی طول خواهد کشید.
با این وجود ، پس از پایان کار ، وقتی به آدرس دامنه ی سایت خود مراجعه می کنید ، باید بتوانید سایت خودتان را در پنجره مرورگر مشاهده کنید.
سخن آخر
Bootstrap یک چارچوب توسعه ی متن باز و سمت کاربر (front-end) است که هر کسی می تواند به صورت رایگان از آن استفاده کند. Bootstrap به شما امکان می دهد به سرعت طرح اولیه را بسازید ، صفحات وب را ایجاد کنید و بیشتر از اینکه وقت تان را صرف آماده سازی مقدمات کار کنید ، به کار اصلی بپردازید.
همانطور که در این آموزش Bootstrap مشاهده کرده اید ، Bootstrap فقط به دانش اولیه HTML ، CSS و کمی دانش در زمینه jQuery و JavaScript نیاز دارد. اگرچه به اندازه استفاده از وردپرس راحت نیست ، Bootstrap باز هم یک گزینه معتبر برای ایجاد یک وب سایت است.
در حال حاضر ، شما می دانید که چگونه Bootstrap و اجزای آن را تنظیم و نصب کنید ، یک صفحه وب سایت ساده ایجاد کنید ، برخی از مطالب اصلی را وارد آن کنید و استایل آن را تغییر دهید. می توانید منوهای ناوبری ایجاد کنید ، تصاویر پس زمینه را تنظیم کنید ، دکمه ها ، ستون ها و فرم های تماس را طراحی کنید. شما حتی می دانید که چگونه از کارت های Bootstrap و دیالوگ های مقید (modal) و سایر قابلیت های کاربردی آن استفاده کنید.
البته ، چیزهای بیشتری برای یادگیری وجود دارد.
پس از این آموزش مقدماتی Bootstrap ، شما به اندازه کافی یاد گرفته اید که خودتان به جلو حرکت کنید. بنابراین ، اگر می خواهید از این چارچوب بیشتر استفاده کنید ، یک نقطه شروع خوب سایر آموزش های داخل سایت است. اگر به زبان انگلیسی مسلط هستید می توانید از آموزش های W3S Schools یا مستندات رسمی Bootstrap که در این مقاله به آنها اشاره شد نیز استفاده کنید.
فصلِ:
5
,
تعداد قسمت ها:
176
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…
توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد. آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از ASP.NET CORE MVC 3.0 و V…
فصلِ:
5
,
تعداد قسمت ها:
135
,
سطح:
صفر تا صد
این فصل در یک نگاه:
…
توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…
فصلِ:
2
,
تعداد قسمت ها:
13
,
سطح:
صفر تا صد
موضوعات:
آموزش Bootstrap
این فصل در یک نگاه:
مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …
توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…
فصلِ:
6
,
تعداد قسمت ها:
23
,
سطح:
صفر تا صد
موضوعات:
آموزش Bootstrap
این فصل در یک نگاه:
فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…
سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …
فصلِ:
4
,
تعداد قسمت ها:
78
,
سطح:
متوسط
موضوعات:
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش JQUERY
آموزش HTML5
آموزش Ajax
آموزش Bootstrap
آموزش JAVASCRIPT
این فصل در یک نگاه:
…
در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
5
,
تعداد قسمت ها:
201
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش Bootstrap
آموزش برنامه نویسی آندروید
این فصل در یک نگاه:
ایجاد پروژه آژانس مسافرتی.....…
فصل اول: آشنایی با مبانی برنامه نویسی اندروید آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…
فصلِ:
1
,
تعداد قسمت ها:
2
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش Ajax
آموزش Bootstrap
آموزش Laravel
آموزش PHP MVC
آموزش ایمیل مارکتینگ
آموزش وردپرس
این فصل در یک نگاه:
بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…
وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
