Bootstrap akoj apẹẹrẹ

Awọn ipilẹ akoj ipilẹ lati jẹ ki o faramọ pẹlu kikọ laarin eto akoj Bootstrap.

Mẹta dogba ọwọn

Gba awọn ọwọn iwọn dogba mẹta ti o bẹrẹ ni awọn kọnputa agbeka ati iwọn si awọn kọǹpútà alágbèéká nla . Lori awọn ẹrọ alagbeka, awọn tabulẹti ati ni isalẹ, awọn ọwọn yoo wa ni akopọ laifọwọyi.

.kol-md-4
.kol-md-4
.kol-md-4

Awọn ọwọn ti ko dọgba mẹta

Gba awọn ọwọn mẹta ti o bẹrẹ ni awọn tabili itẹwe ati iwọn si awọn tabili itẹwe nla ti ọpọlọpọ awọn iwọn. Ranti, awọn ọwọn akoj yẹ ki o ṣafikun to mejila fun bulọọki petele kan. Diẹ sii ju iyẹn lọ, ati awọn ọwọn bẹrẹ akopọ laibikita oju-ọna wiwo.

.kol-md-3
.kol-md-6
.kol-md-3

Awọn ọwọn meji

Gba awọn ọwọn meji ti o bẹrẹ ni awọn kọǹpútà alágbèéká ati iwọn si awọn tabili itẹwe nla .

.kol-md-8
.kol-md-4

Iwọn ni kikun, ọwọn ẹyọkan

Ko si awọn kilasi akoj jẹ pataki fun awọn eroja iwọn ni kikun.

Awọn ọwọn meji pẹlu awọn ọwọn itẹ-ẹiyẹ meji

Fun iwe-ipamọ naa, itẹ-ẹiyẹ jẹ irọrun — kan fi awọn ila ti awọn ọwọn sinu iwe ti o wa tẹlẹ. Eyi yoo fun ọ ni awọn ọwọn meji ti o bẹrẹ ni awọn tabili itẹwe ati iwọn si awọn tabili itẹwe nla , pẹlu meji miiran (awọn iwọn dogba) laarin iwe nla.

Ni awọn iwọn ẹrọ alagbeka, awọn tabulẹti ati isalẹ, awọn ọwọn wọnyi ati awọn ọwọn itẹ-ẹiyẹ wọn yoo tojọ.

.kol-md-8
.kol-md-6
.kol-md-6
.kol-md-4

Adalu: mobile ati tabili

Eto grid Bootstrap 3 ni awọn ipele mẹrin ti awọn kilasi: xs (awọn foonu), sm (awọn tabulẹti), md (awọn tabili itẹwe), ati lg (awọn tabili itẹwe nla). O le lo fere eyikeyi akojọpọ awọn kilasi wọnyi lati ṣẹda agbara diẹ sii ati awọn ipalemo rọ.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mixed: mobile, tablet, and desktop

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Column clearing

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific breakpoints.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-aiṣedeede-0