https://mediawiki.zina.run/index.php?action=history&feed=atom&title=%D0%A6%D0%B2%D0%B5%D1%82%D0%B0_Bootstrap Цвета Bootstrap - Історія редагувань 2026-10-12T09:07:49Z Історія редагувань цієї сторінки в вікі MediaWiki 1.44.2 https://mediawiki.zina.run/index.php?title=%D0%A6%D0%B2%D0%B5%D1%82%D0%B0_Bootstrap&diff=636&oldid=prev Romych в 19:32, 8 квітня 2020 2020-04-08T19:32:12Z <p></p> <p><b>Нова сторінка</b></p><div>←[[Bootstrap]]<br /> <br /> Стандартные цвета определены в виде переменных в файле &lt;code&gt;_variables.scss&lt;/code&gt;. Переменные цветов, которые вы хотите изменить, нужно копировать в файл &lt;code&gt;_custom.scss&lt;/code&gt;, изменять значение цвета и убирать &lt;code&gt;!default&lt;/code&gt;. <br /> <br /> Подробнее: http://v4-alpha.getbootstrap.com/getting-started/options/<br /> <br /> Выглядит это примерно [http://cloud.zina.com.ua/extra/colors/ так]:<br /> <br /> [[Файл:Bootstrap 4 default colors.png]]<br /> <br /> Шаблон для просмотра цветов Bootstrap:<br /> <br /> &lt;source lang=&quot;html5&quot;&gt;<br /> &lt;pre&gt;<br /> &lt;span class=&quot;color-name color-name-white&quot;&gt;&lt;/span&gt; $white: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #fff&quot;&gt;&lt;/span&gt; #fff;<br /> &lt;span class=&quot;color-name color-name-black&quot;&gt;&lt;/span&gt; $black: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #000&quot;&gt;&lt;/span&gt; #000;<br /> &lt;span class=&quot;color-name color-name-red&quot;&gt;&lt;/span&gt; $red: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #d9534f&quot;&gt;&lt;/span&gt; #d9534f;<br /> &lt;span class=&quot;color-name color-name-orange&quot;&gt;&lt;/span&gt; $orange: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #f0ad4e&quot;&gt;&lt;/span&gt; #f0ad4e;<br /> &lt;span class=&quot;color-name color-name-yellow&quot;&gt;&lt;/span&gt; $yellow: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #ffd500&quot;&gt;&lt;/span&gt; #ffd500;<br /> &lt;span class=&quot;color-name color-name-green&quot;&gt;&lt;/span&gt; $green: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #5cb85c&quot;&gt;&lt;/span&gt; #5cb85c;<br /> &lt;span class=&quot;color-name color-name-blue&quot;&gt;&lt;/span&gt; $blue: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #0275d8&quot;&gt;&lt;/span&gt; #0275d8;<br /> &lt;span class=&quot;color-name color-name-teal&quot;&gt;&lt;/span&gt; $teal: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #5bc0de&quot;&gt;&lt;/span&gt; #5bc0de;<br /> &lt;span class=&quot;color-name color-name-pink&quot;&gt;&lt;/span&gt; $pink: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #ff5b77&quot;&gt;&lt;/span&gt; #ff5b77;<br /> &lt;span class=&quot;color-name color-name-purple&quot;&gt;&lt;/span&gt; $purple: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #613d7c&quot;&gt;&lt;/span&gt; #613d7c;<br /> <br /> // Create grayscale<br /> &lt;span class=&quot;color-name color-name-gray-dark&quot;&gt;&lt;/span&gt; $gray-dark: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #292b2c&quot;&gt;&lt;/span&gt; #292b2c;<br /> &lt;span class=&quot;color-name color-name-gray&quot;&gt;&lt;/span&gt; $gray: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #464a4c&quot;&gt;&lt;/span&gt; #464a4c;<br /> &lt;span class=&quot;color-name color-name-gray-light&quot;&gt;&lt;/span&gt; $gray-light: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #636c72&quot;&gt;&lt;/span&gt; #636c72;<br /> &lt;span class=&quot;color-name color-name-gray-lighter&quot;&gt;&lt;/span&gt; $gray-lighter: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #eceeef&quot;&gt;&lt;/span&gt; #eceeef;<br /> &lt;span class=&quot;color-name color-name-gray-lightest&quot;&gt;&lt;/span&gt; $gray-lightest: &lt;span class=&quot;color-name&quot; style=&quot;background-color: #f7f7f9&quot;&gt;&lt;/span&gt; #f7f7f9;<br /> <br /> // Reassign color vars to semantic color scheme<br /> &lt;span class=&quot;color-name color-name-brand-primary&quot;&gt;&lt;/span&gt; $brand-primary: &lt;span class=&quot;color-name color-name-blue&quot;&gt;&lt;/span&gt; $blue;<br /> &lt;span class=&quot;color-name color-name-brand-success&quot;&gt;&lt;/span&gt; $brand-success: &lt;span class=&quot;color-name color-name-green&quot;&gt;&lt;/span&gt; $green;<br /> &lt;span class=&quot;color-name color-name-brand-info&quot;&gt;&lt;/span&gt; $brand-info: &lt;span class=&quot;color-name color-name-teal&quot;&gt;&lt;/span&gt; $teal;<br /> &lt;span class=&quot;color-name color-name-brand-warning&quot;&gt;&lt;/span&gt; $brand-warning: &lt;span class=&quot;color-name color-name-orange&quot;&gt;&lt;/span&gt; $orange;<br /> &lt;span class=&quot;color-name color-name-brand-danger&quot;&gt;&lt;/span&gt; $brand-danger: &lt;span class=&quot;color-name color-name-red&quot;&gt;&lt;/span&gt; $red;<br /> &lt;span class=&quot;color-name color-name-brand-inverse&quot;&gt;&lt;/span&gt; $brand-inverse: &lt;span class=&quot;color-name color-name-gray-dark&quot;&gt;&lt;/span&gt; $gray-dark;<br /> <br /> // Settings for the `&amp;lt;body&amp;gt;` element.<br /> &lt;span class=&quot;color-name color-name-brand-body-bg&quot;&gt;&lt;/span&gt; $body-bg: &lt;span class=&quot;color-name color-name-white&quot;&gt;&lt;/span&gt; $white;<br /> &lt;span class=&quot;color-name color-name-body-color&quot;&gt;&lt;/span&gt; $body-color: &lt;span class=&quot;color-name color-name-gray-dark&quot;&gt;&lt;/span&gt; $gray-dark;<br /> &lt;span class=&quot;color-name color-name-inverse-bg&quot;&gt;&lt;/span&gt; $inverse-bg: &lt;span class=&quot;color-name color-name-gray-dark&quot;&gt;&lt;/span&gt; $gray-dark;<br /> &lt;span class=&quot;color-name color-name-inverse-color&quot;&gt;&lt;/span&gt; $inverse-color: &lt;span class=&quot;color-name color-name-gray-lighter&quot;&gt;&lt;/span&gt; $gray-lighter;<br /> <br /> // Links<br /> &lt;span class=&quot;color-name color-name-link-color&quot;&gt;&lt;/span&gt; $link-color: &lt;span class=&quot;color-name color-name-brand-primary&quot;&gt;&lt;/span&gt; $brand-primary;<br /> &lt;span class=&quot;color-name color-name-link-hover-color&quot;&gt;&lt;/span&gt; $link-hover-color: darken($link-color, 15%);<br /> &lt;/pre&gt;<br /> &lt;/source&gt;<br /> <br /> &lt;source lang=&quot;css&quot;&gt;<br /> .color-name {<br /> display: inline-block;<br /> width: 3rem;<br /> height: 1.5rem;<br /> border: solid 1px black;<br /> <br /> &amp;-white { background-color: $white }<br /> &amp;-black { background-color: $black }<br /> &amp;-red { background-color: $red }<br /> &amp;-orange { background-color: $orange }<br /> &amp;-yellow { background-color: $yellow }<br /> &amp;-green { background-color: $green }<br /> &amp;-blue { background-color: $blue }<br /> &amp;-teal { background-color: $teal }<br /> &amp;-pink { background-color: $pink }<br /> &amp;-purple { background-color: $purple }<br /> <br /> &amp;-gray-dark { background-color: $gray-dark }<br /> &amp;-gray { background-color: $gray }<br /> &amp;-gray-light { background-color: $gray-light }<br /> &amp;-gray-lighter { background-color: $gray-lighter }<br /> &amp;-gray-lightest { background-color: $gray-lightest }<br /> <br /> &amp;-brand-primary { background-color: $brand-primary }<br /> &amp;-brand-success { background-color: $brand-success }<br /> &amp;-brand-info { background-color: $brand-info }<br /> &amp;-brand-warning { background-color: $brand-warning }<br /> &amp;-brand-danger { background-color: $brand-danger }<br /> &amp;-brand-inverse { background-color: $brand-inverse }<br /> <br /> &amp;-body-bg { background-color: $body-bg }<br /> &amp;-body-color { background-color: $body-color }<br /> &amp;-inverse-bg { background-color: $inverse-bg }<br /> &amp;-inverse-color { background-color: $inverse-color }<br /> <br /> &amp;-link-color { background-color: $link-color }<br /> &amp;-link-hover-color { background-color: $link-hover-color }<br /> }<br /> &lt;/source&gt;<br /> <br /> [[Категория:Bootstrap]]</div> Romych