CSS
Zokonda zapadziko lonse lapansi za CSS, zinthu zofunika kwambiri za HTML zosinthidwa ndikusinthidwa ndi makalasi okulirapo, komanso makina apamwamba kwambiri a gridi.
Zokonda zapadziko lonse lapansi za CSS, zinthu zofunika kwambiri za HTML zosinthidwa ndikusinthidwa ndi makalasi okulirapo, komanso makina apamwamba kwambiri a gridi.
Pezani zotsika pazida zazikulu za zomangamanga za Bootstrap, kuphatikiza njira yathu yopangira mawebusayiti abwinoko, othamanga, amphamvu.
Bootstrap imagwiritsa ntchito zinthu zina za HTML ndi CSS zomwe zimafuna kugwiritsa ntchito HTML5 doctype. Phatikizanipo kumayambiriro kwa ntchito zanu zonse.
<!doctype html>
<html lang="en">
...
</html>
Ndi Bootstrap 2, tawonjezera masitayelo okonda mafoni pazinthu zazikulu za chimango. Ndi Bootstrap 3, talembanso pulojekitiyi kuti ikhale yothandizana ndi mafoni kuyambira pachiyambi. M'malo mowonjezera masitayelo am'manja, amawotchedwa pachimake. M'malo mwake, Bootstrap ndi foni yoyamba . Masitayilo oyambira am'manja atha kupezeka mulaibulale yonse m'malo mwa mafayilo osiyana.
Kuti muwonetsetse kumasulira koyenera ndi kukhudza kukulitsa, onjezani meta tag yowonera pa <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Mutha kuletsa zooming pazida zam'manja powonjezera user-scalable=no
pa meta tag yowonera. Izi zimalepheretsa kuyang'ana, kutanthauza kuti ogwiritsa ntchito amatha kusuntha, ndipo zimapangitsa kuti tsamba lanu lizimva ngati pulogalamu yanu. Ponseponse, sitikupangira izi patsamba lililonse, chifukwa chake samalani!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap imayika mawonedwe oyambira padziko lonse lapansi, typography, ndi masitayilo a ulalo. Makamaka, ife:
background-color: #fff;
pabody
@font-family-base
, @font-size-base
, ndi mawonekedwe @line-height-base
monga typographic maziko athu@link-color
ndikugwiritsa ntchito mizere ya ulalo pokha:hover
Masitayelo awa amapezeka mkati scaffolding.less
.
Pakumasulira kopitilira muyeso, timagwiritsa ntchito Normalize.css , pulojekiti ya Nicolas Gallagher ndi Jonathan Neal .
Bootstrap imafuna chinthu chokhala ndi chinthu kuti chimangire zomwe zili patsamba ndikuyika makina athu a gridi. Mutha kusankha chimodzi mwazotengera ziwiri zomwe mungagwiritse ntchito pamapulojekiti anu. Dziwani kuti, chifukwa padding
ndi zina, palibe chidebe chomwe chili ndi nestable.
Gwiritsani .container
ntchito chidebe chomvera chokhazikika chokhazikika.
<div class="container">
...
</div>
Gwiritsani .container-fluid
ntchito chidebe chokulirapo chathunthu, kutengera m'lifupi lonse la malo anu owonera.
<div class="container-fluid">
...
</div>
Bootstrap imaphatikizapo makina omvera, oyambira oyambira amadzimadzi omwe amafika pamizere 12 pomwe chipangizocho kapena kukula kwa malo owonera kumachulukira. Zimaphatikizapo makalasi okonzedweratu kuti asankhe masanjidwe osavuta, komanso zosakaniza zamphamvu zopangira masanjidwe ambiri a semantic .
Makina opangira ma gridi amagwiritsidwa ntchito popanga masanjidwe amasamba kudzera mumizere ingapo ndi mizati yomwe imasunga zomwe zili zanu. Umu ndi momwe dongosolo la grid Bootstrap limagwirira ntchito:
.container
(m'lifupi-wokhazikika) kapena .container-fluid
(m'lifupi-wonse) kuti muyanitse bwino ndi zomatira..row
ndipo .col-xs-4
akupezeka kuti apange masanjidwe a gridi mwachangu. Zosakaniza zocheperako zitha kugwiritsidwanso ntchito pamasanjidwe ambiri a semantic.padding
. Padding imeneyo imasinthidwa m'mizere yoyambira ndi yomaliza kudzera m'mphepete mwa .row
s..col-xs-4
..col-md-*
kalasi iliyonse ku chinthu sichidzangokhudza makongoletsedwe ake pazida zapakatikati komanso pazida zazikulu ngati .col-lg-*
kalasi palibe.Yang'anani ku zitsanzo zogwiritsira ntchito mfundozi pa code yanu.
Timagwiritsa ntchito mafunso otsatirawa pamafayilo athu Ocheperako kuti tipange ma breakpoints mu grid system yathu.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Nthawi zina timafutukula mafunso awa kuti aphatikize a max-width
kuchepetsa CSS ku zida zocheperako.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
Onani momwe machitidwe a gridi ya Bootstrap amagwirira ntchito pazida zingapo zokhala ndi tebulo lothandizira.
Mafoni ang'onoang'ono (<768px) | Mapiritsi ang'onoang'ono (≥768px) | Ma Desktop a zida zapakatikati ( ≥992px ) | Zida Zazida zazikulu (≥1200px) | |
---|---|---|---|---|
Khalidwe la grid | Yopingasa nthawi zonse | Yagubuduzika kuti iyambike, yopingasa pamwamba pa ma breakpoints | ||
M'lifupi mwake | Palibe (yokha) | 750px | 970px pa | 1170px |
Chiyambi cha kalasi | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# ya mizati | 12 | |||
M'lifupi mwake | Zadzidzidzi | ~62px | ~81px | ~97px |
Kuchuluka kwa ngalande | 30px (15px mbali iliyonse ya ndime) | |||
Nestable | Inde | |||
Zowonongeka | Inde | |||
Kuyitanitsa ndindalama | Inde |
Pogwiritsa ntchito gulu limodzi lamagulu a .col-md-*
gridi, mutha kupanga makina oyambira omwe amayambira pazida zam'manja ndi zida zam'manja (zocheperako mpaka zazing'ono) zisanakhale zopingasa pakompyuta (zapakatikati). Ikani mizati ya gridi iliyonse .row
.
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
Sinthani masanjidwe aliwonse amtundu wa gridi kukhala m'lifupi mwake mwakusintha mawonekedwe anu akunja .container
kukhala .container-fluid
.
<div class="container-fluid">
<div class="row">
...
</div>
</div>
Kodi simukufuna kuti mizati yanu ingowunjika muzida zing'onozing'ono? Gwiritsani ntchito makalasi owonjezera ang'onoang'ono ndi apakatikati powonjezera pamindandanda .col-xs-*
.col-md-*
yanu. Onani chitsanzo pansipa kuti mudziwe bwino momwe zonsezi zimagwirira ntchito.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Mangani pa chitsanzo cham'mbuyomu popanga masanjidwe amphamvu kwambiri komanso amphamvu okhala ndi .col-sm-*
makalasi a piritsi.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
Ngati mizati yopitilira 12 yayikidwa pamzere umodzi, gulu lililonse la zigawo zowonjezera, ngati gawo limodzi, likulungidwa pamzere watsopano.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>
Ndi magawo anayi a ma gridi omwe alipo, mutha kukumana ndi zovuta zomwe, nthawi zina, mizati yanu siyimveka bwino chifukwa imodzi ndi yayitali kuposa inzake. Kuti mukonze izi, gwiritsani ntchito kuphatikiza a ndi makalasi.clearfix
athu ofunikira omvera .
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
Kuphatikiza pa kukonza magawo pazigawo zongoyankha, mungafunikire kukonzanso zosinthira, zokankhira, kapena zokoka . Onani izi muzochitika mu grid chitsanzo .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>
Chotsani ngalande pamzere ndi mizati ndi .row-no-gutters
kalasi.
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Sunthani mizati kumanja pogwiritsa ntchito .col-md-offset-*
makalasi. Makalasi awa amawonjezera malire akumanzere kwa gawo ndi magawo *
. Mwachitsanzo, .col-md-offset-4
amasuntha .col-md-4
mizati inayi.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
Muthanso kuwongolera zochotsera kuchokera kumagulu otsika a gridi ndi .col-*-offset-0
makalasi.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>
Kuti mutsegule zomwe zili ndi gridi yokhazikika, onjezani magawo atsopano .row
ndi magulu omwe ali .col-sm-*
mgulu lomwe lilipo .col-sm-*
. Mizere yokhazikitsidwa iyenera kukhala ndi magawo 12 kapena kucheperapo (sikufunika kuti mugwiritse ntchito magawo 12 onse omwe alipo).
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
Sinthani mosavuta dongosolo lamagulu athu omangidwira mkati ndi .col-md-push-*
makalasi .col-md-pull-*
osintha.
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
Kuphatikiza pa makalasi a gridi omangidwiratu kuti amasanjidwe mwachangu, Bootstrap imaphatikizanso Zocheperako ndi zosakaniza kuti mupange mwachangu masanjidwe anu osavuta, a semantic.
Zosintha zimatsimikizira kuchuluka kwa mizati, m'lifupi mwa ngalande, ndi malo ochezera a pawailesi pomwe amayambira mizati yoyandama. Timagwiritsa ntchito izi kupanga makalasi a gridi omwe afotokozedwa pamwambapa, komanso zosakaniza zomwe zalembedwa pansipa.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
Ma Mixin amagwiritsidwa ntchito molumikizana ndi ma gridi osiyanasiyana kuti apange CSS ya semantic pamizere ya gridi iliyonse.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
Mutha kusintha zosinthika kukhala zomwe mumakonda, kapena ingogwiritsani ntchito zosakaniza zomwe zili ndi zikhalidwe zawo. Nachi chitsanzo chogwiritsa ntchito zosintha zosasinthika kuti mupange masanjidwe a magawo awiri okhala ndi kusiyana pakati.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>
Mitu yonse ya HTML, <h1>
kupyolera mu <h6>
, ilipo. .h1
kudzera .h6
m'makalasi amapezekanso, chifukwa mukafuna kufananiza masitayilo amutu wamutu koma mukufunabe kuti mawu anu aziwonetsedwa pamzere.
h1 ndi. Mutu wa bootstrap |
Semibold 36px |
h2 ndi. Mutu wa bootstrap |
Semibold 30px |
h3 ndi. Mutu wa bootstrap |
Semibold 24px |
h4 ndi. Mutu wa bootstrap |
Semibold 18px |
h5 ndi. Mutu wa bootstrap |
Semibold 14px |
h6 ndi. Mutu wa bootstrap |
Semibold 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
Pangani mawu opepuka, achiwiri pamutu uliwonse wokhala ndi <small>
tag yachidule kapena .small
kalasi.
h1 ndi. Mutu wa bootstrap Mawu achiwiri |
h2 ndi. Mutu wa bootstrap Mawu achiwiri |
h3 ndi. Mutu wa bootstrap Mawu achiwiri |
h4 ndi. Mutu wa bootstrap Mawu achiwiri |
h5 ndi. Mutu wa bootstrap Mawu achiwiri |
h6 ndi. Mutu wa bootstrap Mawu achiwiri |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
Kusakhazikika kwapadziko lonse kwa Bootstrap font-size
ndi 14px , yokhala line-height
ndi 1.428 . Izi zikugwiritsidwa ntchito ku <body>
ndime zonse. Kuphatikiza apo, <p>
(ndime) amalandila malire apakati a theka la kutalika kwa mzere wawo (10px mwachisawawa).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Ndife mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id ili si mi porta gravida ndi eget metus. Ndife mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Pangani ndime kukhala yodziwika bwino powonjezera .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Chifukwa chake, si commodo luctus.
<p class="lead">...</p>
Sikelo ya typographic imachokera pazigawo ziwiri Zochepa mu variables.less : @font-size-base
ndi @line-height-base
. Choyamba ndi kukula kwa font komwe kumagwiritsidwa ntchito ponsepo ndipo chachiwiri ndi kutalika kwa mzere woyambira. Timagwiritsa ntchito masinthidwe amenewo ndi masamu osavuta kupanga mizere, ma padding, ndi kutalika kwa mzere wamitundu yathu yonse ndi zina zambiri. Sinthani Mwamakonda Anu ndikusintha kwa Bootstrap.
Kuti muwonetse kuchuluka kwa mawu chifukwa cha kufunikira kwake munkhani ina, gwiritsani ntchito <mark>
tag.
Mutha kugwiritsa ntchito chizindikirocho kutiwunikiranimawu.
You can use the mark tag to <mark>highlight</mark> text.
Kuti muwonetse zolemba zomwe zachotsedwa gwiritsani ntchito <del>
tag.
Mzerewu walemba uyenera kutengedwa ngati malemba ochotsedwa.
<del>This line of text is meant to be treated as deleted text.</del>
Kuti muwonetse mabulogu omwe sali ofunikira gwiritsani ntchito <s>
tagi.
Mzerewu uyenera kuwonedwa ngati wosalondola.
<s>This line of text is meant to be treated as no longer accurate.</s>
Kuti muwonetse zowonjezera pa chikalatacho gwiritsani ntchito <ins>
tag.
Mzerewu walemba uyenera kutengedwa ngati chowonjezera pa chikalatacho.
<ins>This line of text is meant to be treated as an addition to the document.</ins>
Kuti mutsindikire mawu gwiritsani ntchito <u>
tag.
Mzere wa mawuwa uwonetsa ngati watsindikira
<u>This line of text will render as underlined</u>
Gwiritsani ntchito ma tag otsindika a HTML okhala ndi masitayelo opepuka.
Kuti musatsindike pakati kapena midadada ya mawu, gwiritsani ntchito <small>
chizindikirocho kuti muyike mawu pa 85% kukula kwa kholo. Mitu yamutu imalandira yawoyawo font-size
pazinthu zomwe zasungidwa <small>
.
Mutha kugwiritsa ntchito chinthu chamkati .small
m'malo mwa chilichonse <small>
.
Mzere wa mawu awa akuyenera kuwonedwa ngati kusindikizidwa bwino.
<small>This line of text is meant to be treated as fine print.</small>
Kuti mutsindike kachidutswa kakang'ono ka zilembo zolemera mafonti.
Kaduka kakang'ono kotsatira kamene kali ndi mawu akuda kwambiri .
<strong>rendered as bold text</strong>
Potsindika kaduka kakang'ono ka mawu okhala ndi mawu opendekera.
Kaduka kakang'ono kotsatira kalembedwe ka mawu opendekera .
<em>rendered as italicized text</em>
Khalani omasuka kugwiritsa ntchito <b>
komanso <i>
mu HTML5. <b>
cholinga chake ndi kuwunikira mawu kapena ziganizo popanda kuwonetsa kufunikira kowonjezera pomwe <i>
nthawi zambiri zimakhala za mawu, mawu aukadaulo, ndi zina.
Sinthani mawu mosavuta ku zigawo zokhala ndi makalasi oyika mawu.
Mawu olowera kumanzere.
Mawu olumikizidwa pakati.
Mawu olowera kumanja.
Mawu ovomerezeka.
Palibe zolemba.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Sinthani mawu kukhala zigawo ndi makalasi a zilembo zazikulu.
Mawu ocheperako.
Mawu apamwamba.
Zolemba zazikulu.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Kukhazikitsa kosinthika kwa chinthu cha HTML <abbr>
chofupikitsa ndi ma acronyms kuti awonetse mtundu wokulitsidwa pa hover. Mawu achidule okhala ndi tanthauzo title
ali ndi malire apansi a madontho opepuka komanso cholozera chothandizira pa hover, zomwe zimapereka mawu owonjezera pa hover ndi kwa ogwiritsa ntchito matekinoloje othandizira.
Chidule cha mawu akuti attr .
<abbr title="attribute">attr</abbr>
Onjezani .initialism
ku chidule cha kukula kwa mawonekedwe ang'onoang'ono.
HTML ndiye chinthu chabwino kwambiri kuyambira mkate wodulidwa.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Perekani zidziwitso za makolo apafupi kapena gulu lonse lantchito. Sungani masanjidwe pomaliza mizere yonse ndi <br>
.
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
Kuti mugwire mawu midadada kuchokera kugwero lina mkati mwazolemba zanu.
Manga <blockquote>
mozungulira HTML iliyonse ngati mawu. Kwa mawu olunjika, timalimbikitsa a <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Kusintha kwa masitayelo ndi zomwe zili pakusintha kosavuta pamiyezo <blockquote>
.
Onjezani a <footer>
kuti muzindikire kochokera. Manga dzina la gwero la ntchitoyo mu <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere ndi ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Onjezani .blockquote-reverse
ku blockquote yokhala ndi zolondola.
<blockquote class="blockquote-reverse">
...
</blockquote>
Mndandanda wazinthu zomwe dongosololi lilibe kanthu .
<ul>
<li>...</li>
</ul>
Mndandanda wazinthu zomwe dongosololi limafunikira .
<ol>
<li>...</li>
</ol>
Chotsani malire okhazikika list-style
ndi akumanzere pazida zamndandanda (ana apompopompo okha). Izi zimagwiranso ntchito pa mndandanda wazinthu zomwe zangotsala pang'ono za ana , kutanthauza kuti mudzafunikanso kuwonjezera kalasi pamndandanda uliwonse womwe wasungidwa.
<ul class="list-unstyled">
<li>...</li>
</ul>
Ikani zinthu zonse pamndandanda umodzi wokhala display: inline-block;
ndi zotchingira zowala.
<ul class="list-inline">
<li>...</li>
</ul>
Mndandanda wa mawu omwe ali ndi mafotokozedwe ogwirizana nawo.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Pangani mawu ndi mafotokozedwe <dl>
motsatira mbali ndi mbali. Imayamba kumangika ngati kusakhazikika <dl>
s, koma navbar ikakula, chitani izi.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Mafotokozedwe opingasa adzafupikitsa mawu omwe ndi aatali kwambiri kuti asakwane kumanzere ndi text-overflow
. Pamalo ocheperako, asintha kukhala mawonekedwe osakhazikika.
Manga zilembo zam'munsi zamakhodi ndi <code>
.
<section>
iyenera kukulungidwa ngati inline.
For example, <code><section></code> should be wrapped as inline.
Gwiritsani ntchito <kbd>
kuwonetsa zolowetsa zomwe nthawi zambiri zimalowetsedwa kudzera pa kiyibodi.
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>
Gwiritsani <pre>
ntchito mizere ingapo yamakhodi. Onetsetsani kuti mwathawa m'mabokosi aliwonse mu code kuti mumasulire bwino.
<p>Zitsanzo zalemba apa...</p>
<pre><p>Sample text here...</p></pre>
Mutha kuwonjezera .pre-scrollable
kalasi, yomwe ingakhazikitse kutalika kwa 350px ndikupereka y-axis scrollbar.
Kuti muwonetse zosinthika gwiritsani ntchito <var>
tag.
y = mx + b _
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Kuti muwonetse midadada yotuluka kuchokera ku pulogalamu gwiritsani ntchito <samp>
tag.
Mawuwa akuyenera kutengedwa ngati chitsanzo chotuluka pakompyuta.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Pamakongoletsedwe oyambira - zotchingira zopepuka komanso zogawa zopingasa zokha - onjezerani kalasi yoyambira .table
ku chilichonse <table>
. Zitha kuwoneka ngati zosafunikira, koma chifukwa cha kufalikira kwa matebulo a mapulagini ena monga makalendala ndi osankha masiku, tasankha kudzipatula masitaelo athu a tebulo.
# | Dzina loyamba | Dzina lomaliza | Dzina lolowera |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Yakobo | Thornton | @mafuta |
3 | Larry | Mbalame |
<table class="table">
...
</table>
Gwiritsani .table-striped
ntchito kuwonjezera mbidzi-mizere pamzere uliwonse wa tebulo mkati mwa <tbody>
.
Matebulo amizere amapangidwa kudzera pa :nth-child
chosankha cha CSS, chomwe sichipezeka mu Internet Explorer 8.
# | Dzina loyamba | Dzina lomaliza | Dzina lolowera |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Yakobo | Thornton | @mafuta |
3 | Larry | Mbalame |
<table class="table table-striped">
...
</table>
Onjezani .table-bordered
malire kumbali zonse za tebulo ndi ma cell.
# | Dzina loyamba | Dzina lomaliza | Dzina lolowera |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Yakobo | Thornton | @mafuta |
3 | Larry | Mbalame |
<table class="table table-bordered">
...
</table>
Onjezani .table-hover
kuti mutsegule chiwongolero pamizere ya tebulo mkati mwa <tbody>
.
# | Dzina loyamba | Dzina lomaliza | Dzina lolowera |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Yakobo | Thornton | @mafuta |
3 | Larry | Mbalame |
<table class="table table-hover">
...
</table>
Onjezani .table-condensed
kuti ma tebulo azikhala ophatikizika podula ma cell padding pakati.
# | Dzina loyamba | Dzina lomaliza | Dzina lolowera |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Yakobo | Thornton | @mafuta |
3 | Larry Mbalame |
<table class="table table-condensed">
...
</table>
Gwiritsani ntchito makalasi okhazikika kuti musankhe mizere yamatebulo kapena ma cell amodzi.
Kalasi | Kufotokozera |
---|---|
.active |
Imayika mtundu wa hover pa mzere kapena selo linalake |
.success |
Imawonetsa kuchita bwino kapena koyenera |
.info |
Imawonetsa kusintha kosalowerera ndale kapena zochita |
.warning |
Limasonyeza chenjezo limene lingafunike chisamaliro |
.danger |
Imawonetsa zochitika zowopsa kapena zoyipa |
# | Mutu wagawo | Mutu wagawo | Mutu wagawo |
---|---|---|---|
1 | Zamkatimu | Zamkatimu | Zamkatimu |
2 | Zamkatimu | Zamkatimu | Zamkatimu |
3 | Zamkatimu | Zamkatimu | Zamkatimu |
4 | Zamkatimu | Zamkatimu | Zamkatimu |
5 | Zamkatimu | Zamkatimu | Zamkatimu |
6 | Zamkatimu | Zamkatimu | Zamkatimu |
7 | Zamkatimu | Zamkatimu | Zamkatimu |
8 | Zamkatimu | Zamkatimu | Zamkatimu |
9 | Zamkatimu | Zamkatimu | Zamkatimu |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
Kugwiritsa ntchito mtundu kuti muwonjezere tanthauzo pamizere ya tebulo kapena selo la munthu aliyense kumangopereka chizindikiritso, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga zowerengera zowonera. Onetsetsani kuti chidziwitso cha mtunduwo ndi chodziwikiratu kuchokera pazomwe zili (zolemba zowonekera mumzere wa tebulo/selo), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-only
kalasi.
Pangani matebulo omvera mwa kukulunga chilichonse .table
kuti .table-responsive
azitha kuyenda mozungulira pazida zing'onozing'ono (pansi pa 768px). Mukawona chilichonse chokulirapo kuposa 768px, simudzawona kusiyana kulikonse pamatebulo awa.
Matebulo omvera amagwiritsa ntchito overflow-y: hidden
, yomwe imadula chilichonse chomwe chimadutsa pansi kapena m'mphepete mwa tebulo. Makamaka, izi zitha kudulira mindandanda yotsitsa ndi ma widget ena a chipani chachitatu.
Firefox ili ndi masitayelo ovuta width
omwe amasokoneza tebulo loyankha. Izi sizingalephereke popanda kuthyolako kwa Firefox komwe sitipereka mu Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
Kuti mudziwe zambiri, werengani yankho la Stack Overflow iyi .
# | Mutu wapatebulo | Mutu wapatebulo | Mutu wapatebulo | Mutu wapatebulo | Mutu wapatebulo | Mutu wapatebulo |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
# | Mutu wapatebulo | Mutu wapatebulo | Mutu wapatebulo | Mutu wapatebulo | Mutu wapatebulo | Mutu wapatebulo |
---|---|---|---|---|---|---|
1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Kuwongolera mawonekedwe amunthu payekha kumangolandira masitayelo apadziko lonse lapansi. Zonse zolembedwa <input>
, <textarea>
, ndi <select>
zinthu zomwe .form-control
zili nazo zimakhazikitsidwa width: 100%;
mwachisawawa. Mangani zilembo ndi zowongolera .form-group
kuti mutalikirane bwino.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Osasakaniza magulu amagulu mwachindunji ndi magulu olowa . M'malo mwake, sungani gulu lolowera mkati mwa gulu la mawonekedwe.
Onjezani .form-inline
ku fomu yanu (yomwe sikuyenera kukhala a <form>
) pazowongolera zolowera kumanzere komanso zopingasa pamzere. Izi zimangokhudza mafomu omwe ali mkati mwa mawonedwe omwe ali osachepera 768px m'lifupi.
Zolowetsa ndi zosankhidwa zagwiritsidwa width: 100%;
ntchito mwachisawawa mu Bootstrap. M'mawonekedwe apaintaneti, timayikanso kuti width: auto;
maulamuliro angapo amatha kukhala pamzere womwewo. Kutengera masanjidwe anu, makulidwe owonjezera owonjezera angafunike.
Owerenga pazenera adzakhala ndi vuto ndi mafomu anu ngati simuphatikiza zilembo zilizonse. Pama fomu apaintaneti, mutha kubisa zilembo pogwiritsa ntchito .sr-only
kalasi. Palinso njira zina zoperekera chizindikiro chaukadaulo wothandizira, monga aria-label
, aria-labelledby
kapena mawonekedwe title
. Ngati palibe chimodzi mwa izi, owerenga skrini amatha kugwiritsa ntchito mawonekedwewo placeholder
, ngati alipo, koma dziwani kuti kugwiritsa placeholder
ntchito m'malo mwa njira zina zolembera sikulangizidwa.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
Gwiritsani ntchito makalasi a gululi omwe afotokozedwa kale a Bootstrap kuti mugwirizane ndi zilembo ndi magulu a zowongolera munjira yopingasa powonjezera .form-horizontal
mawonekedwe (omwe sakuyenera kukhala <form>
). Kuchita izi kumasintha .form-group
kukhala ngati mizere ya gridi, kotero palibe chifukwa cha .row
.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Zitsanzo za maulamuliro amtundu wokhazikika omwe amathandizidwa mu mawonekedwe achitsanzo.
Nthawi zambiri mawonekedwe owongolera, magawo otengera zolemba. Mulinso chithandizo chamitundu yonse ya HTML5: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, ndi color
.
Zolowetsa zidzasinthidwa kwathunthu ngati zalengezedwa type
bwino.
<input type="text" class="form-control" placeholder="Text input">
Kuti muwonjezere mawu ophatikizika kapena mabatani musanayambe komanso/kapena pambuyo pa mawu aliwonse <input>
, onani gawo la gulu lolowera .
Kuwongolera mafomu komwe kumathandizira mizere ingapo yamalemba. Sinthani rows
mawonekedwe ngati pakufunika.
<textarea class="form-control" rows="3"></textarea>
Mabokosi amasankha chimodzi kapena zingapo pamndandanda, pomwe mawayilesi ndi osankha njira imodzi kuchokera ambiri.
Mabokosi oyendera ndi mawayilesi olemala amathandizidwa, koma kuti mupereke cholozera "chosaloledwa" pa hover ya kholo <label>
, mufunika kuwonjezera .disabled
kalasi ku kholo .radio
, .radio-inline
, .checkbox
, kapena .checkbox-inline
.
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
Gwiritsani ntchito .checkbox-inline
kapena .radio-inline
makalasi pamabokosi angapo kapena mawayilesi kuti muziwongolera zomwe zimawonekera pamzere womwewo.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
Ngati mulibe mawu mkati mwa <label>
, zolowetsazo zimakhala momwe mukuyembekezera. Pakali pano imagwira ntchito pamabokosi ndi mawayilesi omwe sali pa intaneti. Kumbukirani kuperekabe mtundu wina wa zilembo zamatekinoloje othandizira (mwachitsanzo, kugwiritsa ntchito aria-label
).
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>
Zindikirani kuti ma menyu ambiri omwe amasankhidwa - omwe ali mu Safari ndi Chrome - ali ndi ngodya zozungulira zomwe sizingasinthidwe kudzera pa border-radius
katundu.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Pazowongolera <select>
zomwe zili ndi mawonekedwe multiple
, zosankha zingapo zimawonetsedwa mwachisawawa.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Mukafuna kuyika mawu osamveka bwino pafupi ndi chilembo cha fomu, gwiritsani ntchito .form-control-static
kalasi pa <p>
.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>
Timachotsa outline
masitayelo okhazikika paziwongolero zamitundu box-shadow
ndikuyika a m'malo mwake :focus
.
:focus
stateZomwe zili pamwambazi zimagwiritsa ntchito masitayelo anthawi zonse muzolemba zathu kuwonetsa :focus
dziko pa .form-control
.
Onjezani mawonekedwe a disabled
boolean pazolowetsa kuti mupewe kuyanjana kwa ogwiritsa ntchito. Zolowera zolemala zimawoneka zopepuka ndikuwonjezera not-allowed
cholozera.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Onjezani zomwe zili disabled
ku a <fieldset>
kuti muletse zowongolera zonse zomwe zili mkati mwa <fieldset>
nthawi imodzi.
<a>
Mwachikhazikitso, asakatuli azitha kuyang'anira mawonekedwe onse ( <input>
, <select>
ndi <button>
zinthu) mkati <fieldset disabled>
mwazolephereka, kulepheretsa kuyanjana kwa kiyibodi ndi mbewa pa iwo. Komabe, ngati mawonekedwe anu alinso ndi <a ... class="btn btn-*">
zinthu, izi zidzangopatsidwa kalembedwe ka pointer-events: none
. Monga taonera m'chigawo chokhudza anthu olumala a mabatani (ndipo makamaka mugawo laling'ono la nangula), katundu wa CSS sanakhazikitsidwebe ndipo sakuthandizidwa mokwanira mu Opera 18 ndi pansi, kapena mu Internet Explorer 11, ndipo adapambana. 'Letsani ogwiritsa ntchito kiyibodi kuti azitha kuyang'ana kapena kuyambitsa maulalo awa. Chifukwa chake kuti mukhale otetezeka, gwiritsani ntchito JavaScript kuti mulepheretse maulalo oterowo.
Ngakhale Bootstrap idzagwiritsa ntchito masitayelo awa mu asakatuli onse, Internet Explorer 11 ndi pansipa sizigwirizana ndi disabled
mawonekedwe a <fieldset>
. Gwiritsani ntchito JavaScript yokhazikika kuti muyimitse gawo la asakatuli awa.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Onjezani mawonekedwe a readonly
boolean pazolowetsa kuti mupewe kusintha kwa mtengo wake. Zolowetsa zowerengera zokha zimawoneka zopepuka (monga zolowetsa zozimitsidwa), koma sungani cholozera chokhazikika.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Mawu othandizira mulingo wa block pazowongolera mawonekedwe.
Mawu othandizira akuyenera kulumikizidwa momveka bwino ndi mawonekedwe omwe akukhudzana ndi kugwiritsa ntchito mawonekedwe aria-describedby
. Izi ziwonetsetsa kuti matekinoloje othandizira - monga owerenga skrini - adzalengeza mawu othandizira pamene wogwiritsa ntchito akuyang'ana kapena alowa mu ulamuliro.
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
Bootstrap imaphatikizapo masitayelo ovomerezeka a zolakwika, chenjezo, ndikuchita bwino pakuwongolera mawonekedwe. Kuti mugwiritse ntchito, kuwonjezera .has-warning
, .has-error
, kapena .has-success
kuzinthu zamakolo. Any .control-label
, .form-control
, ndipo .help-block
mkati mwa chinthucho adzalandira masitaelo ovomerezeka.
Kugwiritsa ntchito masitayelo otsimikizirawa kuti awonetse momwe mawonekedwe amawongolera zimangopereka chithunzithunzi, chotengera mtundu, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga skrini - kapena kwa ogwiritsa ntchito osaona.
Onetsetsani kuti palinso chisonyezero cha dziko. Mwachitsanzo, mutha kuphatikizirapo malingaliro okhudza <label>
momwe zinthu zilili m'mawu omwewo (monga momwe zilili pachitsanzo chotsatirachi), phatikizani Glyphicon (ndi mawu ena oyenerera pogwiritsa ntchito .sr-only
kalasi - onani zitsanzo za Glyphicon ), kapena popereka Thandizo lothandizira malemba block. Makamaka pamakina othandizira, zowongolera zosavomerezeka zitha kuperekedwanso mawonekedwe aria-invalid="true"
.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
Mutha kuwonjezeranso zithunzi zomwe mwasankha ndikuwonjezera .has-feedback
ndi chithunzi choyenera.
Zithunzi zoyankha zimangogwira ntchito ndi zolemba <input class="form-control">
.
Kuyika pamanja pazithunzi za mayankho ndikofunikira pazolowetsa zopanda zilembo komanso magulu omwe ali ndi zowonjezera kumanja. Mukulimbikitsidwa kuti mupereke zilembo pazolowetsa zonse pazifukwa zopezeka. Ngati mukufuna kuti zilembo zisawonetsedwe, zibiseni ndi .sr-only
kalasi. Ngati mukuyenera kutero popanda zilembo, sinthani top
kufunikira kwa chithunzi cha mayankho. Pamagulu olowetsa, sinthani right
mtengowo kukhala mtengo woyenerera wa pixel kutengera kukula kwa addon yanu.
Kuwonetsetsa kuti matekinoloje othandizira - monga zowerengera zowonera - akupereka tanthauzo lachizindikiro molondola, mawu owonjezera obisika akuyenera kuphatikizidwa ndi .sr-only
kalasi ndikulumikizidwa momveka bwino ndi mawonekedwe omwe amagwirizana nawo aria-describedby
. Kapenanso, onetsetsani kuti tanthauzo (mwachitsanzo, kuti pali chenjezo la gawo linalake lolowera) likuperekedwa mwanjira ina, monga kusintha mawu enieni <label>
okhudzana ndi mawonekedwe.
Ngakhale zitsanzo zotsatirazi zikutchula kale za kutsimikiziridwa kwa mawonekedwe awo omwe amawongolera <label>
m'malemba omwewo, njira yomwe ili pamwambayi (pogwiritsa ntchito .sr-only
malemba ndi aria-describedby
) yaphatikizidwa kuti iwonetsere.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>
.sr-only
Zithunzi zosafunikira zokhala ndi zilembo zobisikaNgati mugwiritsa ntchito .sr-only
kalasi kubisa mawonekedwe owongolera <label>
(m'malo mogwiritsa ntchito zina zolembera, monga mawonekedwe aria-label
), Bootstrap imangosintha mawonekedwe a chithunzicho chikawonjezedwa.
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>
Khazikitsani utali pogwiritsa ntchito makalasi monga .input-lg
, ndipo ikani m'lifupi pogwiritsa ntchito makalasi amtundu wa grid monga .col-lg-*
.
Pangani zowongolera zazitali kapena zazifupi zomwe zimagwirizana ndi kukula kwa mabatani.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>
Kukula mwachangu zilembo ndikuwongolera mawonekedwe mkati .form-horizontal
mwa kuwonjezera .form-group-lg
kapena .form-group-sm
.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
Manga zolowa m'magawo a gridi, kapena chinthu chilichonse cha makolo, kuti mutsirize kukula komwe mukufuna.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
Gwiritsani ntchito mabatani a makalasi pa <a>
, <button>
, kapena <input>
element.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
Ngakhale makalasi a mabatani amatha kugwiritsidwa ntchito <a>
ndi <button>
zinthu, zinthu zokha <button>
ndizomwe zimathandizidwa mkati mwa nav ndi navbar.
Ngati <a>
zinthuzo zikugwiritsidwa ntchito ngati mabatani - kuyambitsa ntchito zapatsamba, m'malo mopita ku chikalata china kapena gawo lomwe lili mkati mwa tsamba lamakono - ayeneranso kupatsidwa zoyenera role="button"
.
Monga njira yabwino kwambiri, timalimbikitsa kugwiritsa ntchito <button>
chinthucho ngati kuli kotheka kuti mutsimikizire kuti zikugwirizana ndi mawonekedwe akusakatula.
Mwa zina, pali cholakwika mu Firefox <30 chomwe chimatilepheretsa kukhazikitsa mabatani line-height
a <input>
-based, kuwapangitsa kuti asafanane ndi kutalika kwa mabatani ena pa Firefox.
Gwiritsani ntchito mabatani aliwonse omwe alipo kuti mupange batani losinthidwa mwachangu.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
Kugwiritsa ntchito mtundu kuti muwonjezere tanthauzo ku batani kumangopereka chiwonetsero, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti chidziwitso chotchulidwa ndi mtunduwo ndi chodziwikiratu kuchokera pazomwe zili (zolemba zowonekera pa batani), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-only
kalasi.
Mukufuna mabatani akulu kapena ang'onoang'ono? Onjezani .btn-lg
, .btn-sm
, kapena .btn-xs
ma size owonjezera.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
Pangani mabatani a mulingo wa block—omwe amatambasula kukula kwa kholo lonse— powonjezera .btn-block
.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
Mabatani adzawoneka atapanikizidwa (ndi maziko akuda, malire akuda, ndi mthunzi wamkati) akamagwira ntchito. Kwa <button>
zinthu, izi zimachitika kudzera pa :active
. Kwa <a>
zinthu, zachitika ndi .active
. Komabe, mutha kugwiritsa ntchito .active
pa <button>
s (ndikuphatikizanso mawonekedwe aria-pressed="true"
) ngati mungafunike kubwereza zomwe zikuchitika mwadongosolo.
Palibe chifukwa chowonjezera :active
chifukwa ndi gulu lachinyengo, koma ngati mukufuna kukakamiza mawonekedwe omwewo, pitirirani ndikuwonjezera .active
.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>
Onjezani .active
kalasi ku <a>
mabatani.
Chiyanjano choyambirira Lumikizani
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
Pangani mabatani kuti awoneke ngati osadina powatsitsimutsanso ndi opacity
.
Onjezani mawonekedwe disabled
ku <button>
mabatani.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
Ngati muwonjeza disabled
mawonekedwe a <button>
, Internet Explorer 9 ndi pansipa ipangitsa mawu kukhala imvi ndi chithunzi choyipa chomwe sitingathe kukonza.
Onjezani .disabled
kalasi ku <a>
mabatani.
Chiyanjano choyambirira Lumikizani
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
Timagwiritsa ntchito .disabled
ngati gulu lothandizira pano, lofanana ndi gulu wamba .active
, kotero palibe mawu oyamba omwe amafunikira.
Kalasi iyi imagwiritsa ntchito pointer-events: none
kuyesa kuletsa magwiridwe antchito a ulalo wa <a>
s, koma katundu wa CSS sanakhazikitsidwebe ndipo sakuthandizidwa mokwanira mu Opera 18 ndi pansipa, kapena mu Internet Explorer 11. Kuphatikiza apo, ngakhale msakatuli omwe amathandizira pointer-events: none
, kiyibodi kuyenda sikunakhudzidwe, kutanthauza kuti ogwiritsa ntchito kiyibodi omwe amawona komanso ogwiritsa ntchito matekinoloje othandizira azitha kuyatsa maulalowa. Chifukwa chake kuti mukhale otetezeka, gwiritsani ntchito JavaScript kuti mulepheretse maulalo oterowo.
Zithunzi zomwe zili mu Bootstrap 3 zitha kupangidwa kukhala zomvera powonjezera .img-responsive
kalasi. Izi zimagwiranso ntchito max-width: 100%;
, height: auto;
komanso display: block;
pa chithunzicho kuti chikhale bwino ku chinthu cha makolo.
Kuti muike pakati zithunzi zomwe zimagwiritsa ntchito .img-responsive
kalasi, gwiritsani ntchito .center-block
m'malo mwa .text-center
. Onani gawo la makalasi othandizira kuti mumve zambiri za .center-block
kagwiritsidwe ntchito.
Mu Internet Explorer 8-10, zithunzi za SVG zomwe .img-responsive
zili ndi kukula kwake ndizosafanana. Kuti mukonze izi, onjezerani width: 100% \9;
ngati kuli kofunikira. Bootstrap siigwiritsa ntchito izi zokha chifukwa imayambitsa zovuta pamitundu ina yazithunzi.
<img src="..." class="img-responsive" alt="Responsive image">
Onjezani makalasi kuzinthu kuti <img>
musinthe mosavuta zithunzi zamapulojekiti aliwonse.
Kumbukirani kuti Internet Explorer 8 ilibe chithandizo pamakona ozungulira.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
Fotokozerani tanthauzo kudzera mumitundu ndi makalasi ochepa otsindika. Izi zitha kugwiritsidwanso ntchito pa maulalo ndipo zidzadetsedwa pa hover monga masitayelo athu osakhazikika.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Ndife mollis, si commodo luctus, si erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
Nthawi zina makalasi otsindika sangathe kugwiritsidwa ntchito chifukwa cha kusankhidwa kwa wina. Nthawi zambiri, njira yokwanira ndiyo kukulunga mawu anu <span>
ndi kalasi.
Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti chidziwitso cha mtunduwo ndi chodziwikiratu kuchokera pazomwe zili (mitundu yamtunduwu imangogwiritsidwa ntchito kulimbikitsa tanthauzo lomwe lilipo kale m'mawu / kuyika), kapena ikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-only
kalasi. .
Mofanana ndi makalasi amtundu wa zolemba, ikani mosavuta maziko a chinthu ku kalasi iliyonse. Zida za nangula zidzadetsedwa pa hover, monga makalasi amawu.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Ndife mollis, si commodo luctus, si erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
Nthawi zina makalasi akumbuyo sangathe kugwiritsidwa ntchito chifukwa cha kusankhidwa kwamtundu wina. Nthawi zina, njira yokwanira ndiyo kukulunga zomwe zili muzinthu zanu <div>
ndi kalasi.
Monga momwe zilili ndi mitundu ya zinthu , onetsetsani kuti tanthauzo lililonse loperekedwa kudzera mumtundu uliwonse likuperekedwanso m'njira yomwe siili yowonetsera.
Gwiritsani ntchito chizindikiro chapafupi chotseka pochotsa zinthu monga ma modals ndi zidziwitso.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
Gwiritsani ntchito ma carets kuti muwonetse magwiridwe antchito ndi njira. Zindikirani kuti chisamaliro chokhazikika chidzasinthiratu m'ma menyu otsitsa .
<span class="caret"></span>
Sungani chinthu kumanzere kapena kumanja ndi kalasi. !important
imaphatikizidwa kuti tipewe zovuta zenizeni. Makalasi amathanso kugwiritsidwa ntchito ngati zosakaniza.
<div class="pull-left">...</div>
<div class="pull-right">...</div>
// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}
Khazikitsani chinthu kukhala display: block
ndi pakati kudzera pa margin
. Imapezeka ngati mixin ndi kalasi.
<div class="center-block">...</div>
// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}
Zomveka bwino float
s powonjezera .clearfix
ku chinthu cha makolo . Amagwiritsa ntchito micro clearfix monga kutchuka kwa Nicolas Gallagher. Itha kugwiritsidwanso ntchito ngati mixin.
<!-- Usage as a class -->
<div class="clearfix">...</div>
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}
Limbikitsani chinthu kuti chiwonetsedwe kapena kubisika ( kuphatikiza zowerengera zowonera ) pogwiritsa ntchito .show
ndi .hidden
makalasi. Maphunzirowa amagwiritsidwa ntchito !important
kupewa mikangano yeniyeni, monga momwe zimayandama mwachangu . Amangopezeka pakusintha ma block level. Atha kugwiritsidwanso ntchito ngati zosakaniza.
.hide
likupezeka, koma sizimakhudza nthawi zonse owerenga zenera ndipo limachotsedwa ngati v3.0.1 . Gwiritsani ntchito .hidden
kapena .sr-only
m'malo mwake.
Kuphatikiza apo, .invisible
itha kugwiritsidwa ntchito kusinthira mawonekedwe a chinthu, kutanthauza kutidisplay
sichinasinthidwe ndipo chinthucho chikhoza kukhudzabe kuyenda kwa chikalatacho.
<div class="show">...</div>
<div class="hidden">...</div>
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
Bisani chinthu pazida zonse kupatula zowerenga zenera zomwe zili ndi .sr-only
. Phatikizani .sr-only
ndi .sr-only-focusable
kuti muwonetsenso chinthucho chikayang'ana kwambiri (mwachitsanzo ndi wogwiritsa ntchito kiyibodi yekha). Zofunikira pakutsata njira zabwino zopezeka . Itha kugwiritsidwanso ntchito ngati zosakaniza.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}
Gwiritsani ntchito .text-hide
kalasi kapena mixin kuti musinthe zomwe zili patsamba ndi chithunzi chakumbuyo.
<h1 class="text-hide">Custom heading</h1>
// Usage as a mixin
.heading {
.text-hide();
}
Kuti chitukuko chikhale chosavuta kugwiritsa ntchito mafoni, gwiritsani ntchito makalasi othandizirawa kuti muwonetse ndi kubisa zomwe zili ndi chipangizocho kudzera pafunso lazama TV. Kuphatikizidwanso ndi makalasi othandizira osinthira zinthu zikasindikizidwa.
Yesani kugwiritsa ntchito izi pang'onopang'ono ndikupewa kupanga mitundu yosiyana ya tsamba lomwelo. M'malo mwake, zigwiritseni ntchito kuti zigwirizane ndi mawonekedwe a chipangizo chilichonse.
Gwiritsani ntchito makalasi amodzi kapena ophatikizika omwe alipo kuti musinthe zomwe zili pagawo lowonera.
Zida zazing'ono zowonjezeraMafoni (<768px) | Zida zazing'onoMapiritsi (≥768px) | Zida zapakatikatiMakompyuta (≥992px) | Zida zazikuluMakompyuta (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
Zowoneka | Zobisika | Zobisika | Zobisika |
.visible-sm-* |
Zobisika | Zowoneka | Zobisika | Zobisika |
.visible-md-* |
Zobisika | Zobisika | Zowoneka | Zobisika |
.visible-lg-* |
Zobisika | Zobisika | Zobisika | Zowoneka |
.hidden-xs |
Zobisika | Zowoneka | Zowoneka | Zowoneka |
.hidden-sm |
Zowoneka | Zobisika | Zowoneka | Zowoneka |
.hidden-md |
Zowoneka | Zowoneka | Zobisika | Zowoneka |
.hidden-lg |
Zowoneka | Zowoneka | Zowoneka | Zobisika |
Pofika pa v3.2.0, .visible-*-*
makalasi a chigawo chilichonse amabwera m'mitundu itatu, imodzi pamtengo uliwonse wa CSS display
womwe walembedwa pansipa.
Gulu la makalasi | CSSdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Chifukwa chake, pazowonjezera zazing'ono ( xs
) zowonera mwachitsanzo, .visible-*-*
makalasi omwe alipo ndi awa: .visible-xs-block
, .visible-xs-inline
, ndi .visible-xs-inline-block
.
Makalasi .visible-xs
, .visible-sm
, .visible-md
, .visible-lg
komanso alipo, koma achotsedwa pa v3.2.0 . Amakhala ofanana ndi .visible-*-block
, kupatulapo ndi zina zapadera <table>
zosinthira zinthu zokhudzana ndi kusintha.
Mofanana ndi makalasi omvera okhazikika, gwiritsani ntchito izi posintha zinthu kuti zisindikizidwe.
Maphunziro | Msakatuli | Sindikizani |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
Zobisika | Zowoneka |
.hidden-print |
Zowoneka | Zobisika |
Kalasiyi .visible-print
iliponso koma idachotsedwa ngati v3.2.0 . Ndi pafupifupi ofanana ndi .visible-print-block
, kupatulapo ndi zina zapadera za <table>
-zinthu zokhudzana.
Sinthani kukula kwa msakatuli wanu kapena tsegulani pazida zosiyanasiyana kuti muyese makalasi ogwiritsa ntchito.
Zizindikiro zobiriwira zikuwonetsa kuti chinthucho chikuwoneka patsamba lanu lapano.
Apa, zolembera zobiriwira zikuwonetsanso kuti chinthucho chabisika pamawonedwe anu apano.
CSS ya Bootstrap imamangidwa pa Zochepa, preprocessor yokhala ndi magwiridwe antchito owonjezera monga zosinthika, zosakaniza, ndi ntchito zopanga CSS. Omwe akuyang'ana kugwiritsa ntchito gwero Mafayilo Ochepa m'malo mwa mafayilo athu a CSS omwe adapangidwa amatha kugwiritsa ntchito mitundu ingapo ndi zosakaniza zomwe timagwiritsa ntchito ponseponse.
Zosintha za gridi ndi zosakaniza zimaphimbidwa mkati mwa gawo la Grid system .
Bootstrap ingagwiritsidwe ntchito m'njira zosachepera ziwiri: ndi CSS yopangidwa kapena ndi gwero Mafayilo Ochepa. Kuti muphatikize mafayilo Ochepa, onani gawo la Poyambira momwe mungakhazikitsire malo anu otukuka kuti muyendetse malamulo ofunikira.
Zida zophatikizira gulu lachitatu zitha kugwira ntchito ndi Bootstrap, koma sizimathandizidwa ndi gulu lathu lalikulu.
Zosintha zimagwiritsidwa ntchito mu polojekiti yonse ngati njira yokhazikitsira pakati ndikugawana zinthu zomwe zimagwiritsidwa ntchito nthawi zambiri monga mitundu, masitayilo, kapena mafonti. Kuti mumve zambiri, chonde onani Customizer .
Gwiritsani ntchito mitundu iwiri yosavuta: imvi ndi semantic. Mitundu ya grayscale imapereka mwayi wofikira mwachangu ku mithunzi yakuda yomwe imagwiritsidwa ntchito nthawi zambiri pomwe semantic imaphatikizapo mitundu yosiyanasiyana yomwe imaperekedwa kuzinthu zofunikira.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
Gwiritsani ntchito mtundu uliwonse wamitundu iyi momwe ilili kapena muwagawirenso kumitundu yofunikira kwambiri ya polojekiti yanu.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}
Zosintha zingapo kuti musinthe mwachangu zinthu zazikulu zamafupa atsamba lanu.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
Sinthani maulalo anu mosavuta ndi mtundu woyenera wokhala ndi mtengo umodzi wokha.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}
Dziwani kuti @link-hover-color
amagwiritsa ntchito, chida china chodabwitsa kuchokera ku Zochepa, kuti apange mtundu woyenera wa hover. Mutha kugwiritsa ntchito darken
, lighten
, saturate
, ndi desaturate
.
Khazikitsani zilembo zanu mosavuta, kukula kwa mawu, kutsogola, ndi zina zambiri pogwiritsa ntchito zosintha mwachangu. Bootstrap imagwiritsa ntchito izi komanso kupereka zosakaniza zosavuta za typographic.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
Mitundu iwiri yofulumira yosinthira malo ndi dzina lafayilo la zithunzi zanu.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
Zida mu Bootstrap zimagwiritsa ntchito zosintha zina zokhazikika pokhazikitsa zomwe zimafanana. Nawa omwe amagwiritsidwa ntchito kwambiri.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
Zosakaniza za ogulitsa ndi zosakaniza zothandizira kuthandizira asakatuli angapo pophatikiza ma prefixes onse oyenera mu CSS yanu yopangidwa.
Bwezerani bokosi lachigawo chanu ndi chosakaniza chimodzi. Kuti mumve zambiri, onani nkhaniyi yothandiza kuchokera ku Mozilla .
Kusakaniza kumachotsedwa ngati v3.2.0, ndikuyambitsa Autoprefixer. Kuti musunge kuyanjana kwa mmbuyo, Bootstrap ipitiliza kugwiritsa ntchito mixin mkati mpaka Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}
Masiku ano asakatuli onse amakono amathandizira border-radius
katundu wopanda prefixed. Mwakutero, palibe .border-radius()
mixin, koma Bootstrap imaphatikizapo njira zazifupi zozungulira mwachangu ngodya ziwiri kumbali inayake ya chinthu.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}
Ngati omvera anu akugwiritsa ntchito asakatuli aposachedwa komanso zida zazikulu, onetsetsani kuti mwangogwiritsa ntchito box-shadow
malowo okha. Ngati mukufuna chithandizo cha zipangizo zakale za Android (pre-v4) ndi iOS (iOS 5 isanayambe), gwiritsani ntchito mixin yomwe yachotsedwa kuti mutenge -webkit
chiyambi chofunikira.
Kusakaniza kumachotsedwa ngati v3.1.0, popeza Bootstrap sichigwirizana ndi nsanja zakale zomwe sizigwirizana ndi katundu wamba. Kuti musunge kuyanjana chakumbuyo, Bootstrap ipitiliza kugwiritsa ntchito mixin mkati mpaka Bootstrap v4.
Onetsetsani kuti mumagwiritsa ntchito rgba()
mitundu mumithunzi yamabokosi anu kuti igwirizane momasuka momwe mungathere ndi maziko.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}
Zosakaniza zingapo kuti muzitha kusinthasintha. Khazikitsani zosintha zonse ndi imodzi, kapena tchulani kuchedwa ndi nthawi yomwe ikufunika.
Zosakaniza zimachotsedwa ngati v3.2.0 , ndikuyambitsa Autoprefixer. Kuti musunge kuyanjana chakumbuyo, Bootstrap ipitiliza kugwiritsa ntchito zosakaniza mkati mpaka Bootstrap v4.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}
Sinthani, sikeni, masulirani (sunthani), kapena potoza chinthu chilichonse.
Zosakaniza zimachotsedwa ngati v3.2.0 , ndikuyambitsa Autoprefixer. Kuti musunge kuyanjana chakumbuyo, Bootstrap ipitiliza kugwiritsa ntchito zosakaniza mkati mpaka Bootstrap v4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}
Kusakaniza kumodzi kogwiritsa ntchito makanema ojambula a CSS3 mu chilengezo chimodzi ndi zosakaniza zina zamtundu uliwonse.
Zosakaniza zimachotsedwa ngati v3.2.0 , ndikuyambitsa Autoprefixer. Kuti musunge kuyanjana chakumbuyo, Bootstrap ipitiliza kugwiritsa ntchito zosakaniza mkati mpaka Bootstrap v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}
Khazikitsani kuwala kwa asakatuli onse ndikupereka filter
kubweza kwa IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}
Perekani nkhani zowongolera mawonekedwe mkati mwa gawo lililonse.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
Pangani mizati kudzera pa CSS mkati mwa chinthu chimodzi.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
Sinthani mosavuta mitundu iwiri iliyonse kukhala gradient yakumbuyo. Pitani patsogolo kwambiri ndikukhazikitsa kolowera, gwiritsani ntchito mitundu itatu, kapena gwiritsani ntchito ma radial gradient. Ndi kuphatikiza kumodzi mumapeza ma syntaxes onse omwe mungafune.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
Mutha kutchulanso ngodya yamitundu iwiri, mizere yozungulira:
#gradient > .directional(#333; #000; 45deg);
Ngati mukufuna mizere yometa, ndizosavuta, nanunso. Ingotchulani mtundu umodzi ndipo tidzakuta mizere yoyera yowoneka bwino.
#gradient > .striped(#333; 45deg);
Pamwamba pa ante ndikugwiritsa ntchito mitundu itatu m'malo mwake. Khazikitsani mtundu woyamba, wachiwiri, mtundu wachiwiri woyimitsa (mtengo wamtengo wapatali ngati 25%), ndi mtundu wachitatu wokhala ndi zosakaniza izi:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
Mungodziwiratu! Ngati mungafunike kuchotsa gradient, onetsetsani kuti mwachotsa chilichonse cha IE chomwe filter
mungawonjezere. Mutha kuchita izi pogwiritsa ntchito .reset-filter()
mixin pamodzi background-image: none;
.
Zosakaniza zothandiza ndi zosakaniza zomwe zimaphatikiza zinthu zina za CSS zosagwirizana kuti zikwaniritse cholinga kapena ntchito inayake.
Iwalani kuwonjezera class="clearfix"
pa chinthu chilichonse ndipo m'malo mwake onjezerani .clearfix()
mixin ngati kuli koyenera. Amagwiritsa ntchito micro clearfix kuchokera kwa Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}
Ikani mwachangu chinthu chilichonse mkati mwa kholo lake. Imafunika width
kapena max-width
kukhazikitsidwa.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}
Tchulani miyeso ya chinthu mosavuta.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }
Konzani zosankha zosinthira mosavuta zamtundu uliwonse, kapena china chilichonse. Zosintha pamachitidwe a msakatuli wabwinobwino ( both
).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}
Chepetsani mawu mosavuta ndi ellipsis ndi chosakaniza chimodzi. Imafunika chinthu kukhala block
kapena inline-block
mlingo.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}
Tchulani njira ziwiri zazithunzi ndi @1x kukula kwazithunzi, ndipo Bootstrap ipereka @2x media query. Ngati muli ndi zithunzi zambiri zoti mugwiritse ntchito, ganizirani kulemba chithunzi chanu cha retina CSS pamanja pafunso limodzi lazakanema.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}
Ngakhale Bootstrap imamangidwa pa Pang'ono, ilinso ndi doko lovomerezeka la Sass . Timachisunga munkhokwe ya GitHub ndikusintha zosintha ndi script yosinthira.
Popeza doko la Sass lili ndi repo lapadera ndipo limatumikira anthu osiyana pang'ono, zomwe zili mu polojekitiyi zimasiyana kwambiri ndi polojekiti yayikulu ya Bootstrap. Izi zimatsimikizira kuti doko la Sass likugwirizana ndi machitidwe ambiri a Sass momwe angathere.
Njira | Kufotokozera |
---|---|
lib/ |
Nambala yamtengo wapatali ya Ruby (Masinthidwe a Sass, Ma Rail ndi Compass kuphatikiza) |
tasks/ |
Zolemba zosinthira (kutembenukira kumtunda Pang'ono kupita ku Sass) |
test/ |
Mayeso ophatikiza |
templates/ |
Chiwonetsero cha phukusi la Compass |
vendor/assets/ |
Sass, JavaScript, ndi mafayilo amtundu |
Rakefile |
Ntchito zamkati, monga rake ndikusintha |
Pitani ku Sass port's GitHub repository kuti muwone mafayilowa akugwira ntchito.
Kuti mumve zambiri zamomwe mungayikitsire ndikugwiritsa ntchito Bootstrap ya Sass, onani tsamba la GitHub readme . Ndilo gwero laposachedwa kwambiri ndipo limaphatikizapo zambiri zogwiritsidwa ntchito ndi Rails, Compass, ndi mapulojekiti wamba a Sass.