آموزش بوت استرپ – قسمت اول
از سری آموزش های بوت استرپ در خدمت شما هستیم.
در قدم اول باید بوت استرپ را بشناسیم و ببینیم چه کاربردی دارد.
بوت استرپ چیست ؟
بوت استرپ یک فریمورک رایگان برای طراحی سریع و آسان وبسایت و اپلیکیشن های تحت وب می باشد.
بوت استرپ شامل کدهای آماده html، css برای طراحی فرم ها، دکمه ها، منوها، اسلایدشو و… می باشد.
همچنین بوت استرپ به شما توانایی طراحی ریسپانسیو را خواهد داد.
طراحی ریسپانسیو چیست ؟
وقتی یک سایت یا وب اپلیکیشن به صورت ریسپانسیو آموزش طراحی سایت طراحی می شود در تمامی سایزها شامل موبایل، تبلت و … به درستی نمایش داده میشود.
تاریخچه بوت استرپ:
طراحی فریمورک بوت استرپ توسط دو نفر از مهندسان شرکت توییتر به نام های Mark Otto و Jacob Thornton انجام شد و در August 2011 اولین نسخه آن در GitHub به اشتراک گذاشته شد.
مزایای بوت استرپ:
آسان و روان بودن
دارای ویژگی ریسپانسیو
نمایش بدون مشکل در تمام مرورگرها
دانلود بوت استرپ:
شما می توانید بوت استرپ را از سایت رسمی بوت استرپ دانلود کنید یا از ورژن آنلاین آن استفاده کنید:
MaxCDN:
|
1
2
3
4
5
6
7
8
|
ساخت اولین صفحه با استفاده از بوت استرپ:
۱- صفحه html خود را ایجاد کنید:
|
1
2
3
4
5
6
|
<html lang="en">
<head>
<meta charset="utf-8">
|
برای اطمینان از ورژن موبایل و نمایش سایت در صفحات لمسی تگ زیر را در داخل تگ head قرار دهید:
1 |
<meta name="viewport" content="width=device-width, initial-scale=1">
|
بد نیست در مورد تگ بالا کمی بحث کنیم:
عبارت width=device-width خاصیت width صفحه را با سایز دستگاهی که شما سایت را در آن می بینید تنظیم می کند.
عبارت initial-scale=1 مقدار زوم را در بار اولی که سایت شما بارگذاری می شود تنظیم می کند.
برای شروع طراحی صفحه بوت استرپ نیاز به یک دربرگیرنده(wrapper) برای المان های دیگر دارد. دو نوع wrapper در بوت استرپ تعریف شده به مثال های زیر دقت کنید:
۱- در این مثال صفحه بوت استرپ با عرض ثابت و ریسپانسیو می باشد(container):
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<html lang="en">
<head>
<title>Bootstrap Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="container">
<h1>My First Bootstrap Page
This is some text. |
۲- در مثال دوم صفحه بوت استرپ به صورت تمام عرض نمایش داده می شود(container-fluid):
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<html lang="en">
<head>
<title>Bootstrap Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page
This is some text. |
برای شروع کار با بوت استرپ می توانید از اینجا شروع کنید. مباحث پیشرفته تر نیز برایتان آماده خواهد شد.
منبع : آموزش برنامه نویسی
