Dib u bilow
Dib-u-bilow, ururinta isbeddellada CSS-ga gaarka ah ee hal fayl, kickstart Bootstrap si ay u bixiso aasaas xarrago leh, joogto ah, oo fudud oo lagu dhisayo.
Habka
Dib-u-bilaabku wuxuu ku dhisan yahay Caadiye, isaga oo siinaya walxo badan oo HTML ah oo leh habab la ra'yigooda yahay iyadoo la adeegsanayo xulashada walxaha kaliya. Habayn dheeri ah ayaa lagu sameeyaa kaliya fasalada. Tusaale ahaan, waxaanu dib -u-bilawnay <table>
qaababka qaar si loo helo sal fudud ka dibna waxaan bixinaa .table
, .table-bordered
, iyo in ka badan.
Waa kuwan hab-raacyadayada iyo sababaha aan u dooranayno waxa la burinayo Reboot:
- Cusbooneysii qaar ka mid ah qiimaha browserka si aad u isticmaasho
rem
s halkii aad ka isticmaali lahaydem
kala dheereynta qaybaha la miisaami karo. - Iska ilaali
margin-top
. Margins toosan way dumi karaan, iyagoo keenaya natiijooyin lama filaan ah. Waxa ka sii muhiimsan in kastoo, hal jihada ahmargin
waa qaab maskaxeed oo fudud. - Si loo fududeeyo cabbirka cabbirrada aaladda, walxaha xannibaya waa inay isticmaalaan
rem
s eemargin
s. - Hayso caddaynta
font
guryaha la xidhiidha ugu yaraan, isticmaalinherit
mar kasta oo ay suurtagal tahay.
doorsoomayaasha CSS
Lagu daray v5.1.1
V5.1.1, waxaanu ku jaangooyay @import
s loo baahan yahay dhamaan xidhmooyinkeena CSS (oo ay ku jiraan bootstrap.css
, bootstrap-reboot.css
, iyo bootstrap-grid.css
in lagu daro _root.scss
. Tani waxay ku daraysaa :root
doorsoomayaasha CSS heerka dhammaan xidhmooyinka, iyada oo aan loo eegin inta ka mid ah ee loo isticmaalo xidhmadaas. Ugu danbayn Bootstrap 5 wuu sii socon doonaa arag doorsoomayaal CSS badan oo lagu daray waqti ka dib.
Bogga wax-ka-qabashada
Qaybaha <html>
iyo <body>
walxaha waa la cusboonaysiiyay si ay u bixiyaan khaladaadyo bogag oo dhan ah. Si gaar ah:
- Si
box-sizing
caalami ah ayaa loo dejiyay shay kasta - oo ay ku jiraan*::before
iyo*::after
, siborder-box
. Tani waxay hubinaysaa in ballaca la sheegay ee curiyaha aan waligeed la dhaafin suufka ama soohdinta awgeed.- Ma jiro wax sal ah oo
font-size
lagu caddeeyey<html>
, laakiin16px
waa la qaatay ( browser-ka caadiga ah).font-size: 1rem
waxaa lagu dabaqaa qaab<body>
-qaabaynta fudud ee jawaab-celinta iyadoo loo marayo weydiimaha warbaahinta iyadoo la ixtiraamayo dookhyada isticmaalaha lana hubinayo hab la heli karo. Badbaadiyaha browserka waxaa lagu burin karaa iyadoo la bedelayo$font-size-root
doorsoomayaasha.
- Ma jiro wax sal ah oo
- Waxa
<body>
kale oo ay dejisaa mid caalami ahfont-family
,font-weight
,line-height
, iyocolor
. Tan waxa hadhow dhaxla xubno qaabaysan si ay uga hortagaan iswaafajinta farta - Badbaadada awgeed, Rabbigu
<body>
waxa uu ku dhawaaqaybackground-color
, oo uu ka gaabsaday#fff
.
Xirmada farta hooyo
Bootstrap waxa ay isticmaashaa “Stack font-ka” ama “nidaamka font stack” si loogu sameeyo qoraalka ugu wanaagsan ee qalab kasta iyo OS kasta. Hababkan nidaamka waxa si gaar ah loo nashqadeeyey iyadoo maskaxda lagu hayo aaladaha maanta, iyadoo la wanaajiyey muujinta shaashadaha, taageerada font ee doorsooma, iyo in ka badan. Ka akhriso wax badan oo ku saabsan xarfaha xarfaha waddaniga ah maqaalkan Majaladda Smashing .
$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;
Ogsoonow maadaama xidhmada fartu ay ku jirto xarfaha Emoji, calaamado badan oo caadi ah/jilayaasha unicode-ka ayaa loo samayn doonaa sawiro midabyo badan leh. Muuqaalkoodu wuu kala duwanaan doonaa, iyadoo ku xiran qaabka loo isticmaalo browserka/platform's font-ka asalka ah ee Emoji, mana saameyn doono qaab kasta oo CSS color
ah.
Tan font-family
waxa lagu dabaqaa <body>
oo si toos ah loo dhaxlo caalamka oo dhan Bootstrap. Si aad u beddesho midda caalamiga ah font-family
, cusboonaysii $font-family-base
oo dib u ururi Bootstrap.
doorsoomayaasha CSS
Sida Bootstrap 5 uu sii wado qaan-gaarnimada, qaabab badan oo badan ayaa lagu dhisi doonaa doorsoomayaal CSS si ay u bixiso wax ka beddelka waqtiga-dhabta ah iyada oo aan loo baahnayn in mar walba dib loo soo celiyo Sass. Habkayagu waa inaan qaadano ishayaga doorsoomayaasha Sass oo aan u beddelno doorsoomayaasha CSS. Habkaas, xitaa haddii aadan isticmaalin doorsoomayaasha CSS, waxaad weli haysataa dhammaan awoodda Sass. Tani weli way socotaa waxayna qaadan doontaa wakhti in si buuxda loo hirgeliyo.
Tusaale ahaan, u fiirso :root
doorsoomayaashan CSS ee <body>
qaababka caadiga ah:
@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};
Dhaqan ahaan, doorsoomayaashaas ayaa markaa lagu dabaqayaa Reboot sida:
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
}
Kaas oo kuu ogolaanaya inaad samayso wax-ka-beddelid-waqtiga dhabta ah si kasta oo aad rabto:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Ciwaanka iyo cutubyada
Dhammaan qaybaha ciwaanka-tusaale, <h1>
-oo <p>
dib ayaa loo dajiyay si margin-top
meesha looga saaro. Ciwaanka ayaa margin-bottom: .5rem
lagu daray iyo cutubyo margin-bottom: 1rem
si fudud loo kala dheereeyo.
Ciwaanka | Tusaale |
---|---|
<h1></h1> |
h1. Bootstrap cinwaanka |
<h2></h2> |
h2. Bootstrap cinwaanka |
<h3></h3> |
h3. Bootstrap cinwaanka |
<h4></h4> |
h4. Bootstrap cinwaanka |
<h5></h5> |
h5. Bootstrap cinwaanka |
<h6></h6> |
h6. Bootstrap cinwaanka |
Liisaska
Liisaska oo dhan — <ul>
, <ol>
, iyo <dl>
— waa margin-top
laga saaray iyo a margin-bottom: 1rem
. Liisaska buulka leh ma margin-bottom
laha Waxaan sidoo kale dib u dajinay shirarkii padding-left
iyo <ul>
canaasiirta <ol>
.
- Liisaska oo dhan waa laga saaray xadkooda sare
- Waxayna markoodii hoose caadi noqdeen
- Liisaska la dajiyay ma laha meel hoose
- Sidan waxay leeyihiin muuqaal siman
- Gaar ahaan marka ay raacaan waxyaabo badan oo liis ah
- suufka bidix sidoo kale dib ayaa loo dajiyay
- Halkan waxaa ah liis la dalbaday
- Iyada oo leh dhowr shay oo liis ah
- Waxay leedahay muuqaal guud oo isku mid ah
- Sida liiska hore ee aan la dalban
Si loo habeeyo fudud, kala sareyn cad, iyo kala dheerayn wanaagsan, liisaska sharaxaada waa la cusboonaysiiyay margin
s. <dd>
dib margin-left
u deji 0
oo ku dar margin-bottom: .5rem
. <dt>
s way dhiirran yihiin .
- Liiska sharraxaadda
- Liiska sharraxaadda ayaa ku habboon qeexida ereyada.
- Muddada
- Qeexida ereyga.
- Qeexitaanka labaad ee isla ereyga.
- Erey kale
- Qeexida ereygan kale.
Koodhka khadka
Ku duub godadka koodka gudaha <code>
. Hubi inaad ka baxsato geesaha xagasha HTML.
<section>
waa in lagu duuduubaa sida khadadka.
For example, <code><section></code> should be wrapped as inline.
Koodhka xannibaadda
U isticmaal <pre>
s khadadka koodka badan. Marlabaad, iska hubi inaad ka baxsato gees kasta oo xagal ku jira koodka si sax ah loo bixiyo. Cunsurka <pre>
dib ayaa loo dajiyay si meesha looga saaro margin-top
oo loo isticmaalo rem
cutubyada 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>
Kala duwanaansho
Si aad u muujiso doorsoomayaasha isticmaal <var>
tag.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Gelitaanka isticmaalaha
Isticmaal <kbd>
si aad u muujiso gelinta sida caadiga ah lagu galo kiiboodhka.
Si aad wax uga beddesho goobaha, taabo 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>
Tusaalaha wax soo saarka
Si aad u muujiso muunadda ka soo baxda barnaamijka isticmaal <samp>
sumadda.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Miisaska
Miisaska wax yar ayaa lagu hagaajiyay qaabka <caption>
s, xudduudaha burburay, oo hubiya inay joogto yihiin text-align
inta oo dhan. Isbeddellada dheeraadka ah ee xuduudaha, suufka, iyo in ka badan ayaa la socda .table
fasalka .
Cinwaanka shaxda | Cinwaanka shaxda | Cinwaanka shaxda | Cinwaanka shaxda |
---|---|---|---|
Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska |
Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska |
Unugga miiska | Unugga miiska | Unugga miiska | Unugga miiska |
Foomamka
Qaababka kala duwan ayaa dib loo bilaabay si ay u qaabeeyaan qaababka aasaasiga ah ee fudud. Waa kuwan qaar ka mid ah isbeddellada ugu caansan:
<fieldset>
s ma laha xuduud, suuf, ama margin si ay si sahal ah loogu isticmaalo duubo ahaan agabka shaqsiga ah ama kooxaha agabka.<legend>
s, sida goobaha garoommada, ayaa sidoo kale dib loo habeeyey si loogu muujiyo cinwaan nooc ah.<label>
s ayaa lagu wadaa indisplay: inline-block
la ogolaadomargin
in la codsado.<input>
s,<select>
s,<textarea>
s, iyo<button>
s inta badan waxaa wax ka qabta Normalize, laakiin Reboot ayaa ka saara iyagamargin
iyo setsline-height: inherit
, sidoo kale.<textarea>
s waxa wax laga beddelay si toos ah oo keliya loo cabbiri karo sida cabbirka toosan ee inta badan “jabiyo” qaabaynta bogga.<button>
s iyo<input>
canaasiirta badhanka waxay leeyihiincursor: pointer
marka:not(:disabled)
.
Isbeddeladan, iyo in ka badan, ayaa lagu muujiyay hoos.
Taageerada gelinta taariikhda iyo midabka
Maskaxda ku hay in taariikhda la gelinayo aysan si buuxda u taageerin dhammaan daalacayaasha, kuwaas oo ah Safari.
Tilmaamaha badhamada
Dib-u-bilaabista waxaa ku jira kobcinta si role="button"
loogu beddelo cursor-ka caadiga ah pointer
. Ku dar sifadan curiyeyaasha si aad u muujiso in curiyayaasha ay is dhexgal yihiin. Doorkan lagama maarmaan ma aha <button>
canaasiirta, kuwaas oo hela cursor
isbeddelkooda.
<span role="button" tabindex="0">Non-button element button</span>
Curiyayaasha kala duwan
Cinwaanka
Cunsurka <address>
waa la cusboonaysiiyay si dib loogu habeeyo browser-ka caadiga ah laga font-style
bilaabo . sidoo kale hadda waa la dhaxlay, oo lagu daray. s waxaa loogu talagalay soo bandhigida macluumaadka xiriirka ee awoowga ugu dhow (ama dhammaan shaqada jirka). Ku xafid qaabaynta adiga oo ku dhamaynaya xariiqyada .italic
normal
line-height
margin-bottom: 1rem
<address>
<br>
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Magaca buuxa
[email protected]
Blockquote
Sida caadiga ah margin
ee blockquotes waa 1em 40px
, sidaa darteed waxaan dib u dejineynaa taas si 0 0 1rem
wax badan oo la jaan qaada walxaha kale.
Xigasho si fiican loo yaqaan, oo ku jirta curiyaha blockquote.
Qof caan ku ah Ciwaanka Isha
Cunsuriyada khadka
Cunsurka <abbr>
ayaa hela qaabaynta aasaasiga ah si uu uga dhex muuqdo qoraalka cutubka.
Soo koobid
Nuxurka cursor
guud ee kooban waa text
, markaa dib ayaanu u dejinaynaa si aan pointer
u gudbino in curiyaha lala falgali karo adigoo gujinaya.
Faahfaahinta qaar
Macluumaad dheeraad ah oo ku saabsan faahfaahinta.
Xitaa faahfaahin dheeraad ah
Halkan waxaa ah xitaa faahfaahin dheeraad ah oo ku saabsan faahfaahinta.
HTML5 [hidden]
sifada
HTML5 waxay ku darsataa sifo cusub oo caalami ah oo magaceedu yahay[hidden]
, kaas oo loo qaabeeyey si display: none
caadi ah. Ka amaahashada fikradda PureCSS , waxaanu ku hagaajinaynaa hab-dhaqankan annagoo samaynayna [hidden] { display: none !important; }
si aanu uga hortagno display
inay si lama filaan ah uga gudubto.
<input type="text" hidden>
iswaafajin la'aanta jQuery
[hidden]
kuma waafaqsana jQuery's $(...).hide()
iyo $(...).show()
hababka. Sidaa darteed, hadda si gaar ah uma taageerno [hidden]
farsamooyinka kale ee lagu maareeyo display
curiyeyaasha.
Si aad u bedesho muuqaalka curiyaha, taasoo la macno ah in display
aan wax laga beddelin oo curiyuhu uu wali saamayn ku yeelan karo socodka dukumeentiga, isticmaal fasalka .invisible
.