Под локальным сервером XAMPP можно создавать неограниченное количество виртуальных хостов.

Что такое виртуальный хост (Virtual Host)? Применительно в серверу XAMPP - это поддиректории, в которых размещаются отдельные сайты. То есть, имеется директория

1

htdocs

1

site_1

1

site_2

1

site_3

1

redface

1

football

1

greenpark

В каждой из этих поддиректорий распакован и установлен движок CMS WordPress (к примеру). Вот эти поддиректории

1

site_1

1

site_2

1

site_3

Как уже упоминалось выше, сервер XAMPP может поддерживать неограниченное количество виртуальных хостов. Однако, по умолчанию разрешено использовать только два хоста. Но редактирование конфигурационного файла позволяет добавлять столько, сколько нужно.

Настройка виртуальных хостов на XAMPP под Linux Mint почти ничем не отличается от подобной настройки под Windows, меняются только пути конфигурационных файлов. Весь процесс настройки можно свести к двум шагам:

1. Настройка хостов в файле

   1	/etc/hosts

2. Настройка виртуальных хостов в файле

   1	/opt/lampp/etc/extra/httpd-vhosts.conf

Ниже на примере расмотрим подробное описание создания одного виртуального хоста на XAMPP под Linux Mint.

Создание поддиректории виртуального хоста (Virtual Host)

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

1

redface

1

index.html

$ sudo mkdir -p /opt/lampp/htdocs/redface
$ sudo touch /opt/lampp/htdocs/redface/index.html

Виртуальный хост с именем

1

redface

Редактирование файла /etc/hosts

Операционной системе Linux Mint нужно “сказать”, что виртуальный хост

1

redface

1

127.0.0.1

1

/etc/hosts

$ sudo nano -w /etc/hosts

… и дописываем в нем строку

1

127.0.0.1 redface.dev

127.0.0.1 localhost
127.0.1.1 zmk

# Virtual hosts
127.0.0.1 redface.dev

Окончание

1

.dev

1

.dev

1

.lc

Сохраняем Ctrl+O и выходим Ctrl+X из редактора

1

nano

Включение поддержки виртуального хоста в XAMPP

По умолчанию в настройках XAMPP отключена поддержка виртуальных хостов. Для включения такой возможности нужно отредактировать конфигурационный файл

1

httpd.conf

Для этого открываем его командой:

$ sudo nano -w /opt/lampp/etc/httpd.conf

В открытом файле

1

httpd.conf

1

# Virtual hosts

1

#

#Include etc/extra/httpd-vhosts.conf

Создание виртуального хоста в файле httpd-vhosts.conf

Открываем для редактирования файл

1

httpd-vhosts.conf

$ sudo nano -w /opt/lampp/etc/extra/httpd-vhosts.conf

В начале идет много закомментированных строк с кратким описанием виртуального хоста и принципом его создания в данном файле. Можно смело почистить файл

1

httpd-vhosts.conf

Далее идут два блока с открывающим тегом

1

<VirtualHost *:80>

1

</VirtualHost>

Эти блоки не рабочие, а всего лишь примеры, как нужно создавать свой собственный виртуальный хост. Внутри тегов

1

<VirtualHost *:80>

1

</VirtualHost>

<VirtualHost *:80>
  ServerAdmin webmaster@dummy-host.example.com
  DocumentRoot "/opt/lampp/docs/dummy-host.example.com"
  ServerName dummy-host.example.com
  ServerAlias www.dummy-host.example.com
  ErrorLog "logs/dummy-host.example.com-error_log"
  CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>

Жизненно необходимыми для существования виртуального хоста (Virtual Host) под XAMPP являются две строки:

• DocumentRoot - путь размещения виртуального хоста в файловой системе
• ServerName - доменное имя виртуального хоста

Остальные строки носят дополнительный характер:

• ServerAdmin - e-mail адрес “администратора” хоста
• ServerAlias - синоним доменного имени ServerName
• ErrorLog и CustomLog - логи виртуального хоста

Эти два блока-примера можно отредактировать для конкретного случая, а можно создать свой собственный блок (виртуальный хост) на их основе. Давайте пойдем по второму пути и создадим свой собственный блок для виртуального хоста

1

redface

<VirtualHost *:80>
  ServerAdmin         redface@mail.dev
  DocumentRoot        "/opt/lampp/htdocs/redface"
  ServerName          redface.dev
  ServerAlias         www.redface.dev
  ErrorLog            "logs/redface-error_log"
  CustomLog           "logs/redface-access_log" common
</VirtualHost>

Обратите внимание, как поменялись значения в этм блоке на конкретные, под хост

1

redface

Запускаем (если еще не запущен) или перезапускаем (если уже был запущен) локальный сервер XAMPP:

$ sudo /opt/lampp/lampp start
Starting XAMPP for Linux 1.8.2-5...
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok.

… и “вбиваем” в адресной строке браузера доменное имя созданного нами виртуального хоста

1

redface.dev

ОК, все работает!

Проблемы с правами доступа на виртуальном хосте

При создании виртуального хоста (Virtual Host) под XAMPP в директории

1

htdocs

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

$ sudo chmod g+w /opt/lampp/htdocs/redface/index.html

Изменение точки монтирования виртуального хоста

В этой статье точка монтирования виртуальных хостов (Virtual Hosts) располагалась по адресу -

1

/opt/lampp/htdocs/

1

htdocs

Однако, у локального сервера XAMPP имеется возможность переопределить местоположение виртуальных хостов внутри файловой системы Linux Mint. Например, можно расположить все хосты в домашней директории пользователя. Плюсом такого выбора является то, что нет необходимости настраивать права доступа для папок и файлов.

Вся настройка для переопределения точки монтирования виртуальных хостов (Virtual Hosts) сводится к одному действию - изменить значение строки

1

DocumentRoot

Все попытки переименовать значение строки

1

DocumentRoot

В чем причина подобного отказа со стороны XAMPP, я так и не разобрался. Может быть, внимательный читатель подскажет, в чем причина?

P.S. от 09.09.2014

Добавил в статью комментарий пользователя Alexandr. Сам комментарий мне понравился - подробный и ценный. Поэтому перенес его в статью, как есть. Ниже привожу полный текст, с небольшими стилистическими правками.

Так можно добавить в рабочую папку с проектами на другом диске (например, для использования на Linux и Windows отдельно):

1. Файл httpd.conf

Найти строки и заменить (Имя пользователя):

• User (username)
• Group (по умолчанию или username)

Не меняем:

DocumentRoot "/opt/lampp/htdocs” и Directory “/opt/lampp/htdocs"

2. Создаем мягкую ссылку:

$ sudo ln –s /media/(username)/mydisk/Open Server/domains /opt/lampp/htdocs

Права на мягкую ссылку “opt/lampp/htdocs/domains” д. б. 777 ( или около того )

3. Файл httpd-vhosts.conf

#localhost
  
  <VirtualHost *:80>
    DocumentRoot "/opt/lampp/htdocs"
    ServerName localhost
  </VirtualHost>

  <VirtualHost *:80>
    ServerAdmin mydomain@mail
    DocumentRoot "/opt/lampp/htdocs/domains/mydomain/www"
    ServerName mydomain
    ServerAlias http://www.mydomain
  </VirtualHost>

4. Файл /etc/hosts

#Virtual hosts
  127.0.0.1 localhost
  127.0.0.1 mydomain

5. Меняем владельца файла

Меняем владельца файла

1

/opt/lampp/htdocs/xampp/lang.tmp

$ chown (username) /opt/lampp/htdocs/xampp/lang.tmp

Иначе

1

localhost xampp

6. Перезапуск сервера

Перезапуск сервера:

$ sudo /opt/lampp/lampp restart

… и проверка в браузере:

1

http://mydomain/

Каждый раз при запуске компьютера, сайты будут не доступны, до тех пор пока диск не примонтирован к системе (для этого нужно просто зайти на тот диск, с помощью файл-менеджера или придумать свой способ).

Если каким-то образом, диск в Linux откажется монтироваться, нужно в Windows отключить быструю загрузку (Fast Boot) в параметрах электропитания.

Для тестирования IE в Linux ставится виртуальная машина (например, VirtualBox), куда устанавливаем Windows7 и любимый браузер IE. В самой Windows редактируем файл

1

hosts

Вот так:

c:/windows/system32/drivers/etc/hosts
  10.0.2.2 localhost
  10.0.2.2 mydomain

Сайт через виртуальную машину будет также доступен.

Столкнулся с небольшой, но достаточно неприятной проблемой.

Занимался изучением настройки сверстанного HTML-шаблона под WordPress. То есть, другими словами - создания темы WordPress из готового HTML-шаблона.

Для этой задачи у меня на Linux Mint 17 Cinnanom 64-bit установлен локальный сервер XAMPP. Если кто не знает, как сервер XAMPP устанавливается под Linux, то могут почитать в этой статье - “Установка XAMPP под Linux Mint 17”. Под локальным сервером у меня “крутятся” виртуальные хосты на основе движка WordPress.

Предпросмотр темы не отображается в WordPress

После создания директории под новую тему -

1

Choose

1

wp-admin/themes.php

Перепробовал достаточно способов, в том числе и с официального сайта XAMPP - XAMPP работает, но почему картинки не отображаются?. То, что там описано - изменение двух строк файла

1

/opt/lampp/etc/httpd.conf

#EnableMMAP off
#EnableSendfile off

… не сработало, так как в моем конфигурационном файле

1

httpd.conf

EnableMMAP off
EnableSendfile off

Решение оказалось на удивление простым. Я и не подозревал, что настройка прав доступа в Linux может быть такой “коварной” штукой! Сначала обратил внимание на тот факт, что preview тем WordPress, которые идут “в комплекте” с ним - “Twenty Fourteen”, “Twenty Thirteen”, “Twenty Twelve” нормально отображаются на странице. А вот

1

preview

Решил проверить догадку методом “научного тыка” - тупо сравнить два файла-preview

1

screenshot.png

$ ls -l choose/wp-content/themes/twentyfourteen/screenshot.png
-rw-r--r-- 1 choose/wp-content/themes/twentyfourteen/screenshot.png

$ ls -l choose/wp-content/themes/choose/screenshot.png
-rw------- 1 choose/wp-content/themes/choose/screenshot.png

Вот оно! У файла

1

screenshot.png

1

r

1

-rw-r-r-

1

screenshot.png

1

r

1

-rw- - -

Ну что-же, нужно добавить

1

+

1

r

1

a

1

screenshot.png

$ sudo chmod a+r /opt/lampp/htdocs/choose/wp-content/themes/choose/screenshot.png

… и проверить результат:

$ ls -l /opt/lampp/htdocs/choose/wp-content/themes/choose/screenshot.png
-rw-r--r-- 1 /opt/lampp/htdocs/choose/wp-content/themes/choose/screenshot.png

Перехожу в WordPress на страницу управления темами

1

wp-admin/themes.php

Картинка по центру изображения - это preview создаваемой темы “Choose” под WordPress. Как видно, все прошло удачно.

Картинки темы WordPress не отображаются под XAMPP

Но вышеназванное решение оказалось лишь половиной дела. Вторая проблема заключалась в том, что при активации вновь созданной темы под WordPress изображения из нее не отображаются на странице.

Фоновые изображения, картинки в HTML-файле - ничего не появляется на странице. Firebug не смог мне помочь - единственное, что он “подсказал” - “Файл невозможно загрузить”. Многословно, ничего не скажешь!

Помог незаменимый ресурс для front-end разработчика - Stack Overflow. Решение проблемы заключено в двух строках:

$ cd /opt/lampp/htdocs
$ sudo chmod 777 -R .

То есть, переходим в директорию

1

htdocs

1

-R

1

777

1

.

В принципе, на этом все.

Статья посвящена вопросу установки Node.js и пакетного менеджера npm под операционную систему Linux Mint 17 “Qiana” Cinnamon (64-bit).

Также рассмотрен вопрос установки пакетного менеджера Bower в этой же операционной системе.

Почему выбрана система Linux Mint - об этом не стоит говорить долго. Это система гораздо удобнее для задач кодинга, нежели Windows. Пакеты Node.js и пакетный менеджер npm необходим для дальнейшего изучения ремесла верстальщика.

Дело в том, что популярный фреймворк Foundation для своей корректной работы требует первоначальной установки Node.js. Автор планирует в дальнейшем познакомиться с фреймворком Foundation, поэтому ему потребовалась установка вышеназванных пакетов.

О том, что такое Node.js, в этой статье также не будет описано. Во-первых, автор статьи имеет лишь поверхностное представление об этом сервере. А во-вторых, в Интернете есть немало хороших материалов по данному вопросу.

Установка Node.js

Для установки пакета Node.js под систему Linux Mint можно воспользоваться официальным сайтом проекта - Node.js. В разделе Download имеется табличка для скачивания различных версий пакета Node.js. В случае системы Linux в этой таблице нужно найти строку Linux Binaries.

Однако я не буду “заморчиваться” установкой из исходного кода. В Linux Mint есть прекрасный менеджер пакетов

1

apt-get

В терминале ввожу команду:

$ sudo apt-get install nodejs

… пару секунд терпения и у меня под Linux Mint 17 “Qiana” Cinnamon (64-bit) установлен пакет Node.js версии:

$ nodejs -v
v0.10.25

На момент написания статьи самая свежая версия Node.js (как указано на официальном сайте) - это 0.10.28. Как видим, разница в версиях небольшая, так что я поступил правильно, воспользовавшись

1

apt-get

Установка npm под Linux Mint

Как хорошо известно, у данного сервера имеется свой собственный менеджер пакетов npm (Node Packaged Modules), для установки дополнительных модулей под Node.js. Другими словами, с помощью менеджера npm можно установить под сервер Node.js любой модуль, имеющийся в наличии на репозитории GitHub. Модуль расширяет возможности сервера Node.js в зависимости от того, какой это модуль (тавтология). С кратким описанием и списком всех модулей под Node.js можно ознакомиться на официальном сайте проекта npm - Node Packaged Modules.

При установке в свою систему Linux Mint через

1

apt-get

1

apt-get

В терминале Linux ввожу команду:

$ sudo apt-get install npm

Пробежит много-много строк, но в результате в системе появиться пакет npm:

$ npm -v
1.3.10

Использование менеджера npm очень похоже на использование менеджеров пакетов a-la Linux:

1

apt-get

1

emerge

1

pacman

$ npm -h

Давайте проверим работу установленного менеджера npm. Для этого я в специально отведенной директории Projects создам поддиректорию npm, перейду в нее для дальнейшего удобства работы и установлю в этой поддиректории модуль

1

underscore

$ mkdir -p Projects/npm
$ cd Projects/npm
$ npm install underscore

Если теперь посмотреть содержимое поддиректории npm c помощью команды

1

ls

1

node_modules

1

underscore

$ ls node_modules/underscore/
LICENSE  package.json  README.md  underscore.js  underscore-min.js

Модуль Underscore успешно установлен и менеджер npm также успешно справился со своей задачей.

Установка менеджера Bower под Linux Mint

Переходим к заключительному (и продолжительному) вопросу данной статьи и рассмотрим установку менеджера пакетов Bower. Могу предвидеть у читателей логичный вопрос: “Как - еще один менеджер пакетов?! Но зачем? Разве не хватает npm, c которым мы только что познакомились?”

Все правильно! npm - это менеджер пакетов. И Bower - тоже менеджер пакетов. Отличие первого от второго заключается в том, что npm - это менеджер пакетов для сервера Node.js (и только). А Bower (хотя сам является модулем под Node.js) - это менеджер пакетов для всего проекта в целом.

Npm понимает и может работать только с JavaScript-приложениями (модулями под Node.js, написанными на этом языке). Bower умеет работать с пакетами на JavaScript, HTML, CSS. C помощью него можно одним движением добавить в разрабатываемый проект все, что нужно: библиотеку jQuery, фреймворк Foundation, модуль Underscore, сброс стилей Normalize.css и так далее.

Не нужно самому “вручную” выискивать на безбрежных просторах Интернет пакет и подключать его в проект - Bower это сделает сам. Заманчиво, не правда ли? На официальной странице проекта Bower можно почитать подробную информацию о данном менеджере (правда, на английском языке). В разделе Search Packages можно поискать нужный пакет для установки.

Я же приступлю к установке Bower на свою локальную машину. Так как Bower является модулем для Node.js, то его можно установить с помощью менеджера npm:

$ sudo npm install -g bower

Однако, если запустить после этого в терминале команду просмотра версии, то увидим такой результат:

$ bower -v
/usr/bin/env: node: No such file or directory

Исправить ситуацию можно созданием ссылки:

$ sudo ln -s /usr/bin/nodejs /usr/bin/node

Теперь если снова посмотреть версию установленного пакета, увидим следующее:

$ bower -v
1.3.3

Создаю специальную поддиректорию

1

bower

$ mkdir -p Projects/bower
$ cd Projects/bower
$ bower install jquery

Если до этого момента на локальной машине (как у меня) не был установлен пакет

1

git

$ bower install jquery
bower jquery#*  ENOGIT git is not installed or not in the PATH

Все пакеты для скачивания и установки менеджер bower берет с GitHub, поэтому без пакета git этот менеджер не сможет обойтись.

Установка Git на Linux производится простой командой:

$ sudo apt-get install git

После этого, повторив команду установки jquery через bower, получаю следующий отзыв в консоли:

$ bower install jquery
  bower jquery#*              not-cached git://github.com/jquery/jquery.git#*
  bower jquery#*                 resolve git://github.com/jquery/jquery.git#*
  bower jquery#*                download https://github.com/jquery/jquery/archive/2.1.1.tar.gz
  bower jquery#*                 extract archive.tar.gz
  bower jquery#*                resolved git://github.com/jquery/jquery.git#2.1.1
  bower jquery#~2.1.1            install jquery#2.1.1

Если посмотреть на содержимое поддиректории

1

bower

1

bower_components

1

jquery

$ ls bower_components/jquery/
bower.json  dist  MIT-LICENSE.txt  src

В результате была установлена последняя версия библиотеки jQuery - 2.1.1. Если нужна какая-то конкретная версия пакета (jQuery, в частности), то нужно это указать с помощью тега:

$ bower install jquery#1.9.1

Внимательный читатель мог заметить, менеджер пакетов Bower также (как и npm) является консольным. Список доступных для него команд можно получить вызовом:

$ bower -h

В частности, для обновления уже установленного пакета существует команда:

$ bower update [name_package]

Для удаления установленного пакета имеется команда:

$ bower uninstall [name_package]

Посмотреть информацию о пакете:

$ bower info [name_package]

Этой командой можно воспользоваться при настройке файла пакетной установки

1

bower.json

Плагин Bower под Sublime Text

Под редактор Sublime Text имеется одноименный плагин Bower, который в точности повторяет все возможности менеджера Bower. Все преимущество использования плагина Bower заключается в том, что производить инсталляцию, обновление или удаление пакетов можно прямо в редакторе Sublime Text, не переходя в консоль.

Установка плагина Bower выполняется стандартно - через менеджер пакетов Sublime Text: нажимаем сочетание клавиш Shift+Ctrl+P, введем в строке Install и выбираем из появившегося списка пакет Bower.

Теперь попробуем установить какой-либо пакет, не выходя из Sublime Text, c помощью плагина Bower. Для этого снова нажмем сочетание клавиш Shift+Ctrl+P, вводим Bower:Install и из появившегося списка выбираем пакет Foundation (к примеру).

Видим, как в панели проектов Sublime Text, в папке

1

bower_components

Настройка плагина Bower

Поддиректория

1

bower_components

В текущую директорию автоматически добавиться файл

1

.bowerrc

Для эксперимента изменим имя папки с:

"directory": "components"

на:

"directory": "apps"

… удалим старую директорию

1

bower_components

Пакетная установка в менеджере Bower

У менеджера пакетов Bower есть еще одна замечательная особенность. Это возможность пакетной установки через специально созданный конфигурационный файл. Другими словами, создается специальный файл формата json (

1

component.json

$ bower install

… менеджер bower прочитает файл

1

component.json

Примечание: начиная с Bower v.0.9 файл конфигурации

1

component.json

1

bower.json

Файл

1

bower.json

{
"name": "name_of_project",
"version": "1.0.0",
  "dependencies": {
    "name_package": "version_package",
    "name_package": "version_package"
  }
}

… где

1

name

1

version

1

dependencies

Прописав в этом списке нужные пакеты, тем самым мы заставим Bower автоматически отслеживать наличие указанных пакетов для текущего проекта. Но, от слов к делу - давайте попрактикуемся и создадим примерный файл

1

bower.json

$ bower uninstall [name_of_package]

… создам в этой директории пустой файл

1

bower.json

{
"name": "bower",
"version": "0.0.1",
  "dependencies": {
     "jquery": "1.9.1",
     "foundation": "latest"
   }
}

… где

1

latest

$ bower install

В результате будет произведена автоматическая установка всех перечисленных в файле пакетов. Кроме того, Bower умеет отслеживать зависимости пакетов. В моем примере в консоль была выведена следующая информация:

...
Unable to find a suitable version for jquery, please choose one:
    1) jquery#1.9.1 which resolved to 1.9.1 and is required by bower
    2) jquery#>= 2.1.0 which resolved to 2.1.1 and is required by foundation#5.2.3
    3) jquery#>=1.2 which resolved to 2.1.1 and is required by jquery.cookie#1.4.1

Prefix the choice with ! to persist it to bower.json

[?] Answer:
...

… то есть, Bower отследил, что я устанавливаю библиотеку jQuery версии 1.9.1; но при этом самая последняя версия фреймворка Foundation 5.2.3 требует для своей работы jQuery версии 2.1.1. Вот менеджер и спрашивает у меня - как быть дальше? Ай да Bower!

Добавление зависимостей в файл bower.json

После создания пакетного файла

1

bower.json

Тогда выполняем следующую команду:

$ bower install backbone --save

… пакет

1

backbone

1

underscore

1

bower.json

$ cat bower.json
{
"name": "bower",
"version": "0.0.1",
  "dependencies": {
    "jquery": "1.9.1",
    "foundation": "latest",
    "backbone": "~1.1.2"
  }
}

Автоматическое создание файла bower.json

Помимо ручного создания и настройки файла

1

bower.json

$ bower init

… тогда менеджер проведет нас “за ручку” через все этапы создания настроек файла

1

bower.json

$ cat bower.json
{
  "name": "bower",
  "version": "0.0.1",
  "dependencies": {
    "jquery": "1.9.1",
    "foundation": "latest",
    "backbone": "~1.1.2"
  },
  "description": "my firts project",
  "moduleType": [
    "amd"
  ],
  "authors": [
    "zencoder"
  ],
  "license": "MIT",
  "homepage": "http://localhost:7788/third/",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "apps",
    "test",
    "tests"
  ]
}

Плагин AutoFileName в Sublime Text

Редактор Sublime Text имеет неизмеримое количество полезных плагинов. Одним из них является AutoFileName - незаменимая вещь для автодополнения путей файлов в проекте. Кто имел мало-мальский опыт работы в Dreamveawer (или подобные ему IDE), могут сразу догадаться, о чем идет речь.

Поэтому данный плагин “must have” в коллекции под рабочую версию Sublime Text любого верстальщика.

Заключение

Завершаю обзор установки пакетов Node.js, npm и Bower под систему Linux Mint. Надеюсь, статья оказалась достаточно полной, точной и грамотной. В ее написании неоценимую помощь оказало видео “ Bower - Обзор пакетного менеджера “ Sorax’а.

На этом все.

Еще один фреймворк из бесчисленного на сегодняшний день полка фреймворков - Bootstrap 3. Точнее было бы сказать, что не еще один - а флагман CSS-фреймворков! Версия 2 вышла давно и на сегодня является устаревшей. Сегодня самая современная версия - это версия 3. Поэтому ее мы и будем рассматривать. Вопрос данной статьи будет посвящен основе данной фреймворка - CSS-сетке и особенностям ее создания в версии 3.

Установка и настройка Bootstrap 3

Ничего сложного и необычного в установке фреймворка Bootstrap 3 нет. Для этого скачиваем дистрибутив с официального сайта Bootstrap 3, распаковываем архив в готовый проект-директорию.

Затем с официального сайта берем готовый шаблон HTML-документа - Basic template и создаем свой собственный индексный файл HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

В этом файле проверяем правильность путей для CSS и JS-файлов:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
...

Все готово для дальнейшей работы.

Система сеток Bootstrap 3

Важнейшей составляюшей любого CSS-фреймворка является система CSS-сетки (grid). Как и в предыдущей версии Bootstrap 2, в версии 3 используется 12-ти колоночная система.

Однако, в Bootstrap 3 применяются четыре типа классов для создания адаптивной (responsive) сетки. На официальном сайте Bootstrap 3 имеется таблица с побробным и наглядным описанием этих классов - Grid Options.

В этой таблице представлены четыре ширины экрана устройства, на котором будет отображена страница. Колонка “Extra small devices” с шириной менее 768px обозначает мобильные устройства. Колонка “Small devices” с шириной равной или больше 768px представляет планшетные компьютеры (планшеты). Две остальные колонки представляют обычный настольный монитор через колонку “Medium devices” с шириной равной или больше 992px и широкоформатный монитор через колонку “Large devices” с шириной равной или больше 1200px.

Вышеназванные величины 768px, 992px и 1200px являются контрольными точками (breakpoints), служащими для обработки медиа-запросов в адаптивном дизайне страницы.

В данной таблице строка “Class prefix” является чуть ли не самой важной, так как в ней содержатся имена (префиксы) классов фреймворка Bootstrap 3 для каждого из четырех типов устройств. Для мобильного устройства имя (префикс) класса будет

1

.col-xs-

1

.col-sm-

1

.col-md-

1

.col-lg-

Вот и все, что необходимо знать о системе CSS-сеток в фреймворке Bootstrap 3. Дальше можно легко домыслить ход построения адаптивной сетки для конкретного сайта.

Пример создания CSS-сетки в Bootstrap 3

Допустим, необходимо создать следующий макет:

• для широкоформатного монитора в макете должно быть 2 столбца - один шириной 10 колонок и второй шириной 2 колонки;
• для обычного монитора 2 столбца - один шириной 8 колонок и второй шириной 4 колонки;
• для планшета 2 столбца - один шириной 6 колонок и второй шириной также 6 колонок;
• для мобильного устройства макет должен остаться, как и для планшета - два столбца одинаковой ширины.

То есть, при изменении ширины монитора устройства ширина столбцов в макете должна меняться, как показано выше. Для этого создадим простую разметку и добавим в нее классы Bootstrap 3:

<div class="container">
  <div class="row">
    <div class="col-lg-10 col-md-8 col-sm-6"></div>
    <div class="col-lg-2 col-md-4 col-sm-6"></div>
  </div>
</div>

Если открыть созданную страницу в окне браузера и попробовать менять ширину его окна, то в диспечере свойств страницы увидим метаморфозы, связанные с работой медиа-запросов

1

media-queries

Уменьшив ширину окна до 992px, получим левый столбец шириной в 8 колонок и правый стлбец шириной в 4 колонки. Еще уменьшив окно до 768px, получим два одинаковых столбца шириной в 6 колонок. Если окно окончательно уменьшится (менее 768px), ширина столбцов останется прежней, но они расположаться вертикально, друг под другом (поведение по умолчанию).

Видимость элементов сетки в Bootstrap 3

Немного усложним задачу и сделаем ее интереснее ради теоретического примера работы фреймворка Bootstrap 3. Допустим, нам необходим такой макет:

• широкоформатный монитор - 12 колонок;
• обычный монитор - 3 колонки;
• планшетный монитор - 3 колонки;
• мобильный монитор - 2 колонки.

Тогда HTML-разметка и классы фреймворка Bootstrap 3 следующими:

<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-4  col-sm-4  col-xs-6"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
    <div class="col-lg-2 col-md-4  col-sm-4  col-xs-6"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
    <div class="col-lg-2 col-md-4  col-sm-4  hidden-xs"></div>
    <div class="col-lg-2 hidden-md hidden-sm hidden-xs"></div>
  </div>
</div>

В данном случае при измении ширины окна браузера будет меняться количество колонок внутри макета. При ширине большей 1200px число колонок будет равняться шести. При уменьшении окна до ширины в 992px число колонок изменится до 4-х и будет оставаться таковым при ширине окна 768px. Если окно еще уменьшится ниже 768px, то количество колонок измениться до двух.

Подобные метаморфозы возможны благодаря классу

1

hidden-x

1

hidden-lg

1

hidden-md

1

hidden-sm

1

hidden-xs

Противоположностью класса

1

hidden-x

1

visible-x

В то время как класс

1

hidden-x

1

visible-x

Вложенность (nesting) сетки в Bootstrap 3

CSS-сетка в фреймворке Bootstrap 3 позволяет выполнять вложение одних ячеек в другие. Такое явление называется nesting. К примеру, необходим создать такую HTML-разметку:

<div class="container">
  <div class="row primo">
    <div class="col-lg-4"></div>
    <div class="col-lg-4"></div>
    <div class="col-lg-4"></div>
  </div>
  <div class="row secondo">
    <div class="col-lg-8">
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>
    <div class="col-lg-4"></div>
  </div>
  <div class="row tetro">
    <div class="col-lg-6">
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div>
    </div>
  </div>
  <div class="row quattro">
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
    <div class="col-lg-2"></div>
  </div>
</div>

Для наглядности примера оставим для элементов только один класс

1

.col-lg-

1

primo

1

col-lg-4

1

secondo

1

col-lg-8

1

col-lg-4

1

col-lg-8

1

col-lg-6

Аналогичная ситуация с блоком класса

1

tetro

1

quattro

1

col-lg-2

При этом нужно обратить внимание (если еще не догадались), что при вложении одних блоков в другие ширина блока-родителя принимается по умолчанию равной 12-колонкам.

Смещение (offsetting) колонок в Bootstrap 3

В Bootstrap 3 можно смещать колонки вправо с помощью класса

1

.col-*-offset-*

1

margin-left

Приведу пример, чтобы было наглядно понятно:

<div class="container">
  <div class="row">
    <div class="col-lg-8"></div>
    <div class="col-lg-2 col-lg-offset-2 right"></div>
  </div>
</div>

В этом примере колонка с классом

1

right

1

col-lg-offset-2

1

col-lg-

<div class="container">
  <div class="row">
    <div class="col-lg-8"></div>
    <div class="col-lg-2 col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-xs-offset-2 right"></div>
  </div>
</div>

Адаптивная (responsive) сетка в Bootstrap 3

Переключать ширину сетки с фиксированной на резиновую в Bootstrap 3 можно точно также, как и во 2-й версии. Для этого нужно заменить для блока-контейнера имя класса с

1

container

1

container-fluid

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

Заключение

На этом обзор CSS-сетки в фреймворке Bootstrap 3 можно считать законченным. Субъективно для меня был интересен именно этот вопрос. Что касается рассмотрения остальных классов, предназначенных для оформления различных элементов на странице, то мне они кажутся не такими интересныи и важными.

Может быть, в дальнейшем я и вернусь к расмотрению деталей фреймворка Bootstrap 3.

В этой статье будет рассмотрен вопрос установки локального сервера XAMPP под операционной системой Linux Mint 17.

Почему этот локальный сервер и, тем более, почему именно Linux? Ответы просты - для меня лично сервер XAMPP является наиболее интуитивно понятным. А Linux - потому что в ней мне более удобно кодить на HTML&CSS, нежели под Windows.

Хотя бы взять удобный и полноценный терминал Linux, который всегда под рукой. Также, локальный сервер под Linux, по моим субъективным оценкам, работает гораздо быстрее, нежели под Windows.

С преимуществами работы кодера под Linux разобрались - осталось установить и настроить локальный сервер под эту операционную систему. В этом вопросе нет ничего сложного и есть даже локализованная версия инструкции на официальном сайте Apache Friends -FAQ Linux. В этой статье я постараюсь дать более подробное описание этого процесса, с картинками.

Локальный сервер под Linux выполнен в виде пошагового графического инсталлятора наподобие того, как это делается под Windows. С одной стороны это несколько непривычно для Linux; но с другой стороны так можно быстро и легко установить пакет для новичков в этой операционной системе.

Пакет инсталляции XAMPP под Linux Mint

Скачиваем пакет инсталлятора по ссылке Download официального сайта “Apache Friends”. При этом определяемся, под 32 или 64-битную систему необходим пакет - такой и выбираем. Помимо этого есть две версии пакета - стабильный 1.8.2/PHP 5.4.27 и более новый 1.8.3/PHP 5.5.11.

Мною был выбран пакет 1.8.2/PHP 5.4.27 (именно из-за его стабильности) версии 64-бита, под операционную систему Linux Mint 17 “Qiana” Cinnamon 64-bit.

После скачивания пакета открываю директорию “Downloads” (туда попадают все скачиваемые под Linux файлы) в терминале. Команда

1

ls

1

xampp-linux-x64-1.8.2-5-installer.run

В этом же терминале делаю этот файл исполняемым:

$ sudo chmod 755 xampp-linux-x64-1.8.2-5-installer.run

… затем запускаю файл

1

xampp-linux-x64-1.8.2-5-installer.run

$ sudo ./xampp-linux-x64-1.8.2-5-installer.run

Инсталляция XAMPP под Linux Mint

Запуститься пошаговый графический инсталлятор локального сервера. Пользователи Windows могут почувствовать себя здесь немного в своей стихии. Ниже приведу скриншоты все шагов установки сервера с кратким их описанием, где это необходимо.

Сервер будет установлен в директорию

1

/opt/lampp

В этом шаге необходимо убрать галочку в строке “Learn more about Bitnami for XAMPP”:

В этом шаге оставляем галочку в строке “Launch XAMPP”, чтобы локальный сервер автоматически запустился после установки:

Запуск и остановка XAMPP под Linux Mint

Помимо самого локального сервера будет установлено графическое приложение, задача которого - облегчить управление локальным сервером. Это приложение также запуститься автоматически, но его можно при необходимости запустить и вручную командой:

cd /opt/lampp
sudo ./manager-linux-x64.run

Переходим в этом приложении на вкладку “Manage Servers” и видим список служб локального сервера. Напротив каждой службы в виде лампочки показан ее статус - запущена она (Running) или остановлена (Stopped).

Первоначально запущен только локальный сервер Apache; база данных “MySQL Database” и FTP-сервер “ProFTPD” остановлены. Их можно запустить из данного приложения, просто нажав кнопку “Start”, но я поступлю более Linux-way и воспользуюсь терминалом. Для этого я введу в нем всего одну комадну:

$ sudo /opt/lampp/lampp start

Если все пройдет успешно, то в терминале будет следующий вывод:

Starting XAMPP for Linux 1.8.2-5...
  XAMPP: Starting Apache...ok.
  XAMPP: Starting MySQL...ok.
  XAMPP: Starting ProFTPD...ok.

… что можно проверить и в приложении:

Остановить локальный сервер можно также из терминала командой:

$ sudo /opt/lampp/lampp stop
...
Stopping XAMPP for Linux 1.8.2-5...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...ok.
XAMPP: Stopping ProFTPD...ok.

Установка WordPress под XAMPP в Linux Mint

С установкой локального сервера под Linux Mint разобрались. Стоит еще раз оговориться, что по моим субъективным оценкам он работает гораздо шустрее под Linux, нежели под Windows.

Переходим к заключительной части данной статьи и рассмотрим вопрос установки CMS WordPress под XAMPP в Linux Mint. Все виртуальные сервера располагаются в директории

1

/opt/lampp/htdocs/

То есть, если необходимо создать отдельный экземпляр какой-либо CMS (Joomla, WordPress, Drupal и так далее), то нужно просто создать поддиректорию в директории

1

htdocs

Создаю поддиректорию

1

travel

$ sudo mkdir -p /opt/lampp/htdocs/travel

… и распаковываю в нее скачанный архив WordPress с помощью незаменимой консольной программы

1

mc

1

sudo

После распаковки WordPress приступим к его установке. Создадим вручную конфигурационный файл

1

wp-config.php

1

wp-config-sample.php

1

wp-config.php

$ sudo cp /opt/lampp/htdocs/travel/wp-config-sample.php /opt/lampp/htdocs/travel/wp-config.php

… и отредактируем его через редактор nano:

$ sudo nano -w /opt/lampp/htdocs/travel/wp-config.php

Затем в адресной строке браузера введем (XAMPP у нас все еще запущен, не забываем об этом!):

http://localhost/phpmyadmin

… и в приложении phpMyAdmin создаем базу данных под наш будущий локальный сайт, на котором будет “крутиться” WordPress. Перезапускаем локальный сервер, чтобы он “подхватил” изменения в базе данных MySQL и создание виртульного сервера

1

travel

1

htdocs

$ sudo /opt/lampp/lampp restart
...
Restarting XAMPP for Linux 1.8.2-5...
XAMPP: Stopping Apache...ok.
XAMPP: Stopping MySQL...ok.
XAMPP: Stopping ProFTPD...ok.
XAMPP: Starting Apache...ok.
XAMPP: Starting MySQL...ok.
XAMPP: Starting ProFTPD...ok.

В браузере в адресной строке запускаем установку WordPress:

http://localhost/travel

… далее проходим оставшиеся стандартные шаги инсталляции WordPress и получаем готовый локальный сайт - переходим на него по адресу:

http://localhost/travel

На этом установка CMS WordPress под локальный сервер успешно завершена. А также успешно выполнена рассмотренная выше инсталляция локального сервера под операционной системой Linux Mint 17 “Qiana” Cinnamon 64-bit.

Заключение

Итог выполненных выше шагов - возможность иметь всегда “под рукой” готовый к работе локальный сервер. Еще один плюс к удобству кодинга под Linux. А кодинг под Linux субъективно для меня удобнее кодинга под Windows.

Стоит также сказать, что при установке и настройке могут возникнуть проблемы. В частности, автором данной статьи первоначально производилась установка “чистого” LAMPP, которая потом была удалена. И, хотя деинсталляция была произведена правильно, последующая установка XAMPP привела к тому, что данный сервер не запускался на компьютере.

На этом все.