{"id":211032,"date":"2014-02-01T12:42:02","date_gmt":"2014-02-01T08:42:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=211032"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=211032","title":{"rendered":"<span class=\"post_title\">\u041a\u0430\u043a \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0427\u0430\u0441\u0442\u044c 2 \u2014 Bootstrap<\/span>"},"content":{"rendered":"<div class=\"content html_format\">\n<h4>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0423\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c, \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0446\u0438\u043a\u043b\u0430 \u0441\u0442\u0430\u0442\u0435\u0439, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0445 \u0432\u0451\u0440\u0441\u0442\u043a\u0435.<\/p>\n<p>  \u0412 <a href=\"http:\/\/habrahabr.ru\/post\/202408\/\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u043c\u044b \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u0438 \u0448\u0430\u0431\u043b\u043e\u043d <a href=\"http:\/\/www.pcklab.com\/item.php?id=16\">Corporate Blue<\/a> \u043e\u0442 \u0441\u0442\u0443\u0434\u0438\u0438 Pcklaboratory \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c HTML \u0438 CSS. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0436\u0435 \u0448\u0430\u0431\u043b\u043e\u043d, \u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 <a href=\"http:\/\/getbootstrap.com\/\">Bootstrap 3<\/a>.<br \/>  <a name=\"habracut\"><\/a><br \/>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/6f8\/c13\/29b\/6f8c1329b9daed544646698108998966.png\" alt=\"image\"\/><\/p>\n<p>  \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u043d\u044e\u0430\u043d\u0441\u0430\u0445 \u0432\u0435\u0440\u0441\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430 \u043d\u0435\u0433\u043e \u0443\u0436\u0435 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432. \u041a \u0442\u0430\u043a\u0438\u043c \u043d\u044e\u0430\u043d\u0441\u0430\u043c \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u044c, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435. \u0412\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a \u043b\u0438\u0448\u044c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e, \u043a\u0430\u043a \u0438 \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0430\u043c. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0432\u0451\u0440\u0441\u0442\u043a\u0443 \u0441\u0430\u0439\u0442\u0430. \u041a \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430\u043c Bootstrap \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0438 \u0435\u0433\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0443 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0449\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434.<\/p>\n<p>  \u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0442 \u0444\u0430\u043a\u0442, \u0447\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u00ab\u043d\u0435\u0441\u0442\u0438\u00bb \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u043b\u0438\u0448\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043b\u0438\u0448\u044c \u0438\u0445 \u043c\u0430\u043b\u0443\u044e \u0447\u0430\u0441\u0442\u044c. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0434\u0438\u0437\u0430\u0439\u043d \u0432\u0442\u043e\u0440\u0438\u0447\u0435\u043d, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u0442\u043e \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0438 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<h4>\u041e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Bootstrap<\/h4>\n<p>  \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 Bootstrap.<\/p>\n<h5>\u0411\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f LESS<\/h5>\n<p>  \u0414\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 \u0441\u0430\u043c Bootstrap <a href=\"http:\/\/getbootstrap.com\/getting-started\/#customizing\">\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442<\/a> \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434: \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0441 \u0441\u0430\u0439\u0442\u0430 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 Bootstrap \u0438 \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044f. \u0417\u0430\u0442\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043f\u0443\u0441\u0442\u043e\u0439 CSS \u0444\u0430\u0439\u043b \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435 bootstrap.css.<\/p>\n<pre><code class=\"html\">&lt;link href=&quot;css\/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;  &lt;link href=&quot;css\/styles.css&quot; rel=&quot;stylesheet&quot;&gt; <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 Bootstrap \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0431\u0438\u0442\u044c \u0438\u0445 \u0432 \u0441\u0432\u043e\u0435\u043c styles.css \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 \u0442\u0430\u043a\u043e\u043c \u0432\u0438\u0434\u0435:<\/p>\n<pre><code class=\"css\">a { color: #beceda; } <\/code><\/pre>\n<p>  \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u043c \u043c\u0438\u043d\u0443\u0441\u043e\u043c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0438\u0441\u043a\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0431\u0438\u0442\u044c \u0438 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e, \u0442.\u043a. \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b Bootstrap \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a\u043e \u043c\u043d\u043e\u0433\u0438\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c \u0432 \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 \u0444\u043e\u0440\u043c\u0443\u043b\u044b. \u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043f\u043e\u043c\u043e\u0449\u044c \u0437\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <a href=\"http:\/\/getbootstrap.com\/customize\">Customize<\/a>, \u043e\u043d \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0432\u0430\u0448\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437. \u0415\u0441\u043b\u0438 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0432\u044b \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440, \u0442\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e \u0432\u0431\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u043d\u0435\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u0442\u0438\u043b\u0438.<\/p>\n<h5>\u0421 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c LESS<\/h5>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 Bootstrap \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 .less \u0444\u0430\u0439\u043b\u0430\u0445. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u044d\u0442\u0438\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0438\u043b\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u0432 CSS \u0444\u0430\u0439\u043b\u044b, \u0430 \u0441\u0430\u043c HTML \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 CSS \u0444\u0430\u0439\u043b\u044b. \u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u044c\u0435, \u043a\u0430\u043a \u0441\u0430\u043c\u044b\u0439 \u0433\u0438\u0431\u043a\u0438\u0439.<\/p>\n<p>  \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c LESS \u0444\u0430\u0439\u043b\u044b \u0438 Bootstrap \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u0442\u043e \u043d\u0430 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u0421\u0430\u043c Bootstrap \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 <a href=\"http:\/\/gruntjs.com\/\">Grunt<\/a>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0435\u0441\u0442\u044c <a href=\"http:\/\/plugins.jetbrains.com\/plugin?pr=idea&amp;pluginId=7059\">\u043f\u043b\u0430\u0433\u0438\u043d<\/a> \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 JetBrains, \u0430 \u043c\u044b, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0442\u0430\u0442\u044c\u044f \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439. \u0422\u0430\u043a\u0438\u043c\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b <a href=\"http:\/\/winless.org\/\">WinLess<\/a> \u0434\u043b\u044f Windows, <a href=\"http:\/\/wearekiss.com\/simpless\">SimpLESS<\/a> \u0434\u043b\u044f Mac \u0438\u043b\u0438 <a href=\"http:\/\/koala-app.com\/\">Koala<\/a> \u0434\u043b\u044f Linux. \u0412\u0441\u0435 \u044d\u0442\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0434\u0435\u043b\u0430\u044e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435: \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 \u043f\u0430\u043f\u043a\u0443 \u0441 LESS \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0438 \u0441\u043b\u0443\u0448\u0430\u044e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043d\u0438\u0445. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0432\u043d\u043e\u0441\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043b\u044e\u0431\u043e\u0439 \u0444\u0430\u0439\u043b \u2013 \u0442\u0443\u0442 \u0436\u0435 \u043e\u043d \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 CSS \u0444\u0430\u0439\u043b. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0430\u043c \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e \u0440\u0443\u043a\u0430\u043c\u0438 \u043f\u043e\u0441\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u0412\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0435 LESS \u0444\u0430\u0439\u043b, \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0435 \u0435\u0433\u043e \u0438 \u0442\u0443\u0442 \u0436\u0435 \u0432\u0438\u0434\u0438\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0432 \u0443\u0436\u0435 \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c, \u0441\u0436\u0430\u0442\u043e\u043c \u0432\u0438\u0434\u0435.<\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n<p>  \u041f\u0435\u0440\u0432\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.   <\/p>\n<ul>\n<li>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 whitesquare-bootstrap.<\/li>\n<li>\u0412 \u043d\u0435\u0439 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u0432\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043f\u0430\u043f\u043a\u0438: src \u2013 \u0434\u043b\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 www \u2013 \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430.<\/li>\n<li>\u0412 \u043f\u0430\u043f\u043a\u0435 www \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u0443\u044e \u043f\u0430\u043f\u043a\u0443 images \u0438 \u043f\u0443\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b index.html.<\/li>\n<li>\u0417\u0430\u0442\u0435\u043c \u043d\u0443\u0436\u043d\u043e <a href=\"https:\/\/github.com\/twbs\/bootstrap\/releases\/download\/v3.1.0\/bootstrap-3.1.0-dist.zip\">\u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0441\u0430\u043c Bootstrap<\/a> \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0430\u0440\u0445\u0438\u0432\u0430 \u0432 \u043f\u0430\u043f\u043a\u0443 www \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/li>\n<li>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c LESS \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0442\u043e \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0435\u0449\u0435 <a href=\"https:\/\/github.com\/twbs\/bootstrap\/archive\/v3.1.0.zip\">\u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 Bootstrap<\/a> \u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0442\u0443\u0434\u0430 \u043f\u0430\u043f\u043a\u0443 less \u0432 \u043f\u0430\u043f\u043a\u0443 src \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/li>\n<li>\u0420\u044f\u0434\u043e\u043c \u0441 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u043f\u0430\u043f\u043a\u043e\u0439 less\/bootstrap \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0432\u0430 \u043f\u0443\u0441\u0442\u044b\u0445 \u0444\u0430\u0439\u043b\u0430 styles.less \u0438 variables.less. \u0412 \u043d\u0438\u0445 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 Bootstrap \u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0441\u0442\u0438\u043b\u0438. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u043e\u0442\u043e\u043c \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c Bootstrap.\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/f94\/6ff\/9d3\/f946ff9d393192387b79d5079b4405af.png\"\/><\/p>\n<\/li>\n<li>\u0417\u0430\u0442\u0435\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u044e LESS \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 CSS. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432 WinLess. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u00abAdd folder\u00bb \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043f\u0443\u0442\u044c \u0434\u043e \u043f\u0430\u043f\u043a\u0438 \u0441 LESS \u0444\u0430\u0439\u043b\u0430\u043c\u0438:<br \/>  C:\\whitesquare-bootstrap\\src\\less<br \/>  \u0417\u0430\u0442\u0435\u043c \u0443 \u0432\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0438. \u041c\u043e\u0436\u043d\u043e \u0443\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0433\u0430\u043b\u043e\u0447\u043a\u0438. \u041d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430 styles.less \u0438 variables.less. \u041a\u043b\u0438\u043a\u043d\u0438\u0442\u0435 \u043d\u0430 \u043d\u0438\u0445 \u043f\u0440\u0430\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u00abSelect output file\u00bb \u0438 \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043f\u0443\u0442\u044c, \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f CSS \u0444\u0430\u0439\u043b\u044b:<br \/>  ..\\..\\www\\css\\styles.css<br \/>  ..\\..\\www\\css\\variables.css<br \/>  \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043b\u044e\u0431\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 LESS \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u0435\u0440\u0435\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 CSS \u0444\u0430\u0439\u043b\u043e\u0432.\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/3cb\/2fb\/2e4\/3cb2fb2e4e5f0dc8f91bb1d4944c3295.png\"\/>  <\/li>\n<\/ul>\n<h4>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0441\u043c\u043e\u0442\u0440<\/h4>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c psd \u0444\u0430\u0439\u043b \u0432 Photoshop. \u0412\u0430\u0436\u043d\u043e \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0435\u0449\u0438:  <\/p>\n<ul>\n<li>\u041a\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0440\u0435\u0437\u0430\u0442\u044c\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f? <\/li>\n<li>\u041a\u0430\u043a\u0438\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b?<\/li>\n<li>\u041a\u0430\u043a\u0438\u043c\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438?<\/li>\n<li>\u041a\u0430\u043a\u043e\u0439 \u043c\u0430\u043a\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f?<\/li>\n<\/ul>\n<p>   \u0422\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u044b \u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u0441\u0435\u0431\u0435 \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0432\u0451\u0440\u0441\u0442\u043a\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u044d\u0442\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u043e-\u043f\u043e\u0440\u044f\u0434\u043a\u0443.<\/p>\n<h4>\u041e\u0431\u0449\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p>  \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0440\u0435\u0437\u0430\u0442\u044c \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0449\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0441\u0430\u0439\u0442\u0430 \u0438 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u0435\u0442\u043b\u043e-\u0441\u0435\u0440\u044b\u0439 \u0444\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0444\u043e\u043d \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b, \u0434\u0432\u0430 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439.<\/p>\n<p>  \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b:<\/p>\n<p>  images\/map.png<\/p>\n<p>  \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  images\/logo.png<br \/>  images\/footer-logo.png<\/p>\n<p>  \u041f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0440\u0435\u0437\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u0443\u0441\u043e\u0447\u043a\u043e\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u043c \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438.<\/p>\n<p>  \/images\/bg.png<br \/>  \/images\/h1-bg.png<\/p>\n<p>  \u0418\u043a\u043e\u043d\u043a\u0438 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043f\u0440\u043e \u0441\u043a\u043b\u0435\u0439\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430:<\/p>\n<p>  \/images\/social.png<br \/>  \/images\/social-small.png<\/p>\n<h4>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h4>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Bootstrap \u043e\u0442 \u0432\u0451\u0440\u0441\u0442\u043a\u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e Bootstrap \u0432\u0432\u043e\u0434\u0438\u0442 \u0442\u0430\u043a\u043e\u0435 \u043f\u043e\u043d\u044f\u0442\u0438\u0435, \u043a\u0430\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 HTML \u0431\u043b\u043e\u043a\u0438 \u0441 \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u0418\u043d\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 JavaScript. \u0412\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0442\u0430\u043a \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0434\u043b\u044f \u043d\u0435\u0433\u043e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0447\u0430\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 Bootstrap. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u044b \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c HTML \u0438 CSS \u043f\u043e \u0441\u0432\u043e\u0435\u043c\u0443 \u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044e.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043e\u043a\u0438\u043d\u0443\u0442\u044c \u0432\u0437\u0433\u043b\u044f\u0434\u043e\u043c \u043d\u0430\u0448 \u0448\u0430\u0431\u043b\u043e\u043d, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b:   <\/p>\n<ol>\n<li>\u0414\u043b\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438 \u2014 \u0441\u0435\u0442\u043e\u0447\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 (row, col)<\/li>\n<li>\u0414\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u2013 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u0430\u044f \u0444\u043e\u0440\u043c\u0430 (form-inline), \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b (input-group), \u043a\u043d\u043e\u043f\u043a\u0430 (btn)<\/li>\n<li>\u0414\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u2014 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c (navbar) \u0438 \u0441\u0430\u043c\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f (nav)<\/li>\n<li>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u043c\u0435\u043d\u044e \u2013 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a (list-group)<\/li>\n<li>\u0414\u043b\u044f \u0431\u043b\u043e\u043a\u0430 \u043a\u0430\u0440\u0442\u044b \u2013 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c (panel)<\/li>\n<li>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u2013 jumbotron<\/li>\n<li>\u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u043c\u043e\u043a \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439 \u2013 \u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440\u044b (thumbnail)<\/li>\n<\/ol>\n<p>  \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u043d\u0430\u043c \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u0441\u044f \u0432 \u0432\u0451\u0440\u0441\u0442\u043a\u0435.<\/p>\n<h4>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438<\/h4>\n<p>  \u0412 Bootstrap \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443\u0436\u0435 \u0437\u0430\u0434\u0430\u043d\u044b, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0445 \u043f\u0435\u0440\u0435\u0431\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432 \u0444\u0430\u0439\u043b\u0435 src\/less\/variables.css.<\/p>\n<p>  \u0412 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 Bootstrap \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c. \u0423 \u043d\u0430\u0441 \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0430.<\/p>\n<pre><code class=\"css\">@brand-font: 'Oswald',sans-serif;  <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0440\u0443\u0441\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432, \u0442\u043e \u0448\u0440\u0438\u0444\u0442 Oswald \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0431\u043b\u0438\u0437\u043a\u0438\u0439 Cuprum, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u0438\u0440\u0438\u043b\u043b\u0438\u0446\u0443.<\/p>\n<p>  \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Bootstrap \u043d\u0430 \u0441\u0432\u043e\u0438:<\/p>\n<pre><code class=\"css\">\/*\u0441\u0435\u0440\u044b\u0439 \u0444\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b*\/ @body-bg: #f8f8f8;  \/*\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u043e\u043b\u0443\u0431\u043e\u0439 \u0444\u043e\u043d \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430*\/ @ brand-primary: #29c5e6;  \/*\u0444\u043e\u043d \u043f\u0430\u043d\u0435\u043b\u0435\u0439*\/ @panel-bg: #f3f3f3; \/*\u0446\u0432\u0435\u0442 \u0440\u0430\u043c\u043a\u0438 \u043f\u0430\u043d\u0435\u043b\u0435\u0439*\/ @panel-inner-border: #e7e7e7; \/*\u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443 \u0431\u043b\u043e\u043a\u043e\u0432*\/ @border-radius-base: 0; \/*\u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438\u043c\u0435\u044e\u0442 \u0433\u043e\u043b\u0443\u0431\u043e\u0439 \u0444\u043e\u043d*\/ @btn-primary-bg: @brand-primary;  \/*\u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 992px, \u0442\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 960px*\/ @container-md: 960px;  \/*\u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 1200px, \u0442\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0442\u0430\u043a \u0436\u0435 960px*\/ @container-lg: @container-md;  \/*\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 Tahoma*\/ @font-family-base: Tahoma, sans-serif; \/*\u0437\u0430\u0434\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440*\/ @font-size-base: 12px;  \/*\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435*\/ @text-color: #8f8f8f; \/*\u0441\u0435\u0440\u044b\u0439 \u0444\u043e\u043d \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u0435\u0439*\/ @input-bg: @panel-bg; \/*\u0441\u0435\u0440\u0430\u044f \u0440\u0430\u043c\u043a\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0445 \u043f\u043e\u043b\u0435\u0439*\/ @input-border: @panel-inner-border; \/*\u0441\u0435\u0440\u044b\u0439 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u043f\u043e\u043b\u044f\u0445*\/ @input-color: #b2b2b2; <\/code><\/pre>\n<p>  \u0412\u0441\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 Bootstrap \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <a href=\"http:\/\/getbootstrap.com\/customize\/\">http:\/\/getbootstrap.com\/customize\/<\/a><\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438 \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0435\u043c \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 styles.less. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0441\u0430\u043c Bootstrap \u0438 \u043d\u0430\u0448\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n<pre><code class=\"css\">@import &quot;bootstrap\/bootstrap.less&quot;; @import &quot;variables.less&quot;; <\/code><\/pre>\n<p>  \u041d\u0435 \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 Bootstrap \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e:<\/p>\n<pre><code class=\"css\">p { \tmargin: 20px 0; }  .form-control { \tbox-shadow: none; }  .btn { \tfont-family: @brand-font; } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0443\u0431\u0440\u0430\u043b\u0438 \u0442\u0435\u043d\u044c \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u043e\u0440\u043c\u044b, \u0430 \u0442\u0435\u043a\u0441\u0442\u0430\u043c \u0432 \u043a\u043d\u043e\u043f\u043a\u0430\u0445 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u0417\u0430\u0442\u0435\u043c \u043e\u043f\u0438\u0448\u0435\u043c \u0444\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u0432\u0435\u0440\u0445\u043d\u044e\u044e \u043f\u043e\u043b\u043e\u0441\u043a\u0443:<\/p>\n<pre><code class=\"css\">body { \tborder-top: 5px solid #7e7e7e; \tbackground-image: url(..\/images\/bg.png); } <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u043a\u043e\u0439 \u0444\u0430\u0439\u043b \u043f\u0438\u0448\u0443\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438. \u041f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b variables.less, \u0430 CSS \u0441\u0442\u0438\u043b\u0438 \u0431\u0443\u0434\u0435\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 styles.less.<\/p>\n<h4>\u041a\u0430\u0440\u043a\u0430\u0441 HTML<\/h4>\n<p>  \u0412\u0451\u0440\u0441\u0442\u043a\u0443 \u0441\u0430\u0439\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u0441 \u043a\u0430\u0440\u043a\u0430\u0441\u0430 HTML. \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0444\u0430\u0439\u043b index.html \u043a\u043e\u0434 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0441\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b <a href=\"http:\/\/getbootstrap.com\/getting-started\/#template\">Getting started<\/a>, \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0431\u0440\u0430\u0432 \u0432\u0441\u0451 \u043b\u0438\u0448\u043d\u0435\u0435:<\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt; &lt;html&gt; \t&lt;head&gt; \t\t&lt;title&gt;Whitesquare&lt;\/title&gt; \t\t&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;  \t\t&lt;link href=&quot;css\/styles.css&quot; rel=&quot;stylesheet&quot;&gt; \t\t&lt;!--[if lt IE 9]&gt; \t\t\t&lt;script src=&quot;https:\/\/oss.maxcdn.com\/libs\/html5shiv\/3.7.0\/html5shiv.js&quot;&gt;&lt;\/script&gt; \t\t\t&lt;script src=&quot;https:\/\/oss.maxcdn.com\/libs\/respond.js\/1.3.0\/respond.min.js&quot;&gt;&lt;\/script&gt; \t\t&lt;![endif]--&gt; \t&lt;\/head&gt; \t&lt;body&gt; \t&lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0431\u043b\u043e\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f HTML5 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0412 title \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u2013 Whitesquare. \u041c\u0435\u0442\u0430\u0442\u0435\u0433\u043e\u043c viewport \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u0438 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0431\u0443\u0434\u0435\u0442 100%. \u0417\u0430\u0442\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0439\u043b \u0441\u0442\u0438\u043b\u0435\u0439. \u0418 \u0434\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u0439 Internet Explorer \u043c\u0435\u043d\u044c\u0448\u0435 \u0434\u0435\u0432\u044f\u0442\u043e\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u044b, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0432\u0435\u0440\u0441\u0442\u043a\u0443.<\/p>\n<h4>\u041c\u0430\u043a\u0435\u0442<\/h4>\n<p>   \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0441\u0430\u0439\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u0435\u0439: \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u0441 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0446\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0438 \u0442\u044f\u043d\u0443\u0449\u0435\u0433\u043e\u0441\u044f \u0444\u0443\u0442\u0435\u0440\u0430. \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a: \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430. \u041d\u0430\u0434 \u043d\u0438\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0448\u0430\u043f\u043a\u0430 (header), \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f (nav) \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b (.heading). <\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/6b1\/98f\/b18\/6b198fb18a1bedb2803a5b5410b29c98.png\"\/><\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 body \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"html\">&lt;body&gt; \t&lt;div class=&quot;wrapper container&quot;&gt; \t\t&lt;header&gt;&lt;\/header&gt; \t\t&lt;nav&gt;&lt;\/nav&gt; \t\t&lt;div class=&quot;heading&quot;&gt;&lt;\/div&gt; \t\t&lt;div class=&quot;row&quot;&gt; \t\t\t&lt;aside class=&quot;col-md-7&quot;&gt;&lt;\/aside&gt; \t\t\t&lt;section class=&quot;col-md-17&quot;&gt;&lt;\/section&gt; \t\t&lt;\/div&gt; \t&lt;\/div&gt; \t&lt;footer&gt;&lt;\/footer&gt; <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u043c \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Bootstrap \u2013 <a href=\"http:\/\/getbootstrap.com\/css\/#grid\">\u043a\u043e\u043b\u043e\u043d\u043a\u0438<\/a>. \u0420\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 \u00abrow\u00bb, \u0430 \u043a\u043b\u0430\u0441\u0441\u044b \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 \u00abcol-\u00bb, \u0437\u0430\u0442\u0435\u043c \u0438\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430 (xs, sm, md, lg), \u0430 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438.<\/p>\n<p>  \u041a\u043e\u043b\u043e\u043d\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 class=\u00abcol-xs-12 col-md-8\u00bb. \u042d\u0442\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0434\u0430\u044e\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043a\u0440\u0430\u043d\u0430. \u0415\u0441\u043b\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0435 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d \u043a\u043b\u0430\u0441\u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u0430 \u0435\u0441\u043b\u0438 \u0438 \u043e\u043d \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d \u2013 \u0442\u043e \u043d\u0438\u043a\u0430\u043a\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0438 \u0431\u043b\u043e\u043a \u0437\u0430\u0439\u043c\u0435\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443.<\/p>\n<p>  \u0423 \u043d\u0430\u0441 \u043a\u043b\u0430\u0441\u0441\u044b \u00abcol-md-7\u00bb \u0438 \u00abcol-md-17\u00bb \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442, \u0447\u0442\u043e \u0431\u043b\u043e\u043a\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 7 \u0438 17 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0443\u043c\u043c\u0430 \u0448\u0438\u0440\u0438\u043d \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432 Bootstrap \u0440\u0430\u0432\u043d\u044f\u0435\u0442\u0441\u044f 12, \u043e\u0434\u043d\u0430\u043a\u043e \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0438 \u044d\u0442\u043e \u0447\u0438\u0441\u043b\u043e \u0432\u0434\u0432\u043e\u0435 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e\u0439 \u043d\u0430\u043c \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u0438. <\/p>\n<pre><code class=\"css\">@grid-columns: 24; <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043e\u043f\u0438\u0448\u0435\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b:<\/p>\n<pre><code class=\"css\">body { \t\u2026  \t.wrapper { \t\tpadding: 0 0 50px 0; \t}  \theader { \t\tpadding: 20px 0; \t} } <\/code><\/pre>\n<p>  \u0414\u0430\u043d\u043d\u0443\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u044c body. \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 LESS \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u0440\u0443\u0433 \u0432 \u0434\u0440\u0443\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0442\u043e\u043c \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0442\u0430\u043a\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438: <\/p>\n<pre><code class=\"css\">body .wrapper {\u2026} body header {\u2026} <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 HTML \u043f\u0440\u044f\u043c\u043e \u0432\u043d\u0443\u0442\u0440\u0438 CSS \u0438 \u0434\u0430\u0435\u0442 \u043d\u0435\u043a\u0443\u044e \u00ab\u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438\u00bb \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c.<\/p>\n<h4>\u041b\u043e\u0433\u043e\u0442\u0438\u043f<\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/ad1\/e15\/d92\/ad1e15d92086ee83c396cb458509df2d.png\"\/><\/p>\n<p>  \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0432 \u0442\u0435\u0433 header:<\/p>\n<pre><code class=\"html\">&lt;header&gt; \t&lt;a href=&quot;\/&quot;&gt;&lt;img src=&quot;&quot; alt=&quot;Whitesquare logo&quot;&gt;&lt;\/a&gt; &lt;\/header&gt; <\/code><\/pre>\n<p>  \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.<\/p>\n<h4>\u041f\u043e\u0438\u0441\u043a<\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/d87\/d55\/940\/d87d5594013f6e7b6632e278ae34ef8c.png\"\/><\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u043e\u0438\u0441\u043a, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Bootstrap: <a href=\"http:\/\/getbootstrap.com\/css\/#forms-inline\">\u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u0430\u044f \u0444\u043e\u0440\u043c\u0430<\/a>, <a href=\"http:\/\/getbootstrap.com\/components\/#input-groups\">\u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b<\/a> \u0438 <a href=\"http:\/\/getbootstrap.com\/css\/#buttons\">\u043a\u043d\u043e\u043f\u043a\u0430<\/a>.<br \/>  \u0412 \u0442\u0435\u0433\u0435 header \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u0443\u044e \u0444\u043e\u0440\u043c\u0443, \u0432\u044b\u0440\u043e\u0432\u043d\u0435\u043d\u043d\u0443\u044e \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e. \u041f\u043e\u043b\u044f \u0442\u0430\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u00abform-control\u00bb \u0438 label.<\/p>\n<p>  \u0412 \u0444\u043e\u0440\u043c\u0443 \u043c\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00ab\u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b\u00bb. \u0413\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0431\u0440\u0430\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f \u043c\u0435\u0436\u0434\u0443 \u0432\u0432\u043e\u0434\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u0438 \u043a\u0430\u043a \u0431\u044b \u0441\u043b\u0438\u0442\u044c \u0438\u0445 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<br \/>  \u041e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f div \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00abinput-group\u00bb \u0438 \u043f\u043e\u043b\u044f\u043c\u0438, \u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u043b\u043e\u043a \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00abinput-group-btn\u00bb.<\/p>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c label \u0434\u043b\u044f \u043f\u043e\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u2014 \u0441\u043a\u0440\u043e\u0435\u043c \u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00absr-only\u00bb. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>  \u041a\u043d\u043e\u043f\u043a\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 \u00abbtn-primary\u00bb, \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0439, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u0430\u044f \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b. <\/p>\n<pre><code class=\"html\">&lt;header&gt; \u2026 &lt;form name=&quot;search&quot; action=&quot;#&quot; method=&quot;get&quot; class=&quot;form-inline form-search pull-right&quot;&gt; \t&lt;div class=&quot;input-group&quot;&gt; \t\t&lt;label class=&quot;sr-only&quot; for=&quot;searchInput&quot;&gt;Search&lt;\/label&gt; \t\t&lt;input class=&quot;form-control&quot; id=&quot;searchInput&quot; type=&quot;text&quot; name=&quot;search&quot; placeholder=&quot;Search&quot;&gt; \t\t&lt;div class=&quot;input-group-btn&quot;&gt; \t\t\t&lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;GO&lt;\/button&gt; \t\t&lt;\/div&gt; \t&lt;\/div&gt; &lt;\/form&gt; &lt;\/header&gt; <\/code><\/pre>\n<p>  \u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u2014 \u044d\u0442\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u0448\u0438\u0440\u0438\u043d\u0443 \u0444\u043e\u0440\u043c\u0435 \u043f\u043e\u0438\u0441\u043a\u0430.<\/p>\n<pre><code class=\"css\">body { \t\u2026  \t.wrapper { \t\t\u2026  \t\theader { \t\t\t\u2026  \t\t\t.form-search { \t\t\t\twidth: 200px;             \t\t} \t\t} \t} } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u041c\u0435\u043d\u044e<\/h4>\n<p>   <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/11f\/1e2\/bf4\/11f1e2bf47e901fa1ffc3af899deefcf.png\"\/><\/p>\n<p>  \u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u0435\u043d\u044e \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00ab<a href=\"http:\/\/getbootstrap.com\/components\/#navbar\">\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c<\/a>\u00bb \u0438 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00ab<a href=\"http:\/\/getbootstrap.com\/components\/#nav\">\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f<\/a>\u00bb, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438. \u0414\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 \u00abnavbar-nav\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438.<\/p>\n<pre><code class=\"html\">&lt;nav class=&quot;navbar navbar-default&quot;&gt; \t&lt;ul class=&quot;nav navbar-nav&quot;&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/home\/&quot;&gt;Home&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;\/about\/&quot;&gt;About us&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/services\/&quot;&gt;Services&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/partners\/&quot;&gt;Partners&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/customers\/&quot;&gt;Customers&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/projects\/&quot;&gt;Projects&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/careers\/&quot;&gt;Careers&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/contact\/&quot;&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\t\t\t \t&lt;\/ul&gt; &lt;\/nav&gt; <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u044d\u0442\u043e \u043c\u0435\u043d\u044e \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0443 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c:<\/p>\n<pre><code class=\"css\">\/*\u0432\u044b\u0441\u043e\u0442\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e*\/ @navbar-height: 37px;  \/*\u0437\u0430\u0434\u0430\u0435\u043c  \u043f\u043e\u0431\u043e\u043b\u044c\u0448\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0441\u0442\u0443\u043f*\/ @nav-link-padding: 10px 30px;  \/*\u0444\u043e\u043d \u0434\u043b\u044f \u043f\u0443\u043d\u043a\u0442\u043e\u0432 \u043c\u0435\u043d\u044e*\/ @navbar-default-bg: @panel-bg;  \/*\u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u043f\u0443\u043d\u043a\u0442\u0430\u0445 \u043c\u0435\u043d\u044e*\/ @navbar-default-link-color: #b2b2b2;  \/*\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u043a\u0438 \u2013 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435*\/ @navbar-default-link-hover-color: @navbar-default-link-color;  \/*\u0444\u043e\u043d \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u0435\u043d\u044e \u2013 \u043d\u0430\u0448 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0433\u043e\u043b\u0443\u0431\u043e\u0439 \u0446\u0432\u0435\u0442*\/ @navbar-default-link-active-bg: @brand-primary;  \/*\u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430 \u043c\u0435\u043d\u044e*\/ @navbar-default-link-active-color: #fff; <\/code><\/pre>\n<p>  \u041f\u043e\u043c\u0438\u043c\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043e\u043f\u0438\u0448\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u2013 \u044d\u0442\u043e \u0442\u0435\u043a\u0441\u0442 \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435 \u0438 \u043d\u0430\u0448 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0448\u0440\u0438\u0444\u0442:<\/p>\n<pre><code class=\"css\">body { \t\u2026 \t.wrapper { \t\t\u2026 \t\t.navbar a { \t\t\ttext-transform: uppercase; \t\t\tfont: 14px @brand-font; \t\t} \t} } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/728\/e3b\/83b\/728e3b83b915a000db114952b08c9b4c.png\"\/><\/p>\n<p>  \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 div \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00abheading\u00bb.<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;heading&quot;&gt; \t&lt;h1&gt;About us&lt;\/h1&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0418 \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">body { \t\u2026  \t.wrapper { \t\t\u2026  \t\t.heading { \t\t\theight: 40px; \t\t\tbackground: transparent url(..\/images\/h1-bg.png); \t\t\tmargin: 30px 0; \t\t\tpadding-left: 20px;  \t\t\th1 { \t\t\t\tdisplay: inline-block; \t\t\t\tcolor: #7e7e7e; \t\t\t\tfont: normal 40px\/40px 'Oswald', sans-serif; \t\t\t\tbackground: url(..\/images\/bg.png); \t\t\t\tmargin: 0; \t\t\t\tpadding: 0 10px; \t\t\t\ttext-transform: uppercase; \t\t\t} \t\t} \t} } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u0441\u0435\u0440\u0443\u044e \u043f\u043e\u043b\u043e\u0441\u043a\u0443 \u0444\u043e\u043d\u043e\u043c \u043d\u0430 div\u2019e, \u0438 \u0432 \u043d\u0435\u0435 \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0439 h1 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c \u0438 \u0444\u043e\u043d\u043e\u043c \u0446\u0432\u0435\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u043e\u0441\u044c \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0434\u043b\u044f h1.<\/p>\n<h4>\u041f\u043e\u0434\u043c\u0435\u043d\u044e<\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/9d2\/568\/de6\/9d2568de6dcc13c044388e02ab540962.png\"\/><\/p>\n<p>  \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u043e\u0434\u043c\u0435\u043d\u044e, \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00ab\u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f\u00bb, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e \u0441\u0442\u0438\u043b\u044f\u043c \u043e\u043d \u043d\u0430\u043c \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0430\u043c \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00ab<a href=\"http:\/\/getbootstrap.com\/components\/#list-group\">\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a<\/a>\u00bb. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438\u043c\u0435\u0435\u0442 \u043a\u043b\u0430\u0441\u0441 \u00ablist-group-item\u00bb.<\/p>\n<p>  \u041f\u043e\u0434\u043c\u0435\u043d\u044e \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0442\u0435\u0433\u0435 aside. \u0421\u043f\u0438\u0441\u043e\u043a \u0441\u0441\u044b\u043b\u043e\u043a \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u043c\u0443 \u043c\u0435\u043d\u044e.<\/p>\n<pre><code class=\"html\">&lt;aside class=&quot;col-md-7&quot;&gt; \t&lt;ul class=&quot;list-group submenu&quot;&gt; \t\t&lt;li class=&quot;list-group-item active&quot;&gt;Lorem ipsum&lt;\/li&gt; \t\t&lt;li class=&quot;list-group-item&quot;&gt;&lt;a href=&quot;\/donec\/&quot;&gt;Donec tincidunt laoreet&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li class=&quot;list-group-item&quot;&gt;&lt;a href=&quot;\/vestibulum\/&quot;&gt;Vestibulum elit&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li class=&quot;list-group-item&quot;&gt;&lt;a href=&quot;\/etiam\/&quot;&gt;Etiam pharetra&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li class=&quot;list-group-item&quot;&gt;&lt;a href=&quot;\/phasellus\/&quot;&gt;Phasellus placerat&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li class=&quot;list-group-item&quot;&gt;&lt;a href=&quot;\/cras\/&quot;&gt;Cras et nisi vitae odio&lt;\/a&gt;&lt;\/li&gt; \t&lt;\/ul&gt; &lt;\/aside&gt; <\/code><\/pre>\n<p>  \u0412 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0443\u043a\u0430\u0436\u0435\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u043f\u0438\u0441\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441 \u0444\u043e\u043d\u043e\u043c \u0438 \u0440\u0430\u043c\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u00ab\u043f\u0430\u043d\u0435\u043b\u044c\u00bb:<\/p>\n<pre><code class=\"css\">@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border; <\/code><\/pre>\n<p>  \u0418 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043a \u043f\u043e\u0434\u043c\u0435\u043d\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">body {   \t\u2026  \t.wrapper { \t\t\u2026  \t\t.submenu {             \t\tmargin-bottom: 30px;              \t\tli {                 \t\tdisplay: list-item;                 \t\tfont: 300 14px @brand-font; \t\t             list-style-position: inside;                 \t\tlist-style-type: square;                 \t\tpadding: 10px;                 \t\ttext-transform: uppercase;                  \t\t&.active {                     \t\tcolor: @brand-primary;                 \t\t}                  \t\ta {                     \t\tcolor: @text-color;                     \t\ttext-decoration: none;                      \t\t&:hover {                         \t\t\tcolor: @text-color;                     \t\t}                 \t\t}             \t\t} \t       } \t} } <\/code><\/pre>\n<p>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441\u043f\u0438\u0441\u043a\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u0442\u0430\u043a \u043a\u0430\u043a Bootstrap \u0438\u0445 \u043f\u0435\u0440\u0435\u0431\u0438\u043b \u043d\u0430 \u0441\u0432\u043e\u0438. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043d\u0438\u0437\u0443. \u0414\u043b\u044f \u043f\u043e\u0434\u043c\u0435\u043d\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u043d\u043a\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 \u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u044b. \u0410 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043e\u043a \u0437\u0430\u0434\u0430\u0435\u043c \u0446\u0432\u0435\u0442\u0430, \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0440\u0435\u0433\u0438\u0441\u0442\u0440 \u0438 \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435. \u0410\u043c\u043f\u0435\u0440\u0441\u0430\u043d\u0434 \u0432 \u043a\u043e\u0434\u0435 \u00ab&#038;.active\u00bb \u043f\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0443 LESS \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u043d\u0430 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440: \u00ab.submenu li.active\u00bb.<\/p>\n<h4>\u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430<\/h4>\n<p>  \u0412 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430 \u043f\u043e\u043c\u0438\u043c\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u044e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043e\u0444\u0438\u0441\u043e\u0432. <\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/219\/9c8\/5fd\/2199c85fd7c784db07825362e9127eda.png\"\/><\/p>\n<p>  \u0414\u043b\u044f \u0435\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430\u043c \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00ab<a href=\"http:\/\/getbootstrap.com\/components\/#panels\">\u043f\u0430\u043d\u0435\u043b\u044c<\/a>\u00bb, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435 \u0435\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u044f \u00ab\u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c\u00bb (panel-primary) \u0434\u043b\u044f \u0440\u0430\u0441\u043a\u0440\u0430\u0441\u043a\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430. \u042d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0431\u043b\u043e\u043a \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 (panel-heading) \u0438 \u0431\u043b\u043e\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u044f \u043f\u0430\u043d\u0435\u043b\u0438 (panel-body). \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u043a\u0430\u0440\u0442\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043b\u0430\u0441\u0441 \u00abimg-responsive\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<pre><code class=\"html\">&lt;aside class=&quot;col-md-7&quot;&gt; \t\u2026 \t&lt;div class=&quot;panel panel-primary&quot;&gt; \t\t&lt;div class=&quot;panel-heading&quot;&gt;Our offices&lt;\/div&gt; \t\t&lt;div class=&quot;panel-body&quot;&gt; \t\t\t&lt;img src=&quot;\/images\/map.png&quot; class=&quot;img-responsive&quot; alt=&quot;Our offices&quot;&gt; \t\t&lt;\/div&gt; \t&lt;\/div&gt; &lt;\/aside&gt; <\/code><\/pre>\n<p>  \u0412 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 Bootstrap \u043c\u044b \u0443\u0436\u0435 \u0437\u0430\u0434\u0430\u043b\u0438 \u0446\u0432\u0435\u0442 \u0434\u043b\u044f \u0444\u043e\u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 (panel-bg), \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u0443\u043a\u0430\u0436\u0435\u043c, \u0447\u0442\u043e \u00abprimary\u00bb \u043f\u0430\u043d\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u0435\u0440\u0443\u044e \u0440\u0430\u043c\u043a\u0443 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u0430 \u043d\u0435 \u0433\u043e\u043b\u0443\u0431\u0443\u044e, \u043a\u0430\u043a \u0437\u0430\u0434\u0430\u043d\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:<\/p>\n<pre><code class=\"css\">@panel-primary-border: @panel-inner-border; <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u0441\u0442\u0438\u043b\u044f\u0445 \u0441\u0430\u0439\u0442\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0430\u043d\u0435\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n<pre><code class=\"css\">.panel { \tbox-shadow: none; \t.panel-heading { \t\tfont: 14px @brand-font; \t\ttext-transform: uppercase; \t\tpadding: 10px; \t}  \t.panel-body { \t\tpadding: 10px; \t} } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0443\u0431\u0440\u0430\u043b\u0438 \u0442\u0435\u043d\u044c \u0443 \u043f\u0430\u043d\u0435\u043b\u0435\u0439, \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0441\u0432\u043e\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0437\u0430\u0434\u0430\u043b\u0438 \u0441\u0432\u043e\u0439 \u0448\u0440\u0438\u0444\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430.<\/p>\n<h4>\u0426\u0438\u0442\u0430\u0442\u0430<\/h4>\n<p>  \u0412\u0451\u0440\u0441\u0442\u043a\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0446\u0438\u0442\u0430\u0442\u044b. <\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/069\/472\/6a2\/0694726a2814d93d8fe254ed799e4aef.png\"\/><\/p>\n<p>  \u042d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"http:\/\/getbootstrap.com\/components\/#jumbotron\">Jumbotron<\/a>. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0433\u043e \u0432 \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"html\">&lt;section class=&quot;col-md-17&quot;&gt; \t&lt;div class=&quot;jumbotron&quot;&gt; \t\t&lt;blockquote&gt; \t\t\t&lt;p&gt; \t\t\t\t&ldquo;Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.&rdquo;  \t\t\t&lt;\/p&gt; \t\t\t&lt;small&gt;John Doe, Lorem Ipsum&lt;\/small&gt; \t\t&lt;\/blockquote&gt; \t&lt;\/div&gt; &lt;\/section&gt; <\/code><\/pre>\n<p>  \u0427\u0435\u0440\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 jumbotron \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0431\u0435\u043b\u044b\u0439 \u0446\u0432\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u0431\u0440\u044d\u043d\u0434\u043e\u0432\u044b\u0439 \u0433\u043e\u043b\u0443\u0431\u043e\u0439 \u0444\u043e\u043d:<\/p>\n<pre><code class=\"css\">@jumbotron-bg: @brand-primary; @jumbotron-color: #fff; <\/code><\/pre>\n<p>  \u0418 \u043e\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0448\u0438 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">body { \t\u2026 \t.wrapper { \t\t\u2026 \t\t.jumbotron { \t\t\tborder-radius: 0; \t\t      \tpadding: 0; \t\t\tmargin: 0;  \t\t\tblockquote { \t\t\t\tborder-left: none;  \t\t\t\tp { \t\t\t\t\tfont: 300 italic 33px @brand-font; \t\t\t\t\ttext-transform: uppercase; \t\t\t\t\tmargin-bottom: 0; \t\t\t\t}  \t\t\t\tsmall { \t\t\t\t\ttext-align: right; \t\t\t\t\tcolor: #1D8EA6; \t\t\t\t\tfont: 300 20px @brand-font;  \t\t\t\t\t&:before { \t\t\t\t\t\tcontent: ''; \t\t\t\t\t} \t\t\t\t} \t\t\t} \t\t} \t} } <\/code><\/pre>\n<p>  \u0412 \u043d\u0438\u0445 \u043c\u044b \u0443\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0434\u0435\u043a\u043e\u0440\u0430\u0446\u0438\u0438 \u0446\u0438\u0442\u0430\u0442\u044b, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 Bootstrap \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0448\u0438\u0445 \u0448\u0440\u0438\u0444\u0442\u043e\u0432.<\/p>\n<h4>\u041a\u043e\u043d\u0442\u0435\u043d\u0442<\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/b1f\/744\/ae0\/b1f744ae0b201687749cf1f2458747ff.png\"\/><\/p>\n<p>  \u0412\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043c\u044b \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0438 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430 \u0441 \u0441\u0430\u043c\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c.<\/p>\n<pre><code class=\"html\">&lt;p&gt;Lorem ipsum dolor sit amet\u2026&lt;\/p&gt; &lt;p&gt;Donec vel nisl nibh\u2026&lt;\/p&gt; &lt;p&gt;Donec vel nisl nibh\u2026&lt;\/p&gt; <\/code><\/pre>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0432\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0446\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0432\u0443\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;row&quot;&gt; \t&lt;div class=&quot;col-md-12&quot;&gt; \t\t&lt;img src=&quot;\/images\/about-1.png&quot; alt=&quot;&quot; class=&quot;thumbnail&quot;&gt; \t&lt;\/div&gt; \t&lt;div class=&quot;col-md-12&quot;&gt; \t\t&lt;img src=&quot;\/images\/about-2.png&quot; alt=&quot;&quot; class=&quot;thumbnail&quot;&gt; \t&lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u041a\u043b\u0430\u0441\u0441 \u00abthumbnail\u00bb \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u00ab<a href=\"http:\/\/getbootstrap.com\/components\/#thumbnails\">\u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440\u0430<\/a>\u00bb. \u041e\u043d \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 \u043d\u0430\u0441 \u0432\u0441\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043f\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u2014 \u044d\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0438 \u0446\u0432\u0435\u0442 \u0440\u0430\u043c\u043a\u0438 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"css\">@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9; <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0411\u043b\u043e\u043a \u00abOur team\u00bb<\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/8ca\/5a4\/c2a\/8ca5a4c2a0e62c06b70048e9bf7cb701.png\"\/><\/p>\n<p>  \u041f\u0440\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a:<\/p>\n<pre><code class=\"html\">&lt;h2&gt;Our team&lt;\/h2&gt; <\/code><\/pre>\n<p>  \u0441\u043e \u0441\u0442\u0438\u043b\u0435\u043c:<\/p>\n<pre><code class=\"css\">body {   \t\u2026  \t.wrapper { \t\t\u2026 \th2 {            \t \tbackground: none repeat scroll 0 0 #29C5E6;           \t\tcolor: #fff;             \t\tfont: 300 30px @brand-font;             \t\tpadding: 0 10px;             \t\ttext-transform: uppercase;         \t} \t} } <\/code><\/pre>\n<p>  \u0410 \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0431\u043b\u043e\u043a \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00abteam\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0445 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432. \u041a\u0430\u0436\u0434\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u2013 \u044d\u0442\u043e \u043a\u043e\u043b\u043e\u043d\u043a\u0430. \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0440\u0430\u0432\u043d\u0443\u044e \u0447\u0435\u0442\u044b\u0440\u0435\u043c \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c \u043d\u0430\u0448\u0435\u0439 \u0441\u0435\u0442\u043a\u0438. \u0412\u0441\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043a\u0440\u043e\u043c\u0435 \u043f\u0435\u0440\u0432\u043e\u0439 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435 \u0438\u043c\u0435\u044e\u0442 \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043b\u0435\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00abcol-md-offset-1\u00bb. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f (.caption)<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;team&quot;&gt; \t&lt;div class=&quot;row&quot;&gt; \t\t&lt;div class=&quot;col col-md-4&quot;&gt; \t\t\t&lt;img src=&quot;\/images\/team\/Doe.jpg&quot; alt=&quot;John Doe&quot; class=&quot;thumbnail&quot;&gt; \t\t\t&lt;div class=&quot;caption&quot;&gt; \t\t\t\t&lt;h3&gt;John Doe&lt;\/h3&gt; \t\t\t\t&lt;p&gt;ceo&lt;\/p&gt; \t\t\t&lt;\/div&gt; \t\t&lt;\/div&gt; \t\t&lt;div class=&quot;col col-md-4 col-md-offset-1&quot;&gt; \t\t\t&lt;img src=&quot;\/images\/team\/Pittsley.jpg&quot; alt=&quot;Saundra Pittsley&quot; class=&quot;thumbnail&quot;&gt; \t\t\t&lt;div class=&quot;caption&quot;&gt; \t\t\t\t&lt;h3&gt;Saundra Pittsley&lt;\/h3&gt; \t\t\t\t&lt;p&gt;team leader&lt;\/p&gt; \t\t\t&lt;\/div&gt; \t\t&lt;\/div&gt; \t\t\u2026 \t&lt;\/div&gt; \t&lt;div class=&quot;row&quot;&gt; \t\t&lt;div class=&quot;col col-md-4&quot;&gt; \t\t\t&lt;img src=&quot;\/images\/team\/Nobriga.jpg&quot; alt=&quot;Ericka Nobriga&quot; class=&quot;thumbnail&quot;&gt; \t\t\t&lt;div class=&quot;caption&quot;&gt; \t\t\t\t&lt;h3&gt;Ericka Nobriga&lt;\/h3&gt; \t\t\t\t&lt;p&gt;art director&lt;\/p&gt; \t\t\t&lt;\/div&gt; \t\t&lt;\/div&gt; \t\t&lt;div class=&quot;col col-md-4 col-md-offset-1&quot;&gt; \t\t\t&lt;img src=&quot;\/images\/team\/Rousselle.jpg&quot; alt=&quot;Cody Rousselle&quot; class=&quot;thumbnail&quot;&gt; \t\t\t&lt;div class=&quot;caption&quot;&gt; \t\t\t\t&lt;h3&gt;Cody Rousselle&lt;\/h3&gt; \t\t\t\t&lt;p&gt;senior ui designer&lt;\/p&gt; \t\t\t&lt;\/div&gt; \t\t&lt;\/div&gt; \t\t\u2026 \t&lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u044d\u0442\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">body {   \t\u2026 \t.wrapper { \t\t\u2026 \t  \t.team { \t\t\t.row { \t\t\t  \tmargin-top: 20px;  \t\t\t\t.col { \t\t\t\t  \twhite-space:  nowrap;  \t\t\t\t  \t.thumbnail { \t\t\t\t\t\tmargin-bottom: 5px; \t\t\t\t  \t} \t\t\t\t}  \t\t\t\t.col-md-offset-1 { \t\t\t\t  \tmargin-left: 3.7%; \t\t\t\t}  \t\t\t\t.caption { \t\t\t\t  \th3 { \t\t\t\t\t\tfont: 300 16px @brand-font; \t\t\t\t\t\tmargin: 0; \t\t\t\t  \t}  \t\t\t\t  \tp { \t\t\t\t\t\tfont: 300 14px @brand-font; \t\t\t\t\t\tcolor: @brand-primary; \t\t\t\t\t\tmargin: 0; \t\t\t\t  \t} \t\t\t\t} \t\t\t} \t\t} \t} } <\/code><\/pre>\n<p>  \u041f\u043e\u043c\u0438\u043c\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0443\u0442 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f, \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438 \u043a\u043b\u0430\u0441\u0441 \u00abcol-md-offset-1\u00bb. \u0415\u043c\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f 3.7%, \u0442.\u043a. \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0431\u044b\u043b \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0439.<\/p>\n<h4>\u0424\u0443\u0442\u0435\u0440<\/h4>\n<p>  \u0424\u0443\u0442\u0435\u0440 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432: \u043b\u0435\u043d\u0442\u044b \u0422\u0432\u0438\u0442\u0442\u0435\u0440\u0430, \u043a\u0430\u0440\u0442\u044b \u0441\u0430\u0439\u0442\u0430, \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0441 \u043a\u043e\u043f\u0438\u0440\u0430\u0439\u0442\u043e\u043c.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/f9b\/c37\/824\/f9bc37824c697d8cae75d77b5c26b0ce.png\"\/><\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0444\u0443\u0442\u0435\u0440\u0430 \u0441 \u044d\u0442\u0438\u043c \u0431\u043b\u043e\u043a\u0430\u043c\u0438:<\/p>\n<pre><code class=\"html\">&lt;footer&gt; \t&lt;div class=&quot;container&quot;&gt; \t\t&lt;div class=&quot;row&quot;&gt; \t\t\t&lt;div class=&quot;col-md-8 twitter&quot;&gt;&lt;\/div&gt; \t\t\t&lt;div class=&quot;col-md-4 sitemap&quot;&gt;&lt;\/div&gt; \t\t\t&lt;div class=&quot;col-md-6 social&quot;&gt;&lt;\/div&gt; \t\t\t&lt;div class=&quot;col-md-6 footer-logo&quot;&gt;&lt;\/div&gt; \t\t&lt;\/div&gt; \t&lt;\/div&gt; &lt;\/footer&gt; <\/code><\/pre>\n<p>  \u0418 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u043a \u043d\u0435\u043c\u0443 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435: <\/p>\n<pre><code class=\"css\">footer {   \tbackground: #7e7e7e;   \tcolor: #dbdbdb;   \tfont-size: 11px;    \t.container {\t\t\t \t\theight: 110px; \t\tpadding: 10px 0; \t} } <\/code><\/pre>\n<p>  \u0422\u0435\u0433 footer \u0437\u0430\u0434\u0430\u0435\u0442 \u0441\u0435\u0440\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043e \u0432\u0441\u0435\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u0430 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0438 \u0437\u0430\u0434\u0430\u0435\u0442 \u0432\u044b\u0441\u043e\u0442\u0443 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f \u0444\u0443\u0442\u0435\u0440\u0430. \u0414\u043b\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u0442\u0435\u0440\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u043b\u043e\u043d\u043a\u0438.<\/p>\n<h4>\u041b\u0435\u043d\u0442\u0430 \u0422\u0432\u0438\u0442\u0442\u0435\u0440\u0430<\/h4>\n<p>  \u0412\u0435\u0440\u0441\u0442\u0430\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043b\u0435\u043d\u0442\u044b \u0422\u0432\u0438\u0442\u0442\u0435\u0440\u0430:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/e23\/491\/5ec\/e234915ece2470db55f7afee224a0927.png\"\/><\/p>\n<pre><code class=\"html\">&lt;div class=&quot;col-md-8 twitter&quot;&gt; \t&lt;h3&gt;Twitter feed&lt;\/h3&gt; \t&lt;time datetime=&quot;2012-10-23&quot;&gt;&lt;a href=&quot;#&quot;&gt;23 oct&lt;\/a&gt;&lt;\/time&gt; \t&lt;p&gt; In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug \t&lt;\/p&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0421\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">body { \t\u2026 \tfooter { \t\t\u2026  \t  \t.container { \t\t\t\u2026 \t\t\th3 { \t\t\t  \tborder-bottom: 1px solid #919191; \t\t\t  \tcolor: #ffffff; \t\t\t  \tfont-size: 14px; \t\t\t  \tline-height: 21px; \t\t\t  \tfont-family: @brand-font; \t\t\t  \tmargin: 0 0 10px; \t\t\t  \ttext-transform: uppercase; \t\t\t}  \t\t\tp { \t\t\t  \tmargin: 5px 0; \t\t\t}  \t\t\t.twitter { \t\t\t  \tp { \t\t\t\t\tpadding-right: 15px; \t\t\t\t}  \t\t\t  \ttime a { \t\t\t\t\tcolor: #b4aeae; \t\t\t\t\ttext-decoration: underline; \t\t\t  \t} \t\t\t} \t\t} \t} } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0432\u0441\u0435\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0444\u0443\u0442\u0435\u0440\u0430 \u0437\u0430\u0434\u0430\u0435\u043c \u0448\u0440\u0438\u0444\u0442\u044b \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043d\u0438\u0436\u043d\u044e\u044e \u0440\u0430\u043c\u043a\u0443. \u0414\u043b\u044f \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u0432 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f. \u0421\u0441\u044b\u043b\u043a\u0435, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0443\u044e \u0434\u0430\u0442\u0443, \u0437\u0430\u0434\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0438 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435. <\/p>\n<h4>\u041a\u0430\u0440\u0442\u0430 \u0441\u0430\u0439\u0442\u0430<\/h4>\n<p>  \u041a\u0430\u0440\u0442\u0430 \u0441\u0430\u0439\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0434\u0432\u0435 \u0440\u0430\u0432\u043d\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/36c\/bf4\/582\/36cbf4582fb1a57847149147fbcf3bd2.png\"\/> <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;col-md-4 sitemap&quot;&gt; \t&lt;h3&gt;Sitemap&lt;\/h3&gt; \t&lt;div class=&quot;row&quot;&gt; \t\t&lt;div class=&quot;col-md-12&quot;&gt; \t\t\t&lt;a href=&quot;\/home\/&quot;&gt;Home&lt;\/a&gt; \t\t\t&lt;a href=&quot;\/about\/&quot;&gt;About&lt;\/a&gt; \t\t\t&lt;a href=&quot;\/services\/&quot;&gt;Services&lt;\/a&gt; \t\t&lt;\/div&gt; \t\t&lt;div class=&quot;col-md-12&quot;&gt; \t\t\t&lt;a href=&quot;\/partners\/&quot;&gt;Partners&lt;\/a&gt; \t\t\t&lt;a href=&quot;\/customers\/&quot;&gt;Support&lt;\/a&gt; \t\t\t&lt;a href=&quot;\/contact\/&quot;&gt;Contact&lt;\/a&gt; \t\t&lt;\/div&gt; \t&lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0421\u0441\u044b\u043b\u043a\u0430\u043c \u0437\u0430\u0434\u0430\u0435\u043c \u0446\u0432\u0435\u0442, \u0448\u0440\u0438\u0444\u0442 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438. <\/p>\n<pre><code class=\"css\">body { \t\u2026 \tfooter { \t\t\u2026 \t\t.container  { \t\t\t\u2026 \t\t\ta { \t\t\t  \tcolor: #dbdbdb; \t\t\t}  \t\t\t.sitemap a { \t\t\t  \tdisplay: block; \t\t\t  \tfont-size: 12px; \t\t\t \tmargin-bottom: 5px; \t\t\t} \t\t} \t} }  <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0421\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/318\/0bd\/e53\/3180bde5365ad4a49e650518b530934f.png\"\/><\/p>\n<p>  \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0431\u043e\u0440 \u0441\u0441\u044b\u043b\u043e\u043a \u0432 \u0431\u043b\u043e\u043a \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u00absocial\u00bb. <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;col-md-4 social&quot;&gt; \t&lt;h3&gt;Social networks&lt;\/h3&gt; \t&lt;a href=&quot;http:\/\/twitter.com\/&quot; class=&quot;social-icon twitter&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/facebook.com\/&quot; class=&quot;social-icon facebook&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/plus.google.com\/&quot; class=&quot;social-icon google-plus&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/vimeo.com\/&quot; class=&quot;social-icon-small vimeo&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/youtube.com\/&quot; class=&quot;social-icon-small youtube&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/flickr.com\/&quot; class=&quot;social-icon-small flickr&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/instagram.com\/&quot; class=&quot;social-icon-small instagram&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;\/rss\/&quot; class=&quot;social-icon-small rss&quot;&gt;&lt;\/a&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0418 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u0438\u0445:<\/p>\n<pre><code class=\"css\">body { \t\u2026 \tfooter { \t\t\u2026 \t\t.container { \t\t\t\u2026 \t\t\t.social { \t\t\t\t.social-icon { \t\t\t\t\twidth: 30px; \t\t\t\t\theight: 30px; \t\t\t\t\tbackground: url(..\/images\/social.png) no-repeat; \t\t\t\t\tdisplay: inline-block; \t\t\t\t\tmargin-right: 10px; \t\t\t  \t}  \t\t\t\t.social-icon-small  { \t\t\t\t\twidth: 16px; \t\t\t\t\theight: 16px; \t\t\t\t\tbackground: url(..\/images\/social-small.png) no-repeat; \t\t\t\t\tdisplay: inline-block; \t\t\t\t\tmargin: 5px 6px 0 0; \t\t\t  \t}  \t\t\t  \t.twitter { background-position: 0 0; } \t\t\t  \t.facebook { background-position: -30px 0; } \t\t\t  \t.google-plus { background-position: -60px 0; } \t\t\t  \t.vimeo { background-position: 0 0; } \t\t\t  \t.youtube { background-position: -16px 0; } \t\t\t  \t.flickr { background-position: -32px 0; } \t\t\t  \t.instagram { background-position: -48px 0; } \t\t\t  \t.rss { background-position: -64px 0; } \t\t\t} \t\t} \t} } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u2013 \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u0412\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 (.social-icon) \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 (.social-icon-small). \u041c\u044b \u0437\u0430\u0434\u0430\u043b\u0438 \u044d\u0442\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u0430\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u0444\u043e\u043d\u043e\u043c. \u0410 \u0437\u0430\u0442\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0441\u0434\u0432\u0438\u043d\u0443\u043b\u0438 \u044d\u0442\u043e\u0442 \u0444\u043e\u043d \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u043e\u0441\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n<h4>\u041a\u043e\u043f\u0438\u0440\u0430\u0439\u0442<\/h4>\n<p>  \u0411\u043b\u043e\u043a \u0441 \u043a\u043e\u043f\u0438\u0440\u0430\u0439\u0442\u043e\u043c \u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u043c \u2013 \u044d\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u0438 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043f\u043e\u0434 \u043d\u0435\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/c05\/8b5\/503\/c058b55038e832fb39e6bef26deeb492.png\"\/><\/p>\n<pre><code class=\"html\">&lt;div class=&quot;col-md-8 footer-logo&quot;&gt; \t&lt;a href=&quot;\/&quot;&gt;&lt;img src=&quot;&quot; alt=&quot;Whitesquare logo&quot;&gt;&lt;\/a&gt; \t&lt;p&gt; \t\tCopyright &copy; 2012 Whitesquare. A &lt;a href=&quot;http:\/\/pcklab.com&quot;&gt;pcklab&lt;\/a&gt; creation \t&lt;\/p&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0421\u0442\u0438\u043b\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0431\u043b\u043e\u043a\u0430\u043c \u0441 \u0442\u043e\u0439 \u043b\u0438\u0448\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0435\u0439, \u0447\u0442\u043e \u0431\u043b\u043e\u043a \u043f\u0440\u0438\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0442\u0430\u043a \u0436\u0435 \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e:<\/p>\n<pre><code class=\"css\">body { \t\u2026 \t.footer { \t\t\u2026 \t\t.container { \t\t\t\u2026 \t\t\t.footer-logo { \t\t\t  \tfloat: right; \t\t\t  \tmargin-top: 20px; \t\t\t  \tfont-size: 10px; \t\t\t  \ttext-align: right;  \t\t\t  \ta { \t\t\t\t\ttext-decoration: underline; \t\t\t\t} \t\t\t} \t\t} \t} } <\/code><\/pre>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0451\u0440\u0441\u0442\u043a\u0430 \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u0430. \u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c <a href=\"https:\/\/github.com\/Mirantus\/whitesquare-bootstrap\">\u0437\u0434\u0435\u0441\u044c<\/a>.    \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/211032\/\"> http:\/\/habrahabr.ru\/post\/211032\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">\n<h4>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h4>\n<p>  \u0423\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c, \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u0446\u0438\u043a\u043b\u0430 \u0441\u0442\u0430\u0442\u0435\u0439, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0445 \u0432\u0451\u0440\u0441\u0442\u043a\u0435.<\/p>\n<p>  \u0412 <a href=\"http:\/\/habrahabr.ru\/post\/202408\/\">\u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438<\/a> \u043c\u044b \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u0438 \u0448\u0430\u0431\u043b\u043e\u043d <a href=\"http:\/\/www.pcklab.com\/item.php?id=16\">Corporate Blue<\/a> \u043e\u0442 \u0441\u0442\u0443\u0434\u0438\u0438 Pcklaboratory \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c HTML \u0438 CSS. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0436\u0435 \u0448\u0430\u0431\u043b\u043e\u043d, \u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 <a href=\"http:\/\/getbootstrap.com\/\">Bootstrap 3<\/a>.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-211032","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/211032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=211032"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/211032\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=211032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=211032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=211032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}