آموزش bootstrap

نویسنده اسماعیل شیدایی

یک شنبه 15 شهریور 1394 - 2:54

آموزش bootstrap

بسم الله الرحمن الرحیم

آموزش طراحی سایت با بوت استرپ

بخش دوم

نمایش لیست آموزش های Bootstrap

در بخش قبل Bootstrap را معرفی کردیم، در این بخش وب سایت Bootstrap را معرفی و ابزارهای مورد نیاز جهت کد نویسی را آماده خواهیم کرد.

این دوره متناسب افرادی است که حداقلا آشناییت نسبی با CSS و HTML و همچنین jQuery دارند. در صورتی که برخی از مفاهیم برای شما مشکل به نظر می رسد بهتر است آن مطلب را همین جا مطرح کنید تا دوستان سوال شما را پاسخ دهند.

سایت های زیادی هستند که Template های بوت استرپ را طراحی می کنند و برای فروش قرار می دهند، چند نمونه از این سایت ها را برای شما در اینجا معرفی کرده ایم تا بتوایند آن ها را مشاهده کنید و از آنها ایده بگیرید.

http://lovebootstrap.com

http://expo.getbootstrap.com

http://builtwithbootstrap.com

http://bootstrapbay.com

علاوه بر سایت فوق سایتی با نام http://themeforest.net وجود دارد که Template های زیادی را برای فروش قرار می دهد از جمله Template های Wordpress, joomla و Template هایی که با فریم ورک های مختلفی همچون بوت استرپ طراحی شده اند.
بهتر است این نکته را در همین جا ذکر کنیم که فریم ورک های مختلفی مانند بوت استرپ وجود دارند که ویژگی Responsive بودن را دارند و همچنین اجزاء پیش فرض صفحات را به شما می دهند اما محبوب ترین این فریم ورک ها، Framework Bootstrap می باشد. در نتیجه با دیدن یک سایت که Responsive می شود و ساختار مشابه بوت استرپ دارد نمی توان مطمئن شد که این سایت با فریم ورک بوت استرپ طراحی شده است.

برای اینکه شما بتوانید با یک Template کامل بوت استرپ آشنا شوید ما چند Template را تهیه کردیم که در بخش های مختلف دوره آنها را برای دانلود بر روی سایت قرار خواهیم داد. این Template ها هدیه ی مجموعه ABLY.ir به شما دوستان عزیز است.

اولین Template را می توانید در بخش بعدی از آموزش Bootstratp دانلود کنید.

همانطور که قبلا گفته شد بوت استرپ یک فریم ورک است که فایل های آن به صورت رایگان قابل دانلود می باشد. برای دانلود فایل های بوت استرپ می بایست به سایت http://getbootstrap.com مراجعه کنید. در این سایت آموزش استفاده از بوت استرپ نیز قرار داده شده است که می توانید از بخش http://getbootstrap.com/components نحوه کار با هر یک از اجزاء بوت استرپ و یا به اصطلاح component ها را مطالعه کنید.

از قسمت Getting Started (یا لینک http://getbootstrap.com/getting-started ) می توانید فایل های بوت استرپ را دانلود کنید. از قسمت Download گزینه Download Bootstrap را انتخاب کنید و فایل های بوت استرپ را دانلود کنید.

حال درون کامپیوتر خود در یک مسیر مشخص Folder ایی را جهت طراحی اولین وب سایت ایجاد کنید، نام این Folder را BootstrapSite قرار دهید و سپس فایل دانلود شده را درون این پوشه Extract کنید.

بسم الله الرحمن الرحیم

آموزش طراحی سایت با بوت استرپ

بخش دوم

نمایش لیست آموزش های Bootstrap

http://lovebootstrap.com

http://expo.getbootstrap.com

http://builtwithbootstrap.com

http://bootstrapbay.com

همانطور که مشاهده می کنید سه Folder برای شما ایجاد شده است که در هر یک از آنها فایل هایی قرار دارد.
Fonts شامل فونت های پیش فرض مربوط بوت استرپ می باشد.
Js شامل تمامی فایل های jQuery مربوط به بوت استرپ می باشد.
Css شامل تمامی فایل های Css مربوط به بوت استرپ می باشد.

اگر فایل های درون این Css را بررسی کنید، مشاهده خواهید کرد که از هر فایل دو نسخه وجود دارد، یکی با پسوند min و دیگری بدون پسوند min.
Min مخفف عبارت minify می باشد که معنای کوچک کردن می دهد. کد زیر را در نظر بگیرید:


.BreakLine {
    border-top: 1px solid rgb(204, 204, 204);
    margin: 40px 0 72px 0;
}

.HeaderText {
    color: #3399FF;
}

.BlueLineHeader {
    background-color: #268DAD;
    height: 5px;
    width: 100%;
}

تمامی کدها به صورت عادی بدین شکل خواهند بود.
یکی از روش های افزایش سرعت صفحات وب کاهش حجم فایل های css و js می باشد. از همین رو معمولا پس از پایان مرحله کد نویسی فایل های css و js را به صورت minify شده ذخیره می کنند و در سایت اصلی قرار می دهند.
سایت های زیادی وجود دارند که عملیات minify را انجام می دهند. برای نمونه کد بالا را به سایت http://csscompressor.com بدهید. نتیجه کار به صورت زیر خواهد بود.


.BreakLine{border-top:1px solid #ccc;margin:40px 0 72px}.HeaderText{color:#39F}.BlueLineHeader{background-color:#268DAD;height:5px;width:100%}

همانطور که مشاهده می کنید، تمامی فضاهای خالی یا همان Spcase ها و همچنین خطوط فاصله حذف شده اند.

بوت استرپ نیز از هر فایل دو نسخه برای شما قرار داده است، نسخه ای که فشرده سازی نشده است و نسخه ای با پسوند min که فشرده سازی بر روی آن انجام شده است.
در فشرده سازی و یا همان minify کردن فایل ها، Space , Enter میان کلمات و خطوط حذف می شوند. همچنین در برخی از ابزارهای minify توضیحات نیز حذف می شوند.

bootstrap.css.map چیست

یا بهتر است بگوییم

پسوند map چیست؟

هنگامی که یک فایل فشرده می شود، طبیعتا شماره خط ها نسبت به فایل اصلی که فشرده شده نیست متفاوت است مثل همین کد ما که تمامی خطوط در یک خط فشرده شدند. به همین دلیل اشکال زادیی و یافتن خطوط مشکل خواهد شد، برای حل این مشکل از فایل map استفاده می کنند. این روش خود یک بحث کامل است و طبیعتا نمی توان در چندین خط آن را توضیح داد، لذا در صورتی که تمایل دارید این مطلب را کامل آموزش ببینید، باید کمی در مورد آن جستجو کنید.

بهتر است کمی با روش کار کردن بوت استرپ آشنا شویم.
به همین دلیل ابتدا یک فایل با نام Index و پسوند HTML در مسیر اصلی فایل های بوت استرپ ایجاد کنید. برای انجام اینکار ابتدا برنامه Notepad خود را باز کنید و سپس کدهای زیر را در آن قرار دهید.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ably.ir:.Bootstrap</title>
    <!-- Bootstrap css -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" />
    
</head>
<body>

   

    <!-- Bootstrap js -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

حال از منوی File گزینه Save را انتخاب کنید، در پنجره باز شده Folder ایی را که قبلا ایجاد کردیم (BootstrapSite) را انتخاب کنید و این فایل را با نام و پسوند Index.html ذخیره کنید.

طبیعتا تاکنون ما هیچ کار خاصی را انجام نداده ایم، بلکه فقط فایل های اصلی Bootstrap را به صفحه خود اضافه کردیم.

همانطور که در کد بالا مشاهده کردید، ما کدهای minify شده را به صفحه خود اضافه کرده ایم، همچنین فایل js را در انتهای Body قرار داده ایم. همیشه بهتر است فایل های JS در پایین صفحات فراخوانی شوند تا سرعت لود و نمایش صفحات افزایش یابد.
در حال حاضر ما صفحه ای را برای شروع کد نویسی و استفاده از فریم ورک بوت استرپ آماده کردیم. از این لحظه به بعد می توانیم کدهای خود را به صورت خیلی ساده با کمک بوت استرپ به سایت اضافه کنیم.

Editor

قبل از شروع به کد نویسی شما باید ابزارهایی را برای خود انتخاب کنید. در این آموزش به دو ابزار اصلی نیاز داریم، یک محیط کد نویسی و یا Editor که تا کنون از Notepad برای اینکار استفاده کردیم.

شما می توانید از بین Editor های موجود با توجه به سلیقه شخصیتان یکی از آنها را انتخاب کنید. در بخش زیر دو مورد از این Editor هارا برای شما معرفی کرده ایم که به سادگی می توانید آنها را دانلود کنید. حجم همه ی این Editor ها بسیار کم می باشد.

دانلود ++Notepad

دانلود Sublime

ما از ++Notepad استفاده می کنیم، اما طبیعتا تفاوتی در آموزش و روش کار نخواهد داشت به همین دلیل Editor مورد علاقه خود را انتخاب کنید.

Browser

دومین ابزاری که شما برای کد نویسی نیاز دارید یک Browser و یا مرورگر است تا کد خود را بررسی و خطایابی کنید. ما از فایرفاکس استفاده خواهیم کرد اگر شما از Chrome و یا مرورگر دیگری استفاده می کنید هیچ مشکلی وجود نخواهد داشت، اما بهتر است Firefox را نیز نصب کنید تا در مواقع لزوم بتوانید از آن استفاده کنید.

CDN چیست

صفحه ای را که کد نویسی کرده ایم در Editor خود باز کنید. همانطور که مشخص است ما فایل های بوت استرپ را در کنار صفحه خود (بر روی کامپیوتر شخصی خود) قرار داده ایم. طبیعتا هنگامی که قرار باشد سایت بر روی سرور قرار گیرد، این فایل ها نیز بر روی سرور باید آپلود شوند.

معرفی CDN

علاوه بر روش فوق، روش دیگری وجود دارد که به آن اصطلاحا CDN گفته می شود. CDN مخفف عبارت content delivery network می باشد. این تکنولوژی و روش بدین صورت است که شما به جای استفاده از فایلهای از روی سرور خود، آنها را مستقیما از سرورهای شرکت فراهم کننده (که در اینجا Twitter است) فراخوانی می کنید.
به طور مثال می توانید به جای فایل CSS قبلی که در صفحه Index قرار دادیم، فایل های CSS زیر را استفاده کنیم.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

و همچنین به جای استفاده از فایل js ایی که در پایین Body قرار دادیم می توانیم از فایل زیر استفاده کنیم

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script

همانطور که مشاهده می کنید تمامی فایل های بوت استرپ در اینجا از سایت bootstrap دریافت می شود.

مزیت CDN چیست؟

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

به دلیل اینکه بیشتر سرور های CDN از پروتکل امن HTTP با نام HTTPS استفاده می کنند، متاسفانه سرعت لود این فایل ها در کشور ما بسیار پایین است.

در اینجا ما ترجیح می دهیم از فایل های CSS و JS به صورت Local (فایلهایی که دانلود کردیم و بر روی کامپیوتر ما قرار دارد) استفاده کنیم.

علاوه بر فایل هایی که به صفحه Index اضافه کردیم، به فایل jquery نیز احتیاج داریم پس باید این فایل را نیز به صفحه خود اضافه کنیم، کد ما به صورت زیر خواهد بود:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ably.ir:.Bootstrap</title>
    <!-- Bootstrap css -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" />
    
</head>
<body>

   

    <!-- jquery main file -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap js -->
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

طبیعتا همه شما می دانید که ترتیب قرار گرفتن این فایل ها اهمیت دارد، مثلا در فایل bootstrap.min.js توابعی هستند که برای اجرا شدن به jquery.min.js احتیاج دارند، پس اگر ما جای این دو فایل را به صورت زیر تغییر دهیم، با خطا مواجه خواهیم شد.

<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
<!-- jquery main file -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

به طور مثال تابعی در فایل bootstrap.min.js میخواهد اجرا شود که به jquery.min.js احتیاج دارد، اما چون فایل jquery.min.js هنوز لود نشده است،

bootstrap.min.js نیز نمی تواند اجرا شود، پس باید ترتیب قرار گرفتن فایل ها را تغییر دهیم تا ابتدا فایل jquery.min.js اجرا شود.

در بخش بعد کار خود را با معرفی Component ها و یا همان بخش ها و ابزارهای Bootstrap آغاز خواهیم کرد.