Xs col bootstrap: Grid system · Bootstrap

React Bootstrap — Grid system Система сетки Bootstrap использует ряд контейнеров, строк и столбцов для выравнивания содержимого.

Система сетки Bootstrap использует ряд контейнеров, строк и столбцов для компоновки и выравнивания содержимого. Он построен с помощью flexbox и полностью адаптивен. Ниже приведен пример и подробный обзор того, как сетка собирается вместе.

Новичок или незнаком с flexbox? Прочитайте это руководство по флексбоксу CSS Tricks для получения справочной информации, терминологии, рекомендаций и фрагментов кода.

Container

Контейнеры предоставляют средства для центрирования и горизонтального размещения содержимого вашего сайта. Используйте Container для адаптивной ширины в пикселях.

<Container>
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

Fluid Container

Вы можете использовать <Container fluid /> для ширины: 100% для всех размеров области просмотра и устройств.

<Container fluid>
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

Вы можете установить точки останова для fluid опоры. Установка его на точку останова ( sm, md, lg, xl ) установит Container как текучий до указанной точки останова.

<Container fluid="md">
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

Auto-layout columns

Если ширина столбца не указана, компонент Col будет отображать столбцы одинаковой ширины.

<Container>
  <Row>
    <Col>1 of 2</Col>
    <Col>2 of 2</Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col>2 of 3</Col>
    <Col>3 of 3</Col>
  </Row>
</Container>

Установка ширины одной колонки

Автоматическое расположение колонок сетки флексбокс также означает,что вы можете установить ширину одного столбца и автоматически изменить размер соседних столбцов вокруг него. Вы можете использовать предопределенные классы сетки (как показано ниже),микшины сетки или ширину полей.Обратите внимание,что другие колонки будут изменять размер независимо от ширины центральной колонки.

<Container>
  <Row>
    <Col>1 of 3</Col>
    <Col xs={6}>2 of 3 (wider)</Col>
    <Col>3 of 3</Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col xs={5}>2 of 3 (wider)</Col>
    <Col>3 of 3</Col>
  </Row>
</Container>

Содержание переменной ширины

Установите значение столбца (для любого размера точки останова) на "auto" чтобы размер столбцов был основан на естественной ширине их содержимого.

<Container>
  <Row className="justify-content-md-center">
    <Col xs lg="2">
      1 of 3
    </Col>
    <Col md="auto">Variable width content</Col>
    <Col xs lg="2">
      3 of 3
    </Col>
  </Row>
  <Row>
    <Col>1 of 3</Col>
    <Col md="auto">Variable width content</Col>
    <Col xs lg="2">
      3 of 3
    </Col>
  </Row>
</Container>

Responsive grids

Col позволяет задать ширину столбцов для всех размеров 5 точек останова (хз, см, мкр, Lg и XL).

<Container>
  <Row>
    <Col sm={8}>sm=8</Col>
    <Col sm={4}>sm=4</Col>
  </Row>
  <Row>
    <Col sm>sm=true</Col>
    <Col sm>sm=true</Col>
    <Col sm>sm=true</Col>
  </Row>
</Container>

Вы также можете смешивать и сочетать точки разрыва для создания различных сеток в зависимости от размера экрана.

<Container>
  {/* Stack the columns on mobile by making one full-width and the other half-width */}
  <Row>
    <Col xs={12} md={8}>
      xs=12 md=8
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
  </Row>
  {/* Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop */}
  <Row>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
    <Col xs={6} md={4}>
      xs=6 md=4
    </Col>
  </Row>
  {/* Columns are always 50% wide, on mobile and desktop */}
  <Row>
    <Col xs={6}>xs=6</Col>
    <Col xs={6}>xs=6</Col>
  </Row>
</Container>

В Col точки останова реквизит также имеет более сложный object , форма пропеллера: {span: number, order: number, offset: number} для задания смещения и упорядочения эффектов.

Вы можете использовать свойство order для управления визуальным порядком вашего контента.

<Container>
  <Row>
    <Col xs>First, but unordered</Col>
    <Col xs={{ order: 12 }}>Second, but last</Col>
    <Col xs={{ order: 1 }}>Third, but second</Col>
  </Row>
</Container>

Свойство order также поддерживает first ( order: -1 ) и last ( order: $columns+1 ).

<Container>
  <Row>
    <Col xs={{ order: 'last' }}>First, but last</Col>
    <Col xs>Second, but unordered</Col>
    <Col xs={{ order: 'first' }}>Third, but first</Col>
  </Row>
</Container>

Для смещения столбцов сетки вы можете установить значение offset или для более общего макета используйте утилиты класса маржи.

<Container>
  <Row>
    <Col md={4}>md=4</Col>
    <Col md={{ span: 4, offset: 4 }}>{`md={{ span: 4, offset: 4 }}`}</Col>
  </Row>
  <Row>
    <Col md={{ span: 3, offset: 3 }}>{`md={{ span: 3, offset: 3 }}`}</Col>
    <Col md={{ span: 3, offset: 3 }}>{`md={{ span: 3, offset: 3 }}`}</Col>
  </Row>
  <Row>
    <Col md={{ span: 6, offset: 3 }}>{`md={{ span: 6, offset: 3 }}`}</Col>
  </Row>
</Container>

Установка ширины столбцов в Строке

Row позволяет задать ширину столбцов для всех размеров 5 точек останова (хз, см, мкр, Lg и XL). Для каждой точки останова вы можете указать количество столбцов, которые поместятся рядом друг с другом.

<Container>
  <Row xs={2} md={4} lg={6}>
    <Col>1 of 2</Col>
    <Col>2 of 2</Col>
  </Row>
  <Row xs={1} md={2}>
    <Col>1 of 3</Col>
    <Col>2 of 3</Col>
    <Col>3 of 3</Col>
  </Row>
</Container>

Обратите внимание , что

<Container>
  <Row md={4}>
    <Col>1 of 3</Col>
    <Col xs={6}>2 of 3</Col>
    <Col>3 of 3</Col>
  </Row>
</Container>

API

Container

import Container from 'react-bootstrap/Container' Скопируйте код импорта для компонента «Контейнер»

Row

import Row from 'react-bootstrap/Row' Скопировать код импорта для компонента Row

Col

import Col from 'react-bootstrap/Col' Скопировать код импорта для компонента Col

• Оформление и настройка стилей

• Why React-Bootstrap?

• Media objects

• Migrating to v1

• 1
• …
• 39
• 40
• 41
• 42
• 43
• …
• 46
• Next

Какова функция класса сетки xs в Bootstrap?

Улучшить статью

Сохранить статью

• Последнее обновление: 28 фев, 2022

Улучшить статью

Сохранить статью

Bootstrap — это популярная платформа для разработки мобильных веб-сайтов. Эта структура имеет множество классов, которые можно использовать для создания адаптивного веб-сайта с использованием подхода, ориентированного на мобильные устройства. Этот фреймворк имеет систему сеток, которая позволяет нам генерировать сетки подряд при создании веб-сайта. Мы можем создать 12 столбцов подряд и объединить их, чтобы получить более широкий столбец.

Чтобы узнать о сетке Bootstrap, нажмите здесь. В статье основное внимание уделяется классу сетки Bootstrap-3 col-xs.

Классы сетки: Система сетки bootstrap-3 имеет четыре класса, которые перечислены ниже:

1. col-xs  менее 768 пикселей (<768 пикселей).
2. col-sm Этот класс используется для устройств с небольшим размером экрана, таких как таблицы, ширина которых больше 768px и меньше 992px (≥768px и <992px).
3. col-md : Этот класс используется для устройств со средним размером экрана, таких как настольные компьютеры, ширина которых больше 992 пикселей и меньше 1200 пикселей (≥992 пикселей и <1200 пикселей).
4. col-lg : Этот класс используется для устройств с большими размерами экрана, таких как рабочий стол с большим экраном, ширина которого превышает 1200 пикселей ( ≥1200 пикселей ).

Компоненты системы сетки: Некоторые компоненты системы сетки:

1. container: Это класс Bootstrap, который используется для создания контейнера для размещения содержимого веб-сайта в формате сетки.
2. row: Это класс Bootstrap, который позволяет нам построить строку в контейнере, чтобы оборачивать столбец в строку.
3. столбец: Этот класс Bootstrap позволяет нам создавать столбец в строке, и мы можем использовать его для создания до 12 столбцов в строке или объединять их для создания более широких столбцов.

.xs-grid class: Сеточная система bootstrap-3 предоставляет этот класс, который позволяет нам разрабатывать пользовательский интерфейс для устройств с размером экрана менее 768 пикселей.

Синтаксис: 

 
Пример для класса xs-grid. 
 

• col используется для создания столбца в строке
• xs указывает, что этот класс применяется только для очень маленьких экранов
• k обозначает столбцы, используемые из 12 столбцов строки.

Свойства:

• Этот класс подходит для экранов шириной менее 768 пикселей (<768 пикселей).
• Чтобы использовать этот класс, мы должны включить в класс префикс «col-xs-».
• Ширина контейнера может быть нулевой (авто).
• Поведение сетки этого класса всегда горизонтальное.

Пример 1: Использование col-xs-4

Следующий код демонстрирует использование col-xs-4, который занимает 1/3 экрана, когда ширина экрана меньше 768 пикселей.

HTML

Вывод:

Вывод представляет собой строку, разделенную на 3 части с помощью col-xs-4 с шириной экрана 702px < 768px

Пример 2: Использование следующего кода col-xs-2

3

демонстрирует использование col-xs-6, который занимает 50% экрана, когда ширина экрана меньше 768 пикселей.

HTML

Выход:

Выход представляют строку, разделенную на 2 частя с использованием SOL-XS-6 с шириной экрана 702PX <768PX

в сапоге-4 и сапогах-4 и сапогах-4 и сапогах-4 и сапогапах-4 и шириной экрана. класс col-xs был удален и заменен на col. Например:

• col-xs-5 в Bootstrap-3.
• col-5 в Bootstrap-4 или -5.

Используемый веб-браузер: 

• Chrome

Ссылка: Щелкните здесь, чтобы узнать больше о Bootstrap.

 
  <дел>
    <дел>
      <дел>
       
Калькулятор FFC