Учебники

W3.CSS — Утилиты

Ноябрь 23, 2018

В W3.CSS есть несколько служебных классов, которые очень полезны для повседневных нужд проектирования.

  • Утилиты по цвету — Примеры: w3-красный, w3-желтый

  • Вспомогательные классы заполнения — Примеры: w3-padding-jumbo, w3-padding-16

  • Полезные классы маржи — Примеры: w3-margin-8, w3-margin-64

  • Утилита Border. Примеры: w3-border-left, w3-border-right

  • Утилиты размера size — Примеры: w3-tiny, w3-small

  • Утилита Circle — пример: w3-circle

  • Сервисный класс Center — Пример: w3-center

Утилиты по цвету — Примеры: w3-красный, w3-желтый

Вспомогательные классы заполнения — Примеры: w3-padding-jumbo, w3-padding-16

Полезные классы маржи — Примеры: w3-margin-8, w3-margin-64

Утилита Border. Примеры: w3-border-left, w3-border-right

Утилиты размера size — Примеры: w3-tiny, w3-small

Утилита Circle — пример: w3-circle

Сервисный класс Center — Пример: w3-center

пример

w3css_utilities.htm

Live Demo

<html>
   <head>
      <title>The W3.CSS Utilities</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>W3.CSS Utilities</h2>
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class = "w3-container w3-red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Padding Utilities Demo</h3>
      <div class = "w3-container w3-red w3-padding-jumbo">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-padding-16">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Margin Utilities Demo</h3>
      <div class = "w3-container w3-margin-64">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-margin-8">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Border Utilities Demo</h3>
      <div class = "w3-container w3-red w3-border-left w3-border-right">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-border">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
 
      <h3>Size Utilities Demo</h3>
      <div class = "w3-container">
         <p class = "w3-small">Using w3-small font.</p>
         <p>Using Default (medium).</p>
         <p class = "w3-large">Using w3-large font.</p>
         <p class = "w3-xlarge">Using w3-xlarge font.</p>
      </div>

      <h3>Circle Utility Demo</h3>
      <div class = "w3-container">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      <h3>Center Utility Demo</h3>
      <div class = "w3-container w3-center w3-black w3-card-2">
         <img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5">
      </div>
   </body>
</html>

Результат

Проверьте результат.

52
Share: