v4 ah migrate a ni
Bootstrap 4 hi project pumpui siamthatna lian tak a ni. Hrilhfiahna langsar ber berte chu a hnuaia tarlan ang hian tarlan a ni a, chu chu a dawtah chuan component inzawmte tihdanglamna chiang zawkin tarlan a ni.
Stable inthlak danglamna
Beta 3 atanga kan stable v4.x release-a kan kal chuan breaking changes a awm lo a, mahse danglamna langsar tak tak a awm nual.
Printing tih a ni
-
Print utilities chhe tawhte siamthat a ni. Tun hma chuan
.d-print-*
class hman hian beisei loh takin class dang zawng zawng a overrule thei a.d-*
ni. Tunah chuan, kan display utility dangte nen an inmil a, chu media (@media print
)-ah chauh an hmang a ni. -
Utility dang nena inmil turin print display utility awm thei te chu tihzauh a ni. Beta 3 leh a chung lam chauhvin
block
,inline-block
,inline
, lehnone
. Stable v4 tih belhflex
a ni a,inline-flex
,table
,table-row
, lehtable-cell
. -
Browser hrang hranga print preview rendering tihfel a ni a, print style thar a awm a, chutah chuan
@page
size
.
Beta 3 a inthlak a
Beta 2 hian beta phase chhunga kan breaking change tam zawk a hmuh laiin, mahse Beta 3 release-a ngaihtuah tur tlemte kan la nei tho. Heng inthlak danglamna te hi Beta 2 atanga Beta 3 emaw Bootstrap version hlui zawk emaw atanga Beta 3 i update a nih chuan a hman theih.
Thildang
$thumbnail-transition
Variable hman loh chu a paih chhuak ta. Engmah kan transition lo a, chuvang chuan extra code mai a ni.- npm package ah hian kan source leh dist file tih loh file dang a awm tawh lo; anmahni i rinchhan a,
node_modules
folder kaltlangin kan script te i run a nih chuan i workflow kha i siamrem tur a ni.
Form hrang hrang
-
Custom leh default checkbox leh radio te chu a ziak thar leh vek. Tunah chuan, an pahnih hian HTML structure inmil (outer
<div>
with sibling<input>
leh<label>
) leh layout style inang (stacked default, inline with modifier class) an nei ve ve a. Hei hian input dinhmun a zirin label chu kan style thei a,disabled
attribute support a awlsam phah a (a hma chuan parent class a mamawh thin) leh kan form validation a support tha zawk bawk.background-image
Hemi bakah hian custom form checkbox leh radio-a multiple s enkawl dan tur CSS kan thlak danglam a ni. Tun hma chuan tuna element paih tawhah.custom-control-indicator
hian background color, gradient leh SVG icon te a awm thin. Background gradient customize tih awmzia chu pakhat chauh thlak a ngaih apiangin chu zawng zawng chu thlak vek tihna a ni. Tunah chuan,.custom-control-label::before
fill leh gradient atan kan nei a.custom-control-label::after
, icon chu a handle a.Inline-a custom check siam tur chuan
.custom-control-inline
. -
Input hmanga button group hrang hrangte tana selector update a ni.
[data-toggle="buttons"] { }
Style leh behavior atan ni lovin JS behavior atan chauh attribute hi kan hmang a, styling atan classdata
thar kan rinchhan a ni..btn-group-toggle
-
Removed
.col-form-legend
in favor of a tlem a tihchangtlun.col-form-label
. Hetiang hian.col-form-label-sm
leh elements chungah awlsam takin.col-form-label-lg
hman theih a ni.<legend>
-
Custom file input te chuan an
$custom-file-text
Sass variable ah change an dawng a. Nested Sass map a ni tawh lo va, tunah chuan string pakhat chauh a power a ni—Browse
chu chu tunah chuan kan Sass atanga pseudo-element siam chhuah awmchhun a nih avangin button chu. TunahChoose file
chuan thuziak chu.custom-file-label
.
Input group hrang hrang te
-
Tunah chuan input group addons te hi input pakhat nena khaikhin chuan an placement atan a bik takin an awm tawh a ni. Kan drop tawh a , class thar pahnih atan ,
.input-group-addon
leh . Tunah hian append emaw prepend emaw chiang takin i hmang tur a ni a, kan CSS tam zawk chu a ti awlsam ang. Append emaw prepend chhungah chuan i button te chu hmun dangah a awm ang angin dah la, mahse text chu ..input-group-btn
.input-group-prepend
.input-group-append
.input-group-text
-
Tunah chuan validation style te chu a support tawh a, input tam tak pawh a support tawh bawk (group khatah input pakhat chauh validate theih ni mahse).
-
Sizing class te chu parent chungah a awm tur a ni a
.input-group
, individual form elements ah a awm tur a ni lo.
Beta 2 a inthlak a
Beta-a kan awm lai hian breaking changes neih loh kan tum a ni. Amaherawhchu, thil awmdan chu ruahman angin a kal ngai lo. A hnuaia tarlan te hi Beta 1 atanga Beta 2 a kan kal huna ngaihtuah tur breaking changes te an ni.
Breaking a ni
- Variable
$badge-color
leh a hman dan chu.badge
. Color contrast functioncolor
hmangin based a pick abackground-color
, chuvangin variable chu a tul lo. - CSS native filter nena buaina tihchhiat loh nan
grayscale()
function to hming thlak a ni.gray()
grayscale
- Renamed
.table-inverse
,.thead-inverse
, and.thead-default
to.*-dark
and.*-light
, hmun danga kan color scheme hmante nena inmil. - Tunah chuan responsive tables te hian grid breakpoint tin atan class an siam chhuak ta a ni. Hei hi Beta 1 atanga break a ni a,
.table-responsive
i hman tawh kha.table-responsive-md
. Tunah chuan i hmang thei tawh emaw , a tul angin.table-responsive
emaw i hmang thei tawh ang..table-responsive-{sm,md,lg,xl}
- Package manager chu alternative (eg, Yarn emaw npm) atan hman loh a nih avangin Bower support a tla thla. A chipchiar zawkna chu bower/bower#2298 ah hian en theih a ni.
- Bootstrap hian jQuery 1.9.1 aia sang a la mamawh a, mahse v3.x supported browser te hi Bootstrap support te an nih avangin version 3.x hmang turin i fuih a che plus v3.x hian security fix engemaw zat a nei bawk.
.form-control-label
Class hman loh chu paih chhuah a ni. He class hi i hmang a nih chuan, horizontal form layout-a a inzawm input nen.col-form-label
vertical-a centered class duplicate a ni.<label>
- Property awmna mixin
color-yiq
atangacolor
value rawn pe chhuak thei function ah a thlak a, CSS property eng pawh atan hman theih a ni. Entirnan, , tih ai chuancolor-yiq(#000)
, i ziak angcolor: color-yiq(#000);
.
A langsar zualte
pointer-events
Modal-a hman dan thar a rawn luh tir. Outer.modal-dialog
chuan events a paltlang a,pointer-events: none
for custom click handling (click eng pawh a awm chuan the-ah ngaihthlak mai theih a ni.modal-backdrop
), chutah chuan a tak tak atan a counteract.modal-content
apointer-events: auto
,
Khaihtawi
V3 atanga v4 a i kal huna i hriat duh tur ticket item lian tak tak te chu hetiang hi a ni.
Browser hmanga support theih a ni
- IE8, IE9, leh iOS 6 support te chu a tla thla. v4 hi tunah chuan IE10+ leh iOS 7+ chauh a ni tawh. Chutiang zinga pakhat mamawh site tan chuan v3 hmang ang che.
- Android v5.0 Lollipop-a Browser leh WebView te tan official support a dah belh bawk. Android Browser leh WebView version hmasa zawkte chu unofficial-a support chauh a la ni.
Khawvel pum huapa inthlak danglamna
- Flexbox hi default-in a enable a ni. A tlangpuiin hei hian kan component hrang hranga float leh a tam zawk atanga inthlak danglamna a kawk a ni.
- Kan source CSS files te tan Less atanga Sass ah kan thlak a.
px
Kan primary CSS unit atan kan thlak a, mahse device viewportrem
-te chu type size-in a nghawng loh avangin media query leh grid behavior atan pixels hi hman a la ni tho.- Khawvel pum huapa font-size
14px
chu16px
. - Grid tiers siam tharin option pangana (device tenau zawkte address leh a hnuaia address) dah belh a, chu class atang chuan infix chu
576px
paih chhuah a ni.-xs
Entirnan:.col-6.col-sm-4.col-md-3
. - Optional theme hranpa chu SCSS variable hmangin configurable option hmangin a thlak a (eg,
$enable-gradients: true
). - Build system overhauled a ni a, Grunt ai chuan npm script series hman a ni. Script zawng zawng en la
package.json
, a nih loh leh kan project readme chu tualchhung hmasawnna mamawhna atan en rawh. - Bootstrap hi non-responsive taka hman a ni tawh lo.
- Setup documentation zau zawk leh customized builds duh zawngin online Customizer chu a thlak a.
- CSS property-value pair hman tlanglawn tak tak leh margin/padding spacing shortcut te tan utility class thar tam tak dah belh a ni.
Grid system hmanga siam a ni
- Flexbox ah sawn a ni.
- Grid mixins leh predefined class-a flexbox support a dah belh bawk.
- Flexbox-a tel ve angin, vertical leh horizontal alignment class-te thlawpna a tel bawk.
- Grid class hming update leh grid tier thar siam a ni.
- Granular control tam zawk neih theih nan a
sm
hnuaia grid tier thar dah belh a ni.768px
Tunah chuanxs
,sm
,md
,lg
, lehxl
. Hei hian tier tinte chu level khata bumped up an nih tawh tihna a ni bawk (chuvangin.col-md-6
v3-ah chuan tunah.col-lg-6
chuan v4-ah a awm tawh). xs
grid class te chu infix hianmin-width: 0
set pixel value ni lovin style an apply tan tih dik zawka lantir a ngai lo turin siam danglam a ni. A aiah.col-xs-6
, tunah chuan.col-6
. Grid tier dang zawng zawng hian infix (eg,sm
).
- Granular control tam zawk neih theih nan a
- Grid size, mixin, leh variable te update a ni.
- Tunah chuan grid gutters hian Sass map an nei tawh a, chuvang chuan breakpoint tinah gutter width bik i tarlang thei tawh ang.
- Updated grid mixins hmanga
make-col-ready
prep mixin leh amake-col
set theflex
lehmax-width
individual column sizing atan. - Grid system media query breakpoint leh container width thlak danglam a ni a, grid tier thar account tur leh column te chu
12
an max width-a insem theih vek a nih theih nan. - Tunah chuan grid breakpoint leh container width te chu variable hrang hrang kutdawh tlemte hmang lovin Sass maps (
$grid-breakpoints
leh ) hmangin kan handle tawh a ni.$container-max-widths
Hengte hian@screen-*
variable te chu a thlak vek a, grid tiers te chu fully customize theihna a siamsak bawk. - Media zawhna pawh a danglam tawh bawk. Kan media query declaration te chu value inang veka kan tih nawn fo ai chuan tunah chuan
@include media-breakpoint-up/down/only
. Tunah chuan ziak ai chuan@media (min-width: @screen-sm-min) { ... }
, i ziak thei tawh ang@include media-breakpoint-up(sm) { ... }
.
Component hrang hrangte
- Panel, thumbnail, leh well -te chu thil zawng zawng huapzo component thar, card .
- Glyphicons icon font chu a thlak a. Icon i mamawh chuan duhthlan tur thenkhat chu:
- Glyphicons upstream version a awm bawk
- Octicons te an ni
- Font A ropui hle mai
- A dang list chu Extend page-ah en rawh . Thurawn dang i nei em? Issue emaw PR emaw hawng la.
- Affix jQuery plugin chu a thlak ta a.
- Chu ai chuan hman kan rawt
position: sticky
zawk. A chipchiar zawk leh polyfill rawtna bikte chu HTML5 Please entry en rawh . Thurawn pakhat chu a@supports
kalpui dan tur dan hman hi a ni (eg,@supports (position: sticky) { ... }
) . - Affix hmangin additional, non-
position
styles i apply a nih chuan, polyfills te hian i use case chu a support lo mai thei. Chutiang hmanna atana duhthlan tur pakhat chu third-party ScrollPos-Styler library hi a ni.
- Chu ai chuan hman kan rawt
- A bul berah chuan buttons tlemte customized a nih avangin pager component chu a thlak a.
- Component zawng zawng deuhthaw chu over-specific children selector hmang lovin un-nested class selector tam zawk hman turin refactored a ni.
Component hmangin
He list hian v3.xx leh v4.0.0 inkara component hrang hranga key changes te a tarlang a.
Reboot leh rawh
Bootstrap 4-a thil thar chu Reboot , stylesheet thar a ni a, Normalize-ah kan siam a, kan ngaihdan engemaw zat reset styles hmangin kan siam a ni. He file-a selector langte hian element chauh an hmang a—hetah hian class a awm lo. Hei hian kan reset styles te chu kan component styles atanga isolate a, modular zawka kalpui theih nan. Hemi huam chhunga reset pawimawh tak tak thenkhat chu box-sizing: border-box
inthlak danglamna, element tam takah unit atanga em
unit rem
-a kal te, link style te, leh form element reset tam tak te hi a ni.
Typography hmanga ziah a ni
.text-
Utility zawng zawng_utilities.scss
file ah a sawn vek.- A styles
.page-header
te chu utilities hmanga apply theih a nih avangin drop a ni. .dl-horizontal
tihbo a ni tawh. Chu ai chuan.row
on hmang la, a leh naupangte<dl>
chungah grid column class (or mixins) hmang rawh.<dt>
<dd>
- Blockquotes design thar, an style
<blockquote>
element atanga class pakhata sawn,.blockquote
..blockquote-reverse
Text utilities atan modifier chu a thlak ta. .list-inline
tunah chuan a fate list item-te chu.list-inline-item
an chungah class thar hman a ngai ta a ni.
Hmanlai thil hlui te
- A hming thlak
.img-responsive
a.img-fluid
ni. - A hming thlak
.img-rounded
a ni.rounded
- A hming thlak
.img-circle
a ni.rounded-circle
Table te pawh a awm
- Selector instance zawng zawng deuhthaw chu
>
paih vek a ni tawh a, chu chu nested table te chuan an nu leh pa hnen atangin style an inherit nghal vek dawn tihna a ni. Hei hian kan selector leh kan customization awm thei te chu nasa takin a ti awlsam a ni. - Consistency atan hming
.table-condensed
thlak.table-sm
a ni. .table-inverse
Option thar a rawn dah belh bawk .- Table header siam danglam thei te dah belh a ni:
.thead-default
leh.thead-inverse
. - Contextual class hming thlak a ni a,
.table-
-prefix a awm. Chuvangin.active
,.success
,.warning
,.danger
leh.info
to.table-active
,.table-success
,.table-warning
,.table-danger
leh.table-info
.
Form hrang hrang
- Moved element chu
_reboot.scss
file ah a reset leh thin. - A hming thlak
.control-label
a.col-form-label
ni. - Renamed
.input-lg
leh.input-sm
to.form-control-lg
leh.form-control-sm
, a hnuaia mi ang hian. - Simplicity
.form-group-*
vangin class a drop a..form-control-*
Tunah chuan class hmang zawk rawh. .help-block
A thlak a,.form-text
for block-level help text hmangin a thlak leh a. Inline help text leh flexible option dang atan chuan utility class ang chi hmang la.text-muted
.- A tlak
.radio-inline
leh.checkbox-inline
a . - Consolidated
.checkbox
leh.radio
into leh class.form-check
hrang hrang te..form-check-*
- Horizontal form te chu siamthat a ni:
.form-horizontal
Class requirement chu a thlak ta..form-group
.row
via mixin atanga styles a hmang tawh lo va , chuvangin.row
tunah chuan horizontal grid layouts atan a mamawh tawh (eg,<div class="form-group row">
)..col-form-label
Vertically center label-ah class thar dah belh a ni a,.form-control
s..form-row
Grid class te nen compact form layout atan thar dah belh (swap your.row
for a.form-row
and go).
- Custom forms support (checkbox, radio, selects, leh file input te tan) a dah belh bawk.
.has-error
,.has-warning
, leh class te chu CSS’s leh pseudo-classes.has-success
hmanga HTML5 form validation hmanga thlak a ni.:invalid
:valid
- A hming thlak
.form-control-static
a.form-control-plaintext
ni.
Buttons te a awm
- A hming thlak
.btn-default
a.btn-secondary
ni. .btn-xs
Class chu a drop vek a, v3.btn-sm
aiin proportional takin a tlem zawk hle.- jQuery plugin a stateful button feature chu a tla thla ta a ni .
button.js
Hei hian$().button(string)
leh$().button('reset')
methods te pawh a huam tel a ni. Chu ai chuan custom JavaScript tlemte hmang turin kan fuih a, chu chuan i duh ang taka awm theihna hlawkna a nei ang.- Plugin feature dangte (button checkbox, button radio, single-toggle button) te chu v4 ah hian an la awm reng tih hre reng ang che.
- Buttons'
[disabled]
chu:disabled
IE9+ support angin thlak rawh:disabled
. Mahsefieldset[disabled]
a la ngai reng a ni a chhan chu native disabled fieldsets te hi IE11 ah hian an la buggy reng a ni.
Button group a ni
- Component chu flexbox hmangin ziak leh rawh.
- A chhuak
.btn-group-justified
ta . A thlakna<div class="btn-group d-flex" role="group"></div>
atan elements vel wrapper atan i hmang thei ang.w-100
. - Class
.btn-group-xs
chu a chhuah vek a, removal of.btn-xs
. - Button toolbar-a button group hrang hrangte inkara explicit spacing tihbo; tunah hian margin utilities hmang rawh.
- Component dang nena hman tur documentation siam that.
Dropdown te pawh a awm
- Component zawng zawng, modifier, etc. zawng zawng tan parent selector atanga singular class-a thlak a ni.
- Dropdown menu-a chunglam emaw hnuailam emaw lam hawi arrow dah tawh loh tur dropdown style awlsam zawk siam.
<div>
Tunah chuan s emaw s emaw hmangin dropdown siam theih a ni<ul>
tawh.- Dropdown style leh markup siam thar lehin dropdown item awlsam tak, built-in support
<a>
leh<button>
based dropdown te a pe thei ang. - A hming thlak
.divider
a.dropdown-divider
ni. - Tunah chuan dropdown items a ngai tawh
.dropdown-item
. - Dropdown toggles hian explicit a mamawh tawh lo
<span class="caret"></span>
; hei hi tunah chuan CSS's::after
on hmangin automatic-in pek a ni tawh.dropdown-toggle
.
Grid system hmanga siam a ni
576px
Grid breakpoint thar as tih belh a ni asm
, chu chu tunah chuan total tier panga (xs
,sm
,md
,lg
, lehxl
) a awm tawh tihna a ni.- Grid class awlsam zawk atan responsive grid modifier class te chu
.col-{breakpoint}-{modifier}-{size}
to atanga hming thlak a ni..{modifier}-{breakpoint}-{size}
- Flexbox hmanga
order
class tharte tan push leh pull modifier class te chu a tla thla. Entirnan,.col-8.push-4
leh tih ai.col-4.pull-8
chuan.col-8.order-2
leh.col-4.order-1
. - Grid system leh component hrang hrangte tana flexbox utility class te dah belh a ni.
Group hrang hrangte list rawh
- Component chu flexbox hmangin ziak leh rawh.
- List group item hrang hrangte link leh button version styling atan
a.list-group-item
explicit class, , hmanga thlak a ni..list-group-item-action
.list-group-flush
Card nena hman tur class dah belh a ni.
Modal a ni
- Component chu flexbox hmangin ziak leh rawh.
- Flexbox lama kan kal dan ngaihtuah chuan float kan hman tawh loh avangin header-a dismiss icons alignment chu a chhe mai thei. Floated content hi a hmasa ber a, mahse flexbox nen chuan chutiang chu a ni tawh lo. I dismiss icons te chu modal titles hnua lo kal tur update la, siamthat tur.
- Option
remote
(external content chu automatic-a load leh modal-a inject theihna tur) leh a inmilloaded.bs.modal
event chu paih chhuah a ni. Chu ai chuan client-side templating emaw data binding framework emaw hmang la, jQuery.load chu nangmah ngeiin koh kan rawt zawk a ni.
Navs a ni
- Component chu flexbox hmangin ziak leh rawh.
>
Un-nested class kaltlangin simpler styling atan selector zawng zawng deuhthaw a thlak vek .- HTML-specific selector ang chi te ai chuan s, s, leh s
.nav > li > a
te tan class hrang hrang kan hmang thin . Hei hian i HTML chu a ti awlsam zawk a, chutih rualin extensibility tihpun a rawn keng tel bawk..nav
.nav-item
.nav-link
Navbar a ni
Navbar hi flexbox-ah ziah thar vek a ni a, alignment, responsiveness, leh customization support ṭha zawk a awm bawk.
- Tunah chuan navbar collapse na tur hmun i thlan na hmun required
.navbar
hmangin class-ah responsive navbar behaviors te chu apply a ni tawh . Tun hma chuan hei hi Less variable modification a ni a, recompiling a ngai a ni..navbar-expand-{breakpoint}
.navbar-default
is now.navbar-light
, mahse.navbar-dark
a la awm reng tho. Chung zinga pakhat chu navbar tinah a ngai a ni. Mahse, heng class-te hianbackground-color
s an set tawh lo va; chu ai chuan an bulpui berah chuancolor
.- Tunah chuan Navbars hian background declaration chi khat emaw a mamawh tawh a ni. Kan background utilities (
.bg-*
) atang hian thlang la, a chunga light/inverse class te hmangin i duh ang set la, mad customization atan . - Flexbox styles pek a nih chuan navbars te hian flexbox utilities hmangin alignment option awlsam tak an hmang thei tawh ang.
.navbar-toggle
a ni tawh.navbar-toggler
a, style hrang hrang leh inner markup (<span>
s pathum aia tam lo) a nei tawh bawk..navbar-form
Class chu a drop vek a . A ngai tawh lo; chu ai chuan.form-inline
a tul angin margin utilities hmang la, hmang mai rawh.- Navbar-ah hian a tel tawh lo
margin-bottom
emawborder-radius
, default-in emaw a awm tawh lo. A tul angin utilities hmang thin ang che. - Navbars awmna entir zawng zawng chu markup thar dah turin update vek a ni.
Pagination tih a ni
- Component chu flexbox hmangin ziak leh rawh.
- Tunah chuan s thlahte chungah hian explicit class (
.page-item
, ) a ngai tawh a ni.page-link
.pagination
.pager
Component chu customized outline buttons aia tlem a nih avangin a drop vek a .
Chhangphut chi hrang hrang
- Tunah chuan s
.breadcrumb-item
thlahte chungah class chiang tak, , neih a ngai ta a ni.breadcrumb
Label leh badge te a awm bawk
- Consolidated
.label
leh element.badge
atanga disambiguate leh a<label>
kaihhnawih components te awlsam zawka siam. .badge-pill
Rounded “pill” look atan modifier atan dah belh a ni.- Badge hi list group leh component dangteah automatic-in a float tawh lo. Chumi atan chuan utility class neih a ngai tawh a ni.
.badge-default
.badge-secondary
hmun danga hman thin component modifier class te nena inmil turin paih a ni a, dah belh a ni bawk.
Panel, thumbnail, leh tuikhuah te a awm bawk
Card component thar atan chuan a tla vek.
Panel te pawh a awm
.panel
to.card
, tunah chuan flexbox hmanga siam a ni tawh..panel-default
lakchhuah a ni a, thlak tur a awm lo..panel-group
lakchhuah a ni a, thlak tur a awm lo..card-group
a thlaktu a ni lo va, a danglam a ni..panel-heading
ah.card-header
.panel-title
to.card-title
. I duh ang look a zirin heading element emaw class emaw (eg<h3>
,.h3
) emaw bold element emaw class (eg<strong>
,<b>
, ) emaw pawh i hmang thei bawk.font-weight-bold
. Hriat tur chu.card-title
, chutiang bawka hming vuah mah se,.panel-title
..panel-body
ah.card-body
.panel-footer
ah.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, leh kan Sass map atanga , , leh utilities siamte.panel-danger
tan drop a ni tawh bawk..bg-
.text-
.border
$theme-colors
Hmasawn
- Contextual
.progress-bar-*
class te chu.bg-*
utilities hmanga thlak a ni. Entirnan,class="progress-bar progress-bar-danger"
a lo ni ta aclass="progress-bar bg-danger"
ni . - Animated
.active
progress bar atan chuan.progress-bar-animated
.
Carousel hmanga siam a ni
- Design leh styling awlsam zawka siam turin component pumpui overhauled a ni. I override theih tur style tlem zawk, indicator thar, leh icon thar kan nei tlem zawk.
- CSS zawng zawng chu un-nested leh hming thlak a ni tawh a, class tin chu prefix-a dah a nih theih nan a enfiah vek a
.carousel-
ni.- Carousel thil atan chuan
.next
, ,.prev
,.left
, leh.right
tunah chuan.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, leh.carousel-item-right
. .item
a ni bawk tunah chuan.carousel-item
.- Prev/next controls tan chuan,
.carousel-control.right
and.carousel-control.left
are now.carousel-control-next
and.carousel-control-prev
, chu chu base class bik an mamawh tawh lo tihna a ni.
- Carousel thil atan chuan
- Responsive styling zawng zawng paih vek a, utilities (eg, viewport thenkhata caption lantir) leh a tul angin custom style te deferring vek a ni.
- Carousel thila image awmte tan image override tihbo a ni a, utilities-ah deferred a ni.
- Carousel entirnan tweak a, markup leh style thar te pawh dah tel a ni.
Table te pawh a awm
- Styled nested tables te support tihbo a ni. Tunah chuan table style zawng zawng chu v4 ah inherited a ni tawh a, selector awlsam zawk atan.
- Inverse table variant a rawn dah belh bawk.
Utilities te pawh a awm
- Display, thup leh thil dang tam tak:
- Display utilities te chu chhanna pe thei tura siam (eg,
.d-none
lehd-{sm,md,lg,xl}-none
). - Display utility
.hidden-*
thar atan utility tam zawk a thlak . Entirnan, , tih ai chuan . Display utility naming scheme hmang turin utilities hming thlak a ni. He page-a Responsive utilities section hnuaiah hian thu belhchian dawl zawk hmuh theih a ni..hidden-sm-up
.d-sm-none
.hidden-print
.float-{sm,md,lg,xl}-{left,right,none}
Responsive floats tan class dah belh leh paih chhuah.pull-left
leh.pull-right
redundant to an nih avangin.float-left
leh.float-right
.
- Display utilities te chu chhanna pe thei tura siam (eg,
- Lampang:
- Kan text alignment class hrang hrangah responsive variation kan dah belh a
.text-{sm,md,lg,xl}-{left,center,right}
.
- Kan text alignment class hrang hrangah responsive variation kan dah belh a
- Alignment leh a inkar hlat zawng: 1.1.
- Side zawng zawng tan responsive margin leh padding utility thar dah belh a ni a, vertical leh horizontal shorthand te pawh a awm bawk.
- Flexbox utilities boatload a awm belh bawk .
- Class
.center-block
thar atan a tla thla.mx-auto
.
- Clearfix update a ni a, browser version hlui zawk support a awm loh nan.
Vendor hmahruaitu mixins te
Bootstrap 3-a vendor prefix mixins, v3.2.0-a hman tawh loh kha Bootstrap 4-ah khan paih a ni tawh a, Autoprefixer kan hman avangin a ngai tawh lo.
A hnuaia mixin te hi paih chhuah a ni : animation
, animation-delay
, animation-direction
, animation-duration
, animation-fill-mode
, animation-iteration-count
, animation-name
, animation-timing-function
, backface-visibility
, box-sizing
, content-columns
, hyphens
, opacity
, perspective
, perspective-origin
, rotate
, rotateX
, rotateY
, scale
, scaleX
, scaleY
, skew
, transform-origin
, transition-delay
,transition-duration
transition-property
transition-timing-function
transition-transform
translate
translate3d
user-select
Documentation siam a ni
Kan documentation hian across the board pawhin upgrade a dawng bawk. Hetah hian low down chu a awm:
- Jekyll kan la hmang reng a, mahse mix-ah hian plugins kan nei a:
bugify.rb
kan browser bugs page -a entry awmte chu uluk taka list chhuah nan hman a ni.example.rb
chu defaulthighlight.rb
plugin-a custom fork a ni a, example-code handling awlsam zawk a siamsak thei a ni.callout.rb
chu chutiang custom fork ang chiah chu a ni a, mahse kan special docs callouts atan a siam a ni.- jekyll-toc hi kan table of contents siam nan hman a ni.
- Docs content zawng zawng chu Markdown (HTML ai chuan) hmangin edit awlsam zawk nan ziah thar vek a ni.
- Page hrang hrangte chu thupui awlsam zawk leh hnaih awlsam zawka awm theihna turin siam thar leh a ni.
- Bootstrap-a variable, mixins leh thil dang tam tak hmang tangkai turin CSS pangngai atanga SCSS-ah kan kal a.
Utilities chhanna pe thei
Variable zawng zawng @screen-
chu v4.0.0 ah hian paih vek a ni tawh. media-breakpoint-up()
, media-breakpoint-down()
, emaw media-breakpoint-only()
Sass mixins emaw $grid-breakpoints
Sass map emaw hmang zawk rawh .
Kan responsive utility class te hi a tam zawk chu explicit display
utilities duh zawngin an paih chhuak a ni.
- The
.hidden
and class te hi jQuery's leh methods te.show
nen an inhnial avangin paih a ni. Chu ai chuan attribute chu toggling tum la, a nih loh leh inline styles ang chi leh .$(...).hide()
$(...).show()
[hidden]
style="display: none;"
style="display: block;"
- Class zawng zawng
.hidden-
tihbo vek a ni tawh a, print utilities hming thlak tawhte tih loh chu.- v3 atanga lakchhuah a ni:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
- v4 alphas atanga lakchhuah a ni:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- v3 atanga lakchhuah a ni:
- Print utility te chu
.hidden-
or hmangin an tan tawh lo va.visible-
,.d-print-
.- Hming hlui:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
, ..hidden-print
- Class thar:
.d-print-block
,.d-print-inline
,.d-print-inline-block
, ..d-print-none
- Hming hlui:
Explicit class hman ai chuan .visible-*
element pakhat chu chutiang screen size-a thup loh mai mai hmangin hmuh theih turin i siam a ni. .d-*-none
Class pakhat leh class pakhat .d-*-block
chu screen size interval pek tawhah chauh element pakhat entir turin i combine thei (eg .d-none.d-md-block.d-xl-none
device chu medium leh large device-ah chauh element a entir).
v4-a grid breakpoint-a inthlak danglamna awmte hian result inang neih theih nan breakpoint pakhat lian zawka kal a ngai dawn tihna a ni tih hre reng ang che. Responsive utility class tharte hian element pakhat visibility chu viewport size hrang hrang contiguous range pakhat anga sawi theih lohna case awm tlem zawkte chu pawm an tum lo va chutiang hunah chuan custom CSS i hman a ngai zawk ang.