Создать уникальный дизайн сайта на фреймворке.

Кастомизируем Bootstrap.

Bootstrap это УДОБНО. Имея под рукой полное описание фреймворка можно быстро и грамотно сверстать любой макет, и адаптивный в том числе.
С точки зрения внешнего вида тоже все неплохо. Одна беда - сайты получаются похожими друг на друга, как близнецы! И это видно не вооруженным глазом. Но это поправимо, достаточно подправить нужный стиль и вот - ваш сайт обретает свое лицо и уникальный дизайн. Как лучше это сделать? Можно редактировать таблицы стилей самого фреймворка. Но это не правильно. Вдруг вы захотите обновиться до новой версии! Все ваши правки исчезнут, и все придется начинать сначала. Гораздо удобней создать отдельно таблицу стилей, в каторой будут прописаны только изменения стилей фреймворка. Назовем эту таблицу "custom.css", разместим в корне и пропишем в <head>..</head>:

<!DOCTYPE html>
<html lang="en">
   <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="description" content="" />
        <meta name="keywords" content="" />
        <title>Название</title>
        <link href="/bootstrap/css/bootstrap.css" rel="stylesheet" />     
        <link rel="stylesheet" type="text/css" href="/custom.css" />
    </head>

    <body>
    </body>
</html>

При этом надо обратить внимание на последовательность загрузки CSS. Первой загружается таблица "bootstrap.css", затем грузится "custom.css" и правила, прописанные в "bootstrap.css", перезаписываются "custom.css" - с нашими поправками.

Например:

Стиль кнопки в Bootstrap

<button type="button" class="btn btn-primary">Кнопка</button>


Свойства для этой кнопки в таблице "bootstrap.css":

.btn-primary {
  color: #ffffff;
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #3276b1;
  border-color: #285e8e;
}

Создадим из стандартной кнопки свою - уникальную, для этого пропишем в "custom.css" свои правила: изменим цвет фона background-color: #428bca; и цвет обводки border-color: #357ebd;. Для активной кнопки (hover, focus, active) так же изменим эти два правила. Для этого в "custom.css" пишем:

.btn-primary {
   
  background-color: #000;
  border-color: #000;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  
  background-color: #707070;
  border-color: #000;
}

Свойства, которые не меняются (в нашем случае - цвет текста) - в "custom.css" можно не прописывать, они сохранятся со значением из "bootstrap.css".
Получилась кнопка:


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