Тут показані розбіжності між вибраною ревізією та поточною версією сторінки.
| Порівняння попередніх версій Попередня ревізія Наступна ревізія | Попередня ревізія |
| subjects:basic:informatika:graph:stvorennia_elementiv_dlia_veb-storinok [23.02.2023 22:41] – Адміністратор | subjects:basic:informatika:graph:stvorennia_elementiv_dlia_veb-storinok [23.02.2023 22:47] (поточний) – Адміністратор |
|---|
| |
| {{ :subjects:basic:informatika:graph:bootstrap_buttons.png?direct&600 |}} | {{ :subjects:basic:informatika:graph:bootstrap_buttons.png?direct&600 |}} |
| | ==== Початок роботи з Bootstrap ==== |
| | Розпочніть роботу, включивши готовий CSS і JavaScript Bootstrap через CDN без необхідності виконувати будь-які етапи створення. |
| |
| | 1. Створіть новий файл ''index.html'' у корені проекту. Також додайте тег ''<meta name="viewport">'' для належного відображення на мобільних пристроях. |
| | <code html> |
| | <!doctype html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="utf-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| | <title>Bootstrap demo</title> |
| | </head> |
| | <body> |
| | <h1>Hello, world!</h1> |
| | </body> |
| | </html> |
| | </code> |
| | |
| | 2. Включіть CSS і JS Bootstrap. Розмістіть тег ''<link>'' у ''<head>'' для CSS і тег ''<script>'' для набору JavaScript (включно з Popper для позиціонування спадних меню, попперів і підказок) перед закриваючим nтегом ''</body>''. |
| | <code html> |
| | <!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.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> |
| | </head> |
| | <body> |
| | <h1>Hello, world!</h1> |
| | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script> |
| | </body> |
| | </html> |
| | |
| | </code> |
| ==== Форми ==== | ==== Форми ==== |
| <row> | <row> |
| ==== Картка ==== | ==== Картка ==== |
| <row> | <row> |
| <col lg="6">{{ :subjects:basic:informatika:graph:bootstrap_card.png?nolink |}}</col> | <col lg="4">{{ :subjects:basic:informatika:graph:bootstrap_card.png?nolink |}}</col> |
| <col lg="6"> | <col lg="8"> |
| HTML | HTML |
| <code html><div class="card" style="width: 18rem;"> | <code html><div class="card" style="width: 18rem;"> |
Адміністратор