آموزش Bootstrap قسمت دوم: شروع کد نویسی
آنچه در این مقاله میخوانید
Toggleسلام به کاربران وبسایت تاتوره. با دومین قسمت از آموزش Bootstrap در خدمت شما هستیم.
در این قسمت قصد داریم چگونگی اضافه کردن بوت استرپ و کمی کد نویسی رو با هم انجام بدیم.
اضافه کردن Bootstrap
ما در این آموزش از Bootstrap 4 که آخرین نسخه از این کتابخانه است استفاده کردیم. در این لحظه که در حال نوشتن این آموزش هستم، آخرین نسخه بوت استرپ ۴٫۳ میباشد.
خب
برای اضافه کردن بوت استرپ به فایل HTMl، سه راه پیش رو داریم.
- دانلود و سپس اضافه کردن
- استفاده از (CDN (content delivery network
- استفاده از Package Manager
توضیح بیشتر
اولین گزینه
همانطور که از اسمش پیداست، ابتدا باید فایلهای مربوط به بوت استرپ رو روی دستگاه خودمون دانلود کنیم و سپس به اچ تی ام ال خودمون اضافش کنیم.
دومین گزینه
استفاده از اون به صورت آنلاینه. یعنی شما باید یک خط کدی که فایل Bootstrap رو به اچ تی ام ال ما اضافه میکنه در تگ head بنویسید.این کاریه که ما قراره در طول این آموزش انجام بدیم. شما هم بهتره همین کار رو کنید چون راحت تره و برای اهداف آموزشی این روش بهتر از دو روش دیگه است. فقط دقت کنید که باید به اینترنت متصل باشید تا ازش استفاده کنید!
امّا
برای پروژههاتون؛ باید از روش اول استفاده کنید. مثلا ساخت وبسایت تاتوره و ما هم در انتهای این آموزش قراره پروژه کوچکی رو با هم انجام بدیم که از همین روش برای اضافه کردن بوت استرپ استفاده میکنیم. ولی همونطور که گفتم در طول آموزش قراره از روش دوم استفاده کنیم.
سومین گزینه
کمی با دو گزینه دیگه فرق میکنه و ما اصلا قرار نیست اینکار رو در این آموزش انجام بدیم چون package manager معمولا به یک زبان برنامه نویسی دیگه وصل شده، مثل روبی برای ruby gems یا node با npm که این پکیج ها شامل پکیج بوت استرپ درون خودشون میشن و از اونجایی که این آموزش در مورد هیچ کدوم از این پکیج ها نیست، ما هم قرار نیست چیزی در موردش بگیم. ولی وقتی این آموزش رو به اتمام رسوندین، قادر خواهید بود که از Bootstrap در این پکیج ها کاملا استفاده کنید. چون اگر هم آموزش یکی از این پکیج ها رو مشاهده کنید، مدرس قرار نیست به شما بوت استرپ رو یاد بده و شما باید خودتون اونو بلد باشید. خب این دقیقا کاریه که ما قراره در این آموزش انجام بدیم.
زیاد گفتم، بیاید به بررسی دو روش اول بپردازیم.
ابتدا میخوام که روش CDN رو بگم.
استفاده از CDN
ابتدا
وارد وبسایت رسمی بوت استرپ میشیم.
برای اینکه کمی شما رو به بوت استرپ علاقه مند کنم باید بگم که دکمه بالا رو با استفاده از بوت استرپ ساختم و هیچ استایلی به اون ندادم!
روی get started کلیک میکنیم. بعد از اون با صفحهای شبیه به تصویر زیر روبرو میشید. همانطور که میبینید دو کد مهم در این صفحه وجود داره. اولی فایل CSS و دومی فایل js رو شامل شده.
البته ۳ فایل جاوا اسکریپت وجود داره و دلیلش هم اینه که فایل بوت استرپ به دو فایل دیگه نیاز داره تا بتونه عملکرد خودشو به درستی انجام بده. اما برای سی اس اس فقط یک فایل قرار داده شده و به فایل های جاوا اسکریپت ارتباطی نداره. یعنی شما میتونید فقط css رو با همون یک خط کد اضافه کنید ( اگر نمیخواید که از قابلیتهایی مثل منوی جمع شونده یا اسلاید شو استفاده کنید.)
CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Js
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
میتونید این دو رو کپی کنید و به فایل اچ تی ام ال خودتون اضافه کنید و از این بخش بگذرید. اما اگر نمیدونید که باید با این کدها چیکار کنید، کافیه در همون صفحه کمی پایین تر برید و کد starter رو کپی کنید. البته من در زیر این کد رو هم برای شما قرار دادم تا نیازی نباشه وارد وبسایت بوت استرپ بشید.
Starter template
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
یه نکته
همانطور که قبلا اشاره کردم ما در حال استفاده از نسخه ۴٫۳ هستیم که اخرین نسخه از Bootstrap تا به امروز هست. دقت کنید که در سایت رسمی بوت استرپ، قسمت هدر سایت نسخه درست رو انتخاب کرده باشید.
برای ساخت فایل HTML ابتدا وارد ادیتور کدی که دارید بشید و یک فایل جدید ایجاد کنید. (ادیتور ها مثل ویژوال استودیو کد یا اتم و یا حتی note pad) کلید های ترکیبی Ctrl + S در ویندوز و یا Command + S در مک رو بفشارید تا فایل مورد نظر ذخیره بشه. نکته مهم اینجاست که باید پسوند فایل .html باشه مانند تصویر زیر
حالا کد starter رو در ادیتور پیست کنید و دوباره فایل رو ذخیره کنید.
کد شما باید چیزی شبیه به تصویر زیر باشه.
این فایل رو ذخیره کرده و سپس با مرورگر باز میکنیم. من برای مقایسه یکبار بوت استرپ رو از فایل حذف کردم تا شاهد تغییرات بشید.
همانطور که مشاهده میکنید با اینکه ما به تگ h1 خودمون کلاسی ندادیم، بوت استرپ به نوشتمون استایل داده.
دانلود کردن و استفاده آفلاین
برای این کار
وارد صفحه اصلی وبسایت بوت استرپ بشید و دکمه دانلود رو بزنید و یا برای اینکه راحت تر باشید از دکمه زیر استفاده کنید.
ورود به صفحه دانلود Bootstrap 4.3
اگر وارد سایت شدید قسمتی مانند شکل بالا وجود داره که میتونید فایلهای مورد نیاز رو دانلود کنید.
یا میتونید از لینک زیر برای دانلود استفاده کنید. من نسخهای که در این اموزش استفاده میشه رو قرار دادم تا اشتباهی در وارد کردن کد پیش نیاد.
دانلود Bootstrap 4.3 با لینک مستقیم
با کلیک بر روی گزینه دانلود و سپس انتقال پوشه موجود در فایل zip به پوشه فایل اچ تی ام ال، کار ما تقریبا تمومه. تنها کاری که لازمه اینه که ادرس فایل رو در قسمت head بنویسیم. اگر پوشه bootstrap رو دقیقا در محل فایل اچ تی ام ال کپی کرده باشید، کد زیر کار رو انجام میده و با اضافه کردن اون، بوت استرپ رو بصورت آفلاین استفاده کنید.
برای فایل CSS
<link rel="stylesheet" href="./bootstrap-4.3.1-dist/css/bootstrap.min.css">
برای فایل js
<script src="./bootstrap-4.3.1-dist/js/bootstrap.js" ></script>
دقت کنید
که در اینجا ما بعد از bootstrap، نسخه اون رو نوشتیم و در واقع این اسم پوشه ای است که به تازگی دانلود کردیم. بنابراین اگر از وبسایت تاتوره این رو دانلود نمیکنید، بجای این قسمت نام پوشه مورد نظر خودتون رو قرار بدید.
کمی کد
خب این دو روشی بود که میتونید بوت استرپ رو به فایل html اضافه کنید. (همونطور که گفتم روش سوم روش کلا متفاوتیه و ما قرار نیست در این اموزش انجامش بدیم)
حالا بیاید یه کد خیلی ساده بنویسیم. فقط برای نشون دادن کارایی بوت استرپ
بیاید با هم به تگ h1 خودمون که در فایل starter قرار داره کلاس اضافه کنیم. ازتون میخوام که کلاس های display-1 و text-danger رو بهش اضافه کنید. مانند تصویر زیر
من از قصد تصویر قرار دادم و کد نذاشتم تا خودتون این کلاسها رو بنویسید. چون بوت استرپ تماما درباره کلاسهاست پس چه بهتر که هرچه زودتر تمرین رو شروع کنید.
حالا صفحه مرورگر رو ریفرش کنید تا تغییرات رو مشاهده کنید.
می بینید که نوشته ما بزرگتر شده و رنگ اون به قرمز تغییر پیدا کرده. من نمیخوام الان از این کلاسها چیزی بهتون بگم. بهتره همینجا این قسمت رو به پایان برسونیم. نگران نباشید در ادامه با این کلاسها کاملا آشنا میشید.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.