Тема Bootstrap "компания"

Создать тему: "компания"

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

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

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

Начальная страница HTML

Мы начнем со следующей страницы HTML:

Добавить загрузочный CDN и добавить Jumbotron

Добавить Bootstrap CDN и ссылку на jQuery и положить HTML элементы внутри .jumbotron:

Добавление цвета фона и центра текста

1. Добавить оранжевый цвет фона Jumbotron.

2. Добавьте .text-center класс для центрирования текста внутри Jumbotron:

Добавить форму

Добавьте форму с полем ввода и кнопкой:

Добавить контейнеры

Добавьте два контейнера ( .container-fluid ) и добавьте пользовательский класс ко второму контейнеру ( .bg-grey -добавляет серый цвет фона):

Добавить заполнение

Позволяет сделать Jumbotron и контейнеры выглядят хорошо, добавив некоторые обивка:

Добавление сетки

1. добавить значок (или логотип компании) для каждого контейнера.

2. Разделите иконку и "о тексте", создав две колонки ( .col-sm-8 и .col-sm-4 )

3. Добавьте медиа-запросы для центрирования "колонки логотипа" на экранах размером менее 768 пикселей в ширину.

Добавить контейнер служб

Добавьте новый контейнер с 2x3 столбцами равной ширины ( .col-sm-4 ):

Значки стилей

Добавьте пользовательский класс ( .logo-small ) для каждого глификон в контейнере «Services». Используйте CSS для их стиля:

Добавить контейнер портфеля

Создайте новый контейнер с полной шириной, с тремя столбцами равной ширины ( .col-sm-4 ):

Внутри каждого столбца добавьте изображение.

Затем используйте .img-thumbnail класс для формирования изображения на миниатюру.

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

Пример

<div class="container-fluid text-center bg-grey">
  <h2>Portfolio</h2>
  <h4>What we have created</h4>
  <div class="row text-center">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="paris.jpg" alt="Paris">
        <p><strong>Paris</strong></p>
        <p>Yes, we built Paris</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="newyork.jpg" alt="New York">
        <p><strong>New York</strong></p>
        <p>We built New York</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="sanfran.jpg" alt="San Francisco">
        <p><strong>San Francisco</strong></p>
        <p>Yes, San Fran is ours</p>
      </div>
    </div>
</div>

Результат:

Portfolio

What we have created

Paris

Yes, we built Paris

New York

We built New York

San Francisco

Yes, San Fran is ours

Просмотр демо в редакторе

Стилизация эскизов изображений

Используйте CSS для оформления изображений. В нашем примере мы попытались сделать их похожими на карты, удалив их границы, и установить ширину 100% на каждом изображении.

Пример

.thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}

Результат:

Portfolio

What we have created

Paris

Yes, we built Paris

New York

We built New York

San Francisco

Yes, San Fran is ours

Просмотр демо в редакторе

Добавить Карусель

Добавить карусель:

Стиль Карусель

Используйте CSS для стиля карусели:

Добавить ценовой контейнер

Создайте контейнер с полной шириной, с тремя столбцами равной ширины ( .col-sm-4 ):

В каждом столбце добавьте панель:

Укладка панелей

Используйте CSS для стиля панелей:

Добавить контейнер контактов

Добавить новый контейнер с контактной информацией:

Добавить карты Google

Добавить карты Google (более подробную информацию читайте в Google Maps учебник):

Добавление навигационной навигации

Добавьте навигационную систему вверху страницы, которая сворачивается на более мелких экранах:

Стиль навигационной навигации

Используйте CSS для настройки панели навигации:

Добавить скроллспи

Добавить скроллспи для автоматического обновления навигационных ссылок при прокрутке:

Добавление нижнего колонтитула

Добавьте значок «стрелка вверх» в нижний колонтитул, который будет принимать пользователя в верхней части страницы при нажатии на:

Добавление плавной прокрутки

Используйте jQuery для добавления плавной прокрутки (при щелчке по ссылкам в навигационной навигации):

Последний штрих

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

Ссылка на шрифт в <head> разделе:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

Затем вы можете использовать их на странице:

Мы также добавили некоторый дополнительный тип к некоторым элементам:

Слайд в элементах

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

Заполните тему "компания"