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

بازدید: 2021 بازدید

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

 

تویتر بوت استرپ یک چارچوب زیبا، بصری و قدرتمند می باشد که برای توسعه ی سریعتر و آسانتر وب استفاده می شود.

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

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

شما با بوت استرپ می توانید زمان و انرژی زیادی را ذخیره کنید. بنابراین این وب سایت را انتخاب کرده و ادامه دهید.

 

مثال های بوت استرپ

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

 

دکمه ی ژنراتور تویتر بوت استرپ

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

 

معرفی تویتر بوت استرپ

تویتر بوت استرپ با HTML ، CS و جاوااسکریپت برای مولفه های اینترفیس وب ها و یوزرهای مختلف تجهیز می شود.

 

تویتر بوت استرپ چیست؟

تویتر بوت استرپ یک چارچوب قدرتمند برای توسعه ی سریعتر و آسانتر وب می باشد. این برنامه برای مولفه های اینترفیس یک کاربر عادی دارای الگوهای طراحی براساس HTML و CSS می باشد که عبارتند از فن چاپ، فرم ها، دکمه ها، جدول ها، مسیریابی ها، dropdowns، کیفیت ها، تب ها، Accordion، carousel و بسیاری دیگر به علاوه ی ضمیمه های انتخابی جاوا اسکریپت.

بوت استرپ همچنین به شما توانایی ایجاد یک طرح کلی (Layout) واکنش گرا را با تلاش کمتر می دهد.

 

مزیت های بوت استرپ تویتر

بزرگترین مزیت استفاده از بوت استرپ این است که این برنامه با مجموعه ای رایگان از ابزار برای ایجاد Layout های واکنش دار و تغییرپذیر و همچنین مولفه های متداول اینترفیس همراه است.

به علاوه استفاده ازداده های API، بوت استرپ می تواند بدون نوشتن حتی یک خط از جاوا اسکریپت، مولفه های اینترفیس پیشرفته ای ایجاد کند مانند Scroll spy و Typea head.

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

 

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

 

ذخیره ی زمان

شما میتوانید با استفاده از الگوها و گروهها ی از پیش تعریف شده ی بوت استرپ زمان زیادی را ذخیره کرده و روی توسعه ی دیگر کارها تمرکز کنید.

 

ویژگی های پاسخگو

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

 

طراحی منسجم

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

 

استفاده ی آسان

استفاده از بوت استرپ بسیار آسان میباشد. هرکسی با دانشی درحد HTML و CSS پایه می تواند کار با تویتر بوت استرپ را آغاز کند.

 

سازگار با مرورگرها

تویتر بوت استرپ با مرورگرهای مدرن ایجاد میشود و باهمه ی مرورگرهای مدرن مانند موزیلا، فایرفاکس، گوگل کروم، Safari، اینترنت اکسپلورر و Opera سازگار می باشد.

 

نکته

برخی از ویژگی های CSS، از قبیل ویژگی هایی برای گوشه های گرد، شیب ها و سایه ها توسط تویتر بوت استرپ استفاده می شوند، اما در ورژن های قدیمی تر مرورگرها به ویژه اینترنت اکسپلورر، پشتیبانی نمی شوند.

 

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

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

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

 

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

 

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

زمانی که 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 Halfli می باشد.

نکته: این اساسی ترین شکل از تویتر بوت استرپ برای استفاده ی سریع در هر پروژه ی وبی می باشد. لطفا توجه داشته باشید که همه ی پلاگین های جاوااسکریپت باید دارای 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=”http://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

سیستم گرید تویتر بوت استرپ راحت ترین و سریعترین راه برای ایجاد Layout می باشد

چگونه با سیستم گرید تویتر بوت استرپ Layout ایجاد کنیم:

این برنامه آسانترین و سریعترین راه را برای ایجاد Layout در صفحات وب ارائه می دهد. برخلاف سیستم گرید قبلی که به طور پیش فرض ثابت می باشد، ورژن جدید آن، به عنوان مثال تویتر بوت استرپ۳، اولین سیستم گرید جاری را به همراه پاسخگو معرفی می کند که به طور متناسب با افزایش دستگاه، تعداد ستون ها را تا ۱۲ افزایش می دهد.

تویتر بوت استرپ ۳ دارای گروه های گرید از پیش تعریف شده می باشد تا هرچه سریعتر Layout های گرید برای انواع مختلف دستگاه ها بسازد، دستگاه هایی مانند تلفن همراه، تبلت، دسک تاپ و غیره. به عنوان مثال شما می توانید از گروه col-xs، برای ایجاد ستون برای دستگاه های فوق العاده کوچک مانند تلفن همراه استفاده کنید، به طور مشابه گروه col-sm، برای دستگاه هایی با صفحات کوچ مثل تبلت ها و col-md، برای دستگاه هایی با اندازه متوسط مثل صفحه ی دستک تاپ و col-lg، برای صفحات بزرگ به کار می روند.

 

در ادامه با ما همراه باشید…