تبلیغات
وب عمومی (همه چیز در یک نگاه) - آموزش بوت استرپ – قسمت اول
 
وب عمومی (همه چیز در یک نگاه)
درباره وبلاگ


با سلام خدمت دوستان عزیز
الهام کشاورز هستم
امیدوارم از مطالبی که در وبلاگ قرار میدم استفاده کنید
لطفا نظرات خودتون رو با ما در میان بزارید
با تشکر

مدیر وبلاگ : الهام کشاورز
نویسندگان
دوشنبه 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>

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

 

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





نوع مطلب :
برچسب ها : آموزش وردپرس، آموزش برنامه نویسی، آموزش طراحی سایت،
لینک های مرتبط :
یکشنبه 25 شهریور 1397 05:10 ب.ظ
Liked this one, nice job! 5. Eina Ahluwalia: She is named a luxurious jewellery
designer and India's first Conceptual Jewellery Artist.
یکشنبه 25 شهریور 1397 09:43 ق.ظ
Ɍattlimg nice design and wonderful subject matеrial , very little еlse wе require : D.
شنبه 18 فروردین 1397 10:08 ق.ظ
Have been taking little over a month.
شنبه 18 فروردین 1397 09:41 ق.ظ
Then drill vertical to the glass surface. It'll be
nice to have a device to clamp it down, holding it firmly with the opposite hand
is good enough for me.
شنبه 18 فروردین 1397 12:15 ق.ظ
I was able too find good information from your articles.
جمعه 17 فروردین 1397 09:05 ب.ظ
Wiith havin so much written content do you ever run into any problems of plagorism orr copyright violation? My
site has a lott of exclusive content I've either authored mysslf
or outsourced but it appears a lot of it is popping it up all over
the internmet without my permission. Do you know any ways to help stop content from being ripped off?
I'd definitely appreciate it.
جمعه 17 فروردین 1397 05:49 ب.ظ
Have been taking little over a month.
جمعه 17 فروردین 1397 04:44 ب.ظ
This allows you to plan your finances better and you do not have to be boggled of a sudden spike in prices just before you had plan to buy it.
جمعه 17 فروردین 1397 10:46 ق.ظ
I'm able to carry on, but it will be an exercise in redundancy.
جمعه 17 فروردین 1397 10:35 ق.ظ
Are we going to have a similar conversations we have now (some of which
are pretty racy).
جمعه 17 فروردین 1397 09:57 ق.ظ
She was once executive editor of Media Wales and deputy editor for the Western Mail.
جمعه 17 فروردین 1397 07:59 ق.ظ
New York-primarily based jewelry designer Allison Overbeke companions with a
few of the great Venetian glassblowers to produce beautiful glass
jewelries.
جمعه 17 فروردین 1397 05:31 ق.ظ
It's a miniature science experiment in a bottle!
Nonetheless, it is advisable to discover ways to choose the correct of stone necklace for the occasion.
جمعه 17 فروردین 1397 12:37 ق.ظ
Have been taking little over a month.
پنجشنبه 16 فروردین 1397 11:43 ب.ظ
Diamond rings range from being accessible to extremely costly based on the value of the stone, the manufacturer and the
design of the ring.
پنجشنبه 16 فروردین 1397 09:38 ب.ظ
Tsū is a new social networking platform that shares their revenues
with their users.
سه شنبه 15 اسفند 1396 07:52 ب.ظ
سهم برجسته! من فقط این را به یک همکار ارائه دادم که تحقیق کمی در این زمینه انجام داد.

و او در واقع به من دستور داد که شام ​​به دلیل این واقعیت که من آن را برای او عجله کردم...
لول پس اجازه دهید این را دوباره بخوانم.... متشکرم برای غذا!! اما آره، برای صرف هزینه کردن
زمان برای بحث در مورد این موضوع در اینجا بر روی صفحه وب خود را.
چهارشنبه 9 اسفند 1396 11:31 ق.ظ
وبلاگ عالی اینجاست! همچنین سایت شما سریع بار گذاری می شود! چه میزبان وب
داری استفاده می کنی؟ آیا می توانم پیوند وابسته شما را دریافت کنم؟
به میزبان شما؟ من آرزو می کنم که وب سایت شما به سرعت به محض ورود شما لود شود
جمعه 4 اسفند 1396 02:01 ق.ظ
از وبسایت های مختلف بازدید کردم اما ویژگی صوتی برای آهنگ های صوتی موجود در این سایت واقعا فوق العاده است.
جمعه 29 دی 1396 10:29 ب.ظ
این ها واقعا در مورد وبلاگ نویسی ایده های فراوانی دارند.
اینجا به نکته های خوبی اشاره کرده ای. هر چی رو به عقب برگردونی
شنبه 25 آذر 1396 07:24 ب.ظ
من فکر می کنم این یکی از مهم ترین اطلاعات برای من است.

و من خوشحالم که مقاله شما را مطالعه می کنم اما باید چند مورد معمول را تفسیر کرد
سبک سایت کامل است، مقالات واقعا عالی است: D.
فعالیت خوب، تشویق
سه شنبه 21 آذر 1396 04:33 ب.ظ
سلام! این پست نمیتوانست بهتر از این نوشته شود! به دنبال این پست من همسایه قبلی من را یادآوری میکنم!

مدام در مورد این موضوع صحبت میکرد. من این مقاله را به او خواهم فرستاد
مطمئنا او خواندن خوب خواهد داشت. از شما قدردانی میکنم
برای اشتراک گذاری!
سه شنبه 14 آذر 1396 09:57 ب.ظ
سه شنبه 14 آذر 1396 09:52 ب.ظ
ممنون
سه شنبه 14 آذر 1396 09:41 ب.ظ
مرسی
سه شنبه 14 آذر 1396 09:36 ب.ظ
خوب
سه شنبه 14 آذر 1396 09:31 ب.ظ
عالی
سه شنبه 14 آذر 1396 09:22 ب.ظ
good
پنجشنبه 9 آذر 1396 07:00 ب.ظ
سلام! من در حال خواندن وبلاگ شما هستم و در نهایت شجاعت را به پیش بردم و از شما فریاد می زنم
جدید سانی تگزاس! فقط قصد داشتم بگویم که به کار عالی خود ادامه دهید!
پنجشنبه 18 آبان 1396 05:59 ب.ظ
من با تمام مفاهیم که در پست خود ارائه کرده اید موافقم.
آنها بسیار متقاعد کننده هستند و مطمئنا کار خواهند کرد.
پیام ها هنوز هم برای کاربران جدید خیلی کوتاه هستند. ممکن است
فقط شما آنها را کمی بعد از مدت زمان طولانی تر ببندید؟

از پستتان ممنونم.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر


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