سلام مهمان گرامی ، خوش آمدید. آیا این نخستین بازدید شماست ؟ وارد شده یا عضو شوید

انجمن های تخصصی علوم رایانه و هنرهای دیجیتال



آموزش بوت استرپ – قسمت اول
زمان کنونی: 23-09-2017، 10:31 PM
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: developzoom
آخرین ارسال: developzoom
پاسخ 1
بازدید 513
محبوب کنید:

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش بوت استرپ – قسمت اول
#1
[تصویر:  developzoom-bootstrap.png]



از سری آموزش های بوت استرپ و *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* در خدمت شما هستیم.

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
ساخت اولین صفحه با استفاده از بوت استرپ:
۱- صفحه 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 Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">

<h1>My First Bootstrap Page</h1>



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 Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container-fluid">

<h1>My First Bootstrap Page</h1>



This is some text.

 
</div>


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

منبع : *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
پاسخ


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  دانلود آموزش زبان برنامه نویسی PHP ali_aot 1 2,248 20-12-2016، 05:59 PM
آخرین ارسال: satar660
  آموزش بوت استرپ – قسمت دوم developzoom 0 464 03-06-2016، 08:37 PM
آخرین ارسال: developzoom
  آموزش php 8908183 0 611 16-03-2016، 02:36 PM
آخرین ارسال: 8908183
  آموزش گام به گام پی اچ پی php توضیحات بیشتر در مورد دستورات شرطي if، elseif و switch Mohsen Omidvar 0 1,831 01-02-2014، 04:30 PM
آخرین ارسال: Mohsen Omidvar
  آموزش گام به گام پی اچ پی php Mohsen Omidvar 2 3,258 01-01-2014، 05:01 PM
آخرین ارسال: Mohsen Omidvar
  دانلود رایگان آموزش برنامه نویسی SQL در PHP ali_aot 0 2,053 04-10-2013، 12:15 PM
آخرین ارسال: ali_aot

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان