in English

ریبوټ

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

روش

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

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

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

د پاڼې ډیفالټ

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

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

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

ډیفالټ ویب فونټونه (Helvetica Neue, Helvetica, and Arial) په بوټسټریپ 4 کې راټیټ شوي او په هر وسیله او OS کې د مطلوب متن رینډرینګ لپاره د "اصلي فونټ سټیک" سره ځای په ځای شوي. د اصلي فونټ سټیکونو په اړه نور ولولئ د دې حیرانونکې مجلې مقاله کې .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // 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. د بوټسټراپ سرلیک

لیستونه

ټول لستونه — <ul>, <ol>, and <dl>— لري margin-topلرې او a margin-bottom: 1rem. ځړول شوي لیستونه شتون نلري margin-bottom.

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

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

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

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

مخکینۍ بڼه شوی متن

<pre>عنصر بیا تنظیم شوی ترڅو خپل لیرې کړي margin-topاو د remدې لپاره واحدونه وکاروي margin-bottom.

.example-element {
  حاشیه لاندې: 1rem؛
}

میزونه

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

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

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

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

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

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

Nulla attr vitae elit libero, a pharetra augue .

لنډیز

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

ځینې تفصیلات

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

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

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

HTML5 `[hidden]`خاصیت

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

<input type="text" hidden>

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

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

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