ریبوټ
ریبوټ، په یوه فایل کې د عنصر ځانګړي CSS بدلونونو ټولګه، د جوړولو لپاره په زړه پورې، ثابت، او ساده بیس لاین چمتو کولو لپاره د بوټسټراپ کیک سټارټ.
روش
ریبوټ په نورمال کولو باندې رامینځته کیږي ، ډیری HTML عناصر چمتو کوي یو څه نظر لرونکي سټایلونه یوازې د عنصر انتخاب کونکو په کارولو سره. اضافي سټایل یوازې د ټولګیو سره ترسره کیږي. د مثال په توګه، موږ <table>
د ساده بیس لاین لپاره ځینې سټایلونه ریبوټ کوو او وروسته چمتو .table
کوو .table-bordered
، او نور.
دلته زموږ لارښوونې او دلیلونه دي چې په ریبوټ کې د څه شی غوره کولو لپاره غوره کړئ:
- د توزیع وړ برخې فاصلې لپاره
rem
د s پرځای د s کارولو لپاره د براوزر ځینې ډیفالټ ارزښتونه تازه کړئ.em
- ډډه وکړئ
margin-top
. عمودی حاشیه کولی شي سقوط وکړي، غیر متوقع پایلې ترلاسه کوي. تر ټولو مهم که څه هم، د یو واحد لوريmargin
ساده ذهني ماډل دی. - د وسیلې اندازې په اوږدو کې د اسانه اندازه کولو لپاره ، د بلاک عناصر باید د
rem
s لپارهmargin
s وکاروي. - د اړوندو ملکیتونو اعالمیه
font
لږترلږه وساتئ،inherit
هرکله چې امکان ولري کارول.
د سی ایس ایس متغیرونه
په v5.1.1 کې اضافه شوی
د v5.1.1 سره، موږ په خپلو @import
ټولو CSS بنډلونو کې خپل اړین s معیاري کړي (په شمول bootstrap.css
، bootstrap-reboot.css
, او bootstrap-grid.css
شاملول _root.scss
. دا په ټولو بنډلونو کې د کچې CSS متغیرونه اضافه کوي :root
، پرته له دې چې په دې بنډل کې څومره کارول شوي وي. بالاخره بوټسټریپ 5 به دوام ومومي. د وخت په تیریدو سره اضافه شوي نور CSS متغیرونه وګورئ.
د پاڼې ډیفالټ
<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,
// 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
د سی ایس ایس متغیرونه
لکه څنګه چې بوټسټریپ 5 بالغ کیدو ته دوام ورکوي ، ډیر او ډیر سټایلونه به د CSS متغیرونو سره د یوې وسیلې په توګه رامینځته شي ترڅو د تل لپاره د ساس بیا تنظیم کولو اړتیا پرته د ریښتیني وخت نور تخصیص چمتو کړي. زموږ تګلاره دا ده چې زموږ سرچینه ساس متغیرونه واخلو او د CSS متغیرونو ته یې واړوو. په دې توګه، حتی که تاسو د CSS متغیرات نه کاروئ، تاسو لاهم د Sass ټول ځواک لرئ. دا لاهم د پرمختګ په حال کې ده او په بشپړ ډول پلي کولو لپاره به وخت ونیسي.
د مثال په توګه، د عام سټایلونو :root
لپاره دا CSS متغیرونه په پام کې ونیسئ:<body>
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
په عمل کې، دا متغیرات بیا په ریبوټ کې پلي کیږي لکه:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-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>
سرلیکونه او پراګرافونه
د سرلیک ټول عناصر — د مثال په توګه <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
. موږ padding-left
آن <ul>
او <ol>
عناصر هم له سره تنظیم کړي دي.
- ټول لیستونه د دوی پورتنۍ حاشیه لرې کړي
- او د دوی ټیټ مارجن نورمال شوی
- ځړول شوي لیستونه لاندې حاشیه نلري
- په دې توګه، دوی یو حتی ظاهري بڼه لري
- په ځانګړي توګه کله چې د نورو لیست توکو لخوا تعقیب شي
- کیڼ پیډینګ هم بیا تنظیم شوی
- دلته یو ترتیب شوی لیست دی
- د یو څو لیست توکو سره
- دا په ټولیزه توګه ورته نظر لري
- لکه څنګه چې پخوانۍ بې ترتیبه لیست
د ساده سټایل کولو لپاره، روښانه درجه بندي، او غوره فاصله، د توضیحاتو لیستونه تازه شوي margin
دي. <dd>
s بیا تنظیم margin-left
کړئ 0
او اضافه کړئ margin-bottom: .5rem
. <dt>
د . _
- د توضیحاتو لیست
- د توضیحاتو لیست د شرایطو تعریف کولو لپاره مناسب دی.
- اصطلاح
- د اصطلاح لپاره تعریف.
- د ورته اصطلاح لپاره دوهم تعریف.
- بله اصطلاح
- د دې بل اصطلاح لپاره تعریف.
انلاین کوډ
د کوډ انلاین ټوټې په سره وتړئ <code>
. ډاډ ترلاسه کړئ چې د HTML زاویه بریکٹ څخه تیښته وکړئ.
<section>
باید د انلاین په توګه وپلټل شي.
For example, <code><section></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>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
متغیرات
د متغیرونو د ښودلو لپاره د <var>
ټګ څخه کار واخلئ.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
د کارن داخلول
د ننوتلو څرګندولو لپاره وکاروئ <kbd>
چې معمولا د کیبورډ له لارې داخلیږي.
د تنظیماتو سمولو لپاره، فشار ورکړئ ctrl + ,
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>
ټګ وکاروئ.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
میزونه
جدولونه د سټایل سره یو څه تنظیم شوي <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 د نږدې پلار (یا د کار ټول بدن) لپاره د اړیکو معلوماتو وړاندې کولو لپاره دي. د .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 بشپړ نوم
[email protected]
بلاککوټ
په بلاک کوټونو کې ډیفالټ margin
دی ، نو موږ دا د نورو عناصرو سره د یو څه ډیر مطابقت لپاره 1em 40px
بیا تنظیم کوو.0 0 1rem
یو مشهور اقتباس، د بلاک کوټ عنصر کې شامل دی.
یو څوک چې د سرچینې په سرلیک کې مشهور دی
انلاین عناصر
<abbr>
عنصر بنسټیز سټایل ترلاسه کوي ترڅو دا د پراګراف متن په مینځ کې ودریږي .
لنډیز
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
ټولګي وکاروئ.