{"id":393,"date":"2016-03-26T14:55:58","date_gmt":"2016-03-26T11:55:58","guid":{"rendered":"http:\/\/leodev.ru\/blog\/?p=393"},"modified":"2018-03-02T00:13:33","modified_gmt":"2018-03-01T21:13:33","slug":"bootstrap-%d0%bf%d0%be%d0%b7%d0%b8%d1%86%d0%b8%d0%be%d0%bd%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5-%d0%b2%d1%8b%d1%80%d0%b0%d0%b2%d0%bd%d0%b8%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5","status":"publish","type":"post","link":"https:\/\/leodev.ru\/blog\/bootstrap\/bootstrap-%d0%bf%d0%be%d0%b7%d0%b8%d1%86%d0%b8%d0%be%d0%bd%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5-%d0%b2%d1%8b%d1%80%d0%b0%d0%b2%d0%bd%d0%b8%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5\/","title":{"rendered":"Bootstrap 3 \u0438 4 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432"},"content":{"rendered":"<p>\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 <strong>bootstrap 3<\/strong> \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u00a0\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0442\u043a\u043e\u0439 (\u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439), \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>\u0410 \u0432 <strong>bootstrap 4\u00a0<\/strong>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u0436\u0438\u043c\u00a0<strong><b>flexbox<\/b>, <\/strong>\u043d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u0451\u043c\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u0435\u0442\u043a\u043e\u0439 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p><a href=\"http:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/b0ecb-clip-82kb1.png\" target=\"_blank\" rel=\"attachment noopener wp-att-394\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-394 size-full\" src=\"http:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/b0ecb-clip-82kb1.png\" alt=\"bootstrap\" width=\"1243\" height=\"425\" srcset=\"https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/b0ecb-clip-82kb1.png 1243w, https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/b0ecb-clip-82kb1-300x103.png 300w, https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/b0ecb-clip-82kb1-768x263.png 768w, https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/b0ecb-clip-82kb1-1024x350.png 1024w, https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/b0ecb-clip-82kb1-1200x410.png 1200w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><\/p>\n<p>\u041a\u043e\u0434 \u0441\u043a\u0440\u0438\u043d\u0430 \u0432\u044b\u0448\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"\u041a\u043e\u0434 \u0441\u043a\u0440\u0438\u043d\u0430 \u0432\u044b\u0448\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c\">&lt;div class=\"featurebox col-md-12 col-sm-12 col-xs-12\"&gt;\r\n                &lt;div class=\"row\"&gt;\r\n                    &lt;div class=\"col-md-6 col-sm-6 col-xs-12\"&gt;\r\n                        &lt;div class=\"feature text-left\"&gt;\r\n                            &lt;h4&gt;DESIGN&lt;\/h4&gt;\r\n                            &lt;p&gt;...&lt;\/p&gt;\r\n                        &lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"col-md-6 col-sm-6 col-xs-12\"&gt;\r\n                        &lt;div class=\"feature text-left\"&gt;\r\n                            &lt;h4&gt;REENGINEERING&lt;\/h4&gt;\r\n                            &lt;p&gt;...&lt;\/p&gt;\r\n                        &lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"row\"&gt;\r\n                    &lt;div class=\"col-md-6 col-sm-6 col-xs-12\"&gt;\r\n                        &lt;div class=\"feature text-left\"&gt;\r\n                            &lt;h4&gt;SUPPORT&lt;\/h4&gt;\r\n                            &lt;p&gt;...&lt;\/p&gt;\r\n                        &lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n                    &lt;div class=\"col-md-6 col-sm-6 col-xs-12\"&gt;\r\n                        &lt;div class=\"feature text-left\"&gt;\r\n                            &lt;h4&gt;INSTRUMENTS&lt;\/h4&gt;\r\n                            &lt;p&gt;...&lt;\/p&gt;\r\n                        &lt;\/div&gt;\r\n                    &lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;<\/pre>\n<p><!--more--><\/p>\n<h1>\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0433\u0440\u044b\u00a0<strong>Bootstrap 3<\/strong><\/h1>\n<ul>\n<li>\u041a\u043b\u0430\u0441\u0441 <strong>row<\/strong> \u0437\u0430\u0434\u0430\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u043e\u0432 \u0432 \u0432\u0438\u0434\u0435 <strong>\u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438<\/strong>;<\/li>\n<li>\u0421\u0442\u0440\u043e\u043a\u0430 \u0432 <strong>bootstrap<\/strong>\u00a0\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c <strong>12 \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432<\/strong>;<\/li>\n<li>\u041a\u043b\u0430\u0441\u0441<strong> col-ml-4<\/strong> \u0437\u0430\u0434\u0430\u0435\u0442\u00a0\u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0441\u0442\u0440\u043e\u043a\u0438, \u0433\u0434\u0435\n<ul>\n<li><strong>col<\/strong> <em>(column) &#8212;\u00a0<\/em>\u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0441\u0442\u0440\u043e\u043a\u0438;<\/li>\n<li><strong>md<\/strong> &#8212; \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430, bootstrap \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b \u0432\u0441\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430 4 \u0433\u0440\u0443\u043f\u043f\u044b \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430;<\/li>\n<li><strong>4<\/strong> &#8212; \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446(\u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432) \u0448\u0438\u0440\u0438\u043d\u044b \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0431\u043b\u043e\u043a, \u0438\u0437 <strong>12<\/strong>. \u0422\u043e \u0435\u0441\u0442\u044c div \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <strong>col-ml-4<\/strong>\u00a0\u0437\u0430\u0439\u043c\u0435\u0442 1\/3 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u043e\u0442 992 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>\u0422\u0438\u043f\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432<\/h2>\n<ol>\n<li><strong>col-xs-*<\/strong>: \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 768 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439;<\/li>\n<li><strong>col-sm-*<\/strong>: \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u044d\u043a\u0440\u0430\u043d\u0430 \u043e\u0442 768 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0438 \u0432\u044b\u0448\u0435;<\/li>\n<li><strong>col-md-*<\/strong>: \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u044d\u043a\u0440\u0430\u043d\u0430 \u043e\u0442 992 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0438 \u0432\u044b\u0448\u0435;<\/li>\n<li><strong>col-lg-*<\/strong>: \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u044d\u043a\u0440\u0430\u043d\u0430 \u043e\u0442 1200 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0438 \u0432\u044b\u0448\u0435;<\/li>\n<\/ol>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u044b\u0448\u0435 \u044f <strong>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u0440\u0430\u0437\u0443 \u0442\u0440\u0438 \u043a\u043b\u0430\u0441\u0441\u0430<\/strong> <strong>\u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e<\/strong> \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div class=\"col-md-6 col-sm-6 col-xs-12\"&gt;<\/pre>\n<p>\u0422\u0430\u043a \u0436\u0435 \u043a\u0430\u043a\u00a0\u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043a\u043e\u0434\u0430 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u00a0\u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445\u00a0\u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 &#8212; \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0447\u0442\u043e \u0431\u044b \u0432 \u043e\u0431\u0449\u0435\u043c\u00a0\u0431\u044b\u043b\u043e 12 \u0435\u0434\u0438\u043d\u0438\u0446. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0434\u0440\u0443\u0433\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n<p><a href=\"http:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/14.5.png\" rel=\"attachment wp-att-396\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-396\" src=\"http:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/14.5.png\" alt=\"bootstrap col\" width=\"740\" height=\"245\" srcset=\"https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/14.5.png 740w, https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/14.5-300x99.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a><\/p>\n<p>\u041e\u0442\u0441\u0442\u0443\u043f\u044b<\/p>\n<p>\u041a\u043b\u0430\u0441\u0441\u044b\u00a0<strong>col-md(sm|lg)-offset-*<\/strong> \u0437\u0430\u0434\u0430\u044e\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0438\u043b\u0438 \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u0445<\/p>\n<pre class=\"lang:java decode:true\">&lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col-md-4\"&gt;\r\n        &lt;h2&gt;\u041b\u0435\u0432\u044b\u0439 \u0431\u043b\u043e\u043a&lt;\/h2&gt;\r\n        &lt;p&gt;...&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-md-4 col-md-offset-4\"&gt;\r\n        &lt;h2&gt;\u041f\u0440\u0430\u0432\u044b\u0439 \u0431\u043b\u043e\u043a&lt;\/h2&gt;\r\n        &lt;p&gt;...&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u041a\u043b\u0430\u0441\u0441 <strong>col-md-offset-4<\/strong>\u00a0\u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u0435\u0449\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u044b\u0439 \u0431\u043b\u043e\u043a \u043d\u0430 4 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0432\u043f\u0440\u0430\u0432\u043e:<\/p>\n<p><a href=\"http:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/986cf-clip-50kb1.png\" rel=\"attachment wp-att-397\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-397\" src=\"http:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/986cf-clip-50kb1.png\" alt=\"\" width=\"716\" height=\"211\" srcset=\"https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/986cf-clip-50kb1.png 716w, https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/986cf-clip-50kb1-300x88.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a><\/p>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044f:<\/p>\n<p><a href=\"http:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/f42d4-clip-19kb1.png\" rel=\"attachment wp-att-398\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-398\" src=\"http:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/f42d4-clip-19kb1.png\" alt=\"\" width=\"742\" height=\"189\" srcset=\"https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/f42d4-clip-19kb1.png 742w, https:\/\/leodev.ru\/blog\/wp-content\/uploads\/2016\/03\/f42d4-clip-19kb1-300x76.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/a><\/p>\n<h2>\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432<\/h2>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u043e\u0432 <strong>col-md(sm|lg)-push-*<\/strong> \u0438 <strong>col-md(sm|lg)-pull-*<\/strong> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0431\u043b\u043e\u043a\u043e\u0432 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043b\u0430\u0441\u0441 col-md-push-4 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0431\u043b\u043e\u043a \u043d\u0430 \u0447\u0435\u0442\u044b\u0440\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0432\u043f\u0440\u0430\u0432\u043e \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0418 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u043a\u043b\u0430\u0441\u0441 col-md-pull-4 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0431\u043b\u043e\u043a \u0432\u043b\u0435\u0432\u043e \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u043f\u043e\u0437\u0438\u0446\u0438\u0438. \u0422\u0430\u043a, \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c\u00a0\u0442\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col-md-4\"&gt;\r\n        &lt;h2&gt;\u041b\u0435\u0432\u044b\u0439 \u0431\u043b\u043e\u043a&lt;\/h2&gt;\r\n        &lt;p&gt;................&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-md-4 col-md-push-4\"&gt;\r\n        &lt;h2&gt;\u041f\u0440\u0430\u0432\u044b\u0439 \u0431\u043b\u043e\u043a&lt;\/h2&gt;\r\n        &lt;p&gt;................&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u041b\u0438\u0431\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u0432 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"\u043f\u0440\u0430\u0432\u044b\u0439 \u0431\u043b\u043e\u043a \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u0441\u044f \u0432\u043b\u0435\u0432\u043e \u043d\u0430 \u0447\u0435\u0442\u044b\u0440\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b, \u0430 \u043b\u0435\u0432\u044b\u0439 \u0431\u043b\u043e\u043a - \u0432\u043f\u0440\u0430\u0432\u043e \u043d\u0430 8 \u0435\u0434\u0438\u043d\u0438\u0446\">&lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col-md-4 col-md-push-8\"&gt;\r\n        &lt;h2&gt;\u041b\u0435\u0432\u044b\u0439 \u0431\u043b\u043e\u043a&lt;\/h2&gt;\r\n        &lt;p&gt;................&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-md-4 col-md-pull-4\"&gt;\r\n        &lt;h2&gt;\u041f\u0440\u0430\u0432\u044b\u0439 \u0431\u043b\u043e\u043a&lt;\/h2&gt;\r\n        &lt;p&gt;................&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435\u00a0\u043f\u0440\u0430\u0432\u044b\u0439 \u0431\u043b\u043e\u043a \u0441\u043c\u0435\u0441\u0442\u0438\u0442\u0441\u044f \u0432\u043b\u0435\u0432\u043e \u043d\u0430 \u0447\u0435\u0442\u044b\u0440\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b, \u0430 \u043b\u0435\u0432\u044b\u0439 \u0431\u043b\u043e\u043a &#8212; \u0432\u043f\u0440\u0430\u0432\u043e \u043d\u0430 8 \u0435\u0434\u0438\u043d\u0438\u0446.<\/p>\n<h1 class=\"text-primary\">\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u0433\u0440\u044b Bootstrap 4.<\/h1>\n<p><iframe loading=\"lazy\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/2JMMnNOhDoc?feature=oembed\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe><\/p>\n<h1 class=\"text-primary\">Flexbox<\/h1>\n<p>\u0420\u0435\u0436\u0438\u043c\u00a0<b>flexbox<\/b>\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0430\u043a\u0435\u0442\u0443 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0430\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  \r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041e\u0434\u043d\u0430 \u0442\u0440\u0435\u0442\u044c\u044f\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041e\u0434\u043d\u0430 \u0442\u0440\u0435\u0442\u044c\u044f\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041e\u0434\u043d\u0430 \u0442\u0440\u0435\u0442\u044c\u044f\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u0411\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432 \u0441\u0435\u0442\u043a\u0435\u00a0<b>flexbox<\/b>\u00a0\u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0440\u043e\u0432\u043d\u0443 \u0434\u0435\u043b\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u044f \u0432\u0435\u0441\u044c \u0440\u044f\u0434.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442 \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u0423\u043a\u0430\u0436\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0443 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0431\u043b\u043e\u043a\u0430. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u0441\u044f \u043f\u043e\u0440\u043e\u0432\u043d\u0443.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      (12 - 6) \/ 2 = 3\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-6 item\"&gt;\r\n      6 \u043a\u043e\u043b\u043e\u043d\u043e\u043a\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      (12 - 6) \/ 2 = 3\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  \r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-5 item\"&gt;\r\n      5 \u043a\u043e\u043b\u043e\u043d\u043e\u043a\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  \r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-4 item\"&gt;\r\n      4 \u043a\u043e\u043b\u043e\u043d\u043a\u0438\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043b\u0430\u0441\u0441\u044b\u00a0<b>col-{breakpoint}-auto<\/b>, \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u043b\u043e\u043a, \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c\u0441\u044f \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c. \u0422\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0431\u043b\u043e\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0431\u0449\u0438\u0439 \u0440\u044f\u0434 \u0431\u0443\u0434\u0435\u0442 \u0441\u0436\u0430\u0442 \u0434\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row justify-content-md-center\"&gt;\r\n    &lt;div class=\"col col-lg-2\"&gt;\r\n      1 of 3\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-12 col-md-auto\"&gt;\r\n      \u0421\u043b\u043e\u0432\u043e\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col col-lg-2\"&gt;\r\n      3 of 3\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n\r\n  &lt;div class=\"row justify-content-md-start\"&gt;\r\n    &lt;div class=\"col col-lg-2 item\"&gt;\r\n      1 of 3\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-12 col-md-auto\"&gt;\r\n      \u0414\u0432\u0430 \u0441\u043b\u043e\u0432\u0430\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col col-lg-2 item\"&gt;\r\n      3 of 3\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  \r\n    &lt;div class=\"row justify-content-md-end\"&gt;\r\n    &lt;div class=\"col col-lg-2\"&gt;\r\n      1 of 3\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-12 col-md-auto\"&gt;\r\n      \u0417\u0434\u0435\u0441\u044c \u0442\u0440\u0438 \u0441\u043b\u043e\u0432\u0430\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col col-lg-2\"&gt;\r\n      3 of 3\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043d\u0435 \u0441\u0436\u0438\u043c\u0430\u044f \u043e\u0431\u0449\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443.<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col\"&gt;\r\n      1 of 3\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-12 col-md-auto\"&gt;\r\n      \u0414\u0432\u0430 \u0441\u043b\u043e\u0432\u0430\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col col-lg-2\"&gt;\r\n      3 of 3\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u043f\u043e\u0440\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438 \u0434\u043b\u044f \u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u0412 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438\u00a0<b>col<\/b>\u00a0\u0438\u00a0<b>col-*<\/b>.<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col\"&gt;col&lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;col&lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;col&lt;\/div&gt;\r\n  &lt;div class=\"col\"&gt;col&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col-8\"&gt;col-8&lt;\/div&gt;\r\n  &lt;div class=\"col-4\"&gt;col-4&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h2>\u0418\u0437 \u0441\u0442\u043e\u043f\u043a\u0438 \u0432 \u0440\u044f\u0434<\/h2>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043b\u0430\u0441\u0441\u044b\u00a0<b>col-sm-*<\/b>, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u0443\u044e \u0441\u0435\u0442\u043e\u0447\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442 \u0431\u043b\u043e\u043a\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u043e\u043f\u043a\u0438 \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445, \u0430 \u0437\u0430\u0442\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u0432 \u043e\u0434\u0438\u043d \u0440\u044f\u0434.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col-sm-8\"&gt;col-sm-8&lt;\/div&gt;\r\n  &lt;div class=\"col-sm-4\"&gt;col-sm-4&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col-sm\"&gt;col-sm&lt;\/div&gt;\r\n  &lt;div class=\"col-sm\"&gt;col-sm&lt;\/div&gt;\r\n  &lt;div class=\"col-sm\"&gt;col-sm&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h2>\u0421\u043c\u0435\u0448\u0438\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b<\/h2>\n<p>\u041c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u043a\u0430\u043a \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e.<\/p>\n<pre class=\"lang:java decode:true \">&lt;!-- Stack the columns on mobile by making one full-width and the other half-width --&gt;\r\n&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col col-md-8\"&gt;.col .col-md-8&lt;\/div&gt;\r\n  &lt;div class=\"col-6 col-md-4\"&gt;.col-6 .col-md-4&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --&gt;\r\n&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col-6 col-md-4\"&gt;.col-6 .col-md-4&lt;\/div&gt;\r\n  &lt;div class=\"col-6 col-md-4\"&gt;.col-6 .col-md-4&lt;\/div&gt;\r\n  &lt;div class=\"col-6 col-md-4\"&gt;.col-6 .col-md-4&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;!-- Columns are always 50% wide, on mobile and desktop --&gt;\r\n&lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col-6\"&gt;.col-6&lt;\/div&gt;\r\n  &lt;div class=\"col-6\"&gt;.col-6&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h2>\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435<\/h2>\n<p>Flexbox \u0434\u0430\u0435\u0442 \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043b\u043e\u043d\u043e\u043a.<\/p>\n<p>\u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u044f\u0434\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u0445\u0430, \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u044b, \u043d\u0438\u0437\u0430, \u0435\u0441\u043b\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0441\u043e\u0442\u0430. \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0443\u00a0<b>row<\/b>\u00a0\u043a\u043b\u0430\u0441\u0441\u044b\u00a0<b>flex-items-xs-start<\/b>,\u00a0<b>flex-items-xs-center<\/b>,\u00a0<b>flex-items-xs-end<\/b>.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row align-items-start color_containter\"&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041f\u043e \u0432\u0435\u0440\u0445\u0443\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041f\u043e \u0432\u0435\u0440\u0445\u0443\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041f\u043e \u0432\u0435\u0440\u0445\u0443\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"row align-items-center color_containter\"&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041f\u043e \u0446\u0435\u043d\u0442\u0440\u0443\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041f\u043e \u0446\u0435\u043d\u0442\u0440\u0443\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041f\u043e \u0446\u0435\u043d\u0442\u0440\u0443\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"row align-items-end color_containter\"&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041f\u043e \u043d\u0438\u0437\u0443\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041f\u043e \u043d\u0438\u0437\u0443\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col item\"&gt;\r\n      \u041f\u043e \u043d\u0438\u0437\u0443\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u044f\u0434\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430, \u0435\u0441\u043b\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b\u00a0<b>align-self-start<\/b>,\u00a0<b>align-self-center<\/b>,\u00a0<b>align-self-end<\/b>.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row color_containter\"&gt;\r\n    &lt;div class=\"col align-self-start item\"&gt;\r\n      One of three columns\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col align-self-center item\"&gt;\r\n      One of three columns\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col align-self-end item\"&gt;\r\n      One of three columns\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h2>\u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435<\/h2>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u0431\u043b\u043e\u043a\u0438, \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u0435\u043d\u044c\u0448\u0435 12 \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u0414\u0430\u043b\u044c\u0448\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u0445 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435\u043c \u0438\u0437-\u0437\u0430 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0435\u0441\u0442\u0430, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0443 \u0440\u044f\u0434\u0430\u00a0<b>row<\/b>\u00a0\u043a\u043b\u0430\u0441\u0441\u044b\u00a0<b>justify-content-start<\/b>,\u00a0<b>justify-content-center<\/b>,\u00a0<b>justify-content-end<\/b>. \u0422\u0430\u043a\u0436\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u044b\u00a0<b>justify-content-around<\/b>,\u00a0<b>justify-content-between<\/b>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u043c\u0435\u0441\u0442\u043e.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row justify-content-start\"&gt;\r\n    &lt;div class=\"col-4\"&gt;\r\n      \u041f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-4\"&gt;\r\n      \u041f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  \r\n  &lt;div class=\"row justify-content-center\"&gt;\r\n    &lt;div class=\"col-4\"&gt;\r\n      \u041f\u043e \u0446\u0435\u043d\u0442\u0440\u0443\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-4\"&gt;\r\n      \u041f\u043e \u0446\u0435\u043d\u0442\u0440\u0443\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  \r\n  &lt;div class=\"row justify-content-end\"&gt;\r\n    &lt;div class=\"col-4\"&gt;\r\n      \u041f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-4\"&gt;\r\n      \u041f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  \r\n  &lt;div class=\"row justify-content-around\"&gt;\r\n    &lt;div class=\"col-4\"&gt;\r\n      Around\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-4\"&gt;\r\n      Around\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  \r\n  &lt;div class=\"row justify-content-between\"&gt;\r\n    &lt;div class=\"col-4\"&gt;\r\n      Between\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col-4\"&gt;\r\n      Between\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h2>\u041f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0438<\/h2>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441\u00a0<b>.no-gutters<\/b>, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u0431\u043b\u043e\u043a\u0430\u043c\u0438. \u041a\u043b\u0430\u0441\u0441 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 margins \u0438\u0437 .row \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 padding \u0438\u0437 \u0432\u0441\u0435\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a.<\/p>\n<h2>\u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043a\u043e\u043b\u043e\u043d\u043e\u043a<\/h2>\n<p>\u0412 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0441\u0435\u0442\u043e\u043a, \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u00a0<b>push<\/b>\u00a0\u0438\u00a0<b>pull<\/b>.<\/p>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 Bootstrap \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e flexbox\u00a0<b>order<\/b>\u00a0\u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0442\u0440\u0435\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u043a \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u00a0<b>col<\/b>:<\/p>\n<ul>\n<li>.flex-first \u2013 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u043c<\/li>\n<li>.flex-last \u2013 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c<\/li>\n<li>.flex-unordered \u2013 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043f\u0435\u0440\u0432\u044b\u043c \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c<\/li>\n<\/ul>\n<pre class=\"lang:java decode:true \">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col flex-unordered\"&gt;\r\n      \u041f\u0435\u0440\u0432\u044b\u0439, \u043d\u043e \u043d\u0435 \u043f\u0435\u0440\u0432\u044b\u0439 \u0438 \u043d\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col flex-last\"&gt;\r\n      \u0412\u0442\u043e\u0440\u043e\u0439, \u043d\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"col flex-first\"&gt;\r\n      \u0422\u0440\u0435\u0442\u0438\u0439, \u043d\u043e \u043f\u0435\u0440\u0432\u044b\u0439\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h2>\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a<\/h2>\n<p>\u0414\u043b\u044f \u0441\u0434\u0432\u0438\u0433\u0430 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432\u043f\u0440\u0430\u0432\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435\u00a0<b>.offset-md-*<\/b>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u043b\u0435\u0432\u044b\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u043d\u0430 * \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,\u00a0<b>.offset-md-4<\/b>\u00a0\u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u043d\u0430 \u0447\u0435\u0442\u044b\u0440\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438.<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;div class=\"container\"&gt;\r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col-md-4 item\"&gt;.col-md-4&lt;\/div&gt;\r\n    &lt;div class=\"col-md-4 offset-md-4 item\"&gt;.col-md-4 .offset-md-4&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"row\"&gt;\r\n    &lt;div class=\"col-md-3 offset-md-3 item\"&gt;.col-md-3 .offset-md-3&lt;\/div&gt;\r\n    &lt;div class=\"col-md-3 offset-md-3 item\"&gt;.col-md-3 .offset-md-3&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"row\"&gt;\r\n   &lt;div class=\"col-md-6 offset-md-3 item\"&gt;.col-md-6 .offset-md-3&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h1>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h1>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043b\u0430\u0441\u0441 <strong>row<\/strong> \u0438 \u043a\u043b\u0430\u0441\u0441\u044b <strong>\u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432<\/strong>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u043e\u0431\u0449\u0435\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c <strong>bootstrap<\/strong> \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u043d\u0430 \u043b\u044e\u0431\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0435\u0442\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u043f\u043e\u043b\u043d\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e.<\/p>\n<pre class=\"\">https:\/\/v4-alpha.getbootstrap.com\/utilities\/flexbox\/\r\nhttp:\/\/webmaster.alexanderklimov.ru\/pagemaker\/bootstrap\/flexbox.php<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 bootstrap 3 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u00a0\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0435\u0442\u043a\u043e\u0439 (\u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439), \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438. \u0410 \u0432 bootstrap 4\u00a0\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u0440\u0435\u0436\u0438\u043c\u00a0flexbox, \u043d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u0451\u043c\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u0435\u0442\u043a\u043e\u0439 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0441\u0442\u0430\u0442\u044c\u0438. \u041a\u043e\u0434 \u0441\u043a\u0440\u0438\u043d\u0430 \u0432\u044b\u0448\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: &lt;div class=&#187;featurebox col-md-12 col-sm-12 col-xs-12&#8243;&gt; &lt;div class=&#187;row&#187;&gt; &lt;div class=&#187;col-md-6 col-sm-6 col-xs-12&#8243;&gt; &lt;div class=&#187;feature text-left&#187;&gt; &hellip; <a href=\"https:\/\/leodev.ru\/blog\/bootstrap\/bootstrap-%d0%bf%d0%be%d0%b7%d0%b8%d1%86%d0%b8%d0%be%d0%bd%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5-%d0%b2%d1%8b%d1%80%d0%b0%d0%b2%d0%bd%d0%b8%d0%b2%d0%b0%d0%bd%d0%b8%d0%b5\/\" class=\"more-link\">\u0427\u0438\u0442\u0430\u0442\u044c \u0434\u0430\u043b\u0435\u0435<span class=\"screen-reader-text\"> \u00abBootstrap 3 \u0438 4 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":396,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[144],"tags":[141,142,110,143],"class_list":["post-393","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap","tag-css","tag-html","tag-143"],"_links":{"self":[{"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/posts\/393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/comments?post=393"}],"version-history":[{"count":10,"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/posts\/393\/revisions"}],"predecessor-version":[{"id":879,"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/posts\/393\/revisions\/879"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/media\/396"}],"wp:attachment":[{"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/media?parent=393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/categories?post=393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leodev.ru\/blog\/wp-json\/wp\/v2\/tags?post=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}