آموزش های کوچک » نتایج بزرگ همراه با آموزش فارسی

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

responsive

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

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

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

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

28979 33 org 300x190 - شروع کار با تویتر بوت استرپ 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” را روی مرورگر شما نمایش خواهد داد.

 

مرحله اول: ایجاد یک فایل 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=”https://code.jquery.com/jquery.min.js”></script>
<script src=”../js/bootstrap.min.js”></script>
</body>
</html>

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

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

 

 

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

 

 

 

آموزش فارسی

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

نوشته‌های مرتبط

قوانین ارسال دیدگاه

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

*
*

تخفیف 30%
کد تخفیف 75%
کد تخفیف 100%
تخفیف 50%
دانلود مقاله اشتباهات هزینه دار سئو SEO
کد تخفیف 13%
کد تخفیف 20%
کد تخفیف 90%
شانس خود را برای دریافت جایزه دریافت کنید!
آدرس ایمیل و تلفن همراه خود را وارد کنید و چرخ را چرخانید. این شانس شما برای به دست آوردن تخفیف های شگفت انگیز است!