آموزش استفاده از بوت استرپ (Bootstrap)
اگر تا به حال از بوت استرپ استفاده نکرده اید و می خواهید با این ابزار کاربردی که مورد علاقه طراحان سایت می باشد، آشنا شوید، لازم می باشد قبل از آموزش استفاده از بوت استرپ کمی درباره این ابزار صحبت کنیم. بوت استرپ علاوه بر فریمورک بودن، به صورت متن باز نیز می باشد و به راحتی به وسیله آن می توانید، سایت رسپانسیو طراحی نمایید. برای کار و استفاده از بوت استرپ نیازی به یادگیری زبان های برنامه نویسی حرفه ای ندارید و تنها با زبان های Html , Css ،Java script می توانید از این ابزار قدرتمند استفاده نمایید.
بوت استرپ چیست؟
برای استفاده از بوت استرپ باید به طور کامل با این ابزار جذاب آشنا شوید. همانطور که می دانید، بوت استرپ به وسیله فرادی به نام مارک اوتو و جاکوب تورنتون که در تویتر فعالیت دارند، طراحی شده است. این 2 نفر Bootstrap را به صورت متن باز در بین کاربران منتظر کرده اند. بوت استرپ یک فریم ورک سمت کلاینت می باشد و به وسیله آن می توانید، سرعت ایجاد صفحات وب را بالا ببرید. Bootstrap برای زبان HTML و CSS طراحی شده است و به خوبی از این 2 زبان پشتیبانی می کند. بوت استرپ ابزاری می باشد که، دکمه ها و فرم ها و جدول ها و … را برای ما استایل دهی می کند. علاوه بر این موضوعات، Bootstrap به دلیل داشتن پلاگین های جاوا اسکریپت در بین طراحان بسیار محبوب شده است و به وسیله آن می توانید قالب های واکنش گرا طراحی نمایید.
دلیل استفاده از Bootstrap
بوت استرپ دارای مزایا یا امتیازات زیر می باشد و این موارد باعث می شود که طراحان به استفاده از بوت استرپ ترغیب شوند.
- استفاده آسان
- واکنش گرا بودن
- پاسخ گرا بودن به موبایل
- سازگاری با مرورگرها
دریافت یا دانلود بوت استرپ
 |
دریافت Bootstrap یکی از موضوعات استفاده از بوت استرپ به حساب می آید، که می توانید از روش های زیر برای دانلود Bootstrap استفاده نمایید.
روش اول: دانلود از سایت getbootstrap
اگر می خواهید از این روش برای دانلود و استفاده از Bootstrap استفاده نمایید، تنها کافیست به سایت Bootstrap بروید و پیش از دانلود بوت استرپ، آن را در هاست خود ذخیره نمایید.
روش دوم: اضافه کردن یک CDN
CDN یک شبکه ی تحویل محتوا می باشد. در صورتی که دوست ندارید بوت استرپ را دانلود و در هاست خود اضافه نمایید، این روش بهترین روش استفاده از Bootstrap به حساب می آید. اگر از این روش برای استفاده از بوت استرپ استفاده نمایید، باعث افزایش سرعت بارگذاری سایت شما می شود. یکی از سایت هایی که از این قابلیت پشتیبانی می کند، سایت MaxCDN نام دارد . این سایت به خوبی از فایل های سی اس اس، جاوا اسکریپت بوت استرپ و جی کوئری پشتیبانی می کند. کد زیر، نحوه اصافه کردن کد ها یا فایل های مربوط به سی اس اس، جاوا اسکریپت، بوت استرپ و جی کوئری را نمایش می دهد.
سایت MaxCDN
|
<!– اضافه کردن آخرین فایل سی اس اس –> <“linkrel=”stylesheet”href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css> <!– کتابخانه ی جی کوئری –> <scriptsrc=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> <!– فایل جاوا اسکریپت بوت استرپ –> <scriptsrc=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script> |
روش سوم: استفاده از کاستومایزر (Customizer)
زمانی که ابزار بوت استرپ به طراحان سایت معرفی شد، کمتر کسی پس از استفاده از Bootstrap، آن را سفارشی نمی کند. برای شخصی سازی بوت استرپ می توانی از ابزار Bootstrap Customizer استفاده نمایید. یکی از بزرگ ترین مزیت این ابزار، حذف بعضی از امکانات غیر ضروری از فایل نهایی می باشد که باعث کم شدن حجم نهایی فایل شما می شود. علاوه بر آن به وسیله آن می توانید، استفاده از متغیر ها و کد های کاستومایزر بوت استرپ را برای خود آسان سازید.
روش چهارم: استفاده از پکیج منیجر
این روش بیشتر مورد استفاده کاربران حرفه ای می باشد تا بتوانند مار با کتابخانه ها و فریم ورک های مختلف را برای خود آسان کنند. این ابزار دارای قسمت هایی همچون , npm, bower و … می باشد. پس از یادگیری این ابزار می توانید با یک کد ساده تمام فایل های مورد نظر و نیاز خود را به پروژه خود اضافه نمایید.
آموزش استفاده از بوت استرپ
برای استفاده از بوت استرپ مراحل زیر را انجام دهید.
مرحله اول
ایجاد یک پوشه با نام دلخواه.
مرحله دوم
درون پوشه ایجاد شده، یک پوشه با نام Bootstrap ایجاد نمایید.
مرحله سوم
ایجاد یک صفحه html درون پوشه اصلی
مرحله چهارم
بوت استرپ دارای فایل هایی می باشد که پس از دانلود آن ها از سایت Bootstrap، فایل های bootstrap.min.css و bootstrap.min.js را داخل پوشه بوت استرپ کپی نمایید.
مرحله پنجم
فایل html را باز نمایید و در قسمت head آن، کد زیر را وارد نمایید.
|
<head> <“link rel=”stylesheet” href=”bootstrap/bootstrap.min.css> <script src=”bootstrap/bootstrap.min.js”></script> <head/> |
مرحله ششم
در مرحله باید از درست بودن کار خود مطمئن شوید. برای این کار باید کد زیر را در تگ body بنویسید و صفحه خود را به وسیله یک مرورگر اجرا نمایید.
|
<body> <div class=”container”> <div class=”col col-sm-12″> <div class=”alert alert-danger text-center”> <p1/>با سلام به دنیای بوت استرپ خوش آمدید<p1> <div/> <div/> <div/> <body/> |
زمانی که فایل خود را با مرورگر اجرا می کنید، باید شکل زیر را مشاهده نمایید. در صورتی که این تصویر را مشاهده نکنید، به این معنا می باشد که قسمتی از دستور شما مشکل دارد. برای رفع مشکل خود، کد را دوباره مرور نمایید.
ایجاد اولین صفحه وب با استفاده از بوت استرپ
اضافه کردن نوع سند HTML5
یکی از موضوعات استفاده از بوت استرپ اضافه کردن نوع سند HTML5 می باشد. همانطور که می دانید بوت استرپ از عناصر و صفات HTML و CSS استفاده می کند. برای اضافه کردن نوع سند اچ تی ام خود، باید طبق کد زیر از صفات lang و character set استفاده نمایید.
|
<DOCTYPE html!> <“html lang=”en> <head> <“meta charset=”utf-8> </head> </html> |
بوت استرپ نسخه 3 موبایل
بوت استرپ نسخه 3 برای واکنش گرا را رسپانسیو کردن صفحات وب در موبایل مورد استفاده قرار می گیرد. برای اضافه کردن متای واکنش گرا، کد زیر را در قسمت head صفحه خود بنویسید.
| <“meta name=”viewport” content=”width=device-width, initial-scale=1> |
قسمت width
این قسمت مشخص کننده عرض صفحه نمایش دستگاه می باشد که باید مقدار آن را همانند کد بالا، device-width قرار دهید.
قسمت initial-scale
این قسمت مشخص کننده مقدار بزرگ نمایی اولیه صفحه می باشد و بهتر است که مقدار آن را مانند کد بالا، برابر مقدار 1 قرار دهید.
استفاده از container ها
یکی دیگر از موارد استفاده از بوت استرپ استفاده از container ها می باشد که برای رسپانسیو کردن اعضای سایت مورد استفاده قرار می گیرد. container ها دارای 2 کلاس زیر می باشد و با یک کد جذاب برای شما نمایش داده می شوند.
کلاس container
این کلاس محتویات صفحه را در یک عرض ثابت واکنش گرا نگه می دارد.
|
<DOCTYPE html!> <“html lang=”en> <head> <title>Bootstrap Example</title> <“meta charset=”utf-8> <“meta name=”viewport” content=”width=device-width, initial-scale=1> <“link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script> <head/> <body> <div class=”container”> <p1>My First Bootstrap Page</p1> <p>This is some text.</p> <div/> <body/> <html/> |
کلاس container-fluid
این کلاس برای نگه داشتن محتویات صفحه در یک عرض تمام صفحه واکنش گرا استفاده می شود.
|
<DOCTYPE html!> <“html lang=”en> <head> <title>Bootstrap Example</title> <“meta charset=”utf-8> <“meta name=”viewport” content=”width=device-width, initial-scale=1> <“link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script> <head/> <body> <“div class=”container-fluid> <p1>My First Bootstrap Page</p1> <p>This is some text.</p> <div/> <body/> <html/> |
طراحی جدول با استفاده از بوت استرپ
Bootstrap برای ایجاد یا طراحی جدول، دارای کلاس های مختلفی می باشد. ساختار این جداول در بوت استرپ اینگونه می باشد که، سطر عنوان داخل تگ thead و سطر های بدنه داخل تگ tbody قرار داده می شوند. به کد زیر توجه کنید.
|
<“table class=”class-name> <thead><tr><th></th><th></th></tr></thead> <tbody><tr><td></td><td></td></tr></tbody> <table/> |
کلاس های جدول در Bootstrap
| نام جدول | کلاس | توضیحات |
| جدول پایه | .table | جدول پایه با فقط کادرهای افقی |
| جدول نواربندی شده | .table-striped | رنگ پس زمینه سطر های زوج و فرد متفاوت می باشد |
| جدول کادربندی شده | .table-bordered | کادرهای افقی و عمودی |
| جدول هاور | .table-hover | با قرار گرفتن نشانگر ماوس روی یک سطر، های لایت می شود |
| جدول فشرده | .table-condensed | سطرها با تورفتگی کمتر و فشرده تر هستند |
مثال : جدول نواربندی
| <table class=”table table-striped”> … </table> |
کد های موجود در استفاده از بوت استرپ
در این قسمت به طور خلاصه به معرفی 10 کد کاربردی و آماده دیتابیس می پردازیم.
- فرم ورود داخل کادر
- تایم لاین
- جدول قیمت هاستینگ
- انجمن
- قالب ساده رزومه
- پنل های زیبا و ریسپانسیو
- جدول قیمت واکنش گرا
- فرم ورود / ثبت نام
- لوگوی پارالکس منو
- صفحه نمونه کارها
از کلاس های Bootstrap
یکی از موضوعات موجود در استفاده از بوت استرپ کلاس های Bootstrap می باشد که در این قسمت به معرفی تعدادی از این کلاس ها می پردازیم.
- رنگ های متنی
- زمینه های متنی
- آیکن بستن
- آیکن هشتک (caret)
- شناورهای فوری
- گروه .clear fix
- نمایش دادن و پنهان کردن محتوا
- پنهان کردن متن
سخن پایانیعلاوه بر توضیحات مربوط به کارایی و وظایف بوت استرپ، شناخت ویژگی ها، مزایا و معایب، کد های متنوع، قابلیت ها، پلاگین ها و ….، استفاده از Bootstrap نیز بسیار مهم می باشد. با یادگیری این ابزار و نحوه استفاده از Bootstrap، به راحتی می توانید از این ابزار استفاده نمایید و سرعت طراحی و نمایش سایت خود را بالا ببرید. علاوه بر این موضوعات، با استفاده از بوت استرپ می توانید، سایز نمایش سایت خود را با تمام سایز های صفحه نمایش دستگاه ها منطبق نمایید. برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید. |
دیدگاهتان را بنویسید