آموزش بوت استرپ
آموزش بوت استرپ
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش بوت استرپ خواهیم پرداخت.
توییتر بوت استرپ (Bootstrap ) محبوب ترین چارچوب front-end در چند وقت اخیر است. این چهارچوب front-end زیبا، بصری و قدرتمند برای توسعه وب سریعتر و آسان تر است. از HTML ، CSS و Javascript استفاده می کند. این آموزش اصول چارچوب بوت استرپ را به شما می آموزد که می توانید با سهولت پروژه های وب را ایجاد کنید. این آموزش به بخشهایی مانند Bootstrap Basic Structure ، Bootstrap CSS ، Bootstrap Layout Components و Bootstrap Plugins تقسیم شده است. هر یک از این بخشها شامل مباحث مرتبط با مثالهای ساده و مفید است.
چرا باید بوت استرپ را یاد گرفت؟
اولین رویکرد متحرک- بوت استرپ 3 ، چارچوب متشکل از سبک های اول متحرک در کل کتابخانه است و نه در فایل های جداگانه.
پشتیبانی مرورگر – توسط همه مرورگرهای محبوب پشتیبانی می شود.
شروع آسان – فقط با دانش HTML و CSS هرکسی می تواند با Bootstrap شروع به کار کند. همچنین سایت رسمی بوت استرپ مستندات خوبی دارد.
طراحی پاسخگو – CSS پاسخگو بوت استرپ با میز کار ، رایانه لوحی و تلفن همراه تنظیم می شود. اطلاعات بیشتر در مورد طراحی ریسپانسیو در فصل بوت استرپ Responsive Design وجود دارد.
- یک راه حل تمیز و یکنواخت برای ایجاد یک رابط برای توسعه دهندگان ارائه می دهد.
- این شامل اجزای داخلی زیبا و کاربردی است که به راحتی قابل شخصی سازی هستند.
- همچنین سفارشی سازی تحت وب را فراهم می کند.
- و از همه مهمتر منبع باز است.
Hello World با استفاده از بوت استرپ
فقط برای اینکه کمی در مورد Bootstrap به شما هیجان زده شود ، قصد دارم یک برنامه متداول کوچک Bootstrap Hello World را به شما ارائه دهم ، شما می توانید آن را با استفاده از لینک Demo امتحان کنید
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <!-- Bootstrap --> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[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> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src = "https://code.jquery.com/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src = "js/bootstrap.min.js"></script> </body> </html> |
کاربردهای های بوت استرپ
- Scaffolding– بوت استرپ ساختار اصلی را با سیستم شبکه ، سبک های پیوند و پس زمینه فراهم می کند. این در بخش ساختار اولیه بوت استرپ به طور کامل شرح داده شده است
- CSS – بوت استرپ با ویژگی تنظیمات جهانی CSS ، عناصر بنیادی HTML که با کلاسهای قابل توسعه و سبک سازی شده و یک سیستم شبکه پیشرفته ارائه می شود. این در بخش بوت استرپ با CSS به طور کامل شرح داده شده است.
- اجزا – بوت استرپ شامل بیش از ده م componentsلفه قابل استفاده مجدد است که برای ارائه شمایل نگاری ، کشویی ، ناوبری ، هشدارها ، پاپ ها و موارد دیگر ساخته شده است. این در بخش اجزای طرح با جزئیات توضیح داده شده است.
- افزونه های جاوا اسکریپت – بوت استرپ شامل بیش از دوازده پلاگین jQuery سفارشی است. به راحتی می توانید همه آنها را ، یا یکی یکی وارد کنید. این در بخش Bootstrap Plugins با جزئیات توضیح داده شده است.
- سفارشی سازی – می توانید اجزای بوت استرپ ، متغیرهای LESS و پلاگین های jQuery را شخصی سازی کنید تا نسخه بسیار اختصاصی خود را دریافت کنید.
این آموزش برای هر کسی که دانش اولیه ای در مورد HTML و CSS دارد و تمایل به توسعه وب سایت ها دارد ، تهیه شده است. پس از اتمام این آموزش شما در سطح متوسطی از مهارت در توسعه پروژه های وب با استفاده از Twitter Bootstrap خواهید یافت.
پیش نیازها
قبل از شروع به کار با این آموزش ، فرض می کنیم که شما از قبل در مورد اصول HTML و CSS آگاهی دارید. اگر از این مفاهیم کاملاً آگاهی ندارید ، ما به شما پیشنهاد می کنیم که آموزش کوتاه ما در مورد آموزش HTML و آموزش CSS را دنبال کنید.
.svg)
دیدگاه شما