Как сделать лого в bootstrap

Создание кнопок, оформление текста и картинок, а также добавление отзывчивых классов в Bootstrap 3

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Это уже четвертая статья в данной рубрике:

Сегодня же мы поговорим про возможности стилевого оформления текста средствами Бутстрапа и про использование отзывчивых классов, позволяющих скрывать или показывать элементы веб-страницы при изменении ширины экрана. Также мы посмотрим, как средствами этого фреймворка можно создавать кнопки и как их можно настраивать. Ну и в самом конце мы посмотрим, как в Bootstrap 3 сделать картинки отзывчивыми (меняющими размер при изменении ширины экрана) и какие классы к ним можно добавить для дополнительной стилизации.

Стилевое оформление текста и отзывчивые классы в Bootstrap

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

Этот скриншот и все последующие я буду снимать с уже созданного нами в предыдущих статьях макета некой вебстраницы. Вам нужно будет лишь скопировать файлик sait-4.html (для этого кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить по ссылке как. »). Если этот файлик вы напрямую откроете в браузере (кликнув по приведенной ссылке левой кнопкой мыши), то ничего не получится, ибо не подключится фреймворк Бутстрап.

В плане форматирования текста Бутстрап очень похож на классический язык Html, он позволяет, например, делать следующие вещи:

Код этого фрагмента в Html файлике подключенном к Bootstrap 3 при этом выглядит так:

Все остальное вы можете изучить самостоятельно на вкладке «Typography»

Отзывчивые классы в Бутстрап 3 (hidden и visible) — для чего их можно использовать?

В приведенном выше файле sait-4.html уже настроены сеточные системы, которые изменяют положение блоков с контентом нужным образом при изменении ширины экрана или окна браузера. Однако, может возникнуть ситуация, когда при просмотре страницы на малых экранах некоторые элементы дизайна окажутся лишними (совсем не актуальными, например, на смартфоне). Что я имею в виду?

В приведенном файле sait-4.html в верхней строке (напомню, что строки в Bootstrap образуются с помощью контейнеров с прописанных в них классами class=»row» ) у нас отображается заголовок и описание сайта, а также его логотип. Так вот, при уменьшении ширины экрана мы в конце концов получаем ситуацию, когда этот самый логотип размещается под заголовком, а уже потом следует содержательная часть страницы.

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

Итак, для наглядности производимых действий перейдите на официальном сайте Bootstrap на вкладку «Responsive utilities» из левого меню, которое в свою очередь появляется при переходе по вкладке «CSS» из меню верхнего. Там вы увидите таблицу срабатывания указанных классов при различных размерах экранов, на которых будет просматриваться страница сайта:

Приведенная серия классов отвечает за отображение отдельных элементов веб-страницы при определенных размерах экрана. В них также указывается через тире размер сетки, для которой они предназначены (напомню, что размеров всего четыре — очень маленькая xs, малая sm, средняя md и большая lg).

Класс hidden как раз и позволит нам реализовать нашу задачу — спрятать элемент (логотип) при уменьшении разрешения экрана (окна браузера) ниже 768 пикселей по ширине. Т.е. нам нужно будет использовать класс исходя из приведенной таблицы. Как это сделать? Довольно просто. Найти в коде файла sait-4.html строку, где задается отображение картинки данного логотипа, и просто добавить в тег IMG класс class=»hidden-xs» :

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

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

Создание кнопок с помощью классов btn в Бутстрап 3

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

На официальном сайте фреймворка все возможности по созданию кнопок описаны на вкладке » Buttons «. Возможностей этих довольно много, но остановлюсь только на некоторых из них, чтобы на примере показать возможные варианты создания и оформления кнопок.

В нашем многострадальном примере (файлик sait-4.html, который можно скачать чуть выше) есть элементы, которые так и напрашиваются, чтобы сделать их кнопками. Я говорю про ссылки «Читать далее», расположенные внизу каждого анонса.

Вообще, можно создать кнопку на основе двух элементов Html кода: button и обычной гиперссылки с тегом A. Мы будет использовать второй вариант.

Для создания кнопки нам лишь нужно будет добавить в тег A соответствующий класс. Сначала в этом классе прописывается класс btn (что само по себе никаких дополнительных свойств не придает ссылке), а уже потом дописывается один или несколько классов, задающих, например, цвет и размер кнопки (или их активность). Давайте посмотрим на примере.

Добавим к первой ссылке «Читать далее» класс дефолтной кнопки (умолчательной — class=»btn btn-default» ):

В результате наша ссылка с успехом превратится в кнопку благодаря встроенным в Бутстрап стилям:

Классы для разных типов кнопок в Bootstrap вы можете взять из приведенных на официальном сайте примеров:

Создаваемые кнопочки реагируют на подведение к ним курсора изменением своего тона, что опять же делает работу с сайтом более понятной для посетителя (статичные кнопки могут немного озадачивать пользователя). Кнопка с дефолтным дизайном не слишком бросается в глаза, поэтому если требуется акцентирование внимания, то лучше использовать альтернативные стили (например, danger или warning). Ну и можно под это дело увеличить простым добавлением класса btn-lg :

Все очень просто и интуитивно понятно. По аналогии с сеточной системой, в Bootstrap имеется четыре основных размера для кнопок. Без прописывания дополнительных классов вы получите средний размер кнопочки, а при добавлении btn-lg, btn-sm и btn-xs получите большую, малую и сверхмалую кнопки, соответственно. Собственно, все довольно понятно из данного скриншота:

Как поменять цвет кнопок с помощью файла с собственными стилями?

Как сейчас данные кнопки получают цвет? С помощью прописанных в тегах ссылок A классов Bootstrap 3. Например, в записи «btn btn-primary btn-block» за цвет отвечает btn-primary. Как мы уже обговорили ранее, в основном файле стилей мы менять ничего не будем, поэтому нам нужно будет дописать правило в наш файлик manual.css. Если мы хотим поменять цвет только этой кнопки, то CSS правило будет выглядеть так:

Таким образом мы задали цвет фона кнопки (background-color), цвет рамки вокруг нее (border-color) и цвет текста (color). В результате чего она действительно поменяет свой вид:

Но это так, на всякий случай я рассказал — вдруг пригодится. Будем считать, что у вас без проблем получилось поменять цвет кнопки.

Собственно, мы тоже не будь дураками его и пропишем себе в файлик manual.css, а к нему и нужные CSS свойства добавим, задающие цвет текста, фона и рамки:

В результате кнопка при наведении кардинально поменяет свой вид:

Дизайнер из меня, конечно же, никудышный, но вы цветовую схему сможете куда лучше подобрать. Таким образом, с помощью добавления CSS правил в manual.css, можно будет менять не только цвет кнопок, но и отступы от картинок, и цвета глиф-иконок (о них в следующей статье поговорим), а также и все остальное. Нужно только чутка подумать. Как говорится, флаг вам в руки, а барабан на шею.

Добавляем картинкам отзывчивость и другие стили Bootstrap

Несмотря на то, что сам Бутстрап является отзывчивым фреймворком (в смысле, отзывчивым на изменение ширины экрана, с которого просматривается веб-страница), картинки, которые имеют место быть на странице, отзывчивыми не являются. Т.е. они не подстраиваются под изменения ширины экрана. Собственно, это дело поправимое.

Например, в одном из наших ранее разобранных примеров (файл sait5.html — кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить по ссылке как. », после чего поместите его в вашу папку с Бутстрапом) как раз наблюдался наезд картинок из соседних колонок друг на друга, в результате чего часть изображений обрезалась:

Ну и наш макет страницы будет вести себя уже гораздо более адекватно, ибо при уменьшении ширины экрана, картинки будут уменьшаться для соответствия ширине колонок, в которых они расположены (не наезжая друг на друга):

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

Использовать или не использовать последние три класса решать вам самим, а вот делать картинки отзывчивыми (с помощью добавления img-responsive) я бы рекомендовал в обязательном порядке, если у вас нет каких-либо веских причин этого не делать.

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

Источник

Компоненты

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

Значки символов

Доступные символы

Включает в себя более 250 символов в формате шрифта из Glyphicon Полурослики набор. Значки символов Халфлинги, как правило, не предоставляются бесплатно, но их создатель сделал их доступными для Bootstrap бесплатно. В качестве благодарности, мы только просим, чтобы вы включили ссылку на Значки символов при любой возможности.

Как использовать

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

Не смешивайте с другими компонентами

Классы значков не могут сочетаться с другими элементами. Они спроектированы, чтобы быть отдельными элементами. Вместо этого добавте и применить значок классов

Только для пустых элементов

Классы Иконок следует использовать только на элементах, которые не содержат текстовое содержимое и не имеют дочерние элементы.

Изменение местоположения значка шрифта

Используйте все, что вариант лучше всего подходит вашей конкретной установки развития.

Доступно иконки

Примеры

Используйте их в кнопках, группах кнопок для панели инструментов, панели навигации, или в приставках элементов формы.

Выпадающее меню

Переключаемое, контекстное меню для отображения списка ссылок. Их интерактивность обеспечивается JavaScript плагином для dropdown меню.

Пример

Выравнивание

Может потребоваться дополнительное позиционирование

Dropdowns автоматически позиционируется с помощью CSS в пределах нормального потока документа. Это означает, что выпадающее меню может быть обрезано родителями с определенными свойствами overflow или появляются за пределами области просмотра. Адресуйте эти вопросы по своему усмотрению, когда они возникают.

.pull-right устаревшее выравнивание

Заголовки

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

Делитель

Добавить разделитель для разделения ряда ссылок в выпадающем меню.

Заблокированы части меню

Группы кнопок

Сгруппируйте серию кнопок вместе в одну линию, создав таким образом групповую кнопку. С помощью JavaScript и нашего плагина кнопок, можно еще добавить стиль поведения переключателей или галочек (checkbox).

Подсказки и информеры в группе кнопок требуют специальных настроек

Обеспечить правильное role и укажите метку

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

Основной пример

Источник

В этой статье рассмотрим, как в Bootstrap 3 и 4 осуществляется оформление и работа с текстовой информацией.

Шрифты в Bootstrap

В Bootstrap 3 по умолчанию для основного содержимого используется следующие шрифты:

В Bootstrap 4 стек шрифтов был изменён на следующий:

Это изменение позволило отображать текстовый контент на различных устройствах и операционных системах с помощью «родных» шрифтов.

При желании данный набор шрифтов можно установить и для Bootstrap 3. Для этого необходимо собрать свою сборку (например, на странице Customize and download), в которой в качестве переменной @font-family-sans-serif задать стек шрифтов Bootstrap 4.

Если вариант использование данной возможности и без создания пользовательской сборки, посредством добавления данной инструкции в свой файл CSS.

Подключение своего шрифта к странице

При необходимости вы можете также подключить нестандартный шрифт к странице. Для этого, например можно воспользоваться сервисом Google Font или другим способом (например, использовать какой-то скачанный шрифт).

1. Подключаем шрифт (например, Roboto) с помощью элемента link :

2. Определяем область его использования, т.е. выбираем элементы, внутри которых текстовый контент будет отображаться с помощью этого шрифта. Данный шрифт (например, Roboto) при этом должен стоять в свойстве font-family перед всеми другими шрифтами:

Оформление заголовков

В Bootstrap 3 и 4 HTML-заголовкам

задано уже некоторое оформление по умолчанию (например, размер шрифта, margin отступы снизу и сверху, толщина шрифта и т.д.).

Пример создания HTML заголовков:

Стилизация заголовков в Bootstrap

Классы h1, h2, h3, h4, h5 и h6

Отображение второстепенного контента в заголовках

Классы display для заголовков

Класс page-header для оформления h1

Синтаксис данного класса:

Пример использования класса page-header :

Так на Bootstrap 3 выглядит заголовок h1 с page-title

Размер шрифта и высота строки

Но так как в стилях Bootstrap 4 элементу html явно не устанавливается размер шрифта, то данное значение будет браться из браузера.

Например, в десктопной версии браузера Chrome настройка размера шрифтов осуществляется на странице «Настройки» в разделе «Вид страниц». По умолчанию данное значение равно 16px. Если данное значение, например, увеличить до 18px, то 1rem в Bootstrap 4 будет уже равен 18px.

Изменение размера шрифта

Если вы хотите изменить размер шрифта, т.е. сделать его для некоторого блока больше или меньше, то можете воспользоваться CSS. Для этого необходимо открыть свой файл CSS и написать инструкцию (выбрать элементы и указать им свойство font-size с необходимым значением):

Если же вы хотите сделать размер шрифта на разных устройствах разным, то можно воспользоваться медиа запросами:

Эти варианты можно использовать для создания адаптивных заголовков и текста.

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

Контент не помещается в блок фиксированной высоты

Но можно поступить и по-другому, а именно показать пользователю, что это не весь контент, добавив после него три точки.

Для этого можно скачать js-плагин dotdotdot. Подключить его к странице и назначить необходимым элементам.

Варианты обрезки контента, который не помещается в блок фиксированной высоты

Расположение контента в одну строку

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

Отображение контента с прокрутками

Источник

В этой статье познакомимся с классами фреймворка Bootstrap 3, предназначенными для создания адаптивного «скелета» (макета) сайта.

«Строительные» элементы сетки Bootstrap 3

Обёрточные контейнеры

Контейнер в Bootstrap бывает адаптивно-фиксированным или адаптивно-резиновым.

Первый (адаптивно-фиксированный контейнер) характеризуется тем, что он имеет постоянную ширину в пределах некоторого диапазона ширины viewport (области просмотра).

В следующей таблице приведено то, какую ширину имеет адаптивно-фиксированный контейнер при той или иной ширине области просмотра (viewport) браузера:

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

При разработке макета сайта обычно не применяют вкладывание одних обёрточных контейнеров Bootstrap в другие.

Итак, первый «строительный» элемент сетки Bootstrap – это обёрточный контейнер. Он определяет ширину макета на различных viewport, а также выполняет его центрирование (только адаптивно-фиксированный контейнер) относительно левого и правого края рабочей области вкладки или окна браузера.

Пример формирования внутренних отступов:

Следующий «строительный» элемент сетки Bootstrap – это адаптивный блок ( div с классом col-?-? ).

Адаптивный блок Bootstrap

Данное число (по умолчанию от 1 до 12) определеяет какой процент от ширины родительского элемента должен иметь адаптивный блок.

Как задаётся ширина адаптивного блока в Bootstrap

Адаптивный блок, также как и контейнер, задаёт положительные отступы слева и справа по 15px для контента, который в него будет помещён.

Например, разобьём блок на 3 равные колонки, которые на xs будут отображаться вертикально, а на sm и выше горизонтально:

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

Например, расчитаем, доступную ширину под контент для первого и второго блока:

Расположение адаптивных блоков в родительском элементе

Адаптивные блоки располагаются в родительском элементе один за другим строчками. В одну строчку помещаются адаптивные блоки с суммарным количеством колонок не больше 12 (по умолчанию). Т.е. блоки, которые не помещаются в первую строку, располагаются в следующей строке и т.д.

Как располагаются адаптивные блоки?

В Bootstrap 3 адаптивные блоки являются плавающими ( float:left ). Это необходимо учитывать при создании макета веб-страницы.

Ещё у плавающих блоков есть одна особенность. Например, если в вышеприведённом примере высота 1 блока будет выше, чем 2 блока. То 3 блок будет располагаться не на новой строчке, а «прилипнет» к правой стороне 1 блока.

Особенности float блоков

Чтобы этого не допустить, необходимо добавить блок с классом clearfix и сделать его видимым для необходимых устройств (например, на md и lg ):

Основной принцип создания макета

Например, разобьём некоторый блок (основной) на 4 блока (2 в первой строке и 2 во второй). Для простоты, макет создадим не адаптивный:

Создадим макет 3 блока (3 x 2):

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

Классы для адаптивного смещения блоков

Например, зададим блоку на md устройствах ширину 8 колонок и расположим его в строке по центру (т.е. сдвинем его на 2 колонки вправо):

Кроме инструментов для адаптивного смещения блоков, в Bootstrap 3 есть ещё специальные классы, с помощью которых можно изменить порядок следования элементов в пределах одной строки.

Отзывчивые служебные классы Bootstrap 3

Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства.

Например, добавление к элементу класса visible-md-block будет означать то, что он будет отображаться только на устройствах, имеющим viewport md (width viewport >=992px и display:block; ).

Кроме этих Bootstrap 3 имеет ещё классы с противоположным действием. С их помощью можно скрыть элементы на определенных устройствах.

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

Например, элемент с классами hidden-xs и hidden-sm будет не виден сразу на 2 устройствах ( xs и sm ).

Кроме вышеприведённых отзывчивых классов, фреймворк Bootstrap 3 ещё содержит и такие, которые позволяют управлять видимостью элементов при печати.

Пример создания макета с помощью сетки Bootstrap 3

В этом разделе статьи рассмотрим процесс создания адаптивного макета для блока с использованием сетки Bootstrap 3.

Макет состоит из трёх блоков. Эти блоки должны располагаться на устройствах так, как это показано на изображении.

Разрабатывать макет обычно начинают с крохотных устройств (xs). На данном устройстве блоки имеют одинаковую ширину, равную 12 колонкам Bootstrap.

На sm блоки располагаются следующим образом:

Источник