Скрипты

ultimate-video-downloader-v2-0-скрипт-для-скачивания-видео-из-популярных-социальных-сетей Moko Ultimate Video Download Tool дает вам легкую возможность загружать ваши любимые видео с YouTube, Facebook, Instagram, Twitter, Vimeo, Dailymotion...
tinsta-v1-1-–-платформа-социальных-сетей-для-обмена-фотографиями Tinsta - это веб-платформа для обмена фотографиями в социальных сетях, она позволяет обмениваться фотографиями, видео с вашими подписчиками, такими как...
gostock-v1-3-–-скрипт-фотостока GoStock - Это платформа для обмена фотографиями, пользователи смогут загружать свои фотографии, чтобы поделиться со всем сообществом и посетителями, и...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Создание макета страницы с Bootstrap 3

thumb Page layout with Bootstrap 3Огромное преимущество использования CSS фреймворков заключается в том, что разработчику не нужно думать о разных вопросах компоновки, большинство из кототорых были решены создателями фреймворков. Например: кроссбраузерность, поддержка различных разрешений экрана и так далее. Разработчик должен только указывать, что показывать и когда показывать в зависимости от условий, остальное рамки делают сами. Данный подход может сильно ускорить вёрстку сайта. Еще одно преимущество Bootstrap это его популярность. Это значит, что другому разработчику будет проще поддерживать ваш код.

 

fimg-700x835

Недостатком использования фреймворков является https://inbenefit.com тот факт, что страница будет нести в себе всё базу рамок и стилей, даже если вы используете лишь небольшую их часть. Фреймворк является отличным инструментом для прототипирования и создания страниц, для которых дизайн вторичен, например страницы администрирования. Если у вас есть очень специфический дизайн, то выводить его с помощью рамок может быть сложнее чем нативными средствами

Об использовании Bootstrap

В настоящее время существует несколько способов работы со стилями Bootstrap: с использованием LESS и без использования.

Без использования LESS

Для начинающих, Bootstrap рекомендует следующий подход: вы должны скачать скомпилированные файлы Bootstrap и поместить их в свой проект. Затем вам необходимо создать пустой файл CSS и подключить его после bootstrap.css.

<link href="/css/bootstrap.min.css" rel="stylesheet"> 
<link href="/css/styles.css" rel="stylesheet">

После этого, чтобы изменить стили bootstarp по умолчанию, вы должны переопределить их в styles.css.

a { color: #00ff00 }
block { background-color: #dddddd }

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

С использованием LESS

Этот метод предполагает что все Bootstarpпеременные храниться в файле .less. Разработчик работает с этими переменными и их компиляциями в CSS файлы (вручную или автоматически) по мере необходимости. В HTML мы просто подключаем скомпилированные CSS файлы. Таким образом, это наиболее гибкий вариант.

Есть много способов чтобы скомпилировать lеss файлы, Bootstrap оставляет это на усмотрение разработчика. Сам Bootstrap использует Grunt для компиляции файлов, вы можете использовать WinLess для Windows, SimpLESS для Mac и Koala для Linux. Все эти программы всё тоже самое : они получают папку ввода и следят за изменениями в файлах. Как только вы внесли изменяя в любой файл, программа компилирует в соответствующий файл CSS.

Создание проекта

Прежде всего, давайте создадим простую файловую структуру для нашего проекта.

  1. Создайте папку с именем проекта например ‘whitesquare-bootstrap’.
  2. Создайте две папки ‘src’ для исходных файлов и ‘www’ для файлов готового сайта.
  3. В папке ‘www’ мы создаём пустую папку 'Images' и пустой файл: index.html.
  4. Теперь скачаем Bootstrap и скопируем содержимое архива в папку ‘www’.
  5. Так как мы решили использовать less в нашем проекте, нам нужно скачать исходные файлы Bootstrap и скопировать папку ‘less’ из пакета в папку ‘src’ нашего проекта.
  6. В папке ‘less’ создадим два пустых файла styles.less и variables.less. Мы будем переопределять стандартные свойства Bootstrap в этих файлах. Такой подход позволил бы быстро обновить Bootstrap
  7. Настроить компиляцию less файлов для css.
  8. Как будут размещаться изображения
  9. Какие компоненты используются
  10. Каковы основные стили
  11. Какой макет страницы мы получим в результате
  12. Для компоновки колонн – системы сетки (строка, столбец)
  13. Для поискаинлайнформа (form-inline), grouped controls (input-group), кнопка
  14. Для навигации – панель навигации (navbar) и самой навигации (nav).
  15. Для подменю – список групп (list-group).
  16. Для блока карты – визульная панель (panel).
  17. Для большого центрального блока – jumbotron.
  18. Для кадров изображений – thumbnail.

Page layout with Bootstrap 3 2

Если вы решили использовать WinLess, то для начала выберете ‘Добавить папку ’ и укажите путь к нашим less файлам:

C:\whitesquare-bootstrap\src\less

Вы увидите список всех файлов в этой папке. Вы можете удалить все галочки, но обратите внимание на последние два файла: 'styles.less' и 'variables.less'. Нажмите на них правой кнопкой мыши и выберите из всплывающего меню ‘Select output file ’ и укажите путь к нашим CSS файлам.

..\..\www\css\styles.css

..\..\www\css\variables.css

После этого в файлах LESS, вы получите свежие перекомпилированы файлы CSS.

Page layout with Bootstrap 3 3

Предварительный просмотр

После того как мы создали структуру файлов, давайте рассмотрим структуру нашего шаблона.
Мы должны рассмотреть следующие вещи:

Изображения

На данном этапе нам необходимо подготовить и сохранить только самые распространённые изображения, которые будут на всех страницах и не относятся к содержанию. В нашем случае это: светло-серый фон, фон шапки, изображение карты, два логотипа и социальные иконки.
Сохраняем изображение карты:
images/map.png
Сохраняем изображения логотипов:
images/logo.png
images/footer-logo.png
Сохраняем фоновые изображения:
/images/bg.png
/images/h1-bg.png
Для более быстрой загрузки, иконки социальных сетей храниться в одном файле спрайтов:
/images/social.png
/images/social-small.png

Компоненты

Основное отличие между использованием макета Bootstrap компоновки с использованием нативных средств является то что Bootstrap вводит понятие компонентов. Компоненты представляют собой обычно готовые HTML блоки с помощью предопределённых стилей. Иногда компоненты используют JavaScript, но это бывает редко. Мы можем использовать готовые компоненты Bootstrap, а также переопределять стили компонентов. Вам просто нужно изменить значения переменных Bootstrap для этого. Если вам нужны более гибкие изменения, разработчик всегда может изменить HTMLи CSS самостоятельно. Давайте вернёмся к нашему шаблону, нам понадобятся следующие компоненты.

Основные стили

По умолчанию у нас уже есть большое количество стилей в Bootstrap, нам нужно только переопределить их, если они отличаются от нашего дизайна. Мы можем сделать это в файле ‘src/less/variables.css’.

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

@brand-font: 'Oswald',sans-serif; 

Теперь давайте переопределим параметры Bootstrap для наших пользовательских настроек:

Спойлер.
/* gray background of the page */
@body-bg: #f8f8f8; 
/* blue background */
@ brand-primary: #29c5e6; 
/* background of panels */
@panel-bg: #f3f3f3;
/* frame color of panels */
@panel-inner-border: #e7e7e7;
/* remove rounding in blocks */
@border-radius-base: 0;
/* primary buttons have blue background */
@btn-primary-bg: @brand-primary; 
/* if the screen width is more then 992px, then the container width is 960px */
@container-md: 960px; 
/* if the screen width is more 1200px, then the container width is 960px again */
@container-lg: @container-md; 
/* main font is Tahoma */
@font-family-base: Tahoma, sans-serif;
/* base font size */
@font-size-base: 12px; 
/* main color of text */
@text-color: #8f8f8f;
/* gray background of text fields */
@input-bg: @panel-bg;
/* gray frame of text fields */
@input-border: @panel-inner-border;
/* gray color of the text in the fields */
@input-color: #b2b2b2;

После того как мы закончили с переменными, давайте начнём писать наши стили в файл 'styles.less'. Во первых подключить Bootstrap и наш файл переменных.

@import "bootstrap/bootstrap.less";
@import "variables.less";

Не все стили (которые установлены в Bootstrap по умолчанию ) можно изменить с помощью переменных, мы можем изменить их вручную.

p {
    margin: 20px 0;
}
.form-control {
    box-shadow: none;
}
.btn {
    font-family: @brand-font;
}

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

body {
  border-top: 5px solid #7e7e7e;
  background-image: url(../images/bg.png);
}

Далее мы не будем упоминать файлы где мы добавим стили. Просто помните что все переменные мы добавляем в файл 'variables.less', а все стили пользовательских CSS добавляем в файл 'styles.less'.    

HTML скелет

Макет сайта мы традиционно начинаем с HTMLскелета.

Спойлер.
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 3 page layout</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="/css/styles.css" rel="stylesheet">
    <!--[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.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  </body>
</html>

В этом разделе мы создаём структуру документа HTML5. В ‘title’ мы указываем имя нашей страницы - ‘Bootstrap 3 page layout’. Метатег ‘viewport’ указывает на то что ширина страницы на мобильном устройстве буде равна ширине экрана начального масштаба 100% . Затем мы подключаем таблицу стилей. А для Internet Explorer ниже v.9 мы подключаем скрипты, которые позволяют правильно отображать наш макет.

Макет страницы

Макет страницы состоит из двух частей: основной контейнер для содержания, который расположен по центру экрана и нижнего колонтитула. Первичный контейнер состоит из двух колонок: основное содержание и боковой панели. Над ним находятся заголовок, навигаци.

Давайте добавим следующий код:

Спойлер.
<body>
  <div class="wrapper container">
    <header></header>
    <nav></nav>
    <div class="heading"></div>
    <div class="row">
      <aside class="col-md-7"></aside>
      <section class="col-md-17"></section>
    </div>
  </div>
  <footer></footer>

Здесь мы встречаем первый компонент Bootstrap– столбцы. Родительский элемент колонок имеет класс row, а классы колонн начинаются с прификса col-, затем – размер (xs, sm, md, lg), а в конце относительная ширина столбца.

У нас есть классы col-md-7и col-md-17 которые указывают, что блоки представляют собой ширину 7 и 17 относительно родительского контейнера. По умолчанию сумма ширин столбцов в Bootstrap 12, но мы увеличили количество, чтобы достичь желаемой гибкости.

Теперь давайте приступим к описанию необходимых нам блоков:

Спойлер.
body {
  …

  .wrapper {
      padding: 0 0 50px 0;
  }

  header {
      padding: 20px 0;
  }
}

Мы вставляем эту конструкцию в body. Less синтаксис позволяет вложенные правила, которые компилируются в конструкции типа:

body .wrapper {…}
body header {…}

Такой подход позволяет увидеть структуру HTML внутри CSS, и это даёт своего рода ‘scope’ (рамки) правил.

Логотип

Page layout with Bootstrap 3 4

Давайте добавим логотип в заголовок:

<header>
  <a href="/"><img src="/" alt="Logo"></a>
</header>

Дополнительные стили не требуются.

Поиск

Page layout with Bootstrap 3 5

Для создания формы поиска нам понадобиться следующие компоненты Bootstrap: встроенная форма, сгруппированным элементам управления и кнопки. В теге заголовка мы создаём встроенную форму, выравнивая её по правому краю. Поле этой формы должно иметь класс form-control и метку.

В форме мы размещаем grouped control компонент. Группировка элементов управления позволяет удалить пространство между текстом и кнопкой, это выглядеть как единый элемент.
Это div с классом input-group и поля, и кнопки компонента находится в блоке с классом input-group-btn.
Поскольку нам не нужно показывать метку для каждого поля, мы прячем его с классом sr-only. Затем мы добавим класс btn-primary для нашей кнопки, это означает что это основная кнопка данной формы.

Спойлер.
<header>
…
<form name="search" action="#" method="get" class="form-inline form-search pull-right">
    <div class="input-group">
        <label class="sr-only" for="searchInput">Search</label>
        <input class="form-control" id="searchInput" type="text" name="search" placeholder="Search">
        <div class="input-group-btn">
            <button type="submit" class="btn btn-primary">GO</button>
        </div>
    </div>
</form>
</header>

Всё что остаётся установить ширину стилей окна поиска

Спойлер.
body {
    …

    .wrapper {
        …

        header {
            …

            .form-search {
                width: 200px;
            }
        }
    }
}

Меню

Page layout with Bootstrap 3 6

Для отображения меню мы берём компонент ‘navigation bar’ и размещаем компонент ‘navigation’ в нём, который представляет собой список со ссылками. Для навигации мы добавим класс navbar-nav, который применяет специальные стили в панели навигации.

Спойлер.
<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li><a href="/home/">Home</a></li>
    <li class="active"><a href="/about/">About us</a></li>
    <li><a href="/services/">Services</a></li>
    <li><a href="/partners/">Partners</a></li>
    <li><a href="/customers/">Customers</a></li>
    <li><a href="/projects/">Projects</a></li>
    <li><a href="/careers/">Careers</a></li>
    <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>

Для того чтобы довести это меню в наш проект, мы устанавливаем следующие значения для переменных:

Спойлер.
/* navigation menu height */
@navbar-height: 37px;

/* additional paddings */
@nav-link-padding: 10px 30px;

/* background for menu items */
@navbar-default-bg: @panel-bg;

/* text color in the menu items */
@navbar-default-link-color: #b2b2b2;

/* for the mouse hover - the same color */
@navbar-default-link-hover-color: @navbar-default-link-color;

/* background of the active menu item */
@navbar-default-link-active-bg: @brand-primary;

/* text color of the active menu item */
@navbar-default-link-active-color: #fff;

Кроме регулируемых параметров мы стилизуем тест в верхний регистр и конкретный стиль:

body {
    …
    .wrapper {
        …
        .navbar a {
            text-transform: uppercase;
            font: 14px @brand-font;
        }
    }
}

Заголовок страницы.

Заголовок страницы помещается в DIVс классом heading.

<div class="heading">
    <h1>About us</h1>
</div>

И применяем следующие стили :

Спойлер.
body {
…
.wrapper {
…
.heading {
height: 40px;
background: transparent url(../images/h1-bg.png);
margin: 30px 0;
padding-left: 20px;
h1 {
display: inline-block;
color: #7e7e7e;
font: normal 40px/40px 'Oswald', sans-serif;
background: url(../images/bg.png);
margin: 0;
padding: 0 10px;
text-transform: uppercase;
}
}
}
}

Субменю

Page layout with Bootstrap 3 7

При создании подменю мы не будем использовать компонент ‘navigation’ , так как он не очень подходит по стилям, вместо этого мы будем использовать компонент ‘group list’. Каждый элемент этого компонента имеет класс list-group-item. Подменю должно быть помещено в тег aside.
Список ссылок создаём как и в главном меню.

Спойлер.
<aside class="col-md-7">
  <ul class="list-group submenu">
    <li class="list-group-item active">Lorem ipsum</li>
    <li class="list-group-item"><a href="/donec/">Donec tincidunt laoreet</a></li>
    <li class="list-group-item"><a href="/vestibulum/">Vestibulum elit</a></li>
    <li class="list-group-item"><a href="/etiam/">Etiam pharetra</a></li>
    <li class="list-group-item"><a href="/phasellus/">Phasellus placerat</a></li>
    <li class="list-group-item"><a href="/cras/">Cras et nisi vitae odio</a></li>
  </ul>
</aside>

В настройках компонента отметим, что все сгруппированные списки должны показываться с фоном и границей компонента ‘panel.

@list-group-bg: @panel-bg;
@list-group-border: @panel-inner-border;

Затем мы применяем следующие стили:

Спойлер.
body {
    …

    .wrapper {
        …

        .submenu {
                margin-bottom: 30px;

                li {
                    display: list-item;
                    font: 300 14px @brand-font;
                    list-style-position: inside;
                    list-style-type: square;
                    padding: 10px;
                    text-transform: uppercase;

                    &.active {
                        color: @brand-primary;
                    }

                    a {
                        color: @text-color;
                        text-decoration: none;

                        &:hover {
                              color: @text-color;
                        }
                    }
                }
           }
    }
}

Конец первой части!



  1. Комментарии (0)

  2. Add Yours

Комментарии (0)

Комментарии отсутствуют

Оставьте свой комментарий

Оставить комментарий в качестве гостя. Зарегистрироваться либо авторизоваться.
Вложения (0 / 3)
Поделиться вашим местоположением

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...