Ddamu okutandika
Reboot, okukuŋŋaanyizibwa kw'enkyukakyuka za CSS ezikwata ku elementi mu fayiro emu, kickstart Bootstrap okuwa omusingi omulungi, ogukwatagana, era omungu okuzimbako.
Okutuukirira
Reboot ezimba ku Normalize, okuwa ebintu bingi ebya HTML n'emisono egy'endowooza ezimu nga ekozesa ebisunsula ebintu byokka. Okukola sitayiro okw’enjawulo kukolebwa ne kiraasi zokka. Okugeza, tuddamu okutandika <table>
emisono egimu okusobola okufuna omusingi omunyangu ate oluvannyuma ne tuwa .table
, .table-bordered
, n’ebirala.
Wano waliwo ebiragiro byaffe n’ensonga lwaki olonze ky’olina okusazaamu mu Reboot:
- Update ezimu ku browser default values okukozesa
rem
s mu kifo kyaem
s for scalable component spacing. - Weewale
margin-top
. Vertical margins zisobola okugwa, ne zivaamu ebivaamu ebitali bisuubirwa. Kyokka ekisinga obukulu, obulagirizi bumu obwamargin
is a simpler mental model. - Okusobola okwanguyirwa okugerageranya mu sayizi z’ebyuma, ebitundu bya bulooka birina okukozesa
rem
s kumargin
s. - Kuuma ebirangiriro
font
by'ebintu ebikwatagana - nga bitono, nga okozesainherit
buli lwe kiba kisoboka.
Enkyukakyuka za CSS
Yayongerwako mu v5.1.1
Nga tulina v5.1.1, twassa omutindo ku @import
s zaffe ezeetaagisa mu bibinja byaffe byonna ebya CSS (nga mw’otwalidde bootstrap.css
, bootstrap-reboot.css
, bootstrap-grid.css
n’okussaamu _root.scss
. Kino kyongera :root
enkyukakyuka za CSS ez’omutendera ku bibinja byonna, awatali kulowooza ku mmeka ku zo ezikozesebwa mu kibinja ekyo. Ultimately Bootstrap 5 ejja kusigala nga laba enkyukakyuka za CSS endala ezigattibwako okumala ekiseera.
Olupapula lusookerwako
Ebintu <html>
ne <body>
bitereezebwa okusobola okuwa ebisookerwako ebirungi ku lupapula lwonna. Okusingawo:
- The
box-sizing
eteekeddwa mu nsi yonna ku buli elementi —nga mw’otwalidde*::before
ne*::after
, okutuuka kuborder-box
. Kino kikakasa nti obugazi bwa elementi obulangirirwa tebusussa olw’okupadding oba ensalosalo.- Tewali base
font-size
elangirirwa ku<html>
, naye16px
eteeberezebwa (entandikwa ya browser).font-size: 1rem
ekozesebwa ku the<body>
for easy responsive type-scaling via media queries nga essa ekitiibwa mu by’abakozesa bye baagala n’okukakasa enkola etuukirirwa. Enkola eno eya bbulawuzi esobola okukyusibwa nga okyusa$font-size-root
enkyukakyuka.
- Tewali base
- The
<body>
era eteekawo eky'ensi yonnafont-family
,font-weight
,line-height
, necolor
. Kino kisikira oluvannyuma ebimu ku bikozesebwa mu ffoomu okuziyiza obutakwatagana mu fonti. - Ku lw'obukuumi, the
<body>
has a declaredbackground-color
, okulemererwa okutuuka ku#fff
.
Omutambi gw'empandiika enzaaliranwa
Bootstrap ekozesa “native font stack” oba “system font stack” okusobola okulaga ebiwandiiko obulungi ku buli kyuma ne OS. Empandiika zino ez’enkola zikoleddwa mu ngeri ey’enjawulo nga zitunuulidde ebyuma eby’ennaku zino, nga zirongooseddwa mu kulaga ku ssirini, okuwagira efonti ezikyukakyuka, n’ebirala. Soma ebisingawo ku nsengeka z'empandiika enzaaliranwa mu kiwandiiko kino ekya Smashing Magazine .
$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;
Weetegereze nti olw’okuba font stack erimu emoji fonts, ennukuta nnyingi eza bulijjo ez’akabonero/dingbat unicode zijja kulagibwa nga pictographs eza langi nnyingi. Endabika yaabwe ejja kwawukana, okusinziira ku sitayiro ekozesebwa mu fonti ya emoji enzaaliranwa eya browser/platform, era tezijja kukosebwa color
sitayiro yonna eya CSS.
Kino font-family
kikozesebwa ku <body>
era automatically okusikira mu nsi yonna mu Bootstrap yonna. Okukyusa global font-family
, zza obuggya $font-family-base
era oddemu okukuŋŋaanya Bootstrap.
Enkyukakyuka za CSS
Nga Bootstrap 5 yeeyongera okukula, sitayiro ezisinga obungi zijja kuzimbibwa n’enkyukakyuka za CSS ng’engeri y’okuwa okulongoosa okusingawo mu kiseera ekituufu awatali kwetaaga kuddamu kukungaanya Sass bulijjo. Enkola yaffe kwe kutwala enkyukakyuka zaffe eza Sass ez’ensibuko ne tuzikyusa mu nkyukakyuka za CSS. Mu ngeri eyo, nebwoba tokozesa CSS variables, okyalina amaanyi gonna aga Sass. Kino kikyali mu maaso era kijja kutwala obudde okussa mu nkola mu bujjuvu.
Okugeza, lowooza ku :root
nkyukakyuka zino eza CSS ku <body>
sitayiro eza bulijjo:
@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};
Mu nkola, enkyukakyuka ezo olwo zikozesebwa mu Reboot nga bwe zityo:
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
}
Ekikusobozesa okukola okulongoosa mu kiseera ekituufu mu ngeri yonna gy’oyagala:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Emitwe n’ennyiriri
Ebintu byonna eby’omutwe —okugeza, <h1>
—era biddamu <p>
okuteekebwawo okusobola margin-top
okuggyibwawo kwabyo. Emitwe giyongeddeko margin-bottom: .5rem
n’obutundu margin-bottom: 1rem
okusobola okwanguyirwa okuteeka ebanga.
Omutwe | Eky'okulabirako |
---|---|
<h1></h1> |
h1. Omutwe gwa bootstrap |
<h2></h2> |
h2. Omutwe gwa bootstrap |
<h3></h3> |
h3. Omutwe gwa bootstrap |
<h4></h4> |
h4. Omutwe gwa bootstrap |
<h5></h5> |
h5. Omutwe gwa bootstrap |
<h6></h6> |
h6. Omutwe gwa bootstrap |
Enkalala
Enkalala zonna— <ul>
, <ol>
, ne <dl>
—zirina margin-top
eziggyiddwawo era a margin-bottom: 1rem
. Enkalala eziteekeddwa mu kiyumba tezirina margin-bottom
. Tuzzeemu okuteekawo ne elements za padding-left
on ne.<ul>
<ol>
- Enkalala zonna zirina omukono gwazo ogw’okungulu oguggiddwawo
- Era margin yaabwe eya wansi yafuuka ya bulijjo
- Enkalala eziteekeddwa mu kisenge tezirina ludda lwa wansi
- Mu ngeri eno baba n’endabika esinga okubeera ey’enjawulo
- Naddala nga kigobererwa ebintu ebirala ebiri ku lukalala
- Padding ya kkono nayo ezzeemu okuteekebwawo
- Wano waliwo olukalala olulagirwa
- Nga mulimu ebintu ebitonotono ebiri ku lukalala
- Okutwalira awamu erina entunula y’emu
- Nga olukalala olusooka olutalagirwa
Okusobola okukola sitayiro ennyangu, ensengeka entegeerekeka obulungi, n’okuteeka ebanga eddene, enkalala z’ennyonnyola zirina margin
s ezitereezeddwa. <dd>
s okuddamu okuteeka margin-left
ku 0
n'okugattako margin-bottom: .5rem
. <dt>
s ziwandiikiddwako enzirugavu .
- Enkalala z’ennyonnyola
- Olukalala lw’ennyonnyola lutuukiridde okunnyonnyola ebigambo.
- Ekisanja
- Ennyonyola y’ekigambo.
- Ennyonyola eyokubiri ku kigambo kye kimu.
- Ekisanja ekirala
- Ennyonyola y’ekigambo kino ekirala.
Koodi mu layini
Zinga ebitundutundu bya koodi ebiri mu layini ne <code>
. Kakasa nti otolose mu bbulakisi z'enkoona za HTML.
<section>
erina okuzingibwa nga inline.
For example, <code><section></code> should be wrapped as inline.
Ebiziyiza bya koodi
Kozesa <pre>
s ku layini za koodi eziwera. Nate, kakasa nti otolokako enkoona zonna mu koodi okusobola okulaga obulungi. Element <pre>
eddamu okuteekebwawo okuggyawo yaayo margin-top
n'okukozesa rem
units zaayo 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>
Enkyukakyuka ezikyukakyuka
Okulaga enkyukakyuka kozesa <var>
tag.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Okuyingiza kw’omukozesa
Kozesa <kbd>
okulaga okuyingiza okutera okuyingizibwa nga oyita ku kibboodi.
Okukyusa ensengeka, nyweza 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>
Ekyokulabirako ekifulumizibwa
Okulaga sample output okuva mu program kozesa <samp>
tag.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Emmeeza
Emmeeza zitereezebwa katono ku sitayiro <caption>
s, okugwa ensalosalo, era okukakasa nti zikwatagana text-align
wonna. Enkyukakyuka endala ku nsalo, padding, n'ebirala bijja ne .table
class .
Omutwe gw’emmeeza | Omutwe gw’emmeeza | Omutwe gw’emmeeza | Omutwe gw’emmeeza |
---|---|---|---|
Akasengejja k’emmeeza | Akasengejja k’emmeeza | Akasengejja k’emmeeza | Akasengejja k’emmeeza |
Akasengejja k’emmeeza | Akasengejja k’emmeeza | Akasengejja k’emmeeza | Akasengejja k’emmeeza |
Akasengejja k’emmeeza | Akasengejja k’emmeeza | Akasengejja k’emmeeza | Akasengejja k’emmeeza |
Ffoomu
Ebintu eby'enjawulo ebya ffoomu bizzeemu okutandika okusobola okukola emisono egy'omusingi egyangu. Wano waliwo enkyukakyuka ezisinga okweyoleka:
<fieldset>
s tezirina nsalo, padding, oba margin kale zisobola bulungi okukozesebwa nga wrappers for individual inputs oba groups of inputs.<legend>
s, nga fieldsets, nazo zikyusiddwa okulagibwa nga omutwe gw'ebika.<label>
s ziteekebwa kudisplay: inline-block
okukkirizamargin
okukozesebwa.<input>
s,<select>
s,<textarea>
s, ne<button>
s zisinga kukolebwako Normalize, naye Reboot eggyawo zaabwemargin
ne ziteekawoline-height: inherit
, nazo.<textarea>
s zikyusibwa okubeera ezisobola okukyusibwa obunene mu vertikal yokka nga okukyusa obunene obw’okwebungulula kitera “okumenya” ensengeka y’olupapula.<button>
s ne<input>
button elements zirinacursor: pointer
ddi:not(:disabled)
.
Enkyukakyuka zino, n’ebirala, biragiddwa wansi.
Obuwagizi bw'okuyingiza olunaku & langi
Kuuma mu birowoozo nti ebiyingizibwa mu nnaku tebiwagirwa mu bujjuvu browser zonna, kwe kugamba Safari.
Ebiraga ku buttons
Reboot erimu ennongoosereza for role="button"
okukyusa cursor esookerwako okudda ku pointer
. Okwongerako ekintu kino ku elementi okuyamba okulaga elementi zikwatagana. Omulimu guno tegwetaagisa ku elementi, ezifuna enkyukakyuka <button>
yazo .cursor
<span role="button" tabindex="0">Non-button element button</span>
Ebintu eby’enjawulo
Okwoogera eri
Element <address>
etereezebwa okuddamu okuteekawo browser default font-style
okuva italic
ku normal
. line-height
nayo kati yasikira, era margin-bottom: 1rem
eyongerwako. <address>
s ziri za kwanjula ebikwata ku bantu abakwatagana ne jjajja asinga okumpi (oba omubiri gwonna ogw’omulimu). Kuuma ensengeka ng'omaliriza ennyiriri ne <br>
.
Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890. Enkola y’okukozesa eddagala lino Erinnya mu bujjuvu
[email protected]
Blockquote nga bwe kiri
Ekisookerwako margin
ku blockquotes kiri 1em 40px
, kale tuddamu okuteeka ekyo ku 0 0 1rem
ku kintu ekisinga okukwatagana n'ebintu ebirala.
Ekijuliziddwa ekimanyiddwa ennyo, ekiri mu elementi ya blockquote.
Omuntu omututumufu mu Source Title
Ebintu ebiri mu layini
Element <abbr>
efuna sitayiro enkulu okugifuula eyawukana mu biwandiiko by’akatundu.
Okubumbako
Ekisookerwako cursor
ku bufunze kiri text
, kale tuddamu okuteeka ekyo ku pointer
okutuusa nti elementi esobola okukwatagana nayo nga tuginyigako.
Ebimu ku bikwata ku nsonga eno
Ebisingawo ku bikwata ku nsonga eno.
Ebisingawo n’okusingawo
Wano waliwo ebisingawo ku bikwata ku nsonga eno.
[hidden]
Ekintu ekiyitibwa HTML5
HTML5 eyongerako ekintu ekipya eky'ensi yonna ekiyitibwa[hidden]
, ekikoleddwa nga display: none
bwe kibadde. Borrowing an idea from PureCSS , tulongoosa ku default eno nga tukola [hidden] { display: none !important; }
okuyamba okuziyiza yaayo display
okuva mu butanwa overridden.
<input type="text" hidden>
jQuery obutakwatagana
[hidden]
tekwatagana na jQuery's $(...).hide()
n'enkola $(...).show()
. N’olwekyo, mu kiseera kino tetuwagira naddala [hidden]
ku bukodyo obulala obw’okuddukanya display
eby’ebintu.
Okukyusakyusa kwokka okulabika kw’ekintu, ekitegeeza nti kyayo display
tekikyusiddwa era ekintu ekyasobola okukosa entambula y’ekiwandiiko, kozesa kiraasi mu.invisible
kifo ky’ekyo.