Введите имя домена:
.ua .com.ua .in.ua .org.ua
.ru .com .net .org
Показать все домены

Hello World на Bootstrap

Ответы на вопросы от компании «Украинский хостинг».

Первая программа Hello World на Bootstrap

Bootstrap является свободным набором инструментов для создания сайтов и веб-приложений. В Bootstrap вклюючены HTML и CSS шаблоны оформления для веб-форм, типографики, меток, кнопок, блоков навигации и прочих компонентов веб-интерфейса, а так же JavaScript расширения.

Перед написанием скрипта на Bootstrap, необходимо предварительно установить на сервере веб-сервер Apache.

Рекомендуется создать не root пользователя с доступом к sudo.

В инструкции используется текстовый редактор nano, для установки которого требуется выполнить команду:

yum install nano

Процесс создания первой программы на Bootstrap выглядит так:

  1. Обновляем пакеты:

    sudo yum -y update
  2. Устанавливаем веб-сервер Apache:

    sudo yum -y install httpd
  3. Запускаем веб-сервер Apache:

    sudo systemctl start httpd.service
  4. Включаем Apache для запуска при загрузке:

    sudo systemctl enable httpd.service
  5. По умолчанию CentOS 7 использует Firewall-CMD в закрытом режиме, в связи с чем необходимо настроить его для обеспечения доступа по порту 80 (http) или 443 (https), чтобы сделать Apache доступным из Интернета.

    Включаем firewalld:

    sudo systemctl start firewalld

    И поочередно выполняем следующие команды:

    sudo firewall-cmd --permanent --zone=public --add-service=http
    sudo firewall-cmd --permanent --zone=public --add-service=https
    sudo firewall-cmd --reload

    Все три команды при запуске должны выводить сообщение об успешном завершении.

  6. Создаем тестовый файл .html

    sudo nano /var/www/html/hello_world.html

    Добавляем в него следующий код:

    <!DOCTYPE html> 
    <html lang="en">
    <head>  
    <meta charset="utf 8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
    <div class="container">
    	<p>Hello, World!</p>
    </div>
    </body>
    </html>

    Сохраняем изменение в файле, нажав сочетание клавиш Ctrl+x , затем клавишу y и затем клавишу Enter.

  7. Чтобы запустить скрипт и увидеть результат его выполнения, открываем в браузере следующий адрес (вместо 93.190.42.52 необходимо указать собственный IP адрес или доменное имя):

    http://93.190.42.52/hello_world.html

    На этом создание скрипта на Bootstrap и его запуск завершены.

См.также: