Similar presentations:
Bootstrap
1.
Проектирование и разработка веб-приложений. Лекция 6.Bootstrap
Start. Layout. Формы. Компоненты. Применение.
Москва, 2026
2.
Повестка дняИспользование
Структура
Параметры
Компоненты
Форма
Задание
3.
BootstrapReact-Bootstrap - это набор готовых компонентов
Bootstrap с использованием React.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALE
wIH" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.
js" integrity="sha384YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>
3
Как использовать
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/
umd/popper.min.js" integrity="sha384I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc
2pM8ODewa9r" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/boots
trap.min.js" integrity="sha3840pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYf
Zo0T0to5eqruptLy" crossorigin="anonymous"></script>
npm i bootstrap@5.3.3
npm install react-bootstrap bootstrap
import Accordion from 'react-bootstrap/Accordion';
4.
Структура кодаContainer — общий элемент-обёртка
(слева и справа по 15px)
Row — строка
fluid — полноценный контейнер на всю
ширину;
xs (span: 4) — ручная корректировка
ширины (<Col xs={6}>2 of 3 (wider)</Col>);
md="auto" — автоматическая ширина
строки;
xs, sm, md, lg, xl (Bootstrap 4) — ширина
адаптивного блока (из 12), которую он
будет иметь, начиная с этой контрольной
точки;
order — порядок колонки;
offset — отступ от других колонок
4
Col — cтолбец
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function ContainerExample() {
return (
<Container>
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
);
}
export default ContainerExample;
5.
data-bs-theme ("light", "dark") — темафона
variant () — задний фон кнопки
Параметры
Breakpoint - контрольная точка,
которая определяет минимальную
ширину viewport.
Breakpoint
X-Small
Small
Medium
Class infix
None
sm
md
Цвет
variant
Secondary
Тёмно-серый
Tertiary
Серый
Emphasis
Чёрный
Primary
Синий
Success
Зелёный
Danger
Красный
Warning
Жёлтый
Info
Голубой
Dimensions
<576px
≥576px
≥768px
Large
lg
≥992px
Extra large
xl
≥1200px
Extra extra large
xxl
≥1400px
5
6.
КомпонентыКарточка
<Card></Card>
Card.Img - Изображение
import Card from 'react-bootstrap/Card';
function TextExample() {
return (
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
<Card.Text>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</Card.Text>
<Card.Link href="#">Card Link</Card.Link>
<Card.Link href="#">Another Link</Card.Link>
</Card.Body>
</Card>
);
}
Card.Header - Главный
центральный заголовок
Card.Body - основное
содержание карточки
Card.Title - Заголовок
Card.Subtitle - подзаголовок
Card.Text - текст
export default TextExample;
6
Card.Link - ссылка
7.
КомпонентыImage
src - путь к фото
<Image … />
size - размер
<Image src="holder.js/799x250" fluid />
<Image src="holder.js/171x180" rounded />
<Image src="holder.js/171x180" roundedCircle />
7
<Image src="holder.js/171x180" thumbnail />
8.
КомпонентыButton
<Button>Отправить</Button>
type - имя кнопки
value - текст кнопки
import Button from 'react-bootstrap/Button';
function OutlineTypesExample() {
return (
<>
<Button variant="outline-primary">Primary</Button>
<Button variant="outline-secondary">Secondary</Button>
<Button variant="outline-success">Success</Button>
<Button variant="outline-warning">Warning</Button>
<Button variant="outline-danger">Danger</Button>
<Button variant="outline-info">Info</Button>
<Button variant="outline-light">Light</Button>
<Button variant="outline-dark">Dark</Button>
</>
);
}
href - ссылка (меняет
тип элемента)
size - размер
disabled - недоступная
кнопка
active - активная кнопка
export default OutlineTypesExample;
8
9.
Компонентыfunction DropDirectionExample() {
return (
<>
{['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
(direction) => (
<DropdownButton
as={ButtonGroup}
key={direction}
id={`dropdown-button-drop-${direction}`}
drop={direction}
variant="secondary"
title={`Drop ${direction}`}
import
> Dropdown from 'react-bootstrap/Dropdown';
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
function
BasicExample()
{
<Dropdown.Item
eventKey="2">Another
action</Dropdown.Item>
return
(
<Dropdown.Item
eventKey="3">Something else here</Dropdown.Item>
<Dropdown>
<Dropdown.Divider />
<Dropdown.Toggle
variant="success" id="dropdown-basic">
<Dropdown.Item eventKey="4">Separated
link</Dropdown.Item>
Dropdown Button
</DropdownButton>
),</Dropdown.Toggle>
)}
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
Dropdowns
<DropdownButton>…</DropdownButton>
type - имя кнопки
<Dropdown>…</Dropdown>
title - текст кнопки
href - ссылка (меняет тип
элемента)
eventKey - ключ перехода
key - идентифицирующий
ключ
drop - направление
выпадающего меню
export default BasicExample;
variant - цвет кнопки
9
10.
Компонентыimport { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
export function Example() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
< Modal >…</Modal >
Modals
Modal.Header - Поле заголовка
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Text modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
Modal.Title - внутренний
заголовок
Modal.Body - основной текст
Modal.Footer - нижнее поле
}
10
11.
Компонентыimport Badge from 'react-bootstrap/Badge';
import ListGroup from 'react-bootstrap/ListGroup';
Список
Export function DefaultExample() {
return (
<ListGroup as="ol" numbered>
<ListGroup.Item
as="li"
className="d-flex justify-content-between align-items-start"
>
<div className="ms-2 me-auto">
<div className="fw-bold">Subheading</div>
Cras justo odio
</div>
<Badge bg="primary" pill>
14
</Badge>
</ListGroup.Item>
<ListGroup.Item
as="li"
className="d-flex justify-content-between align-items-start"
>
<div className="ms-2 me-auto">
<div className="fw-bold">Subheading</div>
Cras justo odio
</div>
<Badge bg="primary" pill>
14
</Badge>
);
}
<ListGroup><ListGroup.Item>…</ListGro
up.Item></ListGroup numbered>
numbered - нумерованный список
as - спец. значение из HTML
horizontal - горизонтальное
расположение листа
variant - заливка
action href - ссылка на действие
eventKey - отслеживание ссылки
11
12.
ФормаСтруктура
Form - объявление формы
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
function BasicExample() {
return (
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
);
Form.Group - поле формы
Form.Label - подпись
Form.Control - строка ввода
Form.Text - текст к полю
}
export default BasicExample;
Form.Check - ячейка выбора
12
13.
Формаtext
Текстовое поле для ввода
текста.
password
Поле для ввода пароля
(символы скрыты).
Поле для ввода адреса
электронной почты.
column - представление поля в
виде колонки
number
Поле для ввода чисел.
checkbox
Флажок, который можно
отметить или снять.
visuallyHidden - скрытие поля
radio
Переключатель для выбора
одного варианта из
нескольких.
as - изменение типа элемента
file
Поле для загрузки файлов.
submit
Кнопка для отправки данных
формы на сервер.
reset
Кнопка для сброса данных
формы к первоначальным
значениям.
Опции
_ref - создание ссылки
validated - указание корректного
прохождения проверок
const inputRef = useRef(null);
const handleFocus = () => {
button
Кнопка, которая может
inputRef.current.focus();
выполнять JavaScript
};
функции.
return (
color <>
Поле для выбора цвета.
<input ref={inputRef} type="text" />
date
Поле для выбора
даты.
<button onClick={handleFocus}>Установить
фокус</button>
</>
time );
Поле для выбора времени.
type - тип поля
htmlFor - привязывание метки
13
14.
ФормаSelect
import Form from 'react-bootstrap/Form';
size - количество видимых опций
function SelectBasicExample() {
return (
<Form.Select aria-label="Default select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
);
}
disabled - недоступная кнопка
value - значение
onChange - событие изменения
export default SelectBasicExample;
isValid - валидность
isInvalid - невалидность
14
15.
ФормаНадписи
import FloatingLabel from 'react-bootstrap/FloatingLabel';
import Form from 'react-bootstrap/Form';
function FormFloatingBasicExample() {
return (
<>
<FloatingLabel
controlId="floatingInput"
label="Email address"
className="mb-3"
>
<Form.Control type="email" placeholder="name@example.com"
/>
</FloatingLabel>
<FloatingLabel controlId="floatingPassword" label="Password">
<Form.Control type="password" placeholder="Password" />
</FloatingLabel>
</>
);
}
label - подпись
as - изменение типа
controlId - идентификатор поля
export default FormFloatingBasicExample;
15
16.
Формаimport React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';
const MyForm = () => {
const [formData, setFormData] = useState({
email: '',
password: ''
});
const handleChange = (event) => {
const { name, value } = event.target;
setFormData({
...formData,
[name]: value
});
};
…
<Form onSubmit={handleSubmit}>
<Form.Group controlId="formEmail">
<Form.Label>Email</Form.Label>
<Form.Control
type="email"
placeholder="Введите email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</Form.Group>
<Button variant="primary" type="submit">
Отправить
</Button>
</Form>
Считывание данных
Создание состояния (useState)
Обработка изменений (onChange
и поддержка value)
Отправка формы (onSubmit
функция)
16
17.
ЗаданиеС помощью react-bootstrap создать слайдер:
1. Изучить компонент Carousels в документации react-bootstrap.
2. Реализовать, используя изученный компонент, слайдер. В слайдере
должно быть не меньше 4 слайдов, которые сменяются вручную и с
помощью плавной анимации (slide, fade), длительностью 300-500 мс.
3. Слайд должен содержать изображение и подпись к нему (на любую
адекватную! тему). Размер слайда: full-width, height 200-300dp (адаптив).
Индикаторы: снизу, белые dash с активным accent. Все изображения
должны загружаться на сайт с локального устройства. Изображение должно
занимать не меньше 70% слайда в высоту, остальное пространство
отводится под надпись, выполненную сочетающимся с картинкой цветом,
полужирным начертаниемhttps://react-bootstrap.netlify.app/docs
шрифтом «без засечек».
17