شروع شدن

نمای کلی پروژه، محتویات آن و نحوه شروع با یک الگوی ساده.

قبل از دانلود، حتماً یک ویرایشگر کد (ما Sublime Text 2 را توصیه می کنیم ) و مقداری دانش کاری در مورد HTML و CSS داشته باشید. ما در اینجا فایل های منبع را بررسی نمی کنیم، اما آنها برای دانلود در دسترس هستند. ما روی شروع کار با فایل های بوت استرپ کامپایل شده خود تمرکز خواهیم کرد.

دانلود کامپایل شد

سریع ترین راه برای شروع: نسخه های کامپایل شده و کوچک شده CSS، JS و تصاویر ما را دریافت کنید. بدون سند یا فایل منبع اصلی.

بوت استرپ را دانلود کنید

منبع دانلود

با دانلود مستقیم آخرین نسخه از GitHub، فایل های اصلی را برای همه CSS و Javasript به همراه یک نسخه محلی از اسناد دریافت کنید.

دانلود سورس بوت استرپ

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

پس از دانلود، پوشه فشرده را از حالت فشرده خارج کنید تا ساختار Bootstrap (کامپایل شده) را ببینید. چیزی شبیه به این را خواهید دید:

  bootstrap / ├── css / ├── bootstrap . css
   ├── bootstrap . دقیقه _ css
   ├── js / ├── bootstrap . js
   ├── bootstrap . دقیقه _ js
   ├── img / ├── glyphicons - halflings . png
   ├── glyphicons - halflings - white . png
  
  
        
        
        └── README . md

این ابتدایی ترین شکل بوت استرپ است: فایل های کامپایل شده برای استفاده سریع در تقریباً هر پروژه وب. ما CSS و JS ( bootstrap.*) کامپایل شده و همچنین CSS و JS ( bootstrap.min.*) کامپایل شده و کوچک شده ارائه می دهیم. فایل‌های تصویری با استفاده از ImageOptim ، یک برنامه مک برای فشرده‌سازی PNG فشرده می‌شوند.

Bootstrap مجهز به HTML، CSS و JS برای انواع چیزها است، اما می‌توان آنها را با دسته‌هایی که در بالای مستندات Bootstrap قابل مشاهده است خلاصه کرد .

بخش های Docs

داربست

سبک های جهانی برای تنظیم مجدد نوع و پس زمینه، سبک های پیوند، سیستم شبکه و دو طرح بندی ساده.

CSS پایه

سبک هایی برای عناصر رایج HTML مانند تایپوگرافی، کد، جداول، فرم ها و دکمه ها. همچنین شامل Glyphicons ، یک مجموعه آیکون کوچک عالی است.

اجزاء

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

پلاگین های جاوا اسکریپت

مشابه Components، این افزونه‌های جاوا اسکریپت مؤلفه‌های تعاملی برای مواردی مانند راهنمای ابزار، پاپ‌اور، مدال و موارد دیگر هستند.

لیست اجزاء

با هم، بخش های Components و plugins Javascript عناصر رابط زیر را ارائه می دهند:

  • گروه های دکمه ای
  • کشویی دکمه
  • برگه‌ها، قرص‌ها و فهرست‌های ناوبری
  • نوار ناوبری
  • برچسب ها
  • نشان ها
  • هدرهای صفحه و واحد قهرمان
  • ریز عکسها
  • هشدارها
  • نوارهای پیشرفت
  • مدال ها
  • کشویی
  • نکات ابزار
  • پاپاورها
  • آکاردئون
  • چرخ فلک
  • تایپی پیش

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

با یک مقدمه کوتاه از محتویات، می‌توانیم روی استفاده از Bootstrap تمرکز کنیم. برای انجام این کار، از یک الگوی اولیه HTML استفاده می کنیم که شامل همه چیزهایی است که در ساختار فایل ذکر کردیم .

اکنون، در اینجا نگاهی به یک فایل HTML معمولی داریم :

  1. <html>
  2. <سر>
  3. <title> الگوی بوت استرپ 101 </title>
  4. </head>
  5. <بدن>
  6. <h1> سلام، دنیا! </h1>
  7. </body>
  8. </html>

برای اینکه این یک قالب بوت استرپ شود ، فقط فایل های CSS و JS مناسب را وارد کنید:

  1. <html>
  2. <سر>
  3. <title> الگوی بوت استرپ 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <بدن>
  8. <h1> سلام، دنیا! </h1>
  9. <script src = "js/bootstrap.min.js" ></script>
  10. </body>
  11. </html>

و شما آماده اید! با اضافه شدن این دو فایل، می توانید شروع به توسعه هر سایت یا برنامه ای با بوت استرپ کنید.

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

  • سایت بازاریابی پایه

    دارای یک واحد قهرمان برای یک پیام اصلی و سه عنصر پشتیبانی.

  • چیدمان سیال

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

  • قالب استارتر

    یک سند HTML بدون مشکل با تمام Bootstrap CSS و جاوا اسکریپت گنجانده شده است.

برای اطلاعات، مثال‌ها و تکه‌های کد به اسناد مراجعه کنید، یا جهش بعدی را انجام دهید و Bootstrap را برای هر پروژه آینده سفارشی کنید.

از اسناد Bootstrap دیدن کنید بوت استرپ را سفارشی کنید