Категория












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

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

Сортировка: Дата публикации
Вы выбрали:
2. 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… Windows 7 - Создание образа системы Я и не знал, что так можно

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

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

4. События

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

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

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

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

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

8. Фреймворк 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 - Начало Поломались ссылки на странице? "… Как это выполнить рассмотрено на уроке Установка платформы 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 - Начало работы

На этом уроке Вы научитесь подключать платформу 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 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 - Сетка Система сеток Twitter Bootstrap 3 - это быстрый и легкий путь для создания макета сайта. Описание системы сеток Twitter Bootstrap 3 Сетки Bootstrap применяют при разработке макетов веб-страниц и для создания разметки блоков, в которых необходимо обеспечить правильное расположение элементов. Разрабатывать сетку начинают с контейнера, который имеет фиксированную или плавающую ширину. Контейнер с фиксированной шириной Контейнер с фиксированной шириной (<div class=container>…</div>) имеет строго определенную ширину, которая изменяется при изменении ширины рабочей области окна браузера и ориентируется в горизонтальном направлении по центру, с помощью свойств margin-left:auto и margin-right:auto. Также, контейнер задает внутренние отступы слева и справа по 15рх (padding-left:15px и padding-right:15px) для содержимого, которое в него помещено. Ширина контейнера (.container) Ширина рабочей области окна браузера 1170px Больше или равна 1200px 970px Больше или равна 992px и меньше 1200px 750px Больше или равна 768px и меньше 992px Ширина контейнера равна ширине рабочей области окна браузера Меньше 768px Контейнер с плавающей шириной Контейнер с плавающей шириной (<div class=container-fluid>…</div>) занимает всю ширину окна браузера и задает внутренние отступы слева и справа по 15рх (padding-left:15px и padding-right:15px) для содержимого, которое в него помещено. Размещение рядов внутри контейнера Следующим этапом является размещение рядов (блоки div с классом .row) внутри контейнера. Ширина рядов (<div class=row>…</div>) будет равна ширине контейнера, т.к. данный блок имеет отрицательные внешние отступы слева и справа по 15рх (margin-left:-15px и margin-right:-15px). Размещение блоков внутри рядов Bootstrap Внутри ряда помещаются блоки с классом col-*-*, внутри которых размещается содержимое или другие ряды. Ширина блоков с классом col-*-* задаётся в относительной форме с помощью указания количества колонок Bootstrap. Так как ряд в Bootstrap по умолчанию состоит из 12 колонок, то минимальная ширина блока col-*-* равна одной колонке Bootstrap, а максимальная ширина блока col-*-* равна 12 колонкам Bootstrap. Например, если мы хотим создать в ряду 3 блока с одинаковой шириной, то нам необходимо установить ширину этих блоков равным 4 колонкам Bootstrap (<div class=col-*-4>...</div>). Расчёт ширины блоков Например: Рассчитать ширину блока в пикселях можно следующим образом: Ширина блока = Ширина колонки Bootstrap*Количество колонок, из которых состоит блок, где: Ширина колонки Bootstrap = Ширина ряда (row) / 12. Ширина колонки Bootstrap = 970 / 12 = 81px. Ширина блока = 81 * 4 = 324px. Система сеток под различные устройства Для создания макетов веб-страниц под различные устройства (смартфоны, планшеты, ноутбуки и персональные компьютеры) необходимо воспользоваться предопределенными классами сеток Twitter Bootstrap 3. Например, вы можете использовать класс .col-xs-* для создания сетки для устройств с маленьким экраном, таких как смартфоны. Точно так же класс .col-sm-* - для устройств с небольшим экраном, таких как планшеты, класс .col-md-* – для устройств с экраном средних размеров, таких как персональные компьютеры и ноутбуки, а так же, класс .col-lg-* - для устройств с большим экраном. Следующая таблица обобщает некоторые ключевые особенности новой системы сеток Bootstrap 3. Особенности системы сеток Bootstrap 3 Крохотная ширина экранаСмартфоны( Основы создания сайта с помощью системы сеток 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.