ریبوټ

ریبوټ، په یوه فایل کې د عنصر ځانګړي CSS بدلونونو ټولګه، د جوړولو لپاره په زړه پورې، ثابت، او ساده بیس لاین چمتو کولو لپاره د بوټسټراپ کیک سټارټ.

په دې پاڼه کې

روش

ریبوټ په نورمال کولو باندې رامینځته کیږي ، ډیری HTML عناصر چمتو کوي یو څه نظر لرونکي سټایلونه یوازې د عنصر انتخاب کونکو په کارولو سره. اضافي سټایل یوازې د ټولګیو سره ترسره کیږي. د مثال په توګه، موږ <table>د ساده بیس لاین لپاره ځینې سټایلونه ریبوټ کوو او وروسته چمتو .tableکوو .table-bordered، او نور.

دلته زموږ لارښوونې او دلیلونه دي چې په ریبوټ کې د څه شی غوره کولو لپاره غوره کړئ:

د توزیع وړ برخې فاصلې لپاره remد s پرځای د s کارولو لپاره د براوزر ځینې ډیفالټ ارزښتونه تازه کړئ.em
ډډه وکړئ margin-top. عمودی حاشیه کولی شي سقوط وکړي، غیر متوقع پایلې ترلاسه کوي. تر ټولو مهم که څه هم، د یو واحد لوري marginساده ذهني ماډل دی.
د وسیلې اندازې په اوږدو کې د اسانه اندازه کولو لپاره ، د بلاک عناصر باید د rems لپاره margins وکاروي.
د اړوندو ملکیتونو اعالمیه fontلږترلږه وساتئ، inheritهرکله چې امکان ولري کارول.

د سی ایس ایس متغیرونه

په v5.2.0 کې اضافه شوی

د v5.1.1 سره، موږ د خپلو @importټولو CSS بنډلونو (په شمول bootstrap.css،، bootstrap-reboot.cssاو bootstrap-grid.css) کې د شاملولو لپاره خپل اړین معیارونه معیاري کړل _root.scss. دا په ټولو بنډلونو کې د کچې CSS متغیرونه اضافه کوي :root، پرته له دې چې په دې بنډل کې څومره کارول کیږي. په نهایت کې بوټسټریپ 5 به د وخت په تیریدو سره د نورو CSS متغیرونو لیدلو ته دوام ورکړي ، ترڅو د تل لپاره د ساس بیا تنظیم کولو اړتیا پرته د ریښتیني وخت نور تخصیص چمتو کړي. زموږ تګلاره دا ده چې زموږ سرچینه ساس متغیرونه واخلو او د CSS متغیرونو ته یې واړوو. په دې توګه، حتی که تاسو د CSS متغیرات نه کاروئ، تاسو لاهم د Sass ټول ځواک لرئ. دا لاهم د پرمختګ په حال کې ده او په بشپړ ډول پلي کولو لپاره به وخت ونیسي.

د مثال په توګه، د عام سټایلونو :rootلپاره دا CSS متغیرونه په پام کې ونیسئ:<body>

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

په عمل کې، دا متغیرات بیا په ریبوټ کې پلي کیږي لکه:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

کوم چې تاسو ته اجازه درکوي په ریښتیني وخت کې تخصیصات رامینځته کړئ که څه هم تاسو غواړئ:

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

د پاڼې ډیفالټ

<html>او <body>عناصر نوي شوي ترڅو د مخ په کچه غوره ډیفالټ چمتو کړي . په ځانګړې توګه:

دا box-sizingپه نړیواله کچه په هر عنصر کې ترتیب شوی - په شمول *::beforeاو *::after، ته border-box. دا ډاډ ورکوي چې د عنصر اعلان شوي عرض هیڅکله د پیډینګ یا سرحد له امله نه تیریږي.
- په اړه هیڅ اساس نه font-sizeدی اعلان شوی <html>، مګر 16pxفرض شوی (د براوزر ډیفالټ). د میډیا پوښتنو له لارې د اسانه ځواب ویونکي ډول اندازه کولو لپاره font-size: 1remپلي کیږي پداسې حال کې چې د کارونکي غوره توبونو ته درناوی او د لاسرسي وړ طریقې ډاډمن کول. <body>د دې براوزر ډیفالټ د $font-size-rootمتغیر په بدلولو سره له پامه غورځول کیدی شي.
دا <body>یو نړیوال font-family, font-weight, line-height, او color. دا وروسته د ځینې شکل عناصرو لخوا میراث کیږي ترڅو د فونټ متضادیت مخه ونیسي.
د خوندیتوب لپاره، دا <body>یو اعلان background-colorشوی، د ډیفالټ کولو لپاره #fff.

د اصلي فونټ سټیک

بوټسټریپ په هر وسیله او OS کې د مطلوب متن وړاندې کولو لپاره د "اصلي فونټ سټیک" یا "سیسټم فونټ سټیک" کاروي. دا سیسټم فونټونه په ځانګړي ډول د نن ورځې وسیلو په پام کې نیولو سره ډیزاین شوي ، په سکرینونو کې د ښه رینډینګ سره ، د متغیر فونټ ملاتړ ، او نور ډیر څه. د اصلي فونټ سټیکونو په اړه نور ولولئ د دې حیرانونکې مجلې مقاله کې .

$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;

په یاد ولرئ ځکه چې د فونټ سټیک کې د ایموجي فونټونه شامل دي، ډیری عام سمبول/ډینګ بیټ یونیکوډ حروف به د څو رنګونو انځورونو په توګه وړاندې شي. colorد دوی بڼه به توپیر ولري، د براوزر/پلیټ فارم اصلي ایموجي فونټ کې کارول شوي سټایل پورې اړه لري، او دوی به د CSS سټایلونو لخوا اغیزمن نشي .

دا په ټوله نړۍ کې په بوټسټریپ کې font-familyپلي کیږي او په اتوماتيک ډول میراث کیږي. <body>د نړیوال بدلولو لپاره ، بوټسټریپ font-familyتازه او بیا تنظیم کړئ.$font-family-base

سرلیکونه او پراګرافونه

د سرلیک ټول عناصر — د مثال په توګه <h1>— او د دوی د لرې <p>کولو لپاره بیا تنظیم شوي. margin-topسرلیکونه margin-bottom: .5remاضافه شوي او پاراګرافونه margin-bottom: 1remد اسانه واټن لپاره.

سرلیک	بېلګه
`<h1></h1>`	h1. د بوټسټراپ سرلیک
`<h2></h2>`	h2. د بوټسټراپ سرلیک
`<h3></h3>`	h3. د بوټسټراپ سرلیک
`<h4></h4>`	h4. د بوټسټراپ سرلیک
`<h5></h5>`	h5. د بوټسټراپ سرلیک
`<h6></h6>`	h6. د بوټسټراپ سرلیک

افقی قواعد

<hr>عنصر ساده شوی دی . د براوزر ډیفالټ ته ورته، <hr>s له لارې سټایل شوي border-top، ډیفالټ لري ، او په اتوماتيک ډول د دوی له لارې opacity: .25میراث کوي ، په شمول کله چې د والدین له لارې ټاکل کیږي. دوی د متن، سرحد، او د شفافیت اسانتیاو سره تعدیل کیدی شي.border-colorcolorcolor

html

<hr>

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

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

لیستونه

ټول لستونه — <ul>, <ol>, and <dl>— لري margin-topلرې او a margin-bottom: 1rem. ځړول شوي لیستونه شتون نلري margin-bottom. موږ padding-leftآن <ul>او <ol>عناصر هم له سره تنظیم کړي دي.

ټول لیستونه د دوی پورتنۍ حاشیه لرې کړي
او د دوی ټیټ مارجن نورمال شوی
ځړول شوي لیستونه لاندې حاشیه نلري
- په دې توګه، دوی یو حتی ظاهري بڼه لري
- په ځانګړي توګه کله چې د نورو لیست توکو لخوا تعقیب شي
کیڼ پیډینګ هم بیا تنظیم شوی

دلته یو ترتیب شوی لیست دی
د یو څو لیست توکو سره
دا په ټولیزه توګه ورته نظر لري
لکه څنګه چې مخکینی غیر منظم لیست

د ساده سټایل، روښانه درجه بندي، او غوره واټن لپاره، د توضیحاتو لیستونه تازه شوي marginدي. <dd>s بیا تنظیم margin-leftکړئ 0او اضافه کړئ margin-bottom: .5rem. <dt>د . _

د توضیحاتو لیست: د توضیحاتو لیست د شرایطو تعریف کولو لپاره مناسب دی.
اصطلاح: د اصطلاح لپاره تعریف.; د ورته اصطلاح لپاره دوهم تعریف.
بله اصطلاح: د دې بل اصطلاح لپاره تعریف.

انلاین کوډ

د کوډ انلاین ټوټې په سره وتړئ <code>. ډاډ ترلاسه کړئ چې د HTML زاویه قوسونو څخه تیښته وکړئ.

د مثال په توګه، <section>باید د انلاین په توګه وپلټل شي.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

د کوډ بلاکونه

<pre>د کوډ ډیری لینونو لپاره s وکاروئ . یو ځل بیا، ډاډ ترلاسه کړئ چې د سمې رینډینګ لپاره په کوډ کې د هر زاویه بریکٹ څخه تیښته وکړئ. <pre>عنصر بیا تنظیم شوی ترڅو خپل لیرې کړي margin-topاو د remدې لپاره واحدونه وکاروي margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

متغیرات

د متغیرونو د ښودلو لپاره د <var>ټګ څخه کار واخلئ.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

د کارن داخلول

د ننوتلو څرګندولو لپاره وکاروئ <kbd>چې معمولا د کیبورډ له لارې داخلیږي.

د لارښودونو بدلولو لپاره ، cdد لارښود نوم تعقیب کړئ.
د تنظیماتو سمولو لپاره، فشار ورکړئ ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

نمونه محصول

د برنامه څخه د نمونې محصول ښودلو لپاره <samp>ټګ وکاروئ.

دا متن د دې لپاره دی چې د کمپیوټر برنامې څخه د نمونې محصول په توګه چلند وشي.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

میزونه

جدولونه د سټایل سره یو څه تنظیم شوي <caption>، د پولو سقوط کول ، او په text-alignټوله کې ثابت ساتل تضمین شوي. د سرحدونو، پیډینګ، او نور لپاره اضافي بدلونونه د .tableټولګي سره راځي .

دا یو مثال جدول دی، او دا د منځپانګې تشریح کولو لپاره د هغې سرلیک دی.
د میز سرلیک	د میز سرلیک	د میز سرلیک	د میز سرلیک
د میز حجره	د میز حجره	د میز حجره	د میز حجره
د میز حجره	د میز حجره	د میز حجره	د میز حجره
د میز حجره	د میز حجره	د میز حجره	د میز حجره

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

فورمې

د ساده بیس سټایلونو لپاره مختلف فارم عناصر ریبوټ شوي. دلته ځینې خورا د پام وړ بدلونونه دي:

<fieldset>s هیڅ پوله، پیډینګ یا حاشیه نلري نو دوی کولی شي په اسانۍ سره د انفرادي آخذونو یا د ننوتونو ګروپونو لپاره د ریپر په توګه وکارول شي.
<legend>s، د فیلډ سیټونو په څیر، هم د ډولونو د سرلیک په توګه د ښودلو لپاره بیا تنظیم شوي.
<label>s د پلي display: inline-blockکیدو اجازه ورکولو marginلپاره ټاکل شوي.
<input>s، <select>s، <textarea>s، او <button>s اکثرا د نورمالیز لخوا په نښه شوي، مګر ریبوټ د دوی marginاو سیټ line-height: inheritهم لرې کوي.
<textarea>s د دې لپاره تعدیل شوي چې یوازې په عمودي ډول د اندازې وړ کیدو وړ وي ځکه چې افقی اندازه کول اکثرا د پاڼې ترتیب "ماتیږي".
<button>s او <input>تڼۍ عناصر لري cursor: pointerکله چې :not(:disabled).

دا بدلونونه، او نور، لاندې ښودل شوي.

د افسانې مثال

د مثال داخلول

د بریښنالیک مثال

د تلیفون بیلګه

د مثال url

د بېلګې شمېره

د مثال لټون

د بېلګې لړۍ

د فایل داخلولو مثال

بېلګه انتخاب

دا چک بکس چیک کړئ

یو انتخاب دا او دا دی دوهم اختیار یو بل څه دی چې د دې فینسي فارم کنټرولونو ریپ کولو ښودلو لپاره خورا اوږد دی. دریم اختیار غیر فعال دی

د متن د بېلګې

د مثال تاریخ

د مثال وخت

د پټنوم بېلګه

مثال د نیټې وخت - محلي

بیلګه اونۍ

بېلګه میاشت

رنګ بېلګه

د محصول بېلګه 100

د نیټې او رنګ داخلولو ملاتړ

په یاد ولرئ چې د نیټې آخذې په بشپړ ډول د ټولو براوزرونو لخوا نه ملاتړ کیږي ، یعنی سفاري.

په تڼیو کې اشارې

ریبوټ کې role="button"د ډیفالټ کرسر بدلولو لپاره وده شامله ده pointer. دا خاصیت عناصرو ته اضافه کړئ ترڅو مرسته وکړي چې عناصر متقابل وي. دا رول د عناصرو لپاره اړین ندی <button>، کوم چې خپل cursorبدلون ترلاسه کوي.

د غیر تڼۍ عنصر تڼۍ

html

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

متفرقه عناصر

پته

عنصر تازه شوی ترڅو د <address>براوزر ډیفالټ font-styleله . اوس هم په میراث شوی، او اضافه شوی. s د نږدې پلار (یا د کار ټول بدن) لپاره د اړیکو معلوماتو وړاندې کولو لپاره دي. د .italicnormalline-heightmargin-bottom: 1rem<address><br>

ټویټر، Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

بشپړ نوم
[email protected]

بلاککوټ

په بلاک کوټونو کې ډیفالټ marginدی ، نو موږ دا د نورو عناصرو سره د یو څه ډیر مطابقت لپاره 1em 40pxبیا تنظیم کوو.0 0 1rem

یو مشهور اقتباس، د بلاک کوټ عنصر کې شامل دی.

یو څوک چې د سرچینې په سرلیک کې مشهور دی

انلاین عناصر

<abbr>عنصر بنسټیز سټایل ترلاسه کوي ترڅو دا د پراګراف متن په مینځ کې ودریږي .

د HTML لنډیز عنصر.

لنډیز

cursorپه لنډیز کې ډیفالټ دی text، نو موږ دا د دې لپاره بیا تنظیم کړو ترڅو دا وښیو چې pointerعنصر د هغې په کلیک کولو سره متقابل عمل کیدی شي.

ځینې تفصیلات

د جزیاتو په اړه نور معلومات.

حتی نور جزئیات

دلته د جزیاتو په اړه نور معلومات هم شتون لري.

HTML5 `[hidden]`خاصیت

HTML5 په نوم یو نوی نړیوال خصوصیت[hidden]display: none اضافه کوي، کوم چې د ډیفالټ په توګه سټایل شوی . د PureCSS څخه د نظر پور اخیستل ، موږ په دې ډیفالټ کې د دې په تصادفي توګه له پامه غورځیدو څخه [hidden] { display: none !important; }مخنیوي کې مرسته کولو سره وده کوو display.

<input type="text" hidden>

jQuery مطابقت نه لري

[hidden]$(...).hide()د jQuery او $(...).show()میتودونو سره مطابقت نلري . له همدې امله، موږ اوس مهال په ځانګړې توګه د عناصرو [hidden]اداره کولو لپاره د نورو تخنیکونو ملاتړ نه کوو.display

یوازې د یو عنصر لید لید بدلولو لپاره ، پدې معنی چې displayدا نه بدل شوی او عنصر لاهم کولی شي د سند جریان اغیزه وکړي ، پرځای یې .invisibleټولګي وکاروئ.

ریبوټ

روش

د سی ایس ایس متغیرونه

د پاڼې ډیفالټ

د اصلي فونټ سټیک

سرلیکونه او پراګرافونه

افقی قواعد

لیستونه

انلاین کوډ

د کوډ بلاکونه

متغیرات

د کارن داخلول

نمونه محصول

میزونه

فورمې

د نیټې او رنګ داخلولو ملاتړ

په تڼیو کې اشارې

متفرقه عناصر

پته

بلاککوټ

انلاین عناصر

لنډیز

HTML5 [hidden]خاصیت

jQuery مطابقت نه لري

HTML5 `[hidden]`خاصیت