Розбіжності

Тут показані розбіжності між вибраною ревізією та поточною версією сторінки.

--- subjects:basic:informatika:graph:stvorennia_elementiv_dlia_veb-storinok [23.02.2023 21:55] – створено Адміністратор
+++ subjects:basic:informatika:graph:stvorennia_elementiv_dlia_veb-storinok [23.02.2023 22:47] (поточний) – Адміністратор
@@ Рядок 32: / Рядок 32: @@
 Узагалі, Bootstrap є потужним інструментом для швидкої та ефективної розробки веб-сайтів, який дозволяє зосередитися на функціональності та дизайні, не витрачаючи багато часу на написання коду з нуля. Він підходить як для початківців, так і для досвідчених розробників, що дозволяє використовувати його на різних етапах розробки веб-сайтів.
-{{ :subjects:basic:informatika:graph:bootstrap_buttons.png?direct&400 |}}
+{{ :subjects:basic:informatika:graph:bootstrap_buttons.png?direct&600 |}}
+==== Початок роботи з Bootstrap ====
+Розпочніть роботу, включивши готовий CSS і JavaScript Bootstrap через CDN без необхідності виконувати будь-які етапи створення.
-===== Джерела =====
+. Створіть новий файл ''index.html'' у корені проекту. Також додайте тег ''<meta name="viewport">'' для належного відображення на мобільних пристроях.
-  * [[wp>Bootstrap]]
+<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>
+. Включіть 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>
+<col lg="6">{{ :subjects:basic:informatika:graph:bootstrap_form.png?nolink |}}</col>
+<col lg="6">
+HTML
+<code html><div class="mb-3">
+  <label for="exampleFormControlInput1" class="form-label">Email address</label>
+  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
+</div>
+<div class="mb-3">
+  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
+  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+</div></code></col>
+</row>
+==== Картка ====
+<row>
+<col lg="4">{{ :subjects:basic:informatika:graph:bootstrap_card.png?nolink |}}</col>
+<col lg="8">
+HTML
+<code html><div class="card" style="width: 18rem;">
+  <img src="..." class="card-img-top" alt="...">
+  <div class="card-body">
+    <h5 class="card-title">Card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div></code></col>
+</row>
+===== Джерела =====
+  * [[wp>Bootstrap]]
+  * [[https://getbootstrap.com|Bootstrap · The most popular HTML, CSS, and JS library in the world]]