Source

ریبوټ

ریبوټ، په یوه فایل کې د عنصر ځانګړي 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

دا په ټوله نړۍ کې په بوټسټریپ کې 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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
نولا ولتپت علیکم velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
نولا ولتپت علیکم velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

د توضیحاتو لیست: د توضیحاتو لیست د شرایطو تعریف کولو لپاره مناسب دی.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

<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 د دې لپاره تعدیل شوي چې یوازې په عمودي ډول د اندازې وړ کیدو وړ وي ځکه چې افقی اندازه کول اکثرا د پاڼې ترتیب "ماتیږي".

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

متفرقه عناصر

پته

عنصر تازه شوی ترڅو د <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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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

انلاین عناصر

<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ټولګي وکاروئ.