فهرست سرفصل‌های Bootstrap
خانه (Home) شروع کار (Get Started) کانتینرها (Containers) گرید پایه (Grid Basic) تایپوگرافی (Typography) رنگ ها (Colors) رنگ های پس زمینه (Background Colors) جدول ها (Tables) تصاویر (Images) جمبوترون (Jumbotron) هشدارها (Alerts) دکمه ها (Buttons) گروه دکمه ها (Button Groups) نشان ها (Badges) نوارهای پیشرفت (Progress Bars) اسپینرها (Spinners) صفحه بندی (Pagination) گروه های لیست (List Groups) کارت ها (Cards) منوی کشویی (Dropdowns) جمع شونده (Collapse) ناوبری (Navs) نوار ناوبری (Navbar) اسلایدشو (Carousel) مودال (Modal) راهنمای ابزار (Tooltip) پاپ اور (Popover) توست (Toast) اسکرول اسپای (Scrollspy) آف کانواس (Offcanvas) ابزارها (Utilities) حالت تیره (Dark Mode) فلکس (Flex) فرم ها (Forms) منوی انتخاب (Select Menus) چک باکس و رادیو (Checks and Radios) محدوده (Range) گروه ورودی (Input Groups) برچسب های شناور (Floating Labels) اعتبارسنجی فرم (Form Validation) سیستم گرید (Grid System) چیدمان عمودی/افقی (Stacked/Horizontal) گرید بسیار کوچک (Grid XSmall) گرید کوچک (Grid Small) گرید متوسط (Grid Medium) گرید بزرگ (Grid Large) گرید خیلی بزرگ (Grid XLarge) گرید XXL (Grid XXL) مثال های گرید (Grid Examples) قالب پایه (Basic Template) ویرایشگر (Editor) تمرین ها (Exercises) آزمون (Quiz) سیلابس (Syllabus) برنامه مطالعه (Study Plan) آمادگی مصاحبه (Interview Prep) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
Bootstrap

Bootstrap — ویرایشگر (Editor)

آخرین بروزرسانی: 1404/08/20

ویرایشگر (Editor)

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

ویرایشگر بوتسترپ؛ اجرا و پیش نمایش فوری

در این ابزار، کد را می نویسی و بلافاصله خروجی را می بینی. «پیش نمایش زنده» یعنی بدون نصب چیزی نتیجه را می بینی.

<div class="bg-light p-5 text-center">
  <h2>My First Bootstrap Page</h2>
  <p>Some Bootstrap buttons:</p>
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-success">Success</button>
</div>

مشاهده در ادیتور

گام های عملی

  1. کد HTML بوتسترپ را در ویرایشگر وارد کن.
  2. روی «Run» یا «Try it Yourself» کلیک کن.
  3. خروجی را در سمت راست ببین و اصلاح کن.

نکته: دکمه «Try it Yourself» صفحه کد را باز می کند. سپس نتیجه را همان جا نشان می دهد.

برای شروع سریع، از قالب پایه کمک بگیر. سپس در مثال های گرید تمرین کن و کدها را در «ویرایشگر بوتسترپ» اجرا کن.

جمع بندی سریع

  • ویرایشگر بوتسترپ اجرا را فوری می کند.
  • بدون نصب، تمرین و تست کن.
  • از Try it برای پیش نمایش استفاده کن.
  • با قالب پایه سریع شروع کن.