3 подписчика

Делаем крутую веб-страницу на html за 5 минут!

8 июня 20208 июн 2020

1 мин

Привет Всем! Сегодня мы сделаем красивенькую страницу на html и Bootstrap 4! В следующих уроках мы можем сделать полноценный сервер! Все что вам понадобится это текстовый редактор и компьютер. Поехали! 1. Создаем файл с расширением .html 2. Открываем его через любой редактор текста и вписываем "скелет" нашей будущей веб-страницы. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Страница</title> </head> <body> <h1>Привет!</h1> </body> </html> 3. Открываем сайт уже с помощью браузера и мы видим наш прекрасный текст! 4. Между <head> и </head> добавляем строки для подключения сторонних библиотек JQuery и Bootstrap 4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 5. После тега <body> добавляем контейнер c текстом. <div class="jumbotron text-center"> <h1>Заголовок</h1> <p>Текст</p> </div> 6. <h1> с текстом "Привет!" м

Привет Всем! Сегодня мы сделаем красивенькую страницу на html и Bootstrap 4!

В следующих уроках мы можем сделать полноценный сервер!

Все что вам понадобится это текстовый редактор и компьютер. Поехали!

1. Создаем файл с расширением .html

2. Открываем его через любой редактор текста и вписываем "скелет" нашей будущей веб-страницы.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Страница</title>

</head>

<body>

<h1>Привет!</h1>

</body>

</html>

3. Открываем сайт уже с помощью браузера и мы видим наш прекрасный текст!

4. Между <head> и </head> добавляем строки для подключения сторонних библиотек JQuery и Bootstrap 4.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

5. После тега <body> добавляем контейнер c текстом.

<div class="jumbotron text-center">

<h1>Заголовок</h1>

<p>Текст</p>

</div>

6. <h1> с текстом "Привет!" можно убрать.

7. На данный момент код выглядит так:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Страница</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>

<div class="jumbotron text-center">

<h1>Заголовок</h1>

<p>Текст</p>

</div>

</body>

</html>

Результат:

При изменении размера окна, содержимое будет автоматически подстраиваться под размер, что все было красиво.

8. После </div> перед </body> Добавим "колонны" с текстом

<div class="container">

<div class="row">

<div class="col-sm-4">

<h3>Первый столбец</h3>

<p>текст текст текст текст </p>

<p> текст текст текст текст </p>

</div>

<div class="col-sm-4">

<h3>Второй столбец </h3>

<p>текст текст текст текст </p>

<p> текст текст текст текст </p>

</div>

<div class="col-sm-4">

<h3>Третий Столбец</h3>

<p>текст текст текст текст </p>

<p> текст текст текст текст </p>

</div>

Итог:

Статья получилась не такой уж и большой. Это лишь малая часть того, что можно сделать с этой библиотекой. Если вы хотите увидеть всю ее мощь, напишите в комментарии и я обязательно сделаю подробный обзор. Спасибо за понимание!