Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Установка Bootstrap на сайт

Из этого урока вы узнаете, как установить фреймворк Bootstrap на сайт uCoz, uWeb. Мы скачаем архив и загрузим на сайт необходимые для подключения файлы

Сергей    25.11.2016    1078    5.0 из 5.0 (4)

Оцените материал:

Загрузка файлов

Чтобы скачать дистрибутив Bootstrap, перейдите по ссылке http://getbootstrap.com/getting-started/ и нажмите на кнопку «Download Bootstrap». Распакуйте скачанный архив, его структура будет иметь следующий вид:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
 ├── glyphicons-halflings-regular.eot
 ├── glyphicons-halflings-regular.svg
 ├── glyphicons-halflings-regular.ttf
 ├── glyphicons-halflings-regular.woff
 └── glyphicons-halflings-regular.woff2

Нам понадобятся два файла: bootstrap.min.css и bootstrap.min.js. Их нужно загрузить в папку /css и /js соответственно. Загружать остальные файлы пока не требуется.

Установка DOCTYPE

Теперь необходимо установить элемент <!DOCTYPE>. Он предназначен для указания типа документа (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую страницу.

Перейдите в панель управления и в меню «Настройки» выберите пункт «Общие настройки»:

Как указать DOCTYPE для сайта

Найдите пункт «Значение тега <!DOCTYPE>» и укажите в нем значение <!DOCTYPE html>:

Как указать DOCTYPE для сайта

Сохраните изменения.

Шаблон тестовой страницы

Теперь давайте откроем любой шаблон и добавим в него код:

<html lang="ru">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Мой первый шаблон на Bootstrap</title>

 <link href="/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 <h1>Hello, world!</h1>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="/js/bootstrap.min.js"></script>
 </body>
</html>

Сохраните шаблон и взгляните на страницу:

Hello World на Bootstrap

Убедитесь, что правильно установили viewport:

 <meta name="viewport" content="width=device-width, initial-scale=1"> 

Поглядеть демо, можно по ссылке.

Выглядит просто, но мы добились главного — установили Bootstrap на сайт. Как видите, установка довольно проста. Гораздо сложнее будет научиться пользоваться всем инструментарием, который доступен из фреймворка.



Оцените материал:


Расскажите друзьям и коллегам о полезной статье:

Обсуждение

Всего комментариев: 2

K
1
Почему-то к просмотру доступен только раздел введение (введение, обзор, установка), а к остальному доступ запрещён. Как получить доступ к остальным разделам (css, вёрстка)?
avatar
0
2
Александр, спасибо за сигнал :) Доступ к разделу CSS окрыт, доступ к остальным разделам появится, когда в них будут активированы материалы
Установка Bootstrap на сайт
Установка Bootstrap на сайт