آموزش Reboot در بوت استرپ | شروعی اصولی برای طراحی حرفه‌ای

0 دیدگاه

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

رویکرد Reboot در بوت استرپ

بوت استرپ در Reboot از انتخاب‌گرهای تگ (element selectors) برای اعمال استایل‌های ابتدایی و ساختارمند استفاده می‌کند و استایل‌های اضافی تنها از طریق کلاس‌ها قابل اعمال هستند.
برای مثال، بوت استرپ برخی از ویژگی‌های پایه تگ <table> را با Reboot بازتنظیم می‌کند و پس از آن می‌توان از کلاس‌هایی مانند .table، .table-bordered و سایر کلاس‌های تکمیلی استفاده کرد.

در Reboot، واحد em با rem جایگزین شده تا فاصله‌گذاری بین اجزا در اندازه‌های مختلف صفحه به صورت مقیاس‌پذیر و یکنواخت انجام شود.
به‌جای استفاده از margin-top، توصیه می‌شود فقط از margin در یک جهت استفاده شود؛ زیرا margin‌های عمودی ممکن است در برخی مرورگرها به‌صورت پیش‌بینی‌نشده با هم ادغام شوند. این رفتار می‌تواند چیدمان را تحت تأثیر قرار دهد. استفاده از margin یک‌طرفه، ساختار ساده‌تر و قابل پیش‌بینی‌تری ایجاد می‌کند.
برای عناصر بلاک، بهتر است از واحد rem برای فاصله‌گذاری استفاده شود تا سازگاری آن با اندازه‌های مختلف صفحه حفظ شود.
همچنین پیشنهاد می‌شود در صورت امکان از inherit برای ویژگی‌های مربوط به فونت استفاده شود و از تعریف‌های تکراری یا غیرضروری در تایپوگرافی اجتناب گردد.

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

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

</body>

تنظیمات پیش‌فرض صفحه

Reboot برای تگ‌های <html> و <body> به‌کار می‌رود تا تنظیمات پیش‌فرض صفحه را به شکل بهتر و یکپارچه‌تری ارائه دهد.

تمام عناصر، از جمله شبه‌عناصر *::before و *::after، دارای مقدار box-sizing: border-box هستند. این ویژگی باعث می‌شود padding و border خارج از عرض مشخص‌شده برای عنصر اعمال نشوند و طراحی دقیق‌تر انجام شود.
- در صورتی که اندازه فونت در تگ <html> مشخص نشده باشد، مرورگر مقدار پیش‌فرض 16px را اعمال می‌کند. برای دستیابی به تایپوگرافی مقیاس‌پذیر و در دسترس، باید در تگ <body> مقدار font-size: 1rem تنظیم شود. همچنین می‌توان با تغییر متغیر Sass به نام $font-size-root مقدار پیش‌فرض مرورگر را بازنویسی کرد.
استایل‌های جهانی تگ <body> شامل ویژگی‌هایی مانند font-family، font-weight، line-height و color هستند. برای جلوگیری از اختلاف در ظاهر فونت، برخی عناصر فرم نیز این ویژگی‌ها را از تگ body به ارث می‌برند.
رنگ پس‌زمینه تگ <body> به‌صورت پیش‌فرض برابر با #fff در نظر گرفته شده که این انتخاب به دلایل امنیتی انجام شده است.

فونت‌های پیش‌فرض سیستم (Native Font Stack)

در Reboot، بوت استرپ از یک فونت استک بومی یا سیستم فونت استک استفاده می‌کند. هدف از این انتخاب، نمایش بهینه متن در همه دستگاه‌ها و سیستم عامل‌ها است.
فونت‌های سیستم مدرن برای نمایش بهتر در صفحات با وضوح بالا طراحی شده‌اند و از قابلیت‌هایی مانند رندر حرفه‌ای، پشتیبانی از تغییر فونت و بهبود در تجربه کاربری پشتیبانی می‌کنند.
برای اطلاعات بیشتر می‌توانید به مستندات مربوط به Native Font Stack مراجعه کنید.

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

$font-family-sans-serif:

// Cross-platform generic font family (default user interface font)

system-ui,

// Safari for macOS and iOS (San Francisco)

-apple-system,

// Windows

"Segoe UI",

// Android

Roboto,

// older macOS and iOS

"Helvetica Neue"

// Linux

"Noto Sans",

"Liberation Sans",

// Basic web fallback

Arial,

// Sans serif fallback

sans-serif,

// Emoji fonts

"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

نکات تکمیلی

استک فونت فوق شامل فونت‌های مربوط به اموجی نیز هست. به همین دلیل، نمادهای رایج مانند کاراکترهای یونیکد تزئینی یا شکلک‌ها به‌صورت پیکتوگرام‌های رنگی نمایش داده می‌شوند. ظاهر آن‌ها بسته به فونت اموجی سیستم عامل یا مرورگر متفاوت خواهد بود و تحت تأثیر رنگ‌های تعریف‌شده در CSS قرار نمی‌گیرند.
ویژگی font-family در تگ <body> اعمال شده و به‌طور خودکار در تمام بخش‌های بوت استرپ به ارث می‌رسد. در صورت نیاز به تغییر فونت کلی پروژه، باید مقدار متغیر $font-family-base را تغییر داده و بوت استرپ را مجدداً کامپایل کنید.

تنظیمات هدینگ ها (Headings)

Reboot در بوت استرپ هدینگ‌ها را بازتنظیم می‌کند تا margin پیش‌فرض تگ‌های HTML مانند <h1> تا <h6> حذف شود. به‌طور پیش‌فرض، این تگ‌ها دارای margin-bottom: 0.5rem و line-height فشرده‌تر هستند که در Reboot برای هماهنگی بیشتر در طراحی اصلاح شده‌اند.

همچنین می‌توانید با استفاده از متغیر CSS به نام --bs-heading-color رنگ هدینگ‌ها را به‌صورت دلخواه تغییر دهید. این متغیر امکان سفارشی‌سازی رنگ عنوان‌ها در سطح پروژه را فراهم می‌کند.

تگ HTML	نمایش خروجی نمونه
`<h1>`	h1. Bootstrap heading
`<h2>`	h2. Bootstrap heading
`<h3>`	h3. Bootstrap heading
`<h4>`	h4. Bootstrap heading
`<h5>`	h5. Bootstrap heading
`<h6>`	h6. Bootstrap heading

پاراگراف ها (Paragraphs)

در بوت استرپ ۵، Reboot استایل تگ <p> را نیز بازنویسی می‌کند. در این بازتنظیم، margin-top پیش‌فرض حذف شده و به جای آن، margin-bottom برابر با ۱rem در نظر گرفته شده است. این تغییر باعث می‌شود فاصله بین پاراگراف‌ها یکدست و قابل پیش‌بینی باشد و مدیریت چیدمان متن آسان‌تر صورت گیرد.

مثال:

این پاراگراف اول است.

این پاراگراف دوم است.

<!DOCTYPE html>
<html lang="fa">
<head>
  <title>Bootstrap - Reboot</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <p>این پاراگراف اول است.</p>
    <p>این پاراگراف دوم است.</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<p>این پاراگراف اول است.</p>

<p>این پاراگراف دوم است.</p>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

لینک ها (Links)

در Reboot بوت استرپ، لینک‌ها دارای رنگ پیش‌فرض و خط زیر متن (underline) هستند. هنگام قرار گرفتن نشانگر موس روی لینک (:hover) رنگ آن تغییر می‌کند، اما پس از بازدید کاربر (:visited) هیچ تغییری در ظاهر آن ایجاد نمی‌شود. همچنین در Reboot برای حالت فوکوس (:focus) استایل خاصی تعریف نشده است.

مثال:

این یک لینک است.

 <!DOCTYPE html>
    <html lang="fa">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p><a href="https://www.google.com/">این یک لینک است</a></p>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

در نسخه ۵.۳ بوت استرپ، رنگ لینک‌ها با استفاده از تابع rgba() و متغیرهای جدید -rgb در CSS تعریف شده است. این روش امکان تغییر و سفارشی‌سازی آسان میزان شفافیت رنگ لینک را فراهم می‌کند.

برای تغییر میزان شفافیت (opacity) لینک‌ها، می‌توانید از متغیر CSS به نام --bs-link-opacity استفاده کنید.

 <!DOCTYPE html>
    <html lang="fa">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <p><a href="https://www.google.com/" style="--bs-link-opacity: .7">این یک لینک است</a></p>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

Reboot در بوت استرپ لینک‌هایی را که فاقد ویژگی href هستند (معروف به placeholder links) به‌طور خاص هدف قرار می‌دهد. برای این نوع لینک‌ها، رنگ (color) و خط زیر متن (text-decoration) به مقادیر پیش‌فرض مرورگر بازنشانی می‌شوند تا با رفتار استاندارد عناصر متنی هماهنگ باشند و در طراحی اختلال ایجاد نکنند.

   <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
       <p><a>Visit Tutorialspoint</a></p>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<p><a>Visit Tutorialspoint</a></p>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

خطوط افقی (Horizontal Rules)

در Reboot، استایل عنصر <hr> ساده‌سازی شده است. به‌صورت پیش‌فرض، این عنصر با کادر بالا (border-top) و میزان شفافیت opacity: 0.25 نمایش داده می‌شود. همچنین، رنگ کادر آن به‌صورت خودکار از رنگ والد به ارث می‌رسد. این ساختار باعث می‌شود خطوط جداکننده در طراحی، ظاهر یکپارچه و هماهنگی با تم کلی صفحه داشته باشند.

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h2 class="text-center">Horizontal rules</h2>
      <div class="container">
        <hr>

        <div class="text-primary">
          <hr>
        </div>

        <hr class="border border-warning border-3 opacity-75">
        <hr class="border border-info border-4 opacity-100">
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<h2 class="text-center">Horizontal rules</h2>

<hr>

<hr>

</div>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

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

در Reboot بوت استرپ، استایل‌های پیش‌فرض لیست ها بازنویسی شده‌اند. عناصر لیست شامل <ul>، <ol> و <dl> دیگر دارای margin-top نیستند و به‌جای آن، مقدار margin-bottom: 1rem برای آن‌ها در نظر گرفته شده است.

مثال:

بالای لیست‌ها margin ندارد.
در لیست‌های تو در تو، margin bottem وجود ندارد.
- در مجموع، ظاهر لیست‌ها مانند لیست‌های نامرتب است.
- margin پایین آن‌ها به صورت یکسان تنظیم شده است.
padding سمت چپ بازنشانی شده است.

این یک لیست مرتب است.
لیست مرتب، لیستی است که
آیتم‌ها شماره‌گذاری شده‌اند و ترتیب آن‌ها اهمیت دارد.

لیست‌های توضیحی ساختاری منظم دارند که استایل‌دهی را ساده می‌کند و سلسله‌مراتب اطلاعات را به‌خوبی نمایش می‌دهد.
عنصر <dd> هیچ فاصله‌ای از چپ ندارد (margin-left: 0) و فاصله‌ی پایین آن برابر با 0.5rem است.
همچنین، بوت استرپ متن داخل عنصر <dt> را به‌صورت پررنگ (bold) نمایش می‌دهد تا عنوان‌ها از توضیحات متمایز باشند.

مثال:

دکمه ها در بوت استرپ: بوت استرپ انواع دکمه‌ها را با اندازه‌ها، وضعیت‌ها و قابلیت‌های مختلف برای استفاده در فرم‌ها، دیالوگ‌ها و سایر بخش‌ها ارائه می‌دهد.
رنگ ها در بوت استرپ: رنگ‌ها در بوت استرپ برای تعیین رنگ متن یا پس‌زمینه استفاده می‌شوند.
منو کشویی در بوت استرپ: منوی کشویی یا Dropdown در بوت استرپ امکان نمایش مجموعه‌ای از لینک‌ها را در قالبی قابل تغییر و وابسته به زمینه فراهم می‌کند.

کد درون خطی (Inline Code)

برای نمایش قطعه‌کدهای کوتاه درون متن، از تگ <code> استفاده کنید. در صورتی که در کد از علائم کوچکتر (<) یا بزرگتر (>) استفاده شده، باید آن‌ها را به‌درستی escape کنید تا به‌عنوان HTML تفسیر نشوند.

مثال:

عنصر <section> باید درون یک کانتینر درون‌خطی قرار گیرد.

  <!DOCTYPE html>
  <html lang="fa">
  <head>
    <title>Bootstrap - Reboot</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      عنصر <code>&lt;section&gt;</code> باید درون یک کانتینر درون‌خطی قرار گیرد.
    </div>
  </body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

عنصر <code><section></code> باید درون یک کانتینر درون‌خطی قرار گیرد.

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

بلوک های کد (Code Blocks)

در Reboot بوت استرپ ۵، برای نمایش کدهای چندخطی از تگ <pre> استفاده می‌شود.
توصیه می‌شود علامت‌های کوچکتر و بزرگتر را در کد به‌صورت escape‌شده بنویسید تا مرورگر آن‌ها را به‌درستی نمایش دهد.
در این نسخه، عنصر <pre> به‌گونه‌ای بازتنظیم شده که margin-top آن حذف شده تا چیدمان کدها با سایر بخش‌ها هماهنگ باشد.

مثال:

&lt;p&gt;Tutorialspoint&lt;/p&gt;
    &lt;p&gt;This is an example of code block.&lt;/p&gt;

<p>Tutorialspoint</p>

<p>This is an example of code block.</p>

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
      <body>
        <pre><code>Tutorialspoint
        This is an example of code block.
        </code></pre>
      </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<pre><code>Tutorialspoint

This is an example of code block.

</code></pre>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

متغیرها در بوت استرپ

در Reboot بوت استرپ، برای بازتنظیم استایل تگ <var> از استایل‌های مخصوص متغیرها استفاده می‌شود. این تگ معمولاً برای نمایش متغیرهای برنامه‌نویسی یا ریاضی به‌کار می‌رود و با استفاده از Reboot ظاهر هماهنگ‌تری پیدا می‌کند.

مثال:

ax + by = c

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <var>a</var><var>x</var> + <var>b</var><var>y</var> = <var>c</var>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

ورودی کاربر (User Input)

در Reboot بوت استرپ، از تگ <kbd> برای نمایش ورودی‌هایی استفاده می‌شود که معمولاً توسط کاربر از طریق صفحه‌کلید وارد می‌شوند.

متنی که داخل تگ <kbd> قرار می‌گیرد، معمولاً با فونت تک‌فاصله (monospace) پیش‌فرض مرورگر نمایش داده می‌شود تا ظاهر آن مشابه کلیدهای صفحه‌کلید باشد.

مثال:

To save the changes, press Ctrl + s
To paste the selected item, press Ctrl + v

  <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        To save the changes, press <kbd><kbd>Ctrl</kbd> + <kbd>s</kbd></kbd><br>
        To paste the selected item, press <kbd><kbd>Ctrl</kbd> + <kbd>v</kbd></kbd>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

To save the changes, press <kbd><kbd>Ctrl</kbd> + <kbd>s</kbd></kbd><br>

To paste the selected item, press <kbd><kbd>Ctrl</kbd> + <kbd>v</kbd></kbd>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

خروجی نمونه (Sample Output)

برای نمایش خروجی نمونه از یک برنامه، باید از تگ <samp> استفاده کنید. این تگ معمولاً برای نشان دادن نتیجه اجرای کد یا پاسخ کنسول کاربرد دارد.

مثال:

This text should be considered as an example output generated by a computer program.

   <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <samp>This text should be considered as an example output generated by a computer program.</samp>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<samp>This text should be considered as an example output generated by a computer program.</samp>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

جدول ها در بوت استرپ

در Reboot بوت استرپ، استایل جدول‌ها به‌گونه‌ای تنظیم شده است که تگ <caption> ظاهر بهتری داشته باشد، مرزهای جدول (border) به‌صورت collapse تنظیم شوند، و تراز متن (text-align) در همه سلول‌ها یکدست باشد.

برای تنظیمات بیشتر مانند تغییر در حاشیه‌ها (border) و فاصله داخلی سلول‌ها (padding)، می‌توانید از کلاس .table استفاده کنید.

مثال:

This is a caption of table to describe the contents.
Employee Id	Employee Name	Employee Role
10	Jhon	Software Devloper
20	Mayra	Tester
30	Rocky	Data Analyst

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <table>
          <caption>
            This is a caption of table to describe the contents.
          </caption>
          <thead>
            <tr>
              <th>Employee Id</th>
              <th>Employee Name</th>
              <th>Employee Role</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>10</td>
              <td>Jhon</td>
              <td>Software Devloper</td>
            </tr>
            <tr>
              <td>20</td>
              <td>Mayra</td>
              <td>Tester</td>
            </tr>
            <tr>
              <td>30</td>
              <td>Rocky</td>
              <td>Data Analyst</td>
            </tr>
          </tbody>
        </table>
        </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<table>

This is a caption of table to describe the contents.

</caption>

<thead>

<tr>

<th>Employee Id</th>

<th>Employee Name</th>

<th>Employee Role</th>

</tr>

</thead>

<tbody>

<tr>

<td>Software Devloper</td>

</tr>

<tr>

<td>Mayra</td>

<td>Tester</td>

</tr>

<tr>

<td>Rocky</td>

<td>Data Analyst</td>

</tr>

</tbody>

</table>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

فرم ها (Forms)

در Reboot بوت استرپ، عناصر فرم ساده‌سازی شده‌اند و سبک‌های پایه‌ی جدیدی برای آن‌ها تعریف شده است. مهم‌ترین تغییرات در این بخش به شرح زیر هستند:

تگ <fieldset> را می‌توان به‌راحتی برای گروه‌بندی یک یا چند ورودی استفاده کرد، زیرا این عنصر دیگر هیچ حاشیه (border)، فاصله داخلی (padding) یا بیرونی (margin) ندارد.
تگ <legend> برای نمایش به‌صورت عنوان (heading) بازطراحی شده است.
برای امکان اعمال margin، تگ <label> به صورت display: inline-block نمایش داده می‌شود.
استایل‌دهی اصلی برای تگ‌های <input>، <select>، <textarea> و <button> توسط Normalise انجام می‌شود، در حالی که Reboot حاشیه‌ها را حذف کرده و line-height را از والد به ارث می‌گیرد.
تگ <textarea> تنها در جهت عمودی قابل تغییر اندازه است تا از به‌هم‌ریختگی چیدمان صفحه جلوگیری شود.
دکمه‌ها و ورودی‌هایی که نقش دکمه دارند (مانند <button> و <input type="button">) زمانی که غیرفعال نباشند، نشانگر موس به حالت اشاره‌گر (cursor: pointer) تغییر می‌کند.

برخی از ورودی‌های مربوط به تاریخ، در نسخه‌های جدید مرورگرهای Safari و Firefox هنوز به‌طور کامل پشتیبانی نمی‌شوند.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <form class="bd-example">
        <fieldset>
          <legend>Form</legend>
          <p>
            <label for="input">Name</label>
            <input type="text" id="inputName" placeholder="Enter your name...">
          </p>
          <p>
            <label for="email">Email id</label>
            <input type="email" id="emailId" placeholder="Tutorialspoint@example.com">
          </p>
          <p>
            <label for="tel">Mobile No:</label>
            <input type="tel" id="Mob">
          </p>
          <p>
            <label for="url">Age</label>
            <input type="number" id="age">
          </p>
          <p>
            <label for="number">Number</label>
            <input type="number" id="number">
          </p>
          <p>
            <label for="search">Search Here</label>
            <input type="search" id="searchHere">
          </p>
          <p>
            <label for="range">Range</label>
            <input type="range" id="rangeExample" min="0" max="10">
          </p>
          <p>
            <label for="file">Upload file</label>
            <input type="file" id="fileinput">
          </p>
          <p>
            <label for="select">Languages</label>
            <select id="select">
              <option value="">select...</option>
              <optgroup label="Group 1">
                <option value="">HTML</option>
                <option value="">CSS</option>
                <option value="">Bootstrap</option>
              </optgroup>
              <optgroup label="Group 2">
                <option value="">C</option>
                <option value="">C++</option>
                <option value="">Java</option>
              </optgroup>
            </select>
          </p>
          <p>
            <h6>Selects the languages</h6>
            <label>
              <input type="checkbox" value="">
                HTML
            </label>
            <br>
            <label>
              <input type="checkbox" value="">
                CSS
            </label>
            <br>
            <label>
              <input type="checkbox" value="">
                Javascript
            </label>
          </p>
          <p>
            <h6>Select your gender</h6>
            <label>
              <input type="radio" name="firstOption" id="radios1" value="option1" checked>
              Female
            </label>
            <br>
            <label>
              <input type="radio" name="secondOption" id="radios2" value="option2">
              Male
            </label>
            <br>
            <label>
              <input type="radio" name="thirdOption" id="radios3" value="option3" disabled>
                Others
            </label>
          </p>
          <p>
            <label for="textarea">Feedback</label>
            <textarea id="feedbackTextarea" rows="4"></textarea>
          </p>

          <p>
            <label for="date">Birth date</label>
            <input type="date" id="birthDate">
          </p>

          <p>
            <label for="time">Time</label>
            <input type="time" id="timeInput">
          </p>
          <p>
            <label for="password">Enter Password</label>
            <input type="password" id="password">
          </p>
          <p>
            <label for="datetime-local">Local Datetime</label>
            <input type="datetime-local" id="localDatetime">
          </p>
          <p>
            <label for="week">Select week</label>
            <input type="week" id="weekInput">
          </p>
          <p>
            <label for="month">Select month</label>
            <input type="month" id="monthInput">
          </p>
          <p>
            <label for="color">Selet color</label>
            <input type="color" id="selectColor">
          </p>
          <p>
            <label for="output">Output: </label>
            <output name="result" id="output">Tutorialspoint</output>
          </p>
          <p>
            <label>Buttons</label>
            <button type="submit">Submit</button>
            <input type="reset" value="Reset">
            <input type="button" value="Button">
          </p>
          <p>
            <label>Disabled Buttons</label>
            <button type="submit" disabled>Submit</button>
            <input type="reset" value="Reset" disabled>
            <input type="button" value="Button" disabled>
          </p>
        </fieldset>
      </form>
    </body>
    </html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<p>

</p>

<p>

<label for="email">Email id</label>

</p>

<p>

<label for="tel">Mobile No:</label>

</p>

<p>

</p>

<p>

<label for="number">Number</label>

</p>

<p>

<label for="search">Search Here</label>

</p>

<p>

<label for="range">Range</label>

</p>

<p>

<label for="file">Upload file</label>

</p>

<p>

<label for="select">Languages</label>

<option value="">select...</option>

<option value="">Bootstrap</option>

</optgroup>

</optgroup>

</select>

</p>

<p>

<h6>Selects the languages</h6>

<label>

HTML

</label>

<br>

<label>

CSS

</label>

<br>

<label>

Javascript

</label>

</p>

<p>

<h6>Select your gender</h6>

<label>

Female

</label>

<br>

<label>

Male

</label>

<br>

<label>

Others

</label>

</p>

<p>

<label for="textarea">Feedback</label>

</p>

<p>

<label for="date">Birth date</label>

</p>

<p>

</p>

<p>

<label for="password">Enter Password</label>

</p>

<p>

<label for="datetime-local">Local Datetime</label>

</p>

<p>

<label for="week">Select week</label>

</p>

<p>

<label for="month">Select month</label>

</p>

<p>

<label for="color">Selet color</label>

</p>

<p>

<label for="output">Output: </label>

<output name="result" id="output">Tutorialspoint</output>

</p>

<p>

<label>Buttons</label>

<button type="submit">Submit</button>

</p>

<p>

<label>Disabled Buttons</label>

<button type="submit" disabled>Submit</button>

</p>

</fieldset>

</form>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

نشانگر موس روی دکمه ها (Pointers on Buttons)

در Reboot بوت استرپ، زمانی که از ویژگی role="button" استفاده کنید، نشانگر موس به حالت اشاره‌گر (pointer) تغییر می‌کند. این ویژگی برای مشخص کردن عناصر تعاملی در صفحه کاربرد دارد.

برای تگ <button> نیازی به افزودن این ویژگی نیست، زیرا به‌صورت پیش‌فرض دارای تغییر نشانگر موس هستند.

   <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <span role="button" tabindex="0">Non-button element</span>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<span role="button" tabindex="0">Non-button element</span>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

عناصر متفرقه

آدرس (Address)

در Reboot بوت استرپ، عنصر <address> به‌گونه‌ای بازتنظیم شده که فونت آن از حالت ایتالیک به متن معمولی تغییر می‌کند.

این عنصر خط فاصله (line-height) را از والد به ارث می‌برد و مقدار margin-bottom آن برابر با 1rem تعیین شده است.

برای حفظ قالب‌بندی و نمایش درست خطوط، لازم است خطوط را با استفاده از تگ <br> خاتمه دهید.

مثال:

ABC Corporation
505 sansui street,
Eillis, CA 0178
P: (212) 357-0194

tutorialspoint@example.com

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Reboot</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <address>
            <strong>ABC Corporation</strong><br>
            505 sansui street,<br>
            Eillis, CA 0178<br>
            <abbr title="Phone">P:</abbr> (212) 357-0194
          </address>
          <address>
            <a href="mailto:tutorialspoint@example.com">tutorialspoint@example.com</a>
        </address>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<strong>ABC Corporation</strong><br>

505 sansui street,<br>

Eillis, CA 0178<br>

<abbr title="Phone">P:</abbr> (212) 357-0194

</address>

<a href="mailto:tutorialspoint@example.com">tutorialspoint@example.com</a>

</address>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

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

در Reboot بوت استرپ، استایل پیش‌فرض تگ <blockquote> که به‌صورت 1em 40px بود، به 0 0 1rem تغییر داده شده تا با سایر عناصر هماهنگ باشد. از این عنصر معمولاً زمانی استفاده می‌شود که بخواهید محتوایی را از منبعی دیگر نقل‌قول کنید. یادگیری این موارد پایه‌ای در آموزش بوت استرپ نیز به‌طور کامل پوشش داده شده و درک درستی از نحوه ساختاردهی استاندارد فراهم می‌کند.

مثال: این یک نقل قول است

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Reboot</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container">
    <blockquote class="blockquote">
      <p>Blockquote removes default margin of HTML blockquote tag element.</p>
    </blockquote>
    <p>Someone well-known in <cite title="Source Title">Source Title</cite>.</p>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<p>Blockquote removes default margin of HTML blockquote tag element.</p>

</blockquote>

<p>Someone well-known in <cite title="Source Title">Source Title</cite>.</p>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

عناصر درون خطی (Inline Elements)

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

تگ <abbr> به‌عنوان یکی از این عناصر، استایلی ساده اما قابل تشخیص دریافت می‌کند تا کاربر متوجه شود با یک عبارت مخفف یا اصطلاح روبه‌رو است.

مثال:

The CSS is a style sheet language.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Reboot</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      The <abbr title="Cascading Style Sheet">CSS</abbr> is a style sheet language.
  </body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

The <abbr title="Cascading Style Sheet">CSS</abbr> is a style sheet language.

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

خلاصه (Summary)

در Reboot بوت استرپ، می‌توان عناصر متنی را تعاملی کرد تا محتوای خلاصه‌شده نمایش دهند.
به‌صورت پیش‌فرض، نشانگر موس روی عنصر <summary> به‌صورت متن (text) نمایش داده می‌شود.
Reboot این رفتار را تغییر می‌دهد و نشانگر را به حالت اشاره‌گر (pointer) تبدیل می‌کند تا کاربر متوجه شود این عنصر قابل کلیک و تعاملی است.

مثال:

Bootstrap Colors

colors in Bootstrap used to give the colors to the text or the background.

Bootstrap Dropdown

Dropdown menus are toggleable, contextual menus that can be enabled to show links in a list format.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Reboot</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <details>
        <summary>Bootstrap Colors</summary>
        <p>Bootstrap colors used to give the colors to the text or the background.</p>
      </details>
      <details open>
        <summary>Bootstrap Dropdown</summary>
        <p>Dropdown menus are toggleable, contextual menus that can be enabled to show links in a list format.</p>
      </details>
    </div>
  </body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Reboot</title>

</head>

<body>

<summary>Bootstrap Colors</summary>

<p>Bootstrap colors used to give the colors to the text or the background.</p>

</details>

<summary>Bootstrap Dropdown</summary>

<p>Dropdown menus are toggleable, contextual menus that can be enabled to show links in a list format.</p>

</details>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

ویژگی `[hidden]` در HTML5

در HTML5، اگر روی یک عنصر از ویژگی [hidden] استفاده کنید، مرورگر آن عنصر را به‌صورت پیش‌فرض نمایش نمی‌دهد و با display: none از صفحه حذف می‌شود.

بوت استرپ در Reboot این رفتار را بهبود داده است تا مطمئن شود این ویژگی به‌طور ناخواسته با استایل‌های دیگر تداخل پیدا نکند. به همین دلیل، دستور زیر به استایل‌ها اضافه شده است:

    <input type="text" hidden>

1	<input type="text" hidden>

نکته مهم:

اگر نمی‌خواهید یک عنصر کاملاً از صفحه حذف شود و فقط قصد دارید آن را موقتاً نامرئی کنید (در حالی که جای خود را در چیدمان حفظ کند)، به‌جای [hidden] از کلاس .invisible استفاده کنید.
با این کار، عنصر دیده نمی‌شود اما همچنان در جریان چیدمان صفحه تأثیر دارد.

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

دوره آموزش طراحی فروشگاه اینترنتی بدون کد نویسی در 8 ساعت

انتشار: ۳۰ اردیبهشت ۱۴۰۴

آموزش Reboot در بوت استرپ | شروعی اصولی برای طراحی حرفه‌ای

رویکرد Reboot در بوت استرپ

تنظیمات پیش‌فرض صفحه

فونت‌های پیش‌فرض سیستم (Native Font Stack)

نکات تکمیلی

تنظیمات هدینگ ها (Headings)

پاراگراف ها (Paragraphs)

لینک ها (Links)

خطوط افقی (Horizontal Rules)

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

کد درون خطی (Inline Code)

بلوک های کد (Code Blocks)

متغیرها در بوت استرپ

ورودی کاربر (User Input)

خروجی نمونه (Sample Output)

جدول ها در بوت استرپ

فرم ها (Forms)

نشانگر موس روی دکمه ها (Pointers on Buttons)

عناصر متفرقه

آدرس (Address)

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

عناصر درون خطی (Inline Elements)

خلاصه (Summary)

ویژگی `[hidden]` در HTML5

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط

رویکرد Reboot در بوت استرپ

تنظیمات پیش‌فرض صفحه

فونت‌های پیش‌فرض سیستم (Native Font Stack)

نکات تکمیلی

تنظیمات هدینگ ها (Headings)

پاراگراف ها (Paragraphs)

لینک ها (Links)

خطوط افقی (Horizontal Rules)

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

کد درون خطی (Inline Code)

بلوک های کد (Code Blocks)

متغیرها در بوت استرپ

ورودی کاربر (User Input)

خروجی نمونه (Sample Output)

جدول ها در بوت استرپ

فرم ها (Forms)

نشانگر موس روی دکمه ها (Pointers on Buttons)

عناصر متفرقه

آدرس (Address)

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

عناصر درون خطی (Inline Elements)

خلاصه (Summary)

ویژگی [hidden] در HTML5

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط

ویژگی `[hidden]` در HTML5