saeed410
عضو جدید
در این آموزش میخواهیم روش های مختلف استفاده از بوت استرپ و محیط کلی آن را مورد بررسی قرار دهیم. [h=1]دانلود بوت استرپ[/h] برای دانلود بوت استرپ به این آدرس بروید زمانی که این صفحه باز شود مطابق شکل زیر سه گزینه برای دانلود داریم:
در اینجا ما روی دکمه Download Bootstrap کلیک میکنیم. گزینه های دیگر در ابتدای کار نیاز نیست. اگر با کد های Less کار کرده اید میتوانید این کد را دانلود کنید و با کامپایلر دلخواه خود تغییرات را در کد اعمال کنید. همچنین میتوانید کد Sass بوت استرپ را دانلود کنید. ما در این مجموعه آموزشی کار با CSS و جاوااسکریپت کامپایل شده را آموزش میدهیم. همچنین در یک یا چند مقاله کار با کد Sass را نیز آموزش خواهیم داد.
[h=2]ساختار فایل بوت استرپ[/h] بعد از دانلود بوت استرپ کامپایل شده سه پوشه خواهید دید که شامل فایلهای استایل دهی ، جاوااسکریپت و فونت ها هستند.
در پوشه CSS دوفایل Bootstrap.css و bootstrap.min.css با هم یکی هستند و فایل دوم فشرده شده و مینیفای شده ی فایل اول است. به همین صورت فایلهای همنامی دیگر نیز هم به صورت غیر فشرده وجود دارند ، هم به صورت فشرده. در پوشه fonts فونت glyphicons وجود دارد ؛ که این فونت فقط در پروژه های بوت استرپ به صورت رایگان وجود دارد. میتوانید از آیکن های زیبای این فونت به طور رایگان استفاده کنید.
[h=2]قالب HTML برای استفاده از بوت استرپ[/h] برای شروع ؛ ابتدا فایل فشرده دانلود شده را اکسترکت کنید. سپس پوشه های CSS,JS,Fonts را انتخاب کنید و به پوشه ایی انتقال دهید که میخواهید تمرینهای بوت استرپ خود را در آنجا انجام دهید.
حالا notepad رو باز کنید و کد زیر را داخل آن کپی کنید. از این به بعد در تمام صفحات باید این کدها رو به صورت پایه داشته باشید:
در ادامه فایل bootstrap.min.css رو لینک دادیم به فایل خودمون.
[h=2]استفاده از CDN ها :[/h] اگر نمیخواهید به صورت دستی بوت استرپ را دانلود کنید و آنها را در داخل هاست خود آپلود و استفاده کنید میتوانید از CDN ها استفاده کنید. با استفاده از CDN ها میتوانید تمام موارد مورد نیاز بوت استرپ را به صفحه خودتون لینک کنید. بنابراین در کدهای بالا برای فایلهای bootstrap.min.css و bootstrap.min.js ، همچنین JQuery میتوانید از CDN زیر استفاده کنید:
1- کانتینر با کلاس .container که دارای عرض فیکس است به صورت زیر:
منبع : شروع کار با بوت استرپ
در اینجا ما روی دکمه Download Bootstrap کلیک میکنیم. گزینه های دیگر در ابتدای کار نیاز نیست. اگر با کد های Less کار کرده اید میتوانید این کد را دانلود کنید و با کامپایلر دلخواه خود تغییرات را در کد اعمال کنید. همچنین میتوانید کد Sass بوت استرپ را دانلود کنید. ما در این مجموعه آموزشی کار با CSS و جاوااسکریپت کامپایل شده را آموزش میدهیم. همچنین در یک یا چند مقاله کار با کد Sass را نیز آموزش خواهیم داد.
[h=2]ساختار فایل بوت استرپ[/h] بعد از دانلود بوت استرپ کامپایل شده سه پوشه خواهید دید که شامل فایلهای استایل دهی ، جاوااسکریپت و فونت ها هستند.
در پوشه CSS دوفایل Bootstrap.css و bootstrap.min.css با هم یکی هستند و فایل دوم فشرده شده و مینیفای شده ی فایل اول است. به همین صورت فایلهای همنامی دیگر نیز هم به صورت غیر فشرده وجود دارند ، هم به صورت فشرده. در پوشه fonts فونت glyphicons وجود دارد ؛ که این فونت فقط در پروژه های بوت استرپ به صورت رایگان وجود دارد. میتوانید از آیکن های زیبای این فونت به طور رایگان استفاده کنید.
[h=2]قالب HTML برای استفاده از بوت استرپ[/h] برای شروع ؛ ابتدا فایل فشرده دانلود شده را اکسترکت کنید. سپس پوشه های CSS,JS,Fonts را انتخاب کنید و به پوشه ایی انتقال دهید که میخواهید تمرینهای بوت استرپ خود را در آنجا انجام دهید.
حالا notepad رو باز کنید و کد زیر را داخل آن کپی کنید. از این به بعد در تمام صفحات باید این کدها رو به صورت پایه داشته باشید:
<!DOCTYPE html>
<html>
<head>
<title>قالب بوت استرپ </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
حالا تگ های که ممکن در آنها ابهام وجود داشته باشه را توضیح میدیم:<html>
<head>
<title>قالب بوت استرپ </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
اگه یادتون باشه در قسمت قبل گفتیم بوت استرپ دارای رویکرد Mobile First است. با استفاده از تگ متای بالا ، سند خودمون برای نمایش در انواع نمایشگرها آماده میکنیم. همچنین برای بعضی از موبایلها که امکان زوم کردن روی تصویر رو دارند هم ما مقدار اولیه Zoom رو با initial-scale=1.0 برابر با اندازه اصلی خودش مشخص کردیم. در ادامه فایل bootstrap.min.css رو لینک دادیم به فایل خودمون.
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
در کد بالا قابلیت های HTML5.0 و واکنش گرایی رو به IE8 اضافه میکنیم. در صورتی که مرورگر کاربر IE8 باشه از این دو فایل استفاده میشه. و در قسمت Body صفحه دو فایل جاوااسکریپت که مورد نیاز استفاده در بوت استرپ هستند رو اضافه کردیم. برای ذخیره این فایل ، از منوی File در notepad گزینه Save as رو بزنید و Save as type را روی All files بزارید. همچنین Encoding را روی UTF-8 بزارید. این فایل را با یک نام دلخواه در پوشه ایی که برای تمرین هاتون آماده کردید ذخیره کنید. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/
html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/
respond.min.js"></script>
<![endif]-->
[h=2]استفاده از CDN ها :[/h] اگر نمیخواهید به صورت دستی بوت استرپ را دانلود کنید و آنها را در داخل هاست خود آپلود و استفاده کنید میتوانید از CDN ها استفاده کنید. با استفاده از CDN ها میتوانید تمام موارد مورد نیاز بوت استرپ را به صفحه خودتون لینک کنید. بنابراین در کدهای بالا برای فایلهای bootstrap.min.css و bootstrap.min.js ، همچنین JQuery میتوانید از CDN زیر استفاده کنید:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script
[h=2]قرار دادن کدها در کانتینر[/h] برای استفاده از بوت استرپ هنگام اضافه کردن محتوا به بدنه صفحات خود آنها را داخل کانتینر ها قرار دهید. دو نوع کانتینر در بوت استرپ وجود دارد که میتوانید از آنها استفاده کنید:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script
1- کانتینر با کلاس .container که دارای عرض فیکس است به صورت زیر:
<div class="container">
محتوا
</div>
2- کانتینر با کلاس .container-fluid که دارای عرض کامل یا Full است. اگر از کلاس قبلی استفاده کنید مشاهد خواهید کرد که محتویات صفحه شما در نمایشگرهای رومیزی از کناره ها دارای فاصله است. در صورتی که نمیخواهید این فاصله وجود داشته باشد و محتویات به صورت تمام صفحه نمایش داده شوند از این کلاس استفاه کنید: محتوا
</div>
<div class="container-fluid">
...
</div>
در این قسمت اصول اولیه استفاده از بوت استرپ را فراگرفتیم. در قسمتهای بعد با کلاسهای بوت استرپ آشنا خواهیم شد. در گروه: مقدمات بوت استرپ ...
</div>
منبع : شروع کار با بوت استرپ
