Категория












Показывать на странице

Всего результатов: 248

Сортировка: Дата публикации
Вы выбрали:
2. Windows 7 - Создание образа системы

Windows 7 - Создание образа системы Новые утилиты резервного копирования, которые появились в Windows 7 очень впечатляют. Сегодня мы рассмотрим создание резервной копии образа диска вашего компьютера без необходимости сторонней утилиты вроде Ghost или True Image. После установки Windows 7 на компьютер одна из первых вещей, которые вы должны сделать, это создать образ диска, чтобы в случае сбоя вы смогли восстановить ее до текущего состояния. Образ - это точная копия всего, что есть на диске. Поэтому лучше создать образ, когда система только что установлена. Это позволит сделать образ файла меньше, и настроить систему после резервного восстановления более гибко. Нажмите на Пуск и выберите Панель управления. На панели управления Windows 7 нажмите на ссылку Архивирование данных компьютера. Затем нажмите на гиперссылки Создание образа системы. На следующем этапе необходимо выбрать место сохранения образа системы. Вы можете выбрать жесткий диск, DVD-диск или сохранить его расположение в сети. Далее необходимо выбрать диски, для которых будет создаваться образ. На экране подтверждения обратите внимание на объем пространства, которое может занять образ системы. На данном этапе вы еще можете вернуться назад и внести необходимые коррективы. Далее идет процесс создания архива, который отображается с помощью индикатора. После завершения процесса вы получите возможность создать диск восстановления системы, который в случае серьёзной ошибки Windows поможет вам с него загрузиться и восстановить систему из образа, который вы сделали на предыдущем шаге. Для восстановления системы необходимо во время загрузки компьютера удерживать нажатой клавишу F8. F8 следует нажать до появления эмблемы Windows. Если появляется эмблема Windows, повторите попытку. На экране Дополнительные варианты загрузки при помощи клавиш со стрелками выберите пункт Восстановить компьютер и нажмите клавишу ВВОД. В меню Параметры восстановления системы выберите пункт Восстановление образа системы и следуйте инструкциям. Если меню не появляется, то воспользуйтесь ранее созданным диском. Вывод Это очень удобная функция, и это на самом деле хорошо работает. Мне также приятно, что такая функция есть в каждой редакции Windows 7. Это позволит вам сэкономить немного денег, не тратя на $50-80 на покупку сторонней утилиты. Например я создал образ, после установки Windows 7, Office 2010 и несколько моих наиболее часто используемых программ. Весь образ занял около 9 Гб, который легко хранится на внешнем диске или на нескольких DVD. Функции резервного копирования и восстановление информации в Windows 7 Утилиты резервного копирования, которые появились в Windows 7 очень впечатляют. Сегодня мы рассмотрим создание резервной копии образа диска вашего компьютера без необходимости сторонней утилиты вроде Ghost или True Image… Я и не знал, что так можно

3. Windows 7 - Добавление приложения в контекстное меню рабочего стола

Windows 7 - Добавление приложения в контекстное меню рабочего стола Если вы хотите действительно быстрый доступ для запуска часто используемых приложений без добавления дополнительных значков на рабочем столе, вы можете добавить это приложение в контекстное меню рабочего стола. Вот, как это сделать. Добавление приложения в контекстное меню рабочего стола Сегодня мы покажем вам, как добавить приложение Chrome в меню. Первое, что вам нужно сделать, это открыть regedit.exe через меню Пуск, а затем перейти в следующий раздел: HKEY_CLASSES_ROOTDirectoryBackgroundshell Далее, необходимо создать новый раздел в shell, название которого должно быть в точности то, что будет появляться в меню на рабочем столе. Щелкните правой кнопкой мыши на shell, а затем выберите Создать -> Раздел. Введите имя новому разделу, которое вы хотите увидеть в контекстном меню рабочего стола. Для этого примера мы будем использовать Chrome. Дополнительно: если вы хотите назначить доступ к элементу меню с помощью комбинации клавиш (Alt+клавиша), то необходимо поставить знак & перед символом, который вы хотите использовать. Например, если вы хотите использовать клавишу C, чтобы запустить Chrome. Лично я не считаю, что это очень полезно, так как вы должны использовать мышь, чтобы щелкнуть правой кнопкой мыши на рабочем столе. Я использую просто мышь, чтобы нажать на пункт. Далее вам нужно создать командный ключ, который будет фактически содержать команду, используемую для запуска приложения. Щелкните правой кнопкой мыши на Chrome, а затем выберите Создать -> Раздел. Дайте новому разделу имя command в нижнем регистре. Для выполнения этого шага вам понадобится полный путь к приложению, которое вы хотите запустить. Вы можете использовать Shift + правую кнопку мыши, чтобы выбрать пункт меню Копировать как путь. Теперь нажмите на пункт command на левой стороне, а затем дважды щелкните на параметре По умолчанию в правой панели, чтобы изменить его значение. Вставьте полный путь к исполняемому файлу, который вы получили. Теперь, нажав на правую кнопку мыши на рабочем столе, Вы увидите новый пункт меню Chrome, с помощью которого открывается приложение для просмотра веб-страниц. Вы можете добавить сколько угодно много приложений в контекстное меню рабочего стола, просто повторив данный алгоритм. Добавление пунктов в контекстное меню Windows для запуска часто используемых приложений Если вы хотите действительно быстрый доступ для запуска часто используемых приложений без добавления дополнительных значков на рабочем столе. То, вы можете добавить это приложение в контекстное меню рабочего стола. Вот, как это сделать…

4. События

События Новости программного обеспечения Новости программного обеспечения

5. Windows 7 - Ограничение доступа к реестру

Windows 7 - Ограничение доступа к реестру Реестр - это очень уязвимая часть операционной системы Windows. Поэтому, если вы не знаете какие именно изменения вы производите в реестре, вы можете серьезно повредить операционную систему своего компьютера. Сегодня мы покажем вам, как ограничить доступ к реестру пользователям операционной системы Windows 7. Сначала введите gpedit.msc в поле поиска меню Пуск. После открытия редактора групповой политики, перейдите в раздел Конфигурация пользователя -> Административные шаблоны, а затем выберите Система. В правой панели дважды щелкните на параметр Запретить доступ к средствам редактирования реестра. Установите переключатель в положение Включить, нажмите кнопку ОК, затем закройте редактор Групповой политики. Теперь, если пользователь попытается получить доступ к реестру... Он получит предупреждение, что он не имеет к нему доступа. Примечание: этот метод использует редактор Групповой политики, который не доступен в домашних версиях Windows 7. Ограничение доступа пользователей к реестру с помощью групповой политики Windows 7 Реестр — это очень уязвимая часть операционной системы Windows. Сегодня мы покажем вам, как ограничить доступ пользователя к реестру с помощью групповой политики Windows 7.

6. Уроки и статьи

Уроки и статьи Уроки и статьи по современным информационным технологиям и программированию.

8. Фреймворк Bootstrap - Начало

Фреймворк Bootstrap - Начало Статья, в которой рассмотрим, что представляет собой платформа Twitter Bootstrap, а также, зачем она нужна и её основные преимущества. Twitter Bootstrap - это открытый и бесплатный CSS фреймворк, который используется для быстрого создания современных дизайнов сайтов. Среди аналогичных систем (Foundation, UIkit, Semantic UI, InK и др.) фреймворк Twitter Bootstrap является самым популярным. Основное назначение данной платформы – это разработка адаптивных интерфейсов веб-страниц (веб-сайтов) посредством складывания его из готовых блоков. Под готовыми блоками Bootstrap понимаются завершённые куски HTML кода (компоненты), классы CSS и плагины jQuery (динамические компоненты). Это означает то, что не надо иметь хорошее знание языка разметки HTML, таблиц стилей CSS и языка сценариев JavaScript с jQuery, для того чтобы вам приступить к проектированию макета сайта. Достаточно просто найти необходимый компонент и встроить его в определённое место на странице. Это основный принцип использование CSS фреймворка Bootstrap. Элементы (кирпичики) Bootstrap Возможности платформы Bootstrap определяются элементами (кирпичиками) посредством которых осуществляется создание интерфейса. Все строительные элементы можно сгруппировать в следующие основные группы: блоки для создания адаптивной сетки (проектирование сетки осуществляется с помощью блоков div и специальных классов Bootstrap); классы CSS (используются для придания элементам определённого оформления); компоненты (готовые блоки интерфейса: меню, хлебные крошки, пагинация, модальное окно, карусель и др.). Начало работы с Bootstrap Многие начинающие разработчики задаются вопросом: Как начать работать с Bootstrap?. На самом деле создавать макеты страниц с помощью Bootstrap очень просто. Первое что вам необходимо - это скачать и подключить Bootstrap к странице. Как это выполнить рассмотрено на уроке Установка платформы Bootstrap. Следующий шаг - это создание сетки. Этот этап является наиболее сложным, особенно для тех, кто первый раз начинает использовать фреймворк Bootstrap. Поэтому на данном этапе стоит остановиться более подробно и разобраться с тем как она (сетка) работает. Понять основные принципы работы с сеткой вам поможет урок Сетка Bootstrap. Заключительный этап - это наполнение ячеек сетки различными HTML элементами и компонентами Bootstrap. Это основные шаги по созданию сайта на Bootstrap с нуля. Кроме этого можно отметить то, что разрабатывать дизайн на фреймворке Bootstrap очень удобно, т.к. все CSS классы и компоненты хорошо согласуются между собой. Если взглянуть на платформу с другой стороны, то можно обнаружить что она состоит из CSS файла (bootstrap.css), плагина JavaScript (bootstrap.js) и каталога fonts, в котором расположены иконки в формате шрифта. Теперь перейдём к рассмотрению основных преимуществ Bootstrap. Если вы всё ещё находитесь в некотором сомнении, стоит или нет использовать Bootstrap для разработки дизайна сайта, то прочитайте их и попробуйте определиться со своим выбором. Преимущества Bootstrap Использование фреймворка Bootstrap предоставляет веб-разработчикам следующие преимущества: Быстрое создание адаптивных интерфейсов (высокая скорость и качество (для начинающих) разработки front-end составляющей сайта по сравнению с её созданием на чистом CSS и JavaScript). Осуществляется это посредством применения блоков сетки, классов CSS и компонентов Bootstrap. Стильный дизайн. HTML элементы, оформленные посредством CSS классов, и компоненты в Bootstrap имеют единый дизайн. Это означает то, что страница будет выглядеть в браузере привлекательно и стильно. Не требует хороших (глубоких) знаний технологий HTML, CSS, языка JavaScript и библиотеки jQuery. Другими словами, вам необходимо иметь только базовые знания этих технологий. Это связано с тем, что ваша задача в основном будет сводиться только в копировании и настройки готовых кусков HTML кода Bootstrap. Понимание скриптового языка JavaScript и библиотеки jQuery, написанной на этом языке, может не потребоваться, т.к. настройку компонентов в Bootstrap можно осуществить с помощью атрибутов data. Кроссбраузерность и кроссплатформенность. Данный фреймворк работает и адаптирован для всех популярных операционных систем и браузеров (Mozilla Firefox, Google Chrome, Safari, Internet Explorer и Opera), работающих в этих системах. Открытость и бесплатность фреймворка. Платформа Bootstrap – это проект с открытым исходным кодом, доступным на github. Она имеет лицензию MIT, которая означает то, что данный фреймворк можно применять бесплатно как для личного, так и для коммерческого использования. Необходимо отметить, что в старых версиях браузера Internet Explorer 6 – 8 некоторые компоненты Bootstrap 3 могут отображаться без градиентов, теней и закруглённых углов. Это связано с тем, что эти версии не поддерживают свойства CSS3, посредством которых это реализовано в фреймворке. Кроме этого Bootstrap 4 вообще не поддерживает браузер Internet Explorer версии 8 и ниже. Если вам все ещё нужна поддержка старых браузеров, то в этом случае вам стоит использовать Bootstrap 3. Следующий урок: Подключение CSS фреймворка Bootstrap к странице. Статья, в которой рассмотрим, что представляет собой платформа Twitter Bootstrap, а также, зачем она нужна и её основные преимущества Статья, в которой рассмотрим, что представляет собой платформа Twitter Bootstrap, а также, зачем она нужна и её основные преимущества. Поломались ссылки на странице? "… Как это выполнить рассмотрено на уроке Установка платформы Bootstrap" у данной ссылки идет адрес itchief.ru/~20 и не ведет на страницу с заголовком об установке ( под статьей "… Следующий урок: Подключение CSS фреймворка Bootstrap к странице." та же проблема ( Спасибо, поправил. Александр, огромное спасибо за труд. Отличный сайт, максимальная информация! Позвольте общий вопрос, как гуру. Что предпочтительнее с точки зрения поддержки последующей и доработок а) Настроить под себя и скачать bootstrap б) скачать не трогая и подключить свой файл со стилями, где отредактировать или дописать стили под дизайн? Заранее спасибо за ответ Спасибо. Из вариантов с CSS: 1 вариант лучше, т.к. объём CSS-кода будет меньше. Но его лучше использовать, когда Вы окончательно знаете то, что хотите получить на выходе. 2 вариант лучше для разработки, т.е. в процессе создания дизайна. Т.к. большинство вещей приходиться дописывать по ходу. К тому же он более прост для обновления. Т.е. когда выйдет новая версия можно будет просто заменить текущие версии файлов фреймворка Bootstrap. Можно использовать этот вариант, и когда дизайн будет полностью готов, вернуться к первому и внести все изменения в саму сборку, например, на странице Customize. Оставшиеся стили вынести в отдельный файл и подключить его. Если имеете знания препроцессора LESS, то лучше остановиться на нём. Т.е. управлять платформой Bootstrap с помощью переменных LESS более просто. Также на LESS более просто писать свои стили. В процессе разработки можно, например, подключить скрипт less.js и он будет сам переводить LESS -> CSS. После разработки, например, убрать less.js и перевести LESS в CSS с помощью компилятора. После этого сжать полученный файл CSS и подключить его к странице. В итоге Вы получите на выходе наиболее оптимальный размер файла CSS. А также удобный вариант (LESS) последующей доработки стилей. Большое спасибо за развернутый ответ.

9. Bootstrap 3 - Начало работы

Bootstrap 3 - Начало работы На этом уроке Вы научитесь подключать платформу Twitter Bootstrap 3 к сайту, а также узнаете, из каких файлов она состоит. Формы распространения платформы Twitter Bootstrap Для изучения платформы Twitter Bootstrap необходимо иметь: базовые знания по технологиям HTML и CSS; текстовый редактор для работы с кодом (Блокнот, Brackets, Notepad++ или др.); браузер (Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer или др.). Платформа Twitter Bootstrap 3 поставляется в двух вариантах доступных для загрузки: скомпилированная и минимизированная версия; версия с исходными кодами. Скомпилированная и минимизированная версия платформы Twitter Bootstrap 3 - это основная форма поставки этой платформы, которую выбирают большинство веб-разработчиков. Данная форма поставки отличается простотой её подключения к вашему сайту, так как она содержит предварительно подготовленные и минимизированные файлы CSS и JavaScript, а также иконки в формате шрифта. Версия платформы с исходными кодами включает в себя, кроме предварительно откомпилированных файлов CSS и JavaScript, ещё исходные коды этой платформы (файлы Less и JavaScript), документацию на английском языке, различные примеры, информацию о лицензии и многое другое. Перейти на сайт проекта Twitter Bootstrap Скачать Bootstrap 3.3.7 На этом уроке мы рассмотрим подключение предварительно скомпилированной и минимизированной версии, которую можно скачать по ссылке приведённой выше. В этой форме поставке платформы Twitter Bootstrap 3 для нас имеют наибольший интерес именно минимизированные (сжатые) версии скомпилированных файлов, так как они имеют меньший размер и, следовательно, увеличивают скорость загрузки веб-страниц сайта. Но перед тем как перейти к подключению платформы Twitter Bootstrap к веб-странице необходимо рассмотреть её структуру на файловом уровне. Файловая структура платформы Bootstrap 3 После загрузки, предварительно скомпилированной и минимизированной версии Bootstrap 3 на компьютер, ее необходимо распаковать с помощью любого архиватора в каталог вашего веб-проекта. Если эту папку рассмотреть, то мы увидим, что платформа Twitter Bootstrap состоит из 3 каталогов (CSS, FONTS и JS) и файлов. bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff Файлы платформы представлены в 2 видах: 1 вид - это предварительно скомпилированные файлы CSS и JavaScript (bootstrap.css, bootstrap-theme.css, bootstrap.js) 2 вид - это предварительно скомпилированные и минимизированные (сжатые) файлы CSS и JavaScript (bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js) 2 вид файлов более предпочтительно использовать для сайта, так как они содержат точно такой же код, как и файлы 1 вида, но в сжатом состоянии. Следовательно, сайты, которые используют 2 вид файлов платформы Twitter Bootstrap 3, загружаются быстрее. Кроме этих файлов, в данную поставку входят ещё 4 файла шрифта Glyphicons (glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff), которые отличаются друг от друга только форматом, в котором хранится данный шрифт. Шрифт Glyphicons состоит из 200 иконок из набора Glyphicon Halflings. Внимание: для работы скриптов платформы Twitter Bootstrap 3 (bootstrap.js и bootstrap.min.js) необходимо иметь подключенную последнюю версию библиотеки jQuery. Создание веб-страницы на HTML 5 и подключения к ней платформы Twitter Bootstrap 3 Итак, мы рассмотрели структуру и назначение файлов платформы Twitter Bootstrap 3. Теперь пришло время подключить данную платформу с помощью скомпилированных и минимизированных файлов к веб-странице. Рассмотрим этот процесс пошагово. В результате наших действий мы хотим получить веб-страницу на HTML 5, к которой подключена платформа Twitter Bootstrap 3. Для демонстрации того что платформа работает, создадим в данной веб-странице кнопку, при нажатии на которую будет показываться всплывающая панель с сообщением. Шаг 1. Создание HTML страницы Откройте ваш любимый редактор кода и создайте файл с именем index и расширением html. Наберите или вставьте в текстовый редактор, следующий код: <!DOCTYPE html> <html lang=ru> <!-- Заголовок веб-страницы --> <head> <!-- Кодировка веб-страницы --> <meta charset=utf-8> <!-- Предназначен для управления режимом отображением веб-страницы в браузерах Internet Explorer --> <meta http-equiv=X-UA-Compatible content=IE=edge> <!-- Включает масштабирование на мобильных устройствах --> <meta name=viewport content=width=device-width, initial-scale=1.0> <!-- Текст заголовка веб-страницы --> <title>Basic Bootstrap Template</title> </head> <!-- Тело веб-страницы --> <body> <button type=button class=btn btn-lg btn-danger data-toggle=popover title=Заголовок всплывающей панели data-content=Основной текст всплывающей панели>Нажмите на кнопку</button> </body> </html> Шаг 2. Подключение платформы Bootstrap 3 к веб-странице Чтобы подключить платформу Twitter Bootstrap 3 к веб-странице необходимо выполнить следующее: Подключить скомпилированный и минимизированный файл Bootstrap CSS (bootstrap.min.css); Подключить последнюю версию библиотеки jQuery, которая необходимо для работы скриптов Bootstrap; Подключить скомпилированный и минимизированный файл Bootstrap JavaScript (bootstrap.min.js). Примечание: файлы JavaScript лучше всего подключать перед закрывающим тегом body (т.е. перед </body>), так как это повысит скорость загрузки основного контента веб-страницы. <!DOCTYPE html> <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>Basic Bootstrap Template</title> <!-- 1. Подключаем скомпилированный и минимизированный файл CSS Bootstrap 3 --> <link href=css/bootstrap.min.css rel=stylesheet> </head> <body> <button type=button class=btn btn-lg btn-danger data-toggle=popover title=Заголовок всплывающей панели data-content=Основной текст всплывающей панели>Нажмите на кнопку</button> <!-- 2. Подключаем библиотеку jQuery, необходимую для работы скриптов Bootstrap 3 --> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script> <!-- 3. Подключаем скомпилированный и минимизированный файл JavaScript платформы Bootstrap 3 --> <script src=js/bootstrap.min.js></script> <!-- Дополнительный сценарий на языке JavaScript, предназначенный для инициализации компонента Bootstrap Popovers --> <script> $(function () $(data-toggle=popover).popover() ) </script> </body> </html> Шаг 3. Сохранение веб-страницы и проверка работы компонента Bootstrap После создания веб-страницы, к которой подключена платформа Twitter Bootstrap 3, её необходимо сохранить в файл с расширением html (Например: index.html). После этого созданную веб-страницу необходимо открыть в веб-браузере и проверить работу компонента Bootstrap Popovers. Примечание: При сохранении файла веб-страницы в текстовом редакторе обратите внимание на его расширение, которое должно быть html. Так как некоторые текстовые редакторы, такие например как блокнот, автоматически сохраняют файлы с расширением txt. Файловая структура проекта, в основу которого положена платформа Twitter Bootstrap 3: Демонстрация работы компонента Bootstrap Popovers: Нажмите на кнопку $(function () $(#bootstrapwithpopover).popover() ) Скачать пример На этом уроке мы познакомимся c формами поставки платформы Twitter Bootsrtap 3, изучим её файловую структуру и научимся подключать данную платформу к веб-страницам сайта На этом уроке мы познакомимся c формами поставки платформы Twitter Bootsrtap 3, изучим её файловую структуру и научимся подключать данную платформу к веб-страницам сайта. Привет, приотличный сайт! В новых версиях у bootstrap появился третий файл js (npm.js) для чего он нужен? Можешь немного рассказать про grunt и bower для чего нужно и как ими пользоваться? Спасибо! Привет, Дамир! Спасибо, обязательно расскажу про nmp.js, grunt и bower, но в виде отдельной статьи. круто буду ждать :) Как и обещал отдельная статья про способы установки платформы и её сборку с помощью Grunt: Установка и сборка платформы Twitter Bootstrap 3 Добрый день. возможно ли каким то образом определять элементы для которых будет применяться ТОЛЬКО bootstrap.min.css Что бы не использовался основной стиль в style.css ТОЛЬКО для выбранныхзаданых элементов. Добрый день. В файле bootstrap.css содержатся общие стили, которые применяются по умолчанию к большинству элементам HTML и стили, которые вы задаёте элементам с помощью классов Bootstrap. Для того чтобы знать какие стили накладываются на элемент: открываем браузер (например: Google Chrome) -> нажимаем клавишу F12 -> открываем вкладку Elements -> выбираем нужный элемент в дереве или с помощью значка Лупа -> изучаем содержимое правой панели. Спасибо, в том и проблема. Не хочется каждый раз пересматривать что использует какой стиль. Может можно оборачивать все в class или id например bootstrap Зачем такие трудности, HTML-элементы не будут иметь оформление пока Вы к ним не добавите классы платформы Twitter Bootstrap 3. Например: элемент div () — без оформления, div с классами alert и alert-danger — это элемент, к которому применяются стили Bootstrap в соответствии с этими классами. Т.е. элемент не будет иметь оформление Bootstrap без Вашего ведома. P.S. Без вашего ведома применяются только некоторые общие стили Bootstrap, которые никакого особого оформления не несут. Зачастую разработчики в своих style.css (в WordPress) использую элементы bootstrap c таким же названиями. Здравствуйте! Начал знакомиться с bootstrap 3.3.5 Пока на базе подключения Возникли вопросы: 1. Почему Вы js подключаете в body, а не в header 2. Расскажите подробно, как подключить свой css файл (и переопределять файлы bootstrap.css) Чтобы при выходе новой версии — обновить без проблем 3. Распишите подробно пожалуйста о файле bootstrap-theme.css (для чего он нужен, как его подключить и как его использовать) 4. шрифты как Вы подключаете? Я подключил так: 1. css @font-face 3. Там было примерно написано тоже самое, что я и Вам написал. А про него рассказывать то и больше нечего. Просто его подключаете и у Вас некоторые компоненты получают анимацию автоматически. Какие-то задавать явные классы не надо. Просто его подключаете и компоненты Bootstrap типа кнопок, меню, выпадающих списков и многих других получают анимацию или какие-то эффекты. 4. Для этого необходимо использовать пустой элемент span или i, к которому необходимо добавить классы. Первый класс glyphicon (он указывает что необходимо использовать шрифт — font-family: Glyphicons Halflings), второй класс за саму иконку (например, звёздочка: glyphicon-star) //эта строчка отобразит звёздочку из шрифта Glyphicons Halflings <span class="glyphicon glyphicon-star"></span> Т.к. это шрифт, то и стили для него как для текста: //большая звёздочка (40px) красного цвета <span class="glyphicon glyphicon-star" style="font-size:40px; color:#ff0000"></span> Если честно как-то не хочется разбираться в чужом коде. Попробуй сначала сам разобраться что у тебя там не получается… Т.к. если Вы найдёте свою ошибку, то в следующий раз её не допустите. Здравствуйте! Спасибо вам за труд — с помощью вашего сайта я научилась верстать :). У меня 2 вопросы: 1. Чтобы ускорить скорость загрузки сайта, можно в файле bootstrap.min.css оставить только те стили, которые использую? А остальные удалить? 2. Обязательно подключить шрифты, если я не использую? Спасибо, Ануш. Да, это очень важный этап, но он необходим только для боевого сайта. Наиболее просто это сделать на странице getbootstrap.com/customize/. Данная вещь специально предназначена для создания сборки, в которую будут входить только необходимые стили и скрипты. Для этого в разделе Less files и jQuery plugins оставляем включёнными только необходимые вещи. Например, если Вам не нужны шрифты, то отключаем Glyphicons. Так проделываем со всем что Вам не нужно… После этого переходим в конец страницы и нажимаем на кнопку Compile and Download. Получаем сборку платформы Twitter Bootstrap 3 и подключаем её (или заменяем существующие файлы). Размеры файлов Вас приятно удивят :) Т.е. ни чего в ручную делать не надо. Обо всё за Вас уже позаботились разработчики… После этого Ваш сайт должен более быстро загружаться… Огромное спасибо) Потому что оптимизация картинок, подключение кэш и т.п так и не дали ожидаемый результат. Осталось оптимизировать код, но как, не знала...Bootstrap для меня ПОКА темный лес. Спасибо :) Доброго времени суток! У меня возник такой вопрос — если помимо bootstrap.js и jquery.js подключить jquery-ui.js, никаких проблем не возникнет? UI с bootstrap-ом конфликтовать не будет? Заранее спасибо за ответ! Здравствуйте, Игорь. Да, т.к. некоторые компоненты jQuery UI имеют такие же названия, что и компоненты Bootstrap. Например, tooltip и button. Чтобы этого избежать, можно, например, сделать так: <!-- Подключаем jQuery UI --> <script src="jqueryui.js"></script> <!-- Изменяем имена плагинов jQuery UI для того чтобы они не совпадали с Bootstrap --> <script> $.widget.bridge(uitooltip, $.ui.tooltip); $.widget.bridge(uibutton, $.ui.button); </script> <!-- Подключаем Bootstrap --> <script src="bootstrap.min.js"></script> Спасибо за ответ! Буду знать и в будущем применять. И, кстати, это единственные два компонента или еще есть совпадающие? Нет, только этих два. К тому же можно выбрать при скачивании кастомную сборку, исключив из Bootstrap или jQuery UI эти компоненты. Да, спасибо! Уже посмотрел, так же как и на jQuery UI можно кастомную версию собрать… Спасибо Вам за отзывчивость. Очень полезный сайт.

10. Bootstrap 3 - Сетка

Bootstrap 3 - Сетка В этой статье познакомимся с инструментами фреймворка Bootstrap 3, предназначенных для создания адаптивных макетов веб-страниц сайтов. Инструменты Bootstrap 3 для создания адаптивного макета веб-страницы Фреймворк Bootstrap включает в себя все необходимые инструменты, с помощью которых можно создать адаптивный макет сайта. В эти инструменты входят обёрточные контейнеры, мощная система сеток и отзывчивые служебные классы. Обёрточные контейнеры Обёрточный контейнер - это основной элемент адаптивного макета в Bootstrap. Именного с него начинается вёрстка всей страницы или самостоятельных её частей (например, шапки, основного меню, основной области или футера) в зависимости от стратегии разработки. Контейнер в Bootstrap бывает адаптивно-фиксированным (<div class=container>...</div>) или адаптивно-резиновым (<div class=container-fluid>...</div>). Первый (адаптивно-фиксированный контейнер) характеризуется тем, что он имеет постоянную ширину. Но эта фиксированная ширина является адаптивной, т.е. она меняется в зависимости от того, какой viewport (ширину области просмотра) имеет браузер. В следующей таблице приведены соответствие ширины области просмотра (viewport) браузера ширине адаптивно-фиксированного контейнера Bootstrap: Ширина контейнера (container) Ширина рабочей области окна браузера Ширина контейнера = ширине viewport <768px 750px >= 768px и <992px 970px >= 992px и <1200px 1170px <=1200px Кроме установления ширины адаптивно-фиксированный контейнер Bootstrap ещё центрирует себя в горизонтальном направлении относительно краёв страницы. Выполняет это он с помощью CSS свойств margin-left:auto и margin-right:auto. Кроме этого, адаптивно-фиксированный контейнер задает внутренние отступы слева и справа по 15рх (с помощью CSS свойств padding-left:15px и padding-right:15px) для содержимого, которое в него помещено. Адаптивно-фиксированный контейнер Bootstrap <div class=container> ... </div> Адаптивно-резиновый контейнер отличается от адаптивно-фиксированного тем, что он занимает всю ширину (100%) окна браузера. Кроме этого, он также как и адаптивно-фиксированный контейнер задает внутренние отступы слева и справа по 15рх для содержимого, которое в него помещено. <div class=container-fluid> ... </div> Адаптивно-резиновый контейнер Bootstrap Обратите внимание: При разработке макетов страниц сайтов обычно не применяют вкладывание одних обёрточных контейнеров Bootstrap в другие. Система сеток Bootstrap Сетка Bootstrap - это список предопределённых классов, с помощью которых можно задать поведение необходимым блокам (HTML элементам) и построить с помощью них нужный макет сайта. Кроме обёрточных контейнеров, предназначенных для задания основной области содержимого, в системе сеток фреймворка Bootstrap имеются ещё 2 других элемента. Это ряды (блоки div с классом row) и адаптивные блоки (блоки div с классом col-?-?). Ряд - это специальный блок, который применяется только для оборачивания адаптивных блоков. Его основное назначение - это нейтрализация положительного внутреннего отступа (+15px слева и справа) обёрточного контейнера или адаптивного блока. Bootstrap - ряд, расположенный внутри адаптивно-фиксированного контейнера Например (внутренние отступы): container (+15px) -> row (-15px) -> col (+15px) -> контент container (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент Т.е. вышеприведённый пример показывает, что независимо от того в каком адаптивном блоке находится контент, он всегда будет иметь правильный отступ от края контейнера (т.е. 15px слева и справа). Адаптивные блоки Bootstrap - это основные строительные кирпичики макета. Именно они и позволяют построить необходимую структуру страницы. Ширина адаптивным блокам col-?-? задаётся в относительной форме с помощью указания целого числа от 1 до 12 (количества колонок Bootstrap) вместо первого вопроса. Число 1 - устанавливает ширину адаптивному блоку равную 1/12 ширины родительского блока, а 12 - ширину, равную 12/12 ширины родительского блока. Т.е. данное число задаёт ширину блока в процентном отношении от ширины родительского контейнера. Как задаётся ширина адаптивного блока в Bootstrap Кроме указания ширины адаптивному блоку необходимо ещё указать и класс устройства (вместо 2 вопроса). Класс устройства будет определять то, на каком viewport будет действовать эта ширина. В Bootstrap 3 различают 4 основных класса. Это xs, sm (ширина viewport >= 768px), md (ширина viewport >= 992px) и lg (ширина области просмотра браузера >=1200px). Например, адаптивный блок с классом col-xs-12 col-sm-6 col-md-4 col-lg-3 будет иметь на устройстве xs ширину 100% (12/12), на sm - 50% (6/12), на md - 33,3% (4/12), на lg - 25% (3/12). Кроме этого следует обратить внимание на то, что адаптивные блоки не ограничивают свой диапазон. Т.е. если вы в атрибуте class адаптивного блока указали xs, но не указали sm, то его действие распространиться и на область действия этого диапазона. Например, адаптивный блок с классом col-xs-6 col-lg-3 будет иметь на устройствах xs, sm и md ширину 50% (6/12), на lg - 25% (3/12). Адаптивный блок, также как и контейнер, имеет положительные отступы слева и справа по 15px для контента, который в него будет помещён. Внимание. В правильном макете, построенном на основе сетки Bootstrap, адаптивный блок должен иметь всегда в качестве своего родителя ряд. Например, разобьём блок на 3 равные колонки, которые на xs будут отображаться вертикально, а на sm и выше горизонтально: <div class=row> <div class=col-xs-12 col-sm-4>...</div> <div class=col-xs-12 col-sm-4>...</div> <div class=col-xs-12 col-sm-4>...</div> </div> Если вам необходимо рассчитать минимальную ширину колонок в пикселях, то это правильно делать в контрольных точках (т.е. когда действие одного класса сменяется другим). Например, возьмём простую разметку: <div class=container> <div class=row> <div class=col-xs-12 col-md-8>1 блок...</div> <div class=col-xs-12 col-md-4>2 блок...</div> </div> </div> Контрольные точки (viewport) ширина контента 1 блока ширина контента 2 блока 320px 320px - padding (30px) = 290px 320px - padding (30px) = 290px 750px 750px - padding (30px) = 720px 750px - padding (30px) = 720px 970px 970px*8/12 - padding (30px) = 616,7px 970px*4/12 - padding (30px) = 293,3px 1170px 1170px*8/12 - padding (30px) = 750px 1170px*4/12 - padding (30px) = 360px Расположение адаптивных блоков в родительском элементе Адаптивные блоки располагаются в родительском элементе один за другим строчками. В одну строчку помещаются адаптивные блоки с суммарным количеством колонок не больше 12 (по умолчанию). Т.е. блоки, которые не помещаются в первую строку, располагаются в следующей строке и т.д. Как располагаются адаптивные блоки? В Bootstrap 3 адаптивные блоки являются плавающими (float:left). Это необходимо учитывать при создании макета веб-страницы. Перед блоком, который должен начинаться с новой строки обязательно необходимо расположить пустой div элемент с классом clearfix. Чтобы данный блок оказывал своё действие только для определённых устройств, его необходимо сделать видимым только для них с помощью соответствующих классов, приведённых ниже. Например, если в вышеприведённом примере высота 1 блока будет выше, чем 2 блока. То 3 блок будет располагаться не на новой строчке, а прилипнет к правой стороне 1 блока. Особенности float блоков Чтобы этого не допустить, необходимо добавить блок с классом clearfix и сделать его видимым для необходимых устройств (на которых эта разметка действует, например, на md и lg): <div class=row> <div class=col-xs-12 col-md-4>1 блок...</div> <div class=col-xs-12 col-md-6>2 блок...</div> <div class=clearfix hidden-xs hidden-sm></div> <div class=col-xs-12 col-md-5>3 блок...</div> </div> Как вкладывать колонки Создание разметки в Bootstrap - это процесс вкладывания одних адаптивных блоков в другие. При этом их ширина - это всегда относительный параметр, который задаётся в процентном отношении (количеством колонок) от ширины родительского блока. Т.е. на любом уровне вложенности, например, ширина адаптивного блока в 6 колонок - это всегда 50% (6/12*100%) от ширины родительского элемента. Например, разобьём некоторый блок на 4 блока (2 в первой строке и 2 - во второй). Для простоты, разметку на всех устройствах выполним одинаковую: <div class=row> <div class=col-xs-6>1 блок...</div> <div class=col-xs-6>2 блок...</div> <div class=clearfix></div> <div class=col-xs-6>3 блок...</div> <div class=col-xs-6>4 блок...</div> </div> После этого, разметим 3 блок аналогично (2 на 2): <div class=row> <div class=col-xs-6>1 блок...</div> <div class=col-xs-6>2 блок...</div> <div class=clearfix></div> <div class=col-xs-6> <div class=row> <div class=col-xs-6>3-1 блок...</div> <div class=col-xs-6>3-2 блок...</div> <div class=clearfix></div> <div class=col-xs-6>3-3 блок...</div> <div class=col-xs-6>3-4 блок...</div> </div> </div> <div class=col-xs-6>4 блок...</div> </div> Не трудно заметить, что разметка 3 блока выполнена аналогично, т.е. также как и основного блока. Другими словами, в Bootstrap размечать одни блоки необходимо также как и другие, не зависимо от того, какой блок куда вложен. Классы для адаптивного смещения блоков В Bootstrap имеются адаптивные классы (col-?-offset-?), с помощью которых вы можете сдвинуть блок на определённое количество колонок вправо. Первый ? необходимо заменить на тип устройства (xs, sm, md или lg). Второй ? на количество колонок. Например, зададим блоку на md устройствах ширину 8 колонок и расположим его в строке по центру (т.е. сдвинем его на 2 колонки вправо): <div class=row> <div class=col-xs-12 col-md-8 col-md-offset-2>1 блок...</div> </div> Кроме инструментов для адаптивного смещения блоков, в Bootstrap 3 есть ещё специальные классы, с помощью которых можно изменить порядок элементов в пределах одной строки. Отзывчивые служебные классы Bootstrap 3 Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства. Кроме указания устройства (xs, sm, md, lg), на котором будет виден блок, необходимо ещё указать то, как он на этом устройстве должен отображаться. Возможные варианты: inline, block и inline-block. Класс Описание visible-xs-? Делает элемент видимым только на устройствах с очень маленьким экраном xs (ширина viewport <768px). На других устройствах эти элементы не видимы. visible-sm-? Делает элемент видимым только на устройствах, имеющих экран sm (ширина viewport >=768px и <992px). На других устройствах эти элементы не видимы. visible-md-? Делает элемент видимым лишь на устройствах, имеющих экран md (ширина viewport >=992px и <1200px). На других устройствах эти элементы не видимы. visible-lg-? Делает элемент видимым только на устройствах, имеющих экран lg (ширина viewport >=1200px). На других устройствах эти элементы не видимы. Вместо знака ? необходимо указать block, inline или inline-block. Т.е. указать, как данный элемент должен отображаться. Например, добавление к элементу класса visible-md-block будет означать то, что он будет отображаться только на устройствах, имеющим viewport md (width viewport >=992px и <1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;). Примечание: Эти классы также можно использовать совместно для того, чтобы элементы были видны на нескольких устройствах. Например, если вы примените к элементу классы visible-xs-inline и visible-md-inline, то это сделает его видимым на устройствах, имеющих как маленький экран, так и средний. Отображаться данный элемент будет как строчный (CSS: display:inline;). Кроме классов для отображения элементов, Bootstrap 3 содержит ещё и другие классы. С помощью них можно скрыть элементы на определенных устройствах. Класс Описание hidden-xs Скрывает элемент на устройствах xs (ширина viewport <768px). hidden-sm Скрывает элемент на устройствах sm (ширина viewport >=768px и <992px). hidden-md Скрывает элемент на устройствах md (ширина viewport >=992px и <1200px). hidden-lg Скрывает элемент на устройствах lg (ширина viewport >=1200px). Эти классы тоже можно использовать совместно, чтобы сделать элемент не видимым на нескольких устройствах. Например, добавив к элементу классы hidden-xs и hidden-sm, вы сделаете его сразу не видимым на 2 устройствах (xs и sm). Кроме вышеприведённых отзывчивых классов, фреймворк Bootstrap 3 ещё содержит и такие, которые позволяют управлять видимостью элементов при печати. Класс Описание visible-print-block Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение block. visible-print-inline Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение inline. visible-print-inline-block Элемент, имеющий указанный класс не будет отображаться на странице. При печати этот элемент будет виден, и иметь в качестве CSS-свойства display значение inline-block. hidden-print Элемент, имеющий указанный класс не будет отображаться при печати. На странице (в браузере) данный элемент будет виден. Пример разметки блока с помощью сетки Bootstrap 3 В качестве примера рассмотрим процесс разработки макета некоторого блока. Его структуру представим посредством 3 адаптивных блоков, которые будут на разных устройствах отображаться по-разному. Разметка блока с помощью сетки Bootstrap Разрабатывать макет всегда начинают с xs. На данном устройстве блоки имеют одинаковую ширину (12 колонок Bootstrap). <div class=row> <div class=col-xs-12>Контент блока 1...</div> <div class=col-xs-12>Контент блока 2...</div> <div class=col-xs-12>Контент блока 3...</div> </div> На sm данные адаптивные блоки располагаются следующим образом: 1 - занимает всю ширину родительского блока, блоки 2 и 3 (каждый из них) - ширину, равную 6 колонкам Bootstrap. <div class=row> <div class=col-xs-12 col-sm-12>Контент блока 1...</div> <div class=col-xs-12 col-sm-6>Контент блока 2...</div> <div class=col-xs-12 col-sm-6>Контент блока 3...</div> </div> Макет блока для устройств md На md блоки 1 и 2 расположены на первой строке, а 3 блок - на 2 строке. 1 блок имеет ширину, равную 8 колонкам Bootstrap (col-md-8), 2 блок - 4 колонки (col-md-4). Т.к. третий блок должен всегда располагаться на 2 строке, то перед ним необходимо поместить дополнительный пустой блок с классом clearfix. Данный блок не позволит 3 блоку обтекать предыдущие, и он всегда будет располагаться на 2 стоке. Также необходимо иметь в виду, что это нужно сделать только для устройств md. Для этого необходимо к пустому блоку дополнительно добавить ещё класс visible-md-block. <div class=row> <div class=col-xs-12 col-sm-12 col-md-8>Контент блока 1...</div> <div class=col-xs-12 col-sm-6 col-md-4>Контент блока 2...</div> <div class=clearfix visible-md-block></div> <div class=col-xs-12 col-sm-6 col-md-12>Контент блока 3...</div> </div> Разметка блока для устройств, имеющих большой viewport (lg) На lg адаптивные блоки расположены горизонтально и занимают вместе всю ширину. 1 блок имеет ширину равную половине ширины родительского элемента (col-lg-6), 2 блок - одну четвертую ширины (col-lg-3), и 3 блок - тоже должен занимать одну четвертую ширину родительского элемента (col-lg-3). <div class=row> <div class=col-xs-12 col-sm-12 col-md-8 col-lg-6>Контент блока 1...</div> <div class=col-xs-12 col-sm-6 col-md-4 col-lg-3>Контент блока 2...</div> <div class=clearfix visible-md-block></div> <div class=col-xs-12 col-sm-6 col-md-12 col-lg-3>Контент блока 3...</div> </div> Статьи, связанные с этой темой: Ещё немного информации о сетки и создании разметки Как создать адаптивно-фиксированный макет сайта? Пример адаптивно-резинового макета сайта Как разработать в Bootstrap обычный (не адаптивный) макет фиксированной ширины Как создать свою сборку Bootstrap, например состояющую из 24 или 16 колонок Про создание своих собственных адаптивных контейнеров Основы создания сайта с помощью системы сеток Bootstrap 3 Урок, содержащий информацию о системе сеток Bootstrap 3, и описывающий процесс создания макета сайта под различные устройства. На сайте Bootstrap3 в пункте меню Настроить (http://bootstrap-3.ru/customize.php) есть раздел Медиазапросы и точки прерывания. Параметры данного раздела отлично описаны в текущей статье. Однако, один параметр не упомянут и мне не понятен. Что означает переменная @screen-xs? У меня по умолчанию стоит 480 px. Автору статей большое спасибо. Для начинающих, как я, реальная помощь Переменная @screen-xs является устаревшей и, начиная с версии Twitter Bootstrap 3.0.1 не используется. Добрый день! Столкнулся с проблемой размещения col-lg по центру. Каким образом можно разметить один блок по центру? И да бы он был нужной мне ширины Добрый день, Ололоев. Чтобы разместить блок col-lg по центру необходимо: 1. Задать ему ширину, например 8 колонок Bootstrap: <div class="col-lg-8">...</div>2. Установить ему смещение, равное 2 колонкам Bootstrap: <div class="col-lg-8 col-lg-offset-2">...</div>Число 2 получается следующим образом: (12 (всего колонок) – 8 (ширина блока)) / 2 (на каждую сторону) = 2 колонки. В итоге: <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> ... </div> <div class="clearfix visible-lg-block"></div> ... </div> </div> Здравствуйте. CMS Drupal. Такая история. Допустим есть блок, левая колонка (col-md-3) и контент (col-md-9). Например на одной из страниц сайта в левом блоке нет контента, и он автоматически скрывается. Так вот в таком случае контент смещается на 3 колонки влево. Вопрос. Как можно, и можно ли, сделать так, чтобы контент не смещался на 3 колонки влево, а увеличивался до col-md-12??? Здравствуйте, Юрий. Изменить класс можно только с помощью JavaScript. Также желательно блокам назначить идентификаторы. Для проверки содержимого левого блока использовал функцию is(:empty), которая проверяет на наличие контента в левом блоке. В итоге получился следующий код скрипта на jQuery: <body> <div class="container"> <div class="row"> <div id="leftblock" class="col-md-3"></div> <div id="mainblock" class="col-md-9">...</div> </div> </div> <script> $(document).ready(function() </style> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 block1" style="height:300px; background:green;">Блок №1</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 block2" style="height:100px; background:orange;">Блок №2</div> <div class="clearfix visible-md-block"></div> <div class="col-lg-3 col-md-12 col-sm-6 col-xs-12 block3" style="height:150px; background:blue;">Блок №3</div> </div> </div> Т.е. я рассчитал ширину всех контейнеров для lg вручную, т.е. lg — ширина контейнера 1170px. 1 колонка Bootstrap = 1170/12 = 97.5px. col-lg-6 = 97.5*6 = 585px. col-lg-3 = 97.5*3 = 292.5px. А Вам надо 300px, т.е. необходимо уменьшить 1 и 3 блок на 300-292.5/2 = 3.75px. Т.е. 1 блок = 585px — 3.75px = 581.25px, 2 блок = 300px, 3 блок = 292.5px — 3.75px = 288.75px. Можно конечно и по другому… Добрый день! У меня возник такой вопрос: <div class="clearfix visible-md-block"></div> — Это мы пишем для того, чтобы 3 блок располагался с новой строки и так же убираем у него обтекание. А для планшетов не нужно прописывать после первого блока <div class="clearfix visible-sm-block"></div> чтобы следующие два блока также располагались на новой строке и также убрать обтекание у второго блока?! Здравствуйте, Игорь! Это мы пишем для того чтобы 3 блок не обтекал предыдущие и располагался с новой строки. Т.к. модель float имеет такую особенность, что 3 блок может пристроиться к правой стороне 1 блока (если высота 1 блока будет больше чем 2-ого). Обтекание мы убираем у пустого блока, который имеет класс clearfix. А третий блок уже ничего обтекать не может, т.к. перед ним расположен этот пустой блок, который обтекать нельзя. А на sm-устройствах, 1 блок занимает всю ширину и 2 блок к нему никак не сможет пристроиться, поэтому здесь clearfix не используем. Оказалось все элементарно )) Действительно, если высота 1-ого блока больше второго, то 3-ий будет обтекать 1-ый. Спасибо за ответ!) Здравствуйте, это все прекрасно. Но столкнулся с проблемой — нужны 5 колонок равной ширины. С помощью данной сетки у меня получается их разместить ровно по центру, все работает идеально на любом экране. Но проблема в том, что ширина у них 16.67% (то есть 6 блоков в ряд), а мне нужно 20%. Как можно решить? Здравствуйте! Наиболее простой вариант — это изменить количество колонок Bootstrap на число кратное 5. Например: 15. Это можно сделать на странице Customize. Там всего лишь надо изменить значение переменной @grid-columns в разделе Grid system на 15 и нажать внизу страницы на кнопку Compile and Download. После этого Вы получите архив Bootstrap, в котором сетка будет состоять из 15 колонок. Таким образом можно изменять данный фреймворк под свои нужды. После этого на странице Вам уже необходимо будет использовать для блоков ширину равную 3 колонкам Bootstrap для того чтобы создать данный макет. Нынешние флагманы (да и не только) имеют разрешение FHD, т.е. 1080 пикселей по ширине. Получается, на них информация будет отображаться как на ноутбуках, а не как на смартфонах? Не совсем, т.к. это физическое разрешение экрана. В смартфонах и планшетах используется упаковка пикселей в так называемые точки (на iPhone и iPad — это apple points, на Android-устройствах — это DIP). Например, если взять iPhone 5, то он имеет физическое разрешение 1136x640. Но его дисплей Retina Display имеет двойную плотность пикселей, т.е. для формировании 1 точки используются 4 физических пикселя. Его разрешение будет составлять в итоге 568x320 точек. На android-экранах разрешения экрана в точках зависит тоже от плотности экрана. Т.е. чем больше плотность экрана, тем больше физических пикселей формируют одну точку. На Android-устройствах различают следующую плотность экрана: 1, 1.33, 1.5, 2, 3. Т.е. например экран с физическим разрешением 1280x720 и плотностью 2 будет иметь разрешение в браузере 640x320 точек (DIP). А экран с физическим разрешением 1920x1080 пикселей и плотностью 3 будет иметь тоже самое разрешение в браузере — 640x320 точек (DIP). Например устройство Google Nexus 4, которое имеет физическое разрешение 1280x768px и плотность 2 будет иметь в браузере разрешение 640x368 точек (DIP). Как-то так… Т.е. ширина даже самого хорошего смартфона с большим экраном составит по ширине не больше 384 точек. Юрий, я бы на вашем месте решил проблему со стороны backend, то есть что бы друпал генерируя страницу проставлял ширину блока, т.е. есть сайдбар col-md-9, а если нет col-md-12. Просто зачем лишний раз нагружать клиентскую строну? Здравствуйте! Прошу Вас помочь мне с освоением Bootstrap. Необходим макет, как указан на картинке внизу. Как это сделать? Запутался с rowами. Мне нужно все блоки в один row что ли поставить, или?.. Здравствуйте, Яков. Блок row будет только один, по-другому Вы просто не сделаете. Не совсем понял с блоком на устройстве XS. Макет будет выглядеть следующим образом: <div class="container"> <div class="row"> <div class="col-lg-8 col-sm-12"> <div>1</div> <div>2</div> </div> <div class="col-lg-4 col-sm-6">3</div> <div class="clearfix visible-lg-block"></div> <div class="col-lg-4 col-sm-6">4</div> <div class="clearfix visible-sm-block"></div> <div class="clearfix visible-md-block"></div> <div class="col-lg-4 col-sm-6">5</div> <div class="col-lg-4 col-sm-6">6</div> </div> </div> Разметка: <div class="contrainer-fluid"> <div class="row"> <div id="header1" class="col-lg-7 col-md-7 col-sm-7 col-xs-7" style="background-color:green;"> <img src="img/logo.jpg" class="logo">ГосСервисСтрой </div> <div id="header2" class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:blue;"> <span class="telephone1">+79091033949</span> <span class="telephone1">+79091032949</span> <span class="consult">Закажите консультацию...</span> </div> </div> </div> Вопрос: как мне сделать так, чтобы при достижении размера (min-width 320px) и (max-width 479px), блок div с классом col-lg-5 находился под блоком div с классом col-lg-7. Т.е. чтобы они были друг под другом на маленьких устройствах. На текущий момент, у меня получается так, что они располагаются друг за другом на экранах, имеющих размер меньше 479px, а должны быть друг под другом (вертикально). Сделайте свою сборку Bootstrap на странице getbootstrap.com/customize/ Найдите на этой странице параметр @container-large-desktop и измените его (1140px + @grid-gutter-width) на (1570px + @grid-gutter-width). В итоге у вас на lg размер будет равен 1600 (1570+30). 1. Добавить к блокам идентификаторы (id). Например 1 блоку — header1, 2 — header2. HTML-код: <div class="contrainer-fluid"> <div class="row"> <div id="header1" class="col-lg-7 col-md-7 col-sm-7 col-xs-7"> ... </div> <div id="header2" class="col-lg-5 col-md-5 col-sm-5 col-xs-5"> ... </div> </div> </div> 2. Добавить правило CSS, которое будет определять ширину блоков в диапазоне от 320px до 479px: CSS-код: @media (min-width: 320px) and (max-width: 479px) #header1, #header2 width: 100%; Спасибо огромное! Материал изложен очень ПОНЯТНО. До этой статьи я перелопатил кучу различных источников, а здесь все как-то упорядочилось и встало на свои места. Наглядно, просто и доступно. Благодарю. Здравствуйте. А как можно добавить разрешение. В сетке есть такие элементы как col-sm и col-xs, но col-xs начинается с слишком широкого разрешения. Как добавить разметку, чтобы например col-xs занимал 2 столбика, а свой класс занимал один столбик и по ширине был 320px? По настройке платформы есть уже достаточное количество уроков. 1. Самый простой способ — это использование страницы _http://getbootstrap.com/customize/ В ней есть раздел Media queries breakpoints в котором необходимо установить контрольные точки для @screen-xs, @screen-sm, @screen-md и @screen-lg. После этого необходимо установить ширину контейнера для sm, md и lg в разделе Container sizes. Ещё можно установить количество колонок в переменной @grid-columns, например 24. Это позволит более точно регулировать ширину. После этого необходимо скомпилировать и получить необходимую сборку. 2. Ещё есть способ с помощью переменных LESS и CSS. Настройка ширины осуществляется с помощью колонок Bootstrap. Т.е. на col-xs-4 — будет 4/24 = 16.7% от ширины контейнера в который данный блок помещён. Если необходимо, например, на md другую ширину, то выставляете её опять с помощью колонок (при 24 колонках точность может быть до 1/24), например, 9 колонок = 37.5%. Может быть необходимо в дополнение к статьям по настройке системы добавить ещё статью по настройке сетки Bootstrap? Очень полезный сайт, много понятной информации, респект и уважуха. Возник вопрос, есть ли в Bootstrap возможность менять порядок блоков. Например, есть ряд, в нем три блока col-lg-4, но при размере экрана например SM ( col-sm-6, col-sm-6, col-sm-12) сделать чтобы блок который col-sm-12 был сверху блоков col-sm-6, т.е при смене размера экрана блок перемещался грубо говоря вверх а не вниз Прошу прощения, ответ нашелся bootstrap-3-reordering-columns-grid-system Добрый день. Как сделать четыре строки с одинаковой высотой и чтобы они занимали весь экран! Можно сделать, например, так (использую ед. изм. vh). Код CSS: .col-xs-10, .col-xs-2, .col-xs-12 height: 25vh; Код HTML: <body> <div class="container-fluid"> <div class="row"> <!-- 1 строка --> <div class="col-xs-10"></div> <div class="col-xs-2"></div> <!-- 2 строка --> <div class="col-xs-12"></div> <!-- 3 строка --> <div class="col-xs-12"></div> <!-- 4 строка --> <div class="col-xs-12"></div> </div> </div> </body> Александр, спасибо! Добрый день! Подскажите как сделать вот такое размещение блоков… не понимаю как сделать вариант 6 спасибо… Здравствуйте. Насколько я понимаю, Вам нужно в зависимости от ориентации. Можно сделать так. CSS: @media screen and (orientation:landscape) #block1, #block2 width: 50% !important; HTML: <div class="container"> <div class="row"> <div id="block1" class="col-xs-12 col-sm-6"></div> <div id="block2" class="col-xs-12 col-sm-6"></div> </div> </div> не получается! у меня вот какой код <section id="первая" > <div class="container"> <div class="row text-center header "> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h1>БЛА-БЛА</h1> </div> </div> <div id="блок1 "class="col-xs-12 col-sm-6 col-md-6 col-lg-6> <div> ...... </div> </div> <div id="блок2 "class="col-xs-12 col-sm-6 col-md-6 col-lg-6> <div> ...... </div> </div> </div> </section> ИЗВИНЯЮСЬ! потерял кавычку и поэтому не получилось… :( Все работает, Спасибо! Добрый день. Скрыл некоторые поля таблицы в мобильной версии. Как теперь сделать, чтобы при нажатии на кнопку выехали мои скрытые поля. Что-то типо навигации, только в таблице Здравствуйте. Покажите, что у Вас за код (только основное). А так как-то непонятно что Вам ответить :) Спасибо за ваши учебные статьи Может прописать col-xs-12 обоим? Такой вариант возможен? <div class="container"> <div class="row"> <div class="col-lg-8 col-sm-12"> <div>1</div> <div>2</div> </div> <div class="col-lg-4 col-sm-6">3</div> <div class="clearfix visible-lg-block"></div> <div class="col-lg-4 col-sm-6">4</div> <div class="clearfix visible-sm-block visible-md-block"></div> <div class="col-lg-4 col-sm-6">5</div> <div class="col-lg-4 col-sm-6">6</div> </div> </div> Адаптивные блоки с классом col-xs-* будет использоваться на устройствах, имеющих ширину <768px. А тут необходимо сделать в пределах диапазона от 320px до 479px. Тут без написания кода CSS не обойтись. Да, так можно. Здравствуйте! Подскажите пожалуйста как растянуть на все блоки фоновое изображение, чтобы не резать его в фотошопе. <header class="site-header"> <div class="container-fluid"> <header class="row"> <div class="col-md-1"></div> <div class="col-md-3"><div id="logo"></div></div> <div class="col-md-4 phone"></div> <div class="col-md-3 slogan"></div> <div class="col-md-1"></div> </header> <section class="row" id="middle"> <div class="col-md-1"></div> <div class="col-md-3"></div> <div class="col-md-4 "></div> <div class="col-md-3"></div> <div class="col-md-1"></div> </div> <footer class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </footer>Изображение <header class="site-header"> <div class="container-fluid"> <header class="row"> <div class="col-md-1"></div> <div class="col-md-3"><div id="logo"></div></div> <div class="col-md-4 phone"></div> <div class="col-md-3 slogan"></div> <div class="col-md-1"></div> </header> <section class="row" id="middle"> <div class="col-md-1"></div> <div class="col-md-3"></div> <div class="col-md-4 "></div> <div class="col-md-3"></div> <div class="col-md-1"></div> </div> <footer class="row"> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </footer> извините проблему решил следующим образом body height: 100%; height: 100%; background: url(../img/bg-all.jpg) no-repeat; background-size:cover; Можно. Модуль Views Bootstrap. Очень полезная и понятная информация, спасибо! Бесят люди которые не прочитав толком статью, задают элементарные вопросы. А если тоже самое, но не задавая высоту блоков? То есть просто, чтобы высота двух колонок в строке была по высоте большего. А какой в этом смысл. Если необходимо чтобы другие распологались после них, то необходимо создать пустой блок с классом clearfix. <div class="col-sm-6"></div> <div class="col-sm-6"></div> <div class="clearfix"></div> Если же это для чего то нужно, то оно делается через JavaScript (jQuery). <script> $(function() // проверяем ширину устройства (т.е. если это sm или выше, то... if ($(document).width()>=768) var maxHeight = 0; // определяем максимальную ширину и устанавливаем // её элементам у которых она меньше $(#myId>div).each(function() if ($(this).height()>maxHeight) maxHeight = $(this).height(); ).each(function() if ($(this).height()<maxHeight) $(this).height(maxHeight); ); ); </script> Данный скрипт желательно поместить перед закрывающим тегом body. Используя JavaScript Вы можете сделать со страницей всё что угодно. Это пример выполнен для следующей разметки: <div class="container"> <div id="myId" class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> </div> Простите, не совсем к правильному комментарию верхнего уровня задал вопрос. А вопрос в том, что есть два блока в строке, необходимо, чтобы у них всегда была одинаковая высота, не смотря на высоту содержимого. Конкретно у меня в шапке логотип и название сайта. При увеличении разрешения экрана, картинка логотипа растягивается и блок с ним становиться больше в высоту, чем соседний. Конкретный код: <div class="col-sm-12 col-xs-12 col-lg-3 col-md-4 text-center"> <span id="seventh_theme_logo"><img src="/user/themes/7th-theme/img/logo.gif" alt="Ali.onl" class="img-responsive center-block" /></span> </div> <div class="col-sm-12 col-xs-12 col-lg-9 col-md-8"> <span id="seventh_theme_welcome_text"> <h1>ALIEXPRESS URL SHORTENER</h1> </span> </div> Без скриптов реально такое реализовать? Т.к. Вы не знаете какая будет высота изображения, то в данном случае только с помощью JavaScript. Если все ваши блоки располагаются в body, то фоновое изображение можно установить для него. Александр! Огромное спасибо за доходчивую статью и конкретно этот пример! Он отлично работает! Не подскажете, как в этом примере можно отфильтровать нужные элементы? У Вас в примере: #myId А мне необходимо применить ко всем #myId_12 (где цифры самые разные) Спасибо. P.S. В jQuery полный нуб… Нашел. Можно использовать $("id^=myId_>div") Здравствуйте, подскажите можно ли сделать ширину контейнера при .col-lg- в 1600px? Спасибо. Здравствуйте! Перерыл весь интернет — не нашел ответ. Скажите, как мне сделать постоянное горизонтальное расстояние между колонками? <div class="col-lg-6 content"></div> <div class="col-lg-6 content"></div> <div class="col-lg-4 content"></div> <div class="col-lg-4 content"></div> <div class="col-lg-4 content"></div> Мне нужны отступы в 10px, а ширина колонок чтобы высчитывалась автоматически (ширина области — колво отступов*10px)/колво колонок. В бутстрапе 2 все делается автоматически, а в третьем просто не появляются отступы и я их задаю в css, что очень хахламляет код. Кустомайз не помогает. В Bootstrap 3 между адаптивными блоками (col-*-*) нет никаких отступов, есть только внутренние поля для содержимого слева и справа по 15px. Если бы мне нужно было что-то подобное, то я бы сделал так: <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="content">...</div> </div> <div class="col-lg-6"> <div class="content">...</div> </div> <div class="col-lg-4"> <div class="content">...</div> </div> <div class="col-lg-4"> <div class="content">...</div> </div> <div class="col-lg-4"> <div class="content">...</div> </div> </div> </div> В CSS написал бы следующее правило: .content margin-left: -10px; margin-right: -10px; Т.е. внутри адаптивных блоков создал бы дополнительный блок с классом content и с помощью него управлял бы полями адаптивных блоков. Т.е. если необходимо между блоками иметь расстояние 10px, то положительные отступы адаптивных блоков (15px) компенсировал бы своими отрицательными (например, -10px). Ребята, подскажите пожалуйста. Вот допустим в шапке у меня 2 блока <div class="col-lg-3"></div> <div class="col-lg-9"></div> Мне требуется чтоб второй блок не отображался на мобильных устройствах. Т.е. на мобильных устройствах должен быть только первый блок. Подскажите, есть ли такая возможность и если есть, то как это реализовать. Добавить класс hidden-xs ко второму блоку. <div class="col-lg-3"></div> <div class="col-lg-9 hidden-xs"></div> Огромное спасибо, помогло. Здравствуйте! Есть ряд, в нем 8 PNG-изображений 100х100px. Никак не получается выровнять все их по горизонтали по всей ширине ROW <div class="container"> <div class="row"> <div class="col-lg-1"><img src=img/round/01.png class=img-responsive alt=00></div> <div class="col-lg-1"><img src=img/round/02.png class=img-responsive alt=00></div> <div class="col-lg-1"><img src=img/round/03.png class=img-responsive alt=00></div> <div class="col-lg-1"><img src=img/round/04.png class=img-responsive alt=00></div> <div class="col-lg-1"><img src=img/round/05.png class=img-responsive alt=00></div> <div class="col-lg-1"><img src=img/round/06.png class=img-responsive alt=00></div> <div class="col-lg-1"><img src=img/round/07.png class=img-responsive alt=00></div> <div class="col-lg-1"><img src=img/round/08.png class=img-responsive alt=00></div> </div> </div> Можно сделать так. Добавить к блоку с классом row ещё один класс (например, col-8). Это необходимо для того, чтобы стили CSS, которым мы длобавим, не применялись ко всем другим элементам. ... <div class="row col-8"> ... Добавить на страницу CSS стили: @media (min-width: 1200px) .col-8 .col-lg-1 width: 12.5%; Для чего применяется минимальная ширина 1200 px? Для того чтобы точно применилось только для браузера с шириной рабочей областью больше 1200px. Если это не нужно, то используй так: .col-8 .col-lg-1 width: 12.5%; Не подскажите — почему стандартными инструментами Bootstrap у меня не получалось это сделать? Потому что по умолчанию в Bootstrap 12 колонок. А 12 на 8 нацело не делится. А Bootstrap в качестве ширины колонок позволяет устанавливать только целые значения. Ещё один вариант, это собрать свою сборку Bootstrap на странице getbootstrap.com/customize/ В этом случае вы сможете указать необходимое количество колонок с помощью параметра @grid-columns. Например: 16 или 24. В этом случае число колонок для создание сетки из 8 равных колонок можно будет легко получить, так как число 16 и 24 нацело делиться на 8. Т.е. если вы выберите вариант с 16 колонками, то один блок будет равен 2 колонкам (16:8=2) — col-lg-2. Подскажите, пожалуйста, с помощью Bootstrap возможно ли сваять такую конструкцию? Будет так: <div class="container-fluid"> <div class="row"> <div class="col-xs-4"> <div>1 блок</div> <div>2 блок</div> <div>3 блок</div> </div> <div class="col-xs-4"> 4 блок </div> <div class="col-xs-4"> <div>5 блок</div> <div>6 блок</div> <div>7 блок</div> </div> </div> </div> Т.е. сначала создаём 3 блока. А потом необходимые блоки (в данном случае левый и правый) ещё разбиваем по 3. Не поплывут они? В данном варианте нет. Проверяйте… Если в будущем сетку будете адаптировать под другие устройства, то надо будет смотреть и где надо добавлять пустой блок div с классом clearfix. Добрый день. Ответь пожалуйста, как мне зафиксировать class для всех разрешений т.е чтобы если разрешение менялось на sm, мой класс не отсоединялся и не плавал по экрану где ему захочется. Просто зафиксировать его для всех экранов. На lg все стоит хорошо только меняешь разреш. один класс улетает а все стоят… помогите пожалуйста! Не совсем понял вопроса. Если вам нужен фиксированный блок, т.е. чтобы он всегда оставался в одном месте и не изменялся при прокрутке, то для него необходимо установить position:fixed. А с помощью определённых свойств top, left, right, bottom, width и height указать его расположение. Например, чтобы он всегда распологался внизу экрана: CSS: .mydiv position: fixed; left: 0px; right: 0px; bottom: 0px; height: 100px; HTML: <div class="mydiv" style="background-color: red;"></div> Нет, не так поняли. На sm все смещается, так как его зафиксировать так же, как и на lg чтобы стоял не двигался. На xs вообще улетает Позиционировал блоки при помощи margin. На lg все норм ничего не смещается Спасибо, но я прочтал ваши записи и попробовал сделать так @media (min-width:992px) and (max-width:1199px) .the_time margin-right: 366px; margin-bottom: 40px; И все работает, но когда я делаю все это на (max-width:767px) т.е на xs оно не применяется, плавает… не понимаю почему Тут желательно привести код. Если он большой, то на jsfiddle.net. Скорее всего вы что-то напутали. Если вам необходимо сделать такие небольшие квадратики, то может быть лучше использовать абсолютное позиционирование. Квадратики — это два класса time и views. <div class="row"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="col-xs-12 col-md-6 col-lg-3"> <div class="thumbnail"> <a href="<?php the_permalink() ?>"><img src="http://placehold.it/400x240" alt=""</a> <div class="the_views"><i class="fa fa-eye"> 312</i></div> <div class="the_time"><i class="fa fa-clock-o"> 21:25</i></div> <div class="caption"> <h3 class="vids"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3> </div> </div> </div> <?php endwhile; ?> <?php endif; ?> </div> Margin использовать не надо. Элемент img у вас не закрыт (>). Можно использовать абсолютное позиционирование. Для этого ваши квадратики необходимо обернуть в div и установить ему относительное позиционирование (position:relative). А самим квадратикам задать абсолютное позиционирование. Например, так (необходимые стили указал в атрибуте style): <div style="position:relative; height: 25px;"> <div class="the_views" style="position:absolute; right:0; top:0;"><i class="fa fa-eye"> 312</i></div> <div class="the_time" style="position:absolute; left:0; top:0;"><i class="fa fa-clock-o"> 21:25</i></div> </div> Зачем вы делаете эти вычисления. На устройствах xs у вас не получится это вычислить, т.к. ширина блока (даже если вы используете .container) будет резиновой. Т.е. ширина блока будет зависеть от ширины устройства. То, что вы хотите сделать можно будет только с помощью JavaScript. Что не очень хорошо… Можно сделать также на плавающих блоках float: <div style="position:relative; height: 25px;"> <div class="the_views pull-right"><i class="fa fa-eye"> 312</i></div> <div class="the_time pull-left"><i class="fa fa-clock-o"> 21:25</i></div> </div> понял, спасибо большое Блин все равно слетает на xs, и по вашим примерам пробовал и по своим, а на всех других держится Значит, у вас на данные элементы действуют ещё какие-то другие стили. Проверяйте… Наиболее просто это сделать, это открыть консоль браузера и перейти на вкладку Инспектирования элементов (Element). Далее находите необходимые элементы и во вкладке Styles проверяйте, какие на данные элементы действуют стили. С помощью данной вкладки очень просто найти ошибки (тем более что их сразу можно отключить с помощью чекбокса и проверить результат на лету). Хорошо, это понятно, но почему он работает на всех ( md lg sm ) кроме xs думаете все таки из-за стилей? Скорее всего. Ваше пример на jsfiddle.net/itchief/7sog10ve/ да, вы были правы, стиль лишний… спасибо, а именно: right: 0 но теперь проблема в том как это все установить так как надо без margin как я делал да мое я так посидел подобавлял стили и у меня получаетя так, что для одного экрана надо писать одни значения для другого другие, какие-то стили убирать какие-то добавлять… Здравствуйте! Подскажите, пожалуйста, требуется разместить на экране компьютера блоки как изображено на первой картинке, а на экране мобильного телефона надо чтобы они выстраивались под центральным блоком как на второй картинке. Для этого разработку макета необходимо начинать с мобильных устройств (подход mobile first). Т.е. начинать делать так, как он будет выглядеть на очень маленьких экранах (смартфонах). <div class="container"> <div class="row"> <div id="middle-block">Средний блок</div> <div id="left-block">Левый блок</div> <div id="right-block">Правый блок</div> </div> </div> После этого переходить к проектированию макета для устройств, имеющих более большой экран и т.д. Для того чтобы вам на средних и больших устройствах сдвинуть существующие блоки необходимо использовать классы Bootstrap push и pull. Т.е. средний блок (left-block) вам необходимо сдвинуть влево на 4 блока (pull), чтобы он стал левым. А левый блок (middle-block) сдвинуть на 4 блока вправо (push), чтобы он стал средним. Т.е. другими словами, поменять их местами. <div class="container"> <div class="row"> <div id="middle-block" class="col-md-4 col-md-push-4" style="height: 100px; background: yellow;">Средний блок</div> <div id="left-block" class="col-md-4 col-md-pull-4" style="height: 200px; background: red;">Левый блок</div> <div id="right-block" class="col-md-4" style="height: 150px; background: green;">Правый блок</div> </div> </div> Ещё вопросик кратенький созрел. Проверяя адаптивность некоторых чужих сайтов уменьшением окна браузера заметил, что некоторые не позволяют себя складывать менее, чем, например, 400 px. Почему такое бывает и как это достигается? Не знаю для чего это нужно. Более логично было бы установить 320px, т.к. это стандартная CSS ширина большинства смартфонов. Чтобы это осуществить необходимо добавить в CSS: body min-width:400px; Александр, приветствую. Есть вопрос по разметке. Не понятно откуда появляется горизонтальная прокрутка в браузере при всех разрешениях, буквально на десяток пикселей, наверное… (в том числе и на мобильных устройствах) Примерно как вот здесь. Если смотреть по каждому блоку, например в Chrome, по правой кнопке мышки/Посмотреть код, То нет на странице ни одного блока, выходящего за правую границу. Может быть сталкивались с таким уже и знаете, как вылечить? Здравствуйте. Это происходит обычно из-за ошибки в стилях CSS. В приведённом примере это происходит, потому что классу fav-overlay был назначен правый отрицательный отступ margin. .fav-overlay background-color: rgba(17, 17, 17, 0.67); margin-right: -20px; /* <- это из-за него */ margin-left: -20px; А этот класс назначается элементу div, который расположен в другом элементе div с классом fav-container. Данный элемент занимает 100% ширину viewport браузера и не имеет padding. Следовательно, div с классом fav-overlay, который расположен в нём, увеличивает его ширину на 20px. В результате чего и появляется горизонтальная прокрутка. Благодарю. У меня причина была другая, — был один не закрытый div, закрыл, теперь все хорошо на всех типах устройств, кроме телефонов. Буду искать дальше. Здравствуйте, Александр. Применил 16 колоночную сетку из-за специфики макета. Для сокрытия иконки на md и lg применил класс hidden-md и hidden-lg — иконка не исчезает. На сетке по умолчанию все работает. В чем может быть причина? Здравствуйте. Не знаю, желательно бы показать на живом примере или смоделировать ситуацию на jsfiddle. Классы hidden-* определяют добавлять display: none!important или нет только на основании ширины viewport и не зависят от количества колонок. Поэтому сложно что-то подсказать, наверно вы что-то неправильно сделали. Кроме этого, желательно либо оставлять комментарий, либо задавать вопрос. Не надо дублировать. Обычно стараюсь отвечать на все не отвеченные вопросы, если могу что-то подсказать, посоветовать или знаю, как это сделать. portfolio About Pricing Careers Blog Get a Quote portfolio About Pricing Careers Blog Get a Quote <header> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="logo"> <img src="img/logo.png" alt=""> </div> </div> <div class="col-md-2"></div> <div class="col-md-10"> <nav class="main_menu"> <ul> <li><a href="#">portfolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Get a Quote</a></li> <button class="main_menu_button hidden-lg hidden-md"> <i class="fa fa-bars" aria-hidden="true"></i></button> <!-- вот этот бутончик --> </ul> </nav> </div> </div> </div> </header> Александр, здравствуйте. Прошу прощения за беспокойство, глаза замылились — забыл прописать class для logo.png.