- شروع کننده موضوع
- #1
developzoom
کاربر نیمه‌فعال
- ارسال‌ها
- 5
- امتیاز
- 0
- نام مرکز سمپاد
- -
- شهر
- تهران
- مدال المپیاد
- -
- دانشگاه
- -
- رشته دانشگاه
- -
از سری آموزش های بوت استرپ و آموزش وردپرس در خدمت شما هستیم.
در قدم اول باید بوت استرپ را بشناسیم و ببینیم چه کاربردی دارد.
بوت استرپ چیست ؟
بوت استرپ یک فریمورک رایگان برای طراحی سریع و آسان وبسایت و اپلیکیشن های تحت وب می باشد.
بوت استرپ شامل کدهای آماده 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>
برای شروع کار با بوت استرپ می توانید از اینجا شروع کنید. مباحث پیشرفته تر نیز برایتان آماده خواهد شد.
منبع : آموزش طراحی سایت