خانه / بوت استرپ Bootstrap / شروع کار با تویتر بوت استرپ Bootstrap

شروع کار با تویتر بوت استرپ Bootstrap

شروع کار با تویتر بوت استرپ Bootstrap

 

در اینجا یاد خواهید گرفت که ایجاد یک صفحه ی وب با استفاده از تویتر بوت استرپ چقدر آسان خواهد بود.

قبل از شروع مطمئن شوید که یک ویرایشگر کد و معلومات کاربردی مربوط به HTML و CSS دارید.

بسیار خوب، اجازه بدهید مستقیما به سمت برنامه برویم……..

 

شروع کار با تویتر بوت استرپ Bootstrap
شروع کار با تویتر بوت استرپ Bootstrap

 

 

دانلود فایل های بوت استرپ

دو ورژن برای دانلود وجود دارند، فایل های Bootstrap compiled و source Bootstrap . دانلود کامپایل شامل ورژن کامپایل و کوچک شده ی ورژن فایل های CSS و javascript و همچنین آیکن هایی در فرمت فونت برای توسعه ی سریعتر و راحت تر وب می باشد، در حالیکه منبع دانلود دارای فایل های اصلی برای CSS و جاوااسکریپت به همراه یک کپی از داکیومنتها، است.

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

 

درک ساختار فایل Bootstrap

زمانی که compiled bootstrap دانلود شد، فولدر زیپ را باز کرده تا ساختار را ببینید. شما ساختار فایل و محتوای زیر را خواهید یافت:

 

bootstrap/
|—— css/
| |—— bootstrap.css
| |—— bootstrap.min.css

| |—— bootstrap-theme.css
| |—— bootstrap-theme.min.css
|—— js/
| |—— bootstrap.js
| |—— bootstrap.min.js
|—— fonts/
| |—— glyphicons-halflings-regular.eot
| |—— glyphicons-halflings-regular.svg
| |—— glyphicons-halflings-regular.ttf
| |—— glyphicons-halflings-regular.woff

همانطور که می بینید ورژن کامپایل شده از بوت استرپ، فایل های کامپایل شده ی CSS و JS را به همراه CSS و JS کوچک شده، ارائه می دهد. درداخل فولدر فونت ها، چهار فایل فونت وجود دارند. این فایل فونت ها دارای ۱۴۴ آیکن از مجموعه ی Glyphicon Halfling می باشد.

نکته: این اساسی ترین شکل از تویتر بوت استرپ برای استفاده ی سریع در هر پروژه ی وبی می باشد. لطفا توجه داشته باشید که همه ی پلاگین های جاوااسکریپت باید دارای jQuery باشند.

 

ایجاد اولین صفحه ی وب با تویتر بوت استرپ

تاکنون ساختار و اهداف فایل های بوت استرپ را درک کرده اید. اکنون زمان آن رسیده تا از بوت استرپ استفاده ی حقیقی داشته باشیم. در این بخش ما یک الگوی بوت استرپ پایه ایجاد خواهیم کرد که شامل مواردی می شود که در ساختار فایل ذکر کردیم.
اجازه بدهید مراحل زیر را طی کنیم. در انتهای آموزش شما یک فایل HTML خواهید ساخت که پیام “Hello world” را روی مرورگر شما نمایش خواهد داد.

 

twitter-bootstrap-responsive
twitter-bootstrap-responsive

 

 

مرحله اول: ایجاد یک فایل HTML پایه

ویرایشگر مورد علاقه ی خود را باز کرده و یک فایل HTML جدید ایجاد کنید. با یک پنجره ی خالی آغاز کرده و کد زیر را تایپ کنید:

 

<!DOCTYPE html>
<html>
<head>
<title>Basic HTML File</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

مرحله ی دوم: ساختن الگوی Bootstrapped برای فایل HTML :

برای ساختن الگوی bootstrapped برای این فایل HTML ، فقط فایل های مناسب Bootstrap CSS و JS را وارد کنید. شما باید فایل های جاوااسکریپت را در پایین صفحه، قبل از بستن برچسب <body> ، برای بهبود اجرای صفحات وب وارد کنید.

 

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Basic Bootstrap Template</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” type=”text/css” href=”../css/bootstrap.min.css”>
</head>
<body>
<h1>Hello, world!</h1>
<script src=”http://code.jquery.com/jquery.min.js”></script>
<script src=”../js/bootstrap.min.js”></script>
</body>
</html>

Bootstrap
Bootstrap

مرحله ی سوم: ذخیره ی فایل بوت استرپ

اکنون فایل را روی دسک تاپ خود با عنوان ” “bootstrap-template.html ذخیره کنید.
نکته: اینکه ضمیمه ی Html مشخص شده است، مهم می باشد – برخی از ویرایشگرها مانند notepad آن را با عنوان .txt ذخیره می کنند. برای بازکردن فایل در مرورگر، فایل خود را مسیریابی کرده و سپس روی آن دابل کلیک کنید، که روی مرورگر پیش فرض شما باز خواهد شد. ( اگر باز نشد، مرورگر را باز کرده و فایل را به داخل آن درگ کنید)

 

 

در ادامه آموزش به Twitter Bootstrap Grid System خواهیم پرداخت با ما همراه باشید…

 

 

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

%u0637%u0631%u0627%u062D%u06CC %u0633%u0627%u06CC%u062A
طراحی سایتسئواجاره ویلا و فروش ویلا شمالسرویس و تعمیر کولر گازیاجاره ویلافروش ویلااجاره ویلافروش ویلاویلا شمالویلا زیباکنار