Как сверстать фиксированную шапку на bootstrap? Bootstrap шапка


Верстка шапки сайта при помощи bootstrap 4

<!--Navbar-->

<nav>

    <!-- Navbar brand -->

    <a href="#"><img src="img/logo-transparent.png" alt="ТД «ТРУБОПОЛИМЕР»" title="Логитип ТД «ТРУБОПОЛИМЕР»"></a>

    <!-- Collapse button -->

    <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"

        aria-expanded="false" aria-label="Toggle navigation"><span></span></button>

    <!-- Collapsible content -->

    <div>

        <!-- Links -->

        <ul>

            <li>

                <a href="#">О нас</a>

            </li>

            <li>

                <a href="#">Производство</a>

            </li>

            <li>

                <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Продукция</a>

                <div aria-labelledby="navbarDropdownMenuLink">

                    <a href="#">Action</a>

                    <a href="#">Another action</a>

                    <a href="#">Something else here</a>

                </div>

            </li>

            <li>

                <a href="#">Документация</a>

            </li>

            <li>

                <a href="#">Справочник</a>

            </li>

            <li>

                <a href="#">Прайсы</a>

            </li>

            <li>

                <a href="#">Отзывы</a>

            </li>

            <li>

                <a href="#">Контакты</a>

            </li>

        </ul>

        <!-- Links -->

        <ul>

            <li>

                <a href="tel:88000000000"><span>8 (800) 000-00-00</span></a>

            </li>

        </ul>

    </div>

    <!-- Collapsible content -->

</nav>

<!--/.Navbar-->

<!--Carousel Wrapper-->

<div data-ride="carousel">

    <div data-ride="carousel">

        <div role="listbox">

            <div>

                <div>

                    <img src="img/slider/slider_fon_2.jpg" alt="труба ПНД">

                    <div></div>

                </div>

                <div>

                    <img src="img/logo_trubo_polimer_color.png" alt="Логотип ТД «ТРУБОПОЛИМЕР»">

                    <p>Всем строителям и бизмесменам</p>

                    <p>труба ПНД <span>по антикризисным ценам</span></p>

                </div>

            </div>

            <div>

                <div>

                    <img src="img/slider/slider_fon_1.jpg" alt="ПНД трубы">

                    <div></div>

                </div>

                <div>

                    <img src="img/logo_trubo_polimer_color.png" alt="Логотип ТД «ТРУБОПОЛИМЕР»">

                    <p>Zagolovok slajdera 2</p>

                    <p>Tekst pod <span>zagolovkom</span></p>

                </div>

            </div>

            <div>

                <div>

                    <img src="img/slider/slider_fon_3.jpg" alt="ПНД-отвод">

                    <div></div>

                </div>

                <div>

                    <img src="img/logo_trubo_polimer_color.png" alt="Логотип ТД «ТРУБОПОЛИМЕР»">

                    <p>Zagolovok slajdera 3</p>

                    <p>Tekst pod <span>zagolovkom</span></p>

                </div>

            </div>

        </div>

        <!--Controls-->

        <a href="#c-e-1z" role="button" data-slide="prev">

            <span aria-hidden="true"></span>

            <span>Предыдущий</span>

        </a>

        <a href="#c-e-1z" role="button" data-slide="next">

            <span aria-hidden="true"></span>

            <span>Следующий</span>

        </a>

        <!--/.Controls-->

    </div>

    <!--/.Carousel Wrapper-->

</div>

web-revenue.ru

Как сверстать фиксированную шапку на bootstrap? — Toster.ru

Привет камрады. Пытаюсь сверстать шапку, с фиксированного макета. Но возникла проблемка. Как её растянуть до ширины навигации?

Сама шапка7356aba1526e4aefb105dd419c493282.jpgСкриншот версткиd91fab5492e041f5a39daf744eb7ed33.pngHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div> <div> <div></div> </div> <div> <div> <nav role="navigation"> <div> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div> <ul> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> <li></li> <li><a href="#">Еще одна отдельная ссылка</a></li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit">Отправить</button> </form> <ul> <li><a href="#">Ссылка</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> </div> </div> </body> </html>

CSS

#header { background: url("/home/user/Desktop/mysite/images/header.jpg") no-repeat; height: 183px;

toster.ru

Уроки Bootstrap 3.0 для начинающих (Четвертый урок)

В этом уроке основываясь на полученных знаниях я покажу как создать простой шаблон. Шаблон будет иметь следующую структуру

shablon-bootstrap

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

Для редактирования файлов я буду использовать NotePad++ поэтому рекомендую установить этот редактор. Скачивать его лучше с официального сайта он бесплатный.

Распакуйте архив zagatovka.zip и откройте файл index.html (с помощью NotePad++).

Первый шаг

Создадим контейнер и «строку» (под строкой я имею ввиду row). Для этого между тегами body пропишем следующий код:

<div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>

Для того чтобы увидеть все блоки шаблона нужно добавить в файл со стилями стиль, для каждого блока. Откройте файл css/dopstyle.css и добавьте следующий код

/*ЦВЕТ И ОТСТУП СНИЗУ ДЛЯ БЛОКОВ*/ .head-block,.top-menu,.top-material,.left-sidebar,.content{ background:#ccc; margin-bottom:1px; } /*ВЫСОТА ШАПКИ*/ .head-block{ height:150px; } /*ВЫСОТА МЕНЮ*/ .top-menu{ height:30px; } /*ВЫСОТА БЛОКА ВАЖНЫЕ МАТЕРИАЛЫ*/ .top-material{ height:200px; } /*ВЫСОТА САЙДБАРА И БЛОКА КОНТЕНТ*/ .left-sidebar,.content{ height:300px; } /*ГРАНИЦА У КОНТЕНТА*/ .content{ border-left:1px solid #fff; }

Обновите страницу и увидите все блоки. Высоту и цвет у всех блоков я задал для того чтобы можно было просмотреть структуру шаблона. Должно получиться так

shablon-bootstrap-urok

Второй шаг

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

План действий (то что нужно сделать)

  • Сделать шапку
  • Сделать меню
  • Добавить важные новости
  • Добавить сайдбар
  • Добавить содержание

Прежде чем приступать к оформлению шаблона надо удалить стили которые мы прописали для того чтобы увидеть шаблон очистите файл dopstyle.css

Шапка

Шапку не стал делать сам а скачал с сайта http://nika-sait.ru из раздела шапки для сайта. Шапку переименовал в head.jpg и сохранил в папку images затем добавил css в файл dopstyle.css

.head-block{ height:250px; background:url(../images/head.jpg)left center no-repeat; }

параметр left нужен для того чтобы выровнять по левому краю параметр center выравнивает по вертикали важно учитывать порядок (если переводить на координаты, то первым параметр отвечает за горизонталь, а второй за вертикаль. Можно задавать даже значения в пикселях). После выполненных операции нужно обновить страницу. После обновления вы увидите шапку.

Меню

Создадим меню в котором будут пункты (цены, услуги, о нас, контакты, товары) для этого в файле index.html заменим код

<div></div>

на

<div> <ul> <li><a href="#">Цены</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Товары</a></li> </ul> </div>

и добавим стили для меню в файл dopstyle.css

.top-menu{ background:#daf2fe; } .top-menu ul{ padding-left:0; margin-bottom:0; } .top-menu li{ display:inline-block; margin-left:10px; padding:3px 10px; }

Обновите страницу и увидите результат. У меня получилось так

bootstrap-4-urok

Добавить важные новости

В этом разделе я добавлю четыре новости как делить строку на колонки я показывал в 3 урокеЗамените код в index.html

<div></div>

на

<div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div> <div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div> <div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div> <div> <h4>Шапки для сайта</h4> Если вы не дружите с фотошопом или у вас совсем нет времени на самостоятельное создание шапки, то лучше воспользоваться готовой.<br/> </div>

Обновите страницу и увидите результат

Остальные пункты я делать не стану. Оставлю для самостоятельной работы =)Скачать полушаблон

comments powered by HyperComments

pro-cod.ru

Верстка сайта на Bootstrap: пример создания шаблона

Как выглядит верстка сайта на Bootstrap?

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

Верстка с помощью фреймворка: преимущества

Bootstrap, как и любой другой фреймворк, значительно упрощает процесс верстки веб-страниц. Это css и js-фреймворк, то есть в нем есть как готовые стили, так и веб-сценарии. Эти готовые компоненты ускоряют верстку в 3-10 раз, потому что вам достаточно практически прописать нужные классы и data-атрибуты для активации этих стилей и сценариев.

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

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Освойте наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты

Узнать подробнее

Второе, очень важное преимущество – открытый исходный код Bootstrap. Вы полностью осознаете, насколько это важное преимущество уже после того, как создадите с помощью фреймворка свои первые сайты.

По умолчанию вы скачиваете полную версию фреймворка – файлы bootstrap.css, bootstrap.js, а также иконочный шрифт. Но никто не мешает вам самим выбирать, какие компоненты фреймворка включить в собственную сборку, а какие нет. Вы даже можете отключить вообще все компоненты и оставить, например, только сетку, табы и карусель. И тогда вы значительно уменьшаете размер файлов и подключаете к проекту только что, что будет на нем использоваться.

Это профессиональный подход к использованию bootstrap. На деле большинство css-стилей, описанных в нем, вам просто может не понадобиться. Например, для кнопок, таблиц, картинок и т.д. вы сами можете описать какие-то стили. По сути, по-настоящему ценным в фреймворке Bootstrap является сетка, а также некоторые javascript-компоненты.

Как создать простой схематичный сайт на bootstrap

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

Для начала необходимо определиться с тем, будет ли контейнер сайта иметь фиксированные размеры, либо же будет полностью резиновым. В случае, если обшему контейнеру вы зададите класс container, его максимальная ширина будет ограничена 1170 пикселями. Если же вы укажете container-fluid, ширину сайта ничто не будет ограничивать. Например, на мониторах шириной 1920 пикселей его ширина будет такой же – на все 100% окна.

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

Отлично, в нашем шаблоне будет три ряда – это шапка, контент + сайдбар и футер. В общем-то, это стандартный вид простых двухколоночных сайтов. Давайте посмотрим на разметку:

<div class = "container-fluid"> <div class = "row"> <div class = "col-md-12"> <h2>Шапка</h2> </div> </div>

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

Разместим блок с контентом выше по разметке, чтобы при сворачивании блоков на мобильных устройствах он был выше, чем боковая колонка. Сайдбар разместим сразу за контентом. Возможно, вам и не придется ничего менять, если по дизайну боковая колонка будет справа. Однако иногда ее нужно поставить влево, вот тут и приходят на помощь дополнительные классы push и pull, которые позволяют двигать колонки в ряде вправо-влево, изменяя их положение.

Общая формула для смещения влево сайдбара проста: сдвинуть саму боковую колонку влево на ширину контент, а контент – вправо на ширину сайдбара. Но для начала нужно естественно решить, каковой будет эта ширина. Пусть у нас основной блок будет занимать 75% ширины, а боковая колонка 25%. Тогда нам нужен такой код:

<div class = "col-md-9 col-md-push-3"></div> <div class = "col-md-3 col-md-pull-9"></div>

Естественно, вложите это в один ряд.

Создаем сайдбар

В боковой колонке разместим вертикальное меню. Для этого вы можете посмотреть в документации, какие есть классы для стилизации списков. Кликайте на “компоненты” – “группы списков”.

<div class = "col-md-3 col-md-pull-9"> <h3>Сайдбар</h3> <ul> <li>Автосалоны <span>19</span> </li> <li>Автомастерские <span>178</span> </li> <li>Ремонт </li> <li>Объявления </li> </ul> </div>

Вот такое получилось меню, со значками:

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

На этом с сайдбаром закончим. Конечно, на реальном сайте в нем могло бы быть много чего другого. Например, рекламные баннеры. Сейчас мы будем работать с контентным блоком и там я покажу вам, как работать с изображениями в Bootstrap, так что вы без проблем сможете вставить в боковую колонку баннеры.

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Освойте наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты

Узнать подробнее

Создаем блок контента

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

<div class = "col-md-9 col-md-push-3"> <h3>Content</h3> <div class = "row"> <div class = "col-sm-4"> <div class = "panel"> <h5>Header</h5> <img src = "auto1.jpg" class = "img-responsive"> <p>Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdhfdhfdhfd hdfhfdhfdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd</p> </div> </div>

Как видите, здесь мы применяем систему вложенной сетки. По задумке в контенте 3 анонса статей должно располагаться в ряд. Чтобы этого легко добиться, мы будем принимать блок col-md-9 col-md-push-3, то есть блок контента, за контейнер для сетки. В таком случае мы создаем в нем ряд, где, в свою очередь, нам вновь становится доступна 12-ти колоночная сетка. Классом col-sm-4 мы даем одному анонсу статьи ширину ровно 33,33%. Таким образом, в одну строку в контенте идеально поместятся 3 анонса. Просто скопируйте и вставьте этот блок еще 2 раза, чтобы проверить, как они отобразятся.

Вот так отображаются наши блоки с анонсами статей:

Идеально ровно. Вообще без каких-либо вопросов. В 3 колонки анонсы будут располагаться на всех устройствах, кроме самых маленьких, где все будет в одну колонку.

Я надеюсь, этот пример вам понятен. Теперь предлагаю разобрать чуть более нестандартный пример. Создадим в контенте еще один ряд. На этот раз задумка такова – отобразить в ряде одну статью и слайдер, между ними сделать небольшой отступ. Допустим, статья будет слева, а слайдер – справа. Между ними небольшой зазор + все это, естественно, должно быть адаптивным.

Код анонса статьи вы можете просто скопировать и вставить в наш новый ряд. Нам остается сделать слайдер. Собственно, я не буду здесь приводить его код, потому что он очень громоздкий. Перейдите на официальный сайт Бутстрапа или на русскоязычную версию, перейдите в раздел Javascript и ищите там Карусель (Carousel).

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

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

<div class = "col-sm-7 col-sm-offset-1">

То есть сам слайдер получает ширину в 7 колонок на больших, средних и маленьких устройствах, а также отступ в одну колонку, тоже на всех этих устройствах. Итог:

Вот теперь у нас в одной строке анонс статьи и слайдер, а ниже еще 3 анонса, и все это располагается в блоке контента.

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

Если вы повторяли все за мной, только изображения использовали свои, то вынуждены будете признать, что у нас получилась достаточно ровная верстка (если не учитывать ужасный внешний вид блоков, но нам некогда сейчас их поправлять). Попытаюсь, “сфотографировать” весь сайт:

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

Конечно, если бы мы верстали не схематично, а из PSD-макета, то получилось бы намного красивее, но по крайней мере верстка не разваливается и шаблон полностью адаптивен, а потратили мы своего времени на его создание очень мало. Только представьте, сколько бы вам пришлось писать css-кода, чтобы создать стили для слайдера и выровнять в одну строку блоки, расставить отступы и т.д. Конечно, опытный верстальщик все это сделает достаточно быстро, но его даже менее опытный коллега с помощью Bootstrap управится быстрее.

Готовы ли вы?

Что ж, мы рассмотрели, как выглядит верстка на Bootstrap 3. Ну а теперь скажите мне одну простую вещь? Вы хотите изучить фреймворк Bootstrap в следующие 5-10 дней на профессиональном уровне и начать создавать адаптивные шаблоны любого уровня сложности?

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

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

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

Сегодня же мы сверстали схематичный макет, который, однако по своей структуре был далеко не самым-самым простым. Как видите, Bootstrap серьезно упростил нам задачу. Я прощаюсь с вами и желаю разрабатывать сайты максимально быстро и просто. Ах да, и адаптивно тоже.

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Освойте наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

webformyself.com

Типографика. Содержание · Bootstrap. Версия v4.0.0

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

Глобальные настройки

Bootstrap предустанавливает глобальные стили отображения, типографии и ссылок. Когда нужно настроить больше элементов, проверьте наши классы текстовых утилит.

  • Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов font-family для всех ОС и девайсов.
  • Для более широкой и доступной шкалы шрифтов BS4 использует шрифт браузера по умолчанию font-size (обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера.
  • Используйте атрибуты $font-family-base, $font-size-base и $line-height-base как типографическую базу для <body>.
  • Задавайте глобальные цвета ссылок через $link-color и применяйте подчеркивание ссылок только в :hover.
  • Используйте $body-bg для задания background-color для <body> (по умолчанию стоит #fff).

Эти стили находятся в _reboot.scss, а глобальные переменные определены в _variables.scss. Задавайте $font-size-base в rem.

Заголовки

Все HTML-заголовки (<h2>-<h6>) доступны в BS4.

Заголовок Пример

<h2></h2>

h2. Заголовок bootstrap

<h3></h3>

h3. Заголовок bootstrap

<h4></h4>

h4. Заголовок bootstrap

<h5></h5>

h5. Заголовок bootstrap

<h5></h5>

h5. Заголовок bootstrap

<h6></h6>

h6. Заголовок bootstrap
<h2>h2. Заголовок bootstrap </h2> <h3>h3. Заголовок bootstrap </h3> <h4>h4. Заголовок bootstrap </h4> <h5>h5. Заголовок bootstrap </h5> <h5>h5. Заголовок bootstrap </h5> <h6>h6. Заголовок bootstrap </h6>

Если вы хотите, чтобы стилизация шрифта совпадала с заголовком, но не можете использовать соотнесенный HTML-элемент, классы .h2 - .h6 также доступны.

h2. Заголовок bootstrap

h3. Заголовок bootstrap

h4. Заголовок bootstrap

h5. Заголовок bootstrap

h5. Заголовок bootstrap

h6. Заголовок bootstrap

<p>h2. Заголовок bootstrap </p> <p>h3. Заголовок bootstrap </p> <p>h4. Заголовок bootstrap </p> <p>h5. Заголовок bootstrap </p> <p>h5. Заголовок bootstrap </p> <p>h6. Заголовок bootstrap </p>

Настройка заголовков

Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка из Bootstrap 3.

Заголовок отображения С выцветшим вторичным текстом

<h4> Заголовок отображения <small>С выцветшим вторичным текстом</small> </h4>

«Заголовок дисплея»

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

Display 1
Display 2
Display 3
Display 4
<h2>Display 1</h2> <h2>Display 2</h2> <h2>Display 3</h2> <h2>Display 4</h2>

«Лид»

Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. </p>

Блочные текстовые элементы

Стили для обычных блочных элементов HTML5.

Тэг-выделитель для подсветки текста.

Удаленный текст.

Зачеркнутый.

Строка - дополнение к документу.

Подчеркнутая

Мелкий шрифт (типа нижний индекс).

Жирный текст.

Курсив.

<p>Тэг-выделитель для <mark>подсветки</mark> текста.</p> <p><del>Удаленный текст.</del></p> <p><s>Зачеркнутый.</s></p> <p><ins>Строка - дополнение к документу.</ins></p> <p><u>Подчеркнутая</u></p> <p><small>Мелкий шрифт (типа нижний индекс).</small></p> <p><strong>Жирный текст.</strong></p> <p><em>Курсив.</em></p>

Классы .mark и .small дают стили, одинаковые с тэгами <mark> и <small>, но помогают избежать нежелательных семантических последствий, которые могут возникнуть с тэгами.

Также, свободно пользуйтесь тэгами <b> и <i> в HTML5. <b> создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а <i> выделяет цитаты, прямую речь, термины и т.д.

Классы текстовых утилит

Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.

Сокращения

Реализация элемента <abbr> нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.

Добавьте класс .initialism к сокращению для создания слегка уменьшенного шрифта.

<p><abbr title="attribute">attr</abbr></p> <p><abbr title="HyperText Markup Language">HTML</abbr></p>

Цитаты

Для цитат с другого источника в вашем документе. Оберните любой элемент в <blockquote> для создания цитаты.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>

Наименование источника

Добавьте <footer> для идентификации источника. Оберните имя источника в <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Кто-то знаменитый в <cite title="Название источника">Source Title</cite></footer> </blockquote>

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer> </blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Кто-то знаменитый в <cite title="Название источника">Название источника</cite></footer> </blockquote>

Списки

Без элементов стилизации

Удаляет свойство по умолчанию list-style и левый марджин элементов списка (только прямые «потомки»). Это работает лишь для прямых «потомков», т.е. вам необходимо будет добавлять класс для каждого из вложенных списков.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul>

Блочные

Удаляет у элементов списка значок слева и создает небольшой отступ margin с помощью сочетания классов .list-inline и .list-inline-item.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul> <li>Lorem ipsum</li> <li>Phasellus iaculis</li> <li>Nulla volutpat</li> </ul>

Описание и выравнивание

Выравнивайте термины и описания по горизонтали, используя предустановленные классы сеточной системы BS4 (или семантические миксины). Для более длинных терминов вы можете добавить класс .text-truncate чтобы «усечь» текст эллипсом.

Списки описания A description list is perfect for defining terms. Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta Etiam porta sem malesuada magna mollis euismod. Truncated term is truncated Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Вложенность Список вложенных определений Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. <dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd> <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p> <p>Donec id elit non mi porta gravida at eget metus.</p> </dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Truncated term is truncated</dt> <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> <dt>Nesting</dt> <dd> <dl> <dt>Nested definition list</dt> <dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> </dl> </dd> </dl>

Отзывчивая «типографика»

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

Вот пример. Выбирайте какие угодно font-size и медиа-запросы.

html { font-size: 1rem; } @include media-breakpoint-up(sm) { html { font-size: 1.2rem; } } @include media-breakpoint-up(md) { html { font-size: 1.4rem; } } @include media-breakpoint-up(lg) { html { font-size: 1.6rem; } }

bootstrap-4.ru

50+ бесплатных адаптивных BootStrap HTML-шаблонов

Bootstrap — мощный и элегантный, интуитивно понятный фронт-енд фреймворк, разработанный командой Twitter. Это open-source CSS и JavaScript среда разработки современных интернет проектов. Относительно молодая платформа веб-разработки, безусловно заслуживающая изучения, предлагает множество полезных вещей: стили компонентов интерфейса (заголовки, вкладки, навигационные панели…) и HTML-элементов (кнопоки, формы, шрифты…), адаптивные queries, JS-плагины и т.д.

Основанный на принципе «Сначала мобильные» (Mobile first), фреймворк изначально был задуман для упрощения и ускорения процесса разработки сайтов. Сегодня BootStrap с размахом используется на веб пространстве рунета. Во многих случаях, темы на бутстрап это идеальный вариант для тех, кого интересуют шаблоны адаптивного дизайна и тех, кому необходимо создать приличный современный сайт с минимальными затратами. Правильно подобранный BootStrap HTML шаблон не разочарует того, кто решил использовать его под коммерческий проект или того, кому нужен простой бутстрап шаблон (…ищущим bootstrap шаблоны бесплатно), так как благодаря легко настраиваемому инструментарию всегда есть возможность для внесения изменений или доработки под свои нужды. Замечательная особенность бутстрап шаблонов в том, что самостоятельно разобраться и осуществить это под силу даже тому, у кого нет большого опыта в программировании и оформлении сайта. К тому же всегда можно натянуть BootStrap на любую CMS, например интегрировав его компоненты в WordPress шаблон. Профессионалов бутсраперов в этом фреймворке привлекает возможность повторно использовать наработки, создавая при этом приличного вида проекты.

Если вам посчастливится встретить подходящий шаблон на этом популярном фреймворке, то можно считать это первым шагом к построению дизайна сайта, который будет вне досягаемости для ваших конкурентов. В этом посте собраны более 50 тщательно отобранных бесплатных адаптивных BootStrap HTML шаблонов из самых различных интернет-источников.

Bootstrap шаблоны  — многоцелевые / портфолио / бизнес

1. Libra

Libra — мощный BootStrap HTML-шаблон с чистым дизайном и хорошим юзабилити — идеален для создания корпоративного / портфолио сайта. Действительно шикарный функционал для бесплатного шаблона, при этом многое — с неограниченными возможностями (для красивого оформления сайта). Ключевые особенности: шаблон с большим макетом (1170px), супер адаптивный, Background Uploader — позволяет использовать различные бэкграунды, изображения и цвета для каждого поста или страницы, Unlimited Sliders — 9 шикарных слайдеров (включено 2 премиум слайдера стоимостью 30$ и великолепный Polaroid слайдер, которого вы не встретите на Themeforest ! ), Header Uploader — добавляющий в шапку сайта для различных страниц разные изображения, неограниченные портфолио с 9-ю макетами, неограниченные галереи и видео-галереи, шорткод-менеджер c 200+ шорткодами. Шаблон распространяется по лицензии CC. Дополнительные бонусы: поддерживает Post Formats, 500 шрифтов google fonts, шаблон SEO оптимизирован и имеет встроенную SEO-панель в админке.

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

2. Flat Design Portfolio Template

Этот эффектный шаблон сайта-портфолио с плоским дизайном разработал талантливый филиппинский UI дизайнер Lester Gonzales. Шаблон имеет: полную адаптивность и хорошо оптимизированный для тачскрин устройств пользовательский интерфейс, красивые плоские цвета, совместимость с основными браузерами. Поставляется в двух версиях: 1) многоцелевой 2) одностраничный, с красивым эффектом гладкой прокрутки (Smooth Scroll).

3. Passion Free Bootstrap Theme

Passion — пример стильной многоцелевой темы на Bootstrap, предназначенной для построения уникальных и современных бизнес-сайтов & сайтов с минималистичным дизайном. Это действительно тема с уникальным дизайном: см. страницы About, Portfolio, Services и многое остальное. Функциональные возможности и особенности: форма контактов с валидацией, кросбраузерность, используется Bootstrap 3.0.3, jQuery 1.8.1, фильтр в портфолио, нестандартные шрифты (CSS3 font-face), адаптивный дизайн темы и легкость ее модификации. А благодаря масштабируемой векторной графике Font Awesome можно менять размеры иконок, не теряя в качестве (совместимо с IE7, будет отлично выглядеть на дисплеях с высоким разрешением). Все это вместе делает Passion Free Bootstrap Theme лучшим выбором из тех бутстрап тем, которые можно скачать и использовать бесплатно.

4. mPurpose Bootstrap Template

mPurpose – адаптивный HTML/CSS шаблон с современным чистым дизайном в минималистичном стиле. Имеет более 30 примеров страниц и впечатляющий для бесплатного шаблона набор полезного функционала. В шаблон встроено пять цветовых схем — синяя, оранжевая, зеленая, красная и серая. mPurpose подойдет для создания персонального веб-сайта и коммерческого проекта. В общем — отличный шаблон для широкого спектра сайтов.

Вот некоторые из многочисленных бонусов шаблона: страницы портфолио (выбор из 4-х опций), Сервисы/Возможности (3 опции), FAQ, карта сайта; страница событий, цен, продуктов, вакансий; страница авторизации, контактов, «О нас», Team page и страница вывода новостей блога. Также, шаблон mPurpose снабжен стандартным функционалом e-Commerce сайта, необходимым для удобного оформления заказа: листингами, слайдером товаров, корзиной покупок и деталями продуктов. Mega Drop Down меню — для сайтов (интеренет-магазинов) с объемной навигацией.

5. SPOT – FREELANCE & AGENCY THEME

Spot — солидная & плоская тема для фрилансеров и небольших агентств создана на Bootstrap 3.0.1 Ваш сайт будет великолепно смотреться и в браузерах ПК и на экранах устройств любых размеров. Нужно поблагодарить GentsThemes за WP версию темы. В составе — стильные, современные: диаграммы, страницы цен, а также бесплатный набор иконочных шрифтов Font Awesome 4.0.

6. GotYA

Перед вами хорошо сбалансированная Bootstrap тема, которую можно скачать бесплатно. GotYA корректно работает в разных браузерах и устройствах десктоп, iPhone, iPad, pill или любой другой альтернативе мобильному устройству. Тема имеет ряд инновационных решений, которые упрощают ее использование.

7. Piccolo

К услугам пользователей — простой и чистый дизайн. В состав шаблона включено 19 макетов страниц со слайдерами, с фильтрами для галерей и удобными для просмотра изображений всплывающими окнами в стиле лайтбокс (Lightbox Pop-Ups), с функционалом уведомлений, иконками и многим другим…

8. Bootable Bootstrap Template

Bootable – трехколоночный шаблон со «sticky scrolling» дизайном — прокруткой/фиксацией информационных блоков с переходами к следующим блокам при при достаточном смещении во время скроллинга.

9. Free General Bootstrap Template

Этот бесплатный Bootstrap шаблон идеально подойдет для создания на нем любого типа бизнес-сайта.

10. Free Business Responsive Bootstrap Template

Бесплатный Bootstrap шаблон, который подойдет для демонстрации вашей коллекции, например, фотографий или для создания художественной галереи. В этом шаблоне неплохое оформление галереи и расширенные возможности навигации по превью внутри лайтбокса — можно использовать клавиатуру для просмотра изображений.

11. Nova

Nova – универсальный html шаблон на twitter bootstrap 2.3.x, в котором 16+ примеров готовых страниц. Это шаблон премиум-качества на все 100% и в нем присутствуют элементы хорошего UX-дизайна.

12. Link

Разработчик постарался довести шаблон до совершенства и полностью стилизовать под сайт агентства, укомплектовав необходимым для этого набором элементов. Шаблон предназначен для демонстрации проектов, которые нужно представить стильно и красиво. Дополнительные бонусы: 6 примеров страниц, шрифты Font Awesome 4, CSS анимация и многое другое.

13. Customizr – Free WordPress Bootstrap Theme

Customizr – бесплатная bootstrap тема WordPress с чистым и отзывчивым, плоским и полностью адаптивным дизайном. Подойдет для создания сайта компании малого бизнеса, онлайн-портфолио, корпоративных сайтов или лендингов. Опции темы: Responsive слайдер-генератор, пять основных областей виджетов, слайдер на главной, настройка опций макета HTML и многое другое. Тема имеет валидный HTML5/ CSS3 код, протестирована на кросбраузерность, готова к переводу (доступно 19 языков), подготовлена для  WooCommerce, bbPress, qTranslate, имеет легко расширяемый код, который просто дополнять, реализуя возможности методов API.

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

14. Sprint

Этот шаблон с профессиональной HTML5/CSS3 разметкой можно использоваться для различных сайтов. Наиболее интересна цветовая схема шаблона. Сочетание зеленого, черного и белого цветов, вместе с черно-белыми фотографиями позволят выделиться представленным проектам. Используя зеленый цвет для иконок в разделе сервисов, вы действительно сделаете их и ваши указанные «ОТЛИЧИЯ» заметными. Еще один оригинальный элемент дизайна: светящийся индикатор текущего положения в виде зеленой линии с маленьким шариком. Этот простой шаблон удачно разделен на 5 секций — начиная с галереи, размещенной в пределах «первого экрана» и заканчивая формой контактов.

15. Polygon

Polygon – бесплатный HTML5 шаблон с красивым адаптивным лайтбоксом галереи. Очень компактный шаблон с геометрическими формами в дизайне. Весь полигональный арт представлен шестиугольными ячейками и фигурами на главной странице, страницах сервисов и «О нас» — в виде блоков графического контента, иконок различных размеров и даже шестигранной формы карты, на странице контактов.

16. Free Bootstrap template for corporate – Moderna

Moderna – Bootstrap-3 тема для корпоративного бизнес-сайта с современным и чистым дизайном. Moderna поставляется со многими премиум-функциями платных тем: гибким слайдером изображений FlexSlider, фильтром на странице портфолио, ajax формой обратной связи на странице контактов. Также, расширить возможности темы можно пользовательскими функциями — шорт-кодами.

Скачать WordPress версию темы Moderna можно здесь.

18. Sonic Creative Portfolio

Sonic – бесплатный адаптивный шаблон на Bootstrap версии 3.1.1. со слайдером FlexSlider на главной странице. Шаблон основан на HTML5/CSS3 и подойдет для создания креативного портфолио.

19. Powerful

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

20. 403 Karma

403 Karma — бесплатный HTML5 шаблон на основе Bootstrap. Благодаря адаптивной верстке, плоскому дизайну и эффектному параллакс-сколлингу шаблон отлично выглядит на мобильных устройствах.

21. Tonic Pro

Созданный на основе Twitter Bootstrap, шаблон Tonic Pro поставляется со слайдером, кастомным визуальным CSS-редактором (упрощающим редактирование кода), font awesome иконками и всем тем, что помогает сайту выделиться среди остальных. Базовый набор из всех полезностей предоставляется бесплатно, но вы можете приобрести премиум версию шаблона со значительно большим функционалом.

22. Free Bootstrap 3.0 HTML Template

Вам нужно найти эффектный шаблон для персональной Web-страницы, онлайн-портфолио или ресторанный шаблон, подходящий для бара, пиццерии, кафе или бистро? Тогда лучше обезопасить себя от проблем с кастомизацией и быть уверенным в возможностях шаблона, на случай возникновения необходимости расширения функционала. Free Bootstrap 3.0 HTML Template — вполне подходящее для этого решение. Хотя он создан для ознакомительных целей, вы всегда можете приобрести оригинальный шаблон (с точно такой же структурой) для создания своего startup-проекта.

23. Tulip

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

24. Andia – Free HTML Bootstrap Theme

Andia – бесплатная адаптивная HTML тема на Bootstrap. В составе: 5 примеров полностью адаптивных страниц, страница портфолио, сервисы, About, форма контактов. Andia идеально подойдет для креативного агентства с портфолио, личного портфолио или под небольшой бизнес проект. Особенности и функционал: адаптивный макет, адаптивный слайдер изображений, возможность демонстрировать ваши фотографии из сервиса Flickr благодаря интеграции с Flicr Photostream, возможность создавать иконки на базе иконочного шрифта Font Awesome 4.0, лента твиттер (twitter feed) и многое другое .

25. Dellow

Dellow – минималистичная адаптивная тема со множеством премиум опций, которые вы получаете бесплатно. Ключевые особенности: слайдер с эффектом параллакса в шапке, нумерованная постраничная навигация, адаптивный слайдер, кастомный хедер & футер, 4 макета страниц, кастомные виджеты & Time Display. Мощная панель настроек значительно расширяет возможности редактирования и упрощает процесс модификации темы.

 26. Business Ltd

Business Ltd — бесплатный бутстрап шаблон, который можно использовать для создания любого вида бизнес-сайта.

27. Bootstrap Clinic

Bootstrap Clinic — бесплатный бизнес шаблон, который можно свободно использовать для коммерческих целей.

28. Creation – Flat Industrial Bootstrap Responsive template

Шаблон Creation предназначен для создания сайта индустриальной компании. Может широко использоваться для интернет представительств различных компаний-изготовителей, от небольших организаций до крупных производственных предприятий и фабрик. В этом шаблоне тщательно подобрана цветовая схема, хорошо организовано расположение элементов, продуман стиль и структура макета сетки. Ключевые особенности шаблона: HTML5, Flat дизайн, адаптивность, по лицензии Creative Commons Attribution 3.0 предполагается использование без ограничений. В комплект шаблона включены исходные файлы:  HTML файлы (.html), таблицы стилей (.css), изображений (.jpg/png/gif), JQuery плагинов (.js), файлы исходников Photoshop (.psd), шрифтов (.ttf).

29. My Restaurant

My Restaurant – оригинальный и стильный bootstrap шаблон с фоновым jQuery слайдером, фиксированным меню на jQuery меняющим цвет при наведении. Пример отличного UX-дизайна — jQuery галерея, управлять которой можно указателем или колесом мыши и образующая красивый лайтбокс с эффектом затемнения основного фона.

30. Corlate – Free Responsive Business HTML Template

Corlate – бесплатный адаптивный HTML бизнес-шаблон, со встроенными шрифтами Font Awesome и css3  анимацией. Также оснащен своим собственным бутстраповским слайдером -каруселью, шорткодами – позволяющими легко создавать вкладки, аккордеон-слайдеры и даже галереи. Это полностью адаптивный, легкий и супер-быстрый шаблон. Хорошо подойдет сайту небольшой бизнес компании, стратап-проекту, или если вам, как талантливой личности, нужен сайт для демонстрации своего творчества.

31. Progressus – elegant agency/business template

Progressus – привлекательный адаптивный бизнес шаблон, основанный на Bootstrap  – HTML/CSS фреймворке. 7 макетов страниц для основных задач, стильный адаптивный дизайн, выполненный исключительно качественно от начала до конца.

32. FirmaSite – bb and buddy pressing

FirmaSite – фантастическая бесплатная тема. Основана на Twitter Bootstrap, WordPress, Buddypress и BBpress. Bootstrap подключен только файлами CSS. Тема разработана на основе 2-х колоночного макета и может отлично подойти для блога.

33. Temptation

Temptation – бесплатная темная WordPress тема, построенная с использованием Bootstrap 3. Это подготовленая к Retina и полностью адаптивная тема, использующая сеточный макет, имеет: витрину Showcase, Nivo слайдер, и многое другое. По сочетанию темных цветов это, пожалуй, одна из лучших тем из всего репозитория WordPress.

34. RICHY

RICHY – адаптивная многоцелевая HTML5/CSS3 Bootstrap тема. Имеет чистый аккуратный дизайн и легкость в кастомизации.

 Одностраничные шаблоны Bootstrap

35. Slidefolio

Slidefolio – адаптивный одностраничный шаблон-портфолио на twitter bootstrap 3. Этот шаблон имеет массу возможностей: jQuery бэкграунд слайдер (Vegas jQuery background image slider), форма контактов с jQuery валидацией (проверкой на корректность полей ввода), страница портфолио с MixitUp jQuery плагином. Стильный и красивый дизайн шаблона может украсить сайт компании или ваш персональный сайт-портфолио.

36. Ninestars

Бесплатный одностраничный Bootstrap HTML шаблон для творческого проекта или портфолио. Вместо стандартной Bootstrap навигации в шаблоне использовано боковое меню в стиле сайта Google Nexus.

37. Essentia

Essentia – интересный шаблон с отчётливой Retina графикой, созданный на фрейворке Twitter Bootstrap 2.3.2. Особый шик шаблону придает FlexSlider – фантастический слайдер изображений на основе jQuery плагина, вес которого минимизирован до 4kb. Выполнен он по всем правилам UX-дизайна и будет лучшим образом выглядеть на всех экранах, при любых разрешениях, а управлять им можно даже с клавиатуры. Essentia – ультра-адаптивный шаблон, который великолепно оптимизирован под планшеты, телефоны все остальные устройства.

38. Munter

Munter это красивая одностраничная Bootstrap 3 тема с современными элементами в дизайне: фиксированной панелью навигации с индикацией активного раздела, плавным скроллингом. Приятного вида Portfolio Showcase поможет лучше продемонстрировать ваши проекты.

39. ThreeSixty Bootstrap 3 Theme

ThreeSixty – плоский, адаптивный и подготовленный к Retina одностраничный HTML5 шаблон на Bootstrap3 с чистым дизайном. Ключевая особенность шаблона — супер гибкость и легкость в кастомизации. В качестве бонусов: HTML5/CSS3 анимация, красивый гибкий слайдер изображений Flex Slider, клиентский слайдер, страница цен, форма обратной связи и многое другое.

40. Shield

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

41. Xeon

Xeon – шаблон одностраничного сайта, сделаный полностью на Twitter Bootstrap 3.0. Подойдет небольшой компании любого типа. Ключевые особенности шаблона: валидный HTML5 и CSS3 код, фиксированное навигационное меню с индикацией текущего раздела, форма контактов на Ajax, иконочные шрифты  FontAwesome, фильтр портфолио – возможность сортировки проектов по стилям.

42. Legend

Legend – многоцелевой адаптивный шаблон-одностраничник с элегантным минмалистичным дизайном. Встроенный иконочный шрифт от Fontello, валидность HTML5 & CSS3 кода и совместимость с IE8+, Firefox, Safari, Chrome, Opera делают его пригодным для различных целей: можно использовать под landing page, креативное портфолио и даже как шаблон бизнес сайта.

43. Urbanic

Urbanic – бесплатный адаптивный шаблон на Bootstrap 3. У шаблона стандартный одностраничный интерфейс с элементами хорошего UX. Портфолио с фильтром по категориям.

44. ONE PAGE FREE HTML CSS WEBSITE TEMPLATE – MEILLEUR

Meilleur – универсальный и адаптивный одностраничный шаблон на HTML5, построенный на новом Twitter Bootstrap 3 фреймфорке. Этот бесплатный html css шаблон подойдет агентству или персональному сайту. Meilleur обладает множеством функциональных возможностей профессионального шаблона: галереей изображений, списком цен, формой контактов, ротацией Testimonials (Карусель) и многим другим.

 45. 396 smoothy

Бесплатный адаптивный HTML5 шаблон одностраничник с параллакс-скроллингом.

46. Portio

Portio –  чистый, плоский и полностью адаптивный шаблон одностраничного сайта на bootstrap 2.3x. Этот профессиональный шаблон подойдет для разных типов пользователей. Ключевые особенности Portio: подготовлен к Retina, isotope portfolio filter плагин стоимостью $25, более 20 предопределенных шаблонов страниц — плюс кастомные цвета, использование LESS CSS и css3 анимации, иконочные шрифты Font Awesome. Покупатели шаблона Portio получают поддержку и возможность бесплатных апдейтов.

47. Yebo

Бесплатный одностраничный шаблон с чистым дизайном (PSD в комплекте). Yebo создан на основе фреймворка BootStrap и полностью адаптивен.

48.  Merlin

Merlin – бесплатный одностраничный бутстрап шаблон с красивым дизайном.

Landing Page шаблоны на Bootstrap

49. Colorful Flat

Colorful Flat – шаблон лэндинга с портфолио, удобный для демонстрации ярких и красочных проектов.

50. Magister

Magister — бесплатный шаблон одностраничник на Bootstrap, основной элемент которого — фоновое изображение во весь экран. Шаблон идеален для создания персонального лендинга или «Coming soon» страницы, но может с успехом использоваться и для сайта-портфолио.

51. Evento

Evento – одностраничный bootstrap 3 шаблон музыкальной мультимедийной тематики, который можно использовать для отображения запланированных мероприятий. Для этого в нем реализован отсчет времени в обратном порядке. Evento — это бесплатный шаблон премиум-качества с плоским адаптивным дизайном. Его ключевая особенность — скролл-эффект (плавность прокрутки). В составе шаблона: полноэкранный слайдер, липкое меню (Sticky-Menu) с индикацией текущего раздела, Ajax форма контактов, карта Google map на контактной странице.

seo-design.net

Стили CSS | Bootstrap по-русски

Заголовки

Доступны все HTML заголовки, от <h2> до <h6>.

h3. Заголовок 2

h4. Заголовок 3

h5. Заголовок 4
h5. Заголовок 5
h6. Заголовок 6

Размеры Body

В Bootstrap основной размер шрифта font-size по умолчанию 14px, с высотой строки line-height в 20px. Это применимо к <body> и всем остальным абзацам. Дополнительно <p> (абзац) имеет нижний отступ, равный половине высоты его строки (по умолчанию 10px).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Класс Lead body

Выделяйте абзац путем добавления .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p>...</p>

Форматирование Less

Все шрифты и размеры основаны на двух переменных LESS в variables.less: @baseFontSize и @baseLineHeight. Первая — это основной размер шрифта, используемый во всем документе, вторая — это основная высота строки. Мы используем эти переменные и немного вычислений, чтобы создать отступы, поля, высоту строк разного типа и многое другое. Настраивайте Bootstrap для себя.

Выделение

Используя простые стили Bootstrap, применяйте HTML теги для выделения.

<small>

Для выделения блоков текста мелким шрифтом используйте тег small.

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

<p> <small>Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт.</small> </p>

Полужирный

Выделение фрагмента текста с помощью important

Следующий фрагмент текста набран полужирным шрифтом.

<strong>набран полужирным шрифтом</strong>

Курсив

Выделение фрагмента текста с помощью stress

Следующий фрагмент текста выделен курсивом.

<em>выделен курсивом</em>

Внимание! Смело используйте <b> и <i> в HTML5. Но <b> предназначен для выделения слова или фразы, которое не выражает особой важности, в то время как <i> используется для выделения разговорной речи, технических терминов и т.д.

Классы выделения

Выделение цветом с помощью нескольких вспомогательных классов.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
  2. <p>Etiam porta sem malesuada magna mollis euismod.</p>
  3. <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
  4. <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
  5. <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Аббревиатуры

Используйте элемент HTML <abbr> для аббревиатур. При этом наведите курсор на аббревиатуру, чтобы увидеть ее расшифровку. Аббревиатуры с атрибутом title выделены полупрозрачным подчеркиванием точками, а при длительном наведении курсора вы увидите знак вопроса и расшифровку аббревиатуры.

<abbr>

Чтобы показать расшифровку аббревиатуры при длительном наведении курсора, добавьте атрибут title.

Аббревиатура слова «attribute» — attr.

<abbr title="attribute">attr</abbr>

<abbr>

Добавьте .initialism, чтобы немного уменьшить размер шрифта.

HTML — это круче вареного яйца.

<abbr title="HyperText Markup Language">HTML</abbr>

Адреса

Представьте или только основную или полную контактную информацию.

<address>

Сохраните форматирование, ставя в конце всех строк тег <br>.

Twitter, Inc.795 Folsom Ave, Suite 600San Francisco, CA 94107P: (123) 456-7890 Полное имя[email protected]
  1. <address>
  2. <strong>Twitter, Inc.</strong><br>
  3. 795 Folsom Ave, Suite 600<br>
  4. San Francisco, CA 94107<br>
  5. <abbr title="Phone">P:</abbr> (123) 456-7890
  6. </address>
  7.  
  8. <address>
  9. <strong>Full Name</strong><br>
  10. <a href="mailto:#">[email protected]</a>
  11. </address>

Цитаты

Цитирование фрагментов текста из других источников.

Цитаты по умолчанию

Цитата HTML ставится внутрь тега <blockquote>. Для однострочных цитат используйте тег <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3. </blockquote>

Опции цитирования

Простые изменения стиля и содержания в стандартных цитатах.

Указание источника

Добавьте тег <small> для указания на источник. Поместите название источника внутрь тега <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то очень известный в Названии источника

  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  3. <small>Кто-то очень известный в <cite title="Source Title">Названии источника</cite></small>
  4. </blockquote>
Альтернативное отображение

Используйте .pull-right для выравнивания текста по правую сторону.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то очень известный в Названии источника

  1. <blockquote>
  2. ...
  3. </blockquote>

Списки

Неупорядоченный

Список, в котором порядок явно не обозначен.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2. <li>...</li>
  3. </ul>

Упорядоченный

Список, в котором порядок четко определен.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2. <li>...</li>
  3. </ol>

Не стилизованный

Список без стиля или без дополнительного левого поля.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2. <li>...</li>
  3. </ul>

Описание

Список терминов с их сопутствующими описаниями.

Списки описаний Список описания идеально подходит для определения терминов. Euismod Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Malesuada porta Etiam porta sem malesuada magna mollis euismod.
  1. <dl>
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>
Горизонтальный список описания

Выстраивает термины и описания <dl> в одну линию.

Списки описания Список описания идеально подходит для обозначения терминов. Euismod Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Malesuada porta Etiam porta sem malesuada magna mollis euismod. Felis euismod semper eget lacinia Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  1. <dl>
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

Внимание! В горизонтальных списках описания слишком длинные термины будут обрезаться с помощью text-overflow. На малых дисплеях размеры списков будут изменяться в соответствии с сеткой шаблона.

Строковое выделение кода

Поместите строковый код внутрь тега <code>.

Для примера, <section> следует поместить внутрь как строковый.

  1. Для примера,<code><section></код> следует поместить внутрь как строковый.

Блочное выделение

Используйте <pre> для выделения многих строк кода. Избегайте угловых скобок в коде для его корректного отображения.

<p>Sample text here...</p>
  1. <pre>
  2. &lt;p&gt;Sample text here...&lt;/p&gt;
  3. </pre>

Внимание! Всегда используйте теги <pre> как можно левее; это сохранит все отступы. Дополнительно вы можете использовать класс .pre-scrollable, который имеет максимальную высоту в 350px  и добавляет вертикальную прокрутку.

Стили по умолчанию

Для основного форматирования и только горизонтальной разметки добавьте класс .table в любой тег <table>.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table>
  2. </table>

Дополнительные классы

Добавьте любой из следующих классов к основному классу .table.

.table-striped

Добавить светло-серый фон к нечетным строкам внутри <tbody> можно посредством CSS селектора :nth-child (в IE7-IE8 не поддерживается).

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table>
  2. </table>

.table-bordered

Добавляет рамки и закругляет углы таблицы.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table>
  2. </table>

.table-hover

Делает активным наведение курсора внутри.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table>
  2. </table>

.table-condensed

Делает таблицы более компактными, наполовину сокращая отступы.

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table>
  2. </table>

Дополнительные классы строк

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

Класс Описание
.success Указывает на успешно выполненное действие.
.error Указывает на опасное или негативное действие..
.warning Указывает на предупреждение, на которое следует обратить внимание.
.info Используется как альтернатива стилям по умолчанию.
# Продукт Платеж Статус
1 TB — Ежемесячно 01/04/2012 Подтвержден
2 TB — Ежемесячно 02/04/2012 Отклонен
3 TB — Ежемесячно 03/04/2012 Задержка
4 TB — Ежемесячно 04/04/2012 Позвонить для подтверждения
  1. ...
  2. <tr>
  3. <td>1</td>
  4. <td>TB - Monthly</td>
  5. <td>01/04/2012</td>
  6. <td>Approved</td>
  7. </tr>
  8. ...

Поддерживаемая разметка таблиц

Список поддерживаемых элементов HTML и указания для их использования.

Тег Описание
<table> Вставляет элемент для отображения данных в табличной форме.
<thead> Элемент контейнера предназначен для хранения одной или нескольких строк таблицы. (<tr>) Озаглавливает колонки таблицы.
<tbody> Элемент контейнера для создания строк в теле таблицы (<tr>)
<tr> Элемент контейнера для настройки ячеек таблицы. (<td> or <th>) Создает отдельную строку.
<td> Ячейка таблицы по умолчанию
<th> Специальная ячейка для названий столбцов таблицы (или строк — зависит от расположения).Следует использовать с кодом <thead>
<caption> Краткое описание в таблице, которое очень удобно для мобильных устройств.
  1. <table>
  2. <caption>...</caption>
  3. <thead>
  4. <tr>
  5. <th>...</th>
  6. <th>...</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>...</td>
  12. <td>...</td>
  13. </tr>
  14. </tbody>
  15. </table>

Стили по умолчанию

Отдельные элементы формы имеют свой стиль, но без обязательного класса <form> или каких-либо особых изменений в разметке. В результате получаются упорядоченный, выровненный по левому краю текст в элементах формы.

  1. <form>
  2. <legend>Условные обозначения</legend>
  3. <label>Название</label>
  4. <input type="text" placeholder="Type something…">
  5. <span>Это пример вспомогательного текста.</span>
  6. <label>
  7. <input type="checkbox"> Проверить
  8. </label>
  9. <button type="submit">Подтвердить</button>
  10. </form>

Дополнительные шаблоны

В Bootstrap есть три дополнительных шаблона форм для общего пользования.

Форма поиска

Добавьте .form-search в форму и .search-query в элемент <input> для построения закругленной рамки.

  1. <form>
  2. <input type="text">
  3. <button type="submit">Search</button>
  4. </form>

Линейная форма

Добавьте класс .form-inline для компактного расположения выровненного по левому краю текста и строк.

  1. <form>
  2. <input type="text" placeholder="Email">
  3. <input type="password" placeholder="Password">
  4. <label>
  5. <input type="checkbox"> Запомнить
  6. </label>
  7. <button type="submit">Отправить</button>
  8. </form>

Горизонтальная форма

Выровняйте текст по правой стороне, ставя обтекание слева, чтобы он находился на одной линии с элементами формы:

  • Добавьте .form-horizontal в форму
  • Добавьте текст и элементы управления внутрь .control-group
  • Добавьте .control-label в текст
  • Добавьте любой подходящий элемент управления .controls для точной настройки
  1. <form>
  2. <div>
  3. <label for="inputEmail">Email</label>
  4. <div>
  5. <input type="text" placeholder="Email">
  6. </div>
  7. </div>
  8. <div>
  9. <label for="inputPassword">Password</label>
  10. <div>
  11. <input type="password" placeholder="Password">
  12. </div>
  13. </div>
  14. <div>
  15. <div>
  16. <label>
  17. <input type="checkbox"> Remember me
  18. </label>
  19. <button type="submit">Sign in</button>
  20. </div>
  21. </div>
  22. </form>

Поддерживаемые элементы формы

Примеры стандартных поддерживаемых элементов формы.

Поле ввода

Самый простой элемент формы с текстовыми полями ввода. Поддерживает все типы HTML5: текст, пароль, text, password, время и дата, региональные настройки времени и даты, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, номер телефона и цвет.

Всякий раз обязательно используйте нужный тип type.

  1. <input type="text" placeholder="Text input">

Многострочный текст

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

  1. <textarea rows="3"></textarea>

Флажки и радио-кнопки

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

По умолчанию (вертикально)
  1. <label>
  2. <input type="checkbox" value="">
  3. А вот вам опция номер один - очень крутая штука.
  4. </label>
  5.  
  6. <label>
  7. <input type="radio" name="optionsRadios" value="option1" checked>
  8. А вот вам опция номер один - очень крутая штука.
  9. </label>
  10. <label>
  11. <input type="radio" name="optionsRadios" value="option2">
  12. Опция два - это нечто другое. Выбрав ее, отменяете первую.
  13. </label>
Флажки в одной строке

Добавьте класс .inline к нескольким флажкам или радио-кнопкам, чтобы разместить их на одной линии.

  1. <label>
  2. <input type="checkbox" value="option1"> 1
  3. </label>
  4. <label>
  5. <input type="checkbox" value="option2"> 2
  6. </label>
  7. <label>
  8. <input type="checkbox" value="option3"> 3
  9. </label>

Список выбора

Используйте опцию по умолчанию или укажите multiple="multiple", чтобы отобразить сразу несколько опций.

  1. <select>
  2. <option>1</option>
  3. <option>2</option>
  4. <option>3</option>
  5. <option>4</option>
  6. <option>5</option>
  7. </select>
  8.  
  9. <select multiple="multiple">
  10. <option>1</option>
  11. <option>2</option>
  12. <option>3</option>
  13. <option>4</option>
  14. <option>5</option>
  15. </select>

Дополнения к формам

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

Пред-идущие и Пост-идущие элементы

Добавьте текст или кнопки до или после поля текстового ввода. Обратите внимание, что элементы select при этом не поддерживаются.

Настройки по умолчанию

Добавьте один или два класса внутрь тегов .add-on и input, чтобы отобразить текст до или после поля ввода.

  1. <div>
  2. <span>@</span><input size="16" type="text" placeholder="Username">
  3. </div>
  4. <div>
  5. <input size="16" type="text"><span>.00</span>
  6. </div>
Комбинирование

Используйте оба класса и дважды — .add-on, чтобы отобразить текст впереди или позади.

  1. <div>
  2. <span>$</span><input size="16" type="text"><span>.00</span>
  3. </div>
Кнопки вместо текста

Используйте с текстом вместо <span> класс .btn, чтобы к вводу подключить кнопку.

  1. <div>
  2. <input size="16" type="text"><button type="button">Go!</button>
  3. </div>
  4.  
  5. <div>
  6. <input size="16" type="text"><button type="button">Search</button><button type="button">Options</button>
  7. </div>
Форма поиска
  1. <form>
  2. <div>
  3. <input type="text">
  4. <button type="submit">Search</button>
  5. </div>
  6. <div>
  7. <button type="submit">Search</button>
  8. <input type="text">
  9. </div>
  10. </form>

Настройка размеров

Используйте соответствующие классы, такие как .input-large или согласуйте ваше поле ввода с сеткой размеров, используя классы .span*.

Взаимосвязанные размеры
  1. <input type="text" placeholder=".input-mini">
  2. <input type="text" placeholder=".input-small">
  3. <input type="text" placeholder=".input-medium">
  4. <input type="text" placeholder=".input-large">
  5. <input type="text" placeholder=".input-xlarge">
  6. <input type="text" placeholder=".input-xxlarge">

Внимание! В дальнейших версиях мы изменим использование этих взаимосвязанных классов ввода, чтобы согласовать размер кнопок. Например, .input-large будет увеличивать отступ и размер шрифта в поле ввода.

Сетка размеров

Используйте от .span1 до .span12, чтобы задать одинаковые размеры в поле ввода и в сетке столбцов.

  1. <input type="text" placeholder=".span1">
  2. <input type="text" placeholder=".span2">
  3. <input type="text" placeholder=".span3">
  4. <select>
  5. ...
  6. </select>
  7. <select>
  8. ...
  9. </select>
  10. <select>
  11. ...
  12. </select>

Для множественного ввода используйте класс модификатора .controls-row для корректного отображения пробелов. Это позволяет убрать лишние пробелы при обтекании, настраивает соответствующие поля и прозрачность обтекания.

  1. <div>
  2. <input type="text" placeholder=".span5">
  3. </div>
  4. <div>
  5. <input type="text" placeholder=".span4">
  6. <input type="text" placeholder=".span1">
  7. </div>
  8. ...

Неформатируемые поля

Представьте данные в форме, которая не редактируется без использования фактической разметки.

  1. <span>Some value here</span>

Формы для действий

Добавьте в конец формы действие (кнопки). Расположенные внутри класса .form-horizontal, кнопки автоматически получат отступ, соответствующий форме.

  1. <div>
  2. <button type="submit">Сохранить изменения</button>
  3. <button type="button">Отмена</button>
  4. </div>

Вспомогательный текст

Поддержка строчного и блокового текста, который отображается около управления формы.

Строчный вспомогательный текст
  1. <input type="text"><span>Inline help text</span>
Блоковый вспомогательный текст
  1. <input type="text"><span>Слишком большой блок вспомогательного текста переносится на новую строку и может продолжиться более, чем на одну строку.</span>

Настройки состояния элементов формы

Обеспечивают обратную связь с пользователями или посетителями.

Фокус ввода

Мы удалили стили по умолчанию outline в настройках некоторых форм и поставили на их место box-shadow для фокуса :focus.

  1. <input type="text" value="This is focused...">

Отключенное состояние

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

  1. <input type="text" placeholder="Disabled input here..." disabled>

Состояния валидации

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

  1. <div>
  2. <label for="inputWarning">Предупреждение</label>
  3. <div>
  4. <input type="text">
  5. <span>Что-то идет не так</span>
  6. </div>
  7. </div>
  8. <div>
  9. <label for="inputError">Ошибка</label>
  10. <div>
  11. <input type="text">
  12. <span>Пожалуйста, исправьте ошибку</span>
  13. </div>
  14. </div>
  15. <div>
  16. <label for="inputSuccess">Выполнено успешно</label>
  17. <div>
  18. <input type="text">
  19. <span>Урааа!</span>
  20. </div>
  21. </div>

Кнопки по умолчанию

Стили кнопок могут применяться к любым элементам посредством класса .btn. Однако, обычно применяйте их только к элементам <a> and <button> для лучшего отображения.

Кнопка class=»» Описание
Default btn Стандартная серая кнопка с градиентом
Главная кнопка btn btn-primary Обеспечивает дополнительную визуальную ширину и указывает на первичное действие в наборе кнопок
Информация btn btn-info Используется как альтернатива стилям по умолчанию
Успешное действие btn btn-success Указывает на успешное или положительное действие
Предупреждение btn btn-warning Указывает на то, что действие должно совершаться с предусмотрительностью
Опасность btn btn-danger Указывает на опасное или потенциально негативное действие
Инверсия btn btn-inverse Чередующиеся темно-серые кнопки, не связанные с определенным действием
Ссылка btn btn-link Отмена выделения кнопки. Кнопка получает вид ссылки, сохраняя при этом свои функции
Кросс-браузерная совместимость

Поскольку IE9 не подгоняет градиент заднего плана к закругленным углам, мы его удалили. Кроме того, IE9 искажает элементы кнопки отключения button отображая текст в сером цвете с ужасной тенью, которую мы не можем исправить.

Размеры кнопок

Желаете кнопки побольше или поменьше? Добавьте класс .btn-large, .btn-small, или .btn-mini для установки дополнительных размеров.

Большая кнопка Большая кнопка

Кнопка по умолчанию Кнопка по умолчанию

Маленькая кнопка Маленькая кнопка

Мини-кнопка Мини-кнопка

  1. <p>
  2. <button type="button">Большая кнопка</button>
  3. <button type="button">Большая кнопка</button>
  4. </p>
  5. <p>
  6. <button type="button">Кнопка по умолчанию</button>
  7. <button type="button">Кнопка по умолчанию</button>
  8. </p>
  9. <p>
  10. <button type="button">Маленькая кнопка</button>
  11. <button type="button">Маленькая кнопка</button>
  12. </p>
  13. <p>
  14. <button type="button">Мини-кнопка</button>
  15. <button type="button">Мини-кнопка</button>
  16. </p>

Создайте вложенный блок кнопок, который размещается по всей ширине родительских кнопок. Для этого добавьте класс .btn-block.

Вложенная кнопкаВложенная кнопка

  1. <button type="button">Вложенная кнопка</button>
  2. <button type="button">Вложенная кнопка</button>

Отключенное состояние

Отмените нажатие кнопок, уменьшив их четкость на 50%.

Анкерный элемент

Добавьте класс .disabled к кнопкам <a>.

Исходная ссылка Ссылка

  1. <a href="#">Исходная ссылка</a>
  2. <a href="#">Ссылка</a>

Внимание!Мы используем класс .disabled как дополнение к классу, подобно общему классу .active, так что никакой префикс не требуется. Также этот класс по сути только для внешнего вида — для того, чтобы сделать ссылку неактивной, используйте JavaScript.

Элемент кнопки

Добавьте атрибут disabled к кнопкам <button>.

Главная кнопка Кнопка

  1. <button type="button" disabled="disabled">Главная кнопка</button>
  2. <button type="button" disabled>Кнопка</button>

Один класс, множественные теги

Используйте класс .btn в элементах <a>, <button> или <input>.

  1. <a href="">Ссылка</a>
  2. <button type="submit">Кнопка</button>
  3. <input type="button" value="Input">
  4. <input type="submit" value="Submit">

Для наилучшей совместимости с браузерами, используйте элементы, подходящие для всех браузеров. Используйте input как кнопку <input type="submit">.

Добавьте классы к элементу <img>, чтобы легко настроить стили изображений.

  1. <img src="...">
  2. <img src="...">
  3. <img src="...">

Внимание! .img-rounded и .img-circle не работают в IE7-8 из-за недостаточной поддержки border-radius.

Иконки glyphs

140 иконок в едином файле, по умолчанию в темно-сером и белом цвете. Предоставлены Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Авторство Glyphicons

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

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

Все иконки требуют использования тега <i> с уникальным классом и префиксом icon-. Для использования поместите код с примера ниже в нужное место:

  1. <i></i>

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

  1. <i></i>

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i> для корректного расположения элемента.

Примеры иконок

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

Кнопки
Группа кнопок в меню
  1. <div>
  2. <div>
  3.  
  4. <a href="#"><i></i></a>
  5. <a href="#"><i></i></a>
  6. <a href="#"><i></i></a>
  7. <a href="#"><i></i></a>
  8. </div>
  9. </div>
Кнопки с выпадающим списком
  1. <div>
  2. <a href="#"><i></i> Пользователь</a>
  3. <a data-toggle="dropdown" href="#"><span></span></a>
  4. <ul>
  5. <li><a href="#"><i></i> Редактировать</a></li>
  6. <li><a href="#"><i></i> Удалить</a></li>
  7. <li><a href="#"><i></i> Запретить</a></li>
  8. <li></li>
  9. <li><a href="#"><i></i> Назначить администратором</a></li>
  10. </ul>
  11. </div>
Маленькая кнопка
  1. <a href="#"><i></i></a>
Навигация
  1. <ul>
  2. <li><a href="#"><i></i> Домой</a></li>
  3. <li><a href="#"><i></i> Библиотека</a></li>
  4. <li><a href="#"><i></i> Приложения</a></li>
  5. <li><a href="#"><i></i> Дополнительно</a></li>
  6. </ul>
Поля формы
  1. <div>
  2. <label for="inputIcon">Адрес электронной почты</label>
  3. <div>
  4. <div>
  5. <span><i></i></span>
  6. <input type="text">
  7. </div>
  8. </div>
  9. </div>

mybootstrap.ru


Смотрите также