Bootstrap торының мысалдары

Bootstrap тор жүйесіндегі құрылыспен танысу үшін негізгі тор макеттері.

Үш бірдей баған

Жұмыс үстелінен бастап және үлкен жұмыс үстеліне масштабталатын үш бірдей ені бар бағандарды алыңыз . Мобильді құрылғыларда, планшеттерде және төменде бағандар автоматты түрде жинақталады.

.col-md-4
.col-md-4
.col-md-4

Үш тең ​​емес баған

Жұмыс үстелінен бастап және әртүрлі ені бар үлкен жұмыс үстелдеріне масштабталатын үш баған алыңыз . Есіңізде болсын, тор бағандары бір көлденең блок үшін он екіге дейін қосылуы керек. Бұдан да көп, және бағандар қарау терезесіне қарамастан жинақталады.

.col-md-3
.col-md-6
.col-md-3

Екі баған

Жұмыс үстелінен бастап және үлкен жұмыс үстеліне масштабталатын екі баған алыңыз .

.col-md-8
.col-md-4

Толық ені, бір баған

Толық ен элементтері үшін тор сыныптары қажет емес.

Екі кірістірілген бағандары бар екі баған

Құжаттамаға сәйкес, кірістіру оңай — бар бағанға бағандар қатарын қою жеткілікті. Бұл сізге жұмыс үстелінен басталып, үлкен жұмыс үстеліне масштабталатын екі баған береді , үлкенірек бағанның ішінде тағы екі (тең ені) бар.

Мобильді құрылғы өлшемдері, планшеттер және төменірек, бұл бағандар мен олардың кірістірілген бағандары жинақталады.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Аралас: мобильді және жұмыс үстелі

Bootstrap 3 тор жүйесінде төрт деңгейлі сыныптар бар: xs (телефондар), sm (планшеттер), md (жұмыс үстелдері) және lg (үлкен жұмыс үстелдері). Динамикалық және икемді орналасуларды жасау үшін осы сыныптардың кез келген дерлік комбинациясын пайдалануға болады.

Сыныптардың әрбір деңгейі ұлғаяды, яғни xs және sm үшін бірдей ендерді орнатуды жоспарласаңыз, тек 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

Аралас: ұялы телефон, планшет және жұмыс үстелі

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

Бағандарды тазалау

Біркелкі емес мазмұнмен ыңғайсыз ораудың алдын алу үшін арнайы тоқтау нүктелеріндегі қалтқыларды тазалаңыз .

.col-xs-6 .col-sm-3 Көру портының
өлшемін өзгертіңіз немесе мысал үшін оны телефоныңызда тексеріңіз.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Офсет, итеру және тарту қалпына келтіру

Арнайы тоқтау нүктелерінде ығысуларды, итеруді және тартуларды қалпына келтіріңіз.

.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-offset-0