تبلیغات
وبلاگ الهام - آموزش بوت استرپ – قسمت اول
 
وبلاگ الهام
 
 
دوشنبه 3 خرداد 1395 :: نویسنده : الهام کشاورز

 

از سری آموزش های بوت استرپ در خدمت شما هستیم.

در قدم اول باید بوت استرپ را بشناسیم و ببینیم چه کاربردی دارد.

 

developzoom-bootstrap

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

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

 


طراحی ریسپانسیو چیست ؟
وقتی یک سایت یا وب اپلیکیشن به صورت ریسپانسیو آموزش طراحی سایت طراحی می شود در تمامی سایزها شامل موبایل، تبلت و … به درستی نمایش داده میشود.

تاریخچه بوت استرپ:
طراحی فریمورک بوت استرپ توسط دو نفر از مهندسان شرکت توییتر به نام های Mark Otto و Jacob Thornton انجام شد و در August 2011 اولین نسخه آن در GitHub به اشتراک گذاشته شد.

آموزش وردپرس

مزایای بوت استرپ:
آسان و روان بودن
دارای ویژگی ریسپانسیو
نمایش بدون مشکل در تمام مرورگرها

دانلود بوت استرپ:
شما می توانید بوت استرپ را از سایت رسمی بوت استرپ دانلود کنید یا از ورژن آنلاین آن استفاده کنید:
MaxCDN:

ساخت اولین صفحه با استفاده از بوت استرپ:
۱- صفحه html خود را ایجاد کنید:

1
2
3
4
5
6
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"
  head>
html>

برای اطمینان از ورژن موبایل و نمایش سایت در صفحات لمسی تگ زیر را در داخل تگ 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
DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Exampletitle>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
head>
<body>
 
 
<div class="container">
 
<h1>My First Bootstrap Pageh1>
 
 
 
This is some text.
 
  
div>
 
 
body>
html>

۲- در مثال دوم صفحه بوت استرپ به صورت تمام عرض نمایش داده می شود(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
DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Exampletitle>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
head>
<body>
 
 
<div class="container-fluid">
 
<h1>My First Bootstrap Pageh1>
 
 
 
This is some text.
 
  
div>
 
 
body>
html>

برای شروع کار با بوت استرپ می توانید از اینجا شروع کنید. مباحث پیشرفته تر نیز برایتان آماده خواهد شد.

 

منبع : آموزش برنامه نویسی





نوع مطلب :
برچسب ها : آموزش وردپرس، آموزش برنامه نویسی، آموزش طراحی سایت،
لینک های مرتبط :


یکشنبه 3 اردیبهشت 1396 11:31 ق.ظ
سلام.
وبلاگ بسیار خوبی دارید.موفق باشید.
یکشنبه 3 بهمن 1395 08:05 ب.ظ
سلام و خسته نباشید، وبلاگ جالبی دارید، اگه تمایل داشته باشید میتونیم باهم تبادل لینک داشته باشیم.
فقط کافیه به پورتال تبادل لینک سایت مراجعه کنید و بعد از قراردادن لینک مشخص شده در وبلاگتون، لینک خودتون رو برای ما ارسال کنید، سیستم کاملا هوشمند عمل میکنه و بلافاصله پس از ثبت لینک، تبلیغات شما در سایت ما بصورت رایگان آغاز میشه.
از بازدید از مطالب وبلاگتون خیلی خوشحال شدم.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر


درباره وبلاگ


دوستان عزیز لطفا نظراتتون رو با ما در میان بگذارید

مدیر وبلاگ : الهام کشاورز
نویسندگان
جستجو

آمار وبلاگ
کل بازدید :
بازدید امروز :
بازدید دیروز :
بازدید این ماه :
بازدید ماه قبل :
تعداد نویسندگان :
تعداد کل پست ها :
آخرین بازدید :
آخرین بروز رسانی :