تعداد بازدید این مطلب: ۰

اگر تا به حال از بوت استرپ استفاده نکرده اید و می خواهید با این ابزار کاربردی که مورد علاقه طراحان سایت می باشد، آشنا شوید، لازم می باشد قبل از آموزش استفاده از بوت استرپ کمی درباره این ابزار صحبت کنیم. بوت استرپ علاوه بر فریمورک بودن، به صورت متن باز نیز می باشد و به راحتی به وسیله آن می توانید، سایت رسپانسیو طراحی نمایید. برای کار و استفاده از بوت استرپ نیازی به یادگیری زبان های برنامه نویسی حرفه ای ندارید و تنها با زبان های Html , Css ،Java script می توانید از این ابزار قدرتمند استفاده نمایید.

بوت استرپ چیست؟

 

بوت استرپ چیست؟ | بی لرن

 

برای استفاده از بوت استرپ باید به طور کامل با این ابزار جذاب آشنا شوید. همانطور که می دانید، بوت استرپ به وسیله فرادی به نام مارک اوتو و جاکوب تورنتون که در تویتر فعالیت دارند، طراحی شده است. این ۲ نفر Bootstrap را به صورت متن باز در بین کاربران منتظر کرده اند. بوت استرپ یک فریم ورک سمت کلاینت می باشد و به وسیله آن می توانید، سرعت ایجاد صفحات وب را بالا ببرید.  Bootstrap برای زبان HTML و CSS طراحی شده است و به خوبی از این  ۲ زبان پشتیبانی می کند. بوت استرپ ابزاری می باشد که، دکمه ها و فرم ها و جدول ها و … را برای ما استایل دهی می کند. علاوه بر این موضوعات، Bootstrap به دلیل داشتن پلاگین های جاوا اسکریپت در بین طراحان بسیار محبوب شده است و به وسیله آن می توانید قالب های واکنش گرا طراحی نمایید.

 

دلیل استفاده از Bootstrap

 

دلیل استفاده از 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>

 

بوت استرپ نسخه ۳ موبایل

بوت استرپ نسخه ۳ برای واکنش گرا را رسپانسیو کردن صفحات وب در موبایل مورد استفاده قرار می گیرد. برای اضافه کردن متای واکنش گرا، کد زیر را در قسمت head صفحه خود بنویسید.

<“meta name=”viewport” content=”width=device-width, initial-scale=1>

 

قسمت width

این قسمت مشخص کننده عرض صفحه نمایش دستگاه می باشد که باید مقدار آن را همانند کد بالا، device-width قرار دهید.

قسمت initial-scale

این قسمت مشخص کننده مقدار بزرگ نمایی اولیه صفحه می باشد و بهتر است که مقدار آن را مانند کد بالا، برابر مقدار ۱ قرار دهید.

استفاده از container ها

یکی دیگر از موارد استفاده از بوت استرپ استفاده از container ها می باشد که برای رسپانسیو کردن اعضای سایت مورد استفاده قرار می گیرد. container ها دارای ۲ کلاس زیر می باشد و با یک کد جذاب برای شما نمایش داده می شوند.

کلاس 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/>

container ها | بی لرن

طراحی جدول با استفاده از بوت استرپ

 

طراحی جدول با استفاده از بوت استرپ | بی لرن

 

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>

 

کد های موجود در استفاده از بوت استرپ

در این قسمت به طور خلاصه به معرفی ۱۰ کد کاربردی و آماده دیتابیس می پردازیم.

  • فرم ورود داخل کادر
  • تایم لاین
  • جدول قیمت هاستینگ
  • انجمن
  • قالب ساده رزومه
  • پنل های زیبا و ریسپانسیو
  • جدول قیمت واکنش گرا
  • فرم ورود / ثبت نام
  • لوگوی پارالکس منو
  • صفحه نمونه کارها

 

 از کلاس های Bootstrap

یکی از موضوعات موجود در استفاده از بوت استرپ کلاس های Bootstrap می باشد که در این قسمت به معرفی تعدادی از این کلاس ها می پردازیم.

  • رنگ های متنی
  • زمینه های متنی
  • آیکن بستن
  • آیکن هشتک (caret)
  • شناورهای فوری
  • گروه .clear fix
  • نمایش دادن و پنهان کردن محتوا
  • پنهان کردن متن

 

سخن پایانی

علاوه بر توضیحات مربوط به کارایی و وظایف بوت استرپ، شناخت ویژگی ها، مزایا و معایب، کد های متنوع، قابلیت ها، پلاگین ها و ….، استفاده از Bootstrap نیز بسیار مهم می باشد. با یادگیری این ابزار و نحوه استفاده از Bootstrap، به راحتی می توانید از این ابزار استفاده نمایید و سرعت طراحی و نمایش سایت خود را بالا ببرید. علاوه بر این موضوعات، با استفاده از بوت استرپ می توانید، سایز نمایش سایت خود را با تمام سایز های صفحه نمایش دستگاه ها منطبق نمایید.

برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید.